P5.js 日本語リファレンス(cursor)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の cursor関数を説明します。

cursor()

説明文

カーソル形状を定義済みの記号または画像に設定するか、すでに非表示になっている場合はそれを表示します。画像をカーソルとして設定しようとしている場合、推奨されるサイズは 16x16 または 32x32 ピクセルです。パラメータxとyの値は、画像のサイズより小さくなければなりません。

構文

cursor(type, [x], [y])

パラメタ

• type
  文字列 | 定数 | 組み込み：ARROW、CROSS、HAND、MOVE、TEXT、WAIT
  ネイティブCSSプロパティ：'grab'、'progress'、'cell' など
  外部：カーソルの画像のパス(許可されているファイル拡張子：'.cur' '.gif' '.jpg' '.jpeg' '.png')

ネイティブCSSカーソルとURLの詳細については, こちらをご覧ください。

• x
  Number：カーソルの水平アクティブスポット(32未満である必要があります)(オプション)

• y
  Number：カーソルの垂直方向のアクティブスポット(32未満である必要があります)(オプション)

例

//マウスを左上に持っていくとクロスカーソルを表示します。
//マウスを右上に持っていくとプログレスカーソルを表示します。
//マウスを左下に持っていくとグラブカーソルを表示します。
//マウスを右下に持っていくと矢印カーソルを表示します。
function draw() {
  line(width/ 2, 0, width/ 2, height);
  line(0, height/ 2, width, height/ 2);

  if(mouseX <50 && mouseY <50){
    cursor(CROSS);
  } else if(mouseX> 50 && mouseY <50){
    cursor('progress');
  } else if(mouseX> 50 && mouseY> 50){
    cursor('https://dl.dropbox.com/s/zts3fydxkeomz3m/arrow.png?dl=0');
  } else {
    cursor('grab');
  }
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。