マウスカーソルを変更するには

◆PROCESSING 逆引きリファレンス

 カテゴリー:キーボード・マウス処理

マウスカーソルを変更するには

【解説】

※この記事は「フルスクリーンにするには(3.X用)」に掲載されていた内容を改変・追記し、別記事としたものです。

PROCESSINGではマウスの挙動(クリックやドラッグ)を検知することができます。そしてWindowsではデフォルトのマウスカーソル形状は、左上に少し傾いた矢印となっています。

このマウスカーソルの形を変更するには、どうしたら良いでしょうか?

マウスカーソルの形を変更するには、PROCESSINGが持つ PSurface に対してカーソルの変更を指示するか、PROCESSINGの cursor 命令を利用します。

 

【詳細】

PSurfaceを利用して変更する

1つ目の方法は、PROCESSINGがもつ PSurface に対して、マウスカーソルの変更を指示する方法です。

マウスカーソルの形状には、OSが持つカーソル(プリセットカーソル)と、任意の画像の2通りが利用可能です。

以下はWindows10のプリセットカーソルの代表例です。

Java定数値は Javaの Cursorクラスが持つ定数です。PSurfaceに対して、マウスカーソルの変更を指示するときに利用します。

PROCESSING定数はPROCESSINGが持つ定数です。PROCESSINGの cursor 命令で、マウスカーソルの変更を指示するときに利用します。

Java定数値 PROCESSING定数値 形状 説明
CROSSHAIR_CURSOR CROSS 十字カーソルです
DEFAULT_CURSOR ARROW 初期値です。矢印カーソルです。
HAND_CURSOR HAND 手の形のカーソルです。
MOVE_CURSOR MOVE 十字に矢線がついた移動形状カーソルです。
E_RESIZE_CURSOR なし 左右への移動を示すカーソルです。
N_RESIZE_CURSOR なし 上下への移動を示すカーソルです。
NE_RESIZE_CURSOR なし 右に傾いた移動を示すカーソルです。
NW_RESIZE_CURSOR なし 左に傾いた移動を示すカーソルです。
TEXT_CURSOR TEXT テキストの入力位置を示すカーソルです。
WAIT_CURSOR WAIT 待ち状態を示すカーソルです。WindowsXPまでは砂時計でした。

.

カーソル形状を指定する1void sur.setCursor( int cursor );

sur:PSurfaceのインスタンス変数
cursor:Javaの Cursorクラスが持つ定数値

プリセットカーソルを使うには、そのカーソルに割り当てられた番号を指定します。番号はJavaの Cursorクラスに定数として定義されています。

<出力結果>

上記サンプルなら、実行結果ウィンドウの上にカーソルを移動させると、マウスカーソルが手の形に変化します。

 

カーソル形状を指定する2void sur.setCursor( PImage img, int hx, int hy );

sur:PSurfaceのインスタンス変数
img:カーソル画像
hx, hy:ホットスポットの座標

任意の画像(PImage)をカーソル画像として利用することも可能です。その場合は、カーソルとして使いたい画像データと、画像の左上隅からの相対座標でホットスポット座標を指示します。

ホットスポットとは、マウスが指し示す場所のことですね。矢印形状のマウスカーソルなら、通常は矢印の先端になります。


例えば上記の場合なら、矢印の先端(赤丸の位置)がホットスポットです。この場合、矢印の先端は画像の左上隅から縦横4ピクセルの位置にあるので、hxとhyには4を指定します。

<出力結果>
(画像URL:icon-icon.com 様)

上記では 、Data フォルダにある “globe_world.png” という縦横32ピクセルの画像をマウスカーソルにしています。丸い地球の画像なので、ホットスポットは画像の中心(16,16)を指定しています。

画像をマウスカーソルにする際の注意ですが、(画面の拡大縮小率にもよりますが)Windowsの場合はその大きさが縦横32ピクセル固定となることです。

大きな画像をマウスカーソルにしようとすると、自動的に縮小されて表示されてしまいます。

これについては、以下のブログが参考となります。

 

cursor命令で変更する

もうひとつの方法は、PROCESSINGがもつ cursor命令で、マウスカーソルの変更を指示する方法です。こちらのほうが簡単ですね。
.

カーソル形状を指定する3void cursor( int kind );

kind:カーソル形状を指示する値。ARROW, CROSS, HAND, MOVE, TEXT,WAITの何れか

使い方はPSurfaceの場合とほとんど一緒です。

<出力結果>

上記サンプルなら、実行結果ウィンドウの上にカーソルを移動させると、マウスカーソルの形が手の形に変化します。

 

カーソル形状を指定する4void cursor( PImage img, int hx, int hy );

img:カーソル画像
hx, hy:ホットスポットの座標

任意の画像をマウスカーソルにする事も可能です。

<出力結果>

上記では 、Data フォルダにある “globe_world.png” という縦横32ピクセルの画像をマウスカーソルにしています。丸い地球の画像なので、ホットスポットは画像の中心(16,16)を指定しています。

任意の画像をマウスカーソルにした場合は、画像の大きさが16ピクセルまたは32ピクセルに自動的に縮小されて表示されます。

 

【関連記事】

  • なし

 


サンプルプログラム

特定の場所でマウスカーソルを変更する例:

実行すると、かわいい女の子が表示されます。

女の子の上にマウスカーソルがある場合は標準の形に、それ以外の場所なら地球の形に変更します。

<出力サンプル>

(画像URL:icon-icon.com 様、Picrew 遊びやさんちゃん 様 )

下記はサンプルプログラムと同じ動きになるように、 P5.js で書き直したものです。動作イメージを確認できます。

 


(画像URL:icon-icon.com 様、Picrew 遊びやさんちゃん 様 )


PROCESSING逆引きリファレンス一覧 へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。