DisplayObject.onMouseOverイベント
|
文法
|
DisplayObjectオブジェクト.onMouseOver = function (event) {}
|
イベント
|
インスタンスにマウスポインタが重なった(ロールオーバーした)ときに、イベントハンドラ(コールバック関数)を呼出す。予めStage.enableMouseOver()メソッドによりイベントが有効にされていなければならない。
|
引数
|
event − 発生したマウスイベントの情報をもつMouseEventオブジェクト。
|
DisplayObject.onMouseOutイベント
|
文法
|
DisplayObjectオブジェクト.onMouseOut = function (event) {}
|
イベント
|
インスタンスに重ねられた(ロールオーバーした)マウスポインタが重なりを離れた(ロールアウトした)ときに、イベントハンドラ(コールバック関数)を呼出す。予めStage.enableMouseOver()メソッドによりイベントが有効にされていなければならない。
|
引数
|
event − 発生したマウスイベントの情報をもつMouseEventオブジェクト。
|
Stage.enableMouseOver()メソッド |
文法
|
Stageオブジェクト.enableMouseOver(frequency)
|
概要
|
Stageオブジェクトの表示リストに加えられたインスタンスに対して、マウスポインタの重なりについてのイベント(DisplayObject.onMouseOverおよびDisplayObject.onMouseOut)を引数に定めた頻度で調べて送る。マウスポインタの重なりのイベントを起こすのは負荷が高いため、デフォルトでは止められている。
|
引数
|
frequency − マウスポインタのインスタンスとの重なりをイベントとして送る1秒あたりの最大回数。0を渡すと、マウスポインタの重なりについてのイベントは起こらない。最大値は50で、デフォルト値は20。高い値は反応を速め、低い値はCPUへの負荷を下げる。
|
戻り値
|
なし。
|
説明
EaselJSでインスタンスへのマウスポインタの重なり(ロールオーバー)と重なりが外れたこと(ロールアウト)は、それぞれDisplayObject.onMouseOverとDisplayObject.onMouseOutイベントで捉えます。これらのイベントにハンドラの(コールバック)関数を定めれば、インスタンスにマウスポインタがロールオーバーおよびロールアウトしたときにそれぞれ呼出されます。
ただし、インスタンスとマウスポインタの重なりを調べるのは負荷が高いので、初めはイベントが起こらないよう定められています。そのため、予めStage.enableMouseOver()メソッドを呼出しておかなければなりません。イベントの頻度を定める引数はオプションで、0を渡すとイベントが止まります。
例
つぎのJavaScriptコード001の関数initialize()を呼出すと、Canvasの真ん中に円形のShapeインスタンスが描かれ、マウスポインタをロールオーバーすると指差しカーソルにかわります[*1]。なお、canvas要素のid属性は"myCanvas"と定められているとします。また、EaselJS 0.5.0を用いましたので、クラスの参照には名前空間「createjs」が添えてあります[*2]。
コード001■インスタンスにマウスポインタをロールオーバーすると指差しカーソルに変わる
- var stage;
- function initialize() {
- var canvasElement = document.getElementById("myCanvas");
- stage = new createjs.Stage("myCanvas");
- var myShape = new createjs.Shape();
- stage.addChild(myShape);
- stage.enableMouseOver();
- myShape.onMouseOver = function (eventObject) {
- document.body.style.cursor = "pointer";
- };
- myShape.onMouseOut = function (eventObject) {
- document.body.style.cursor = "";
- };
- myShape.x = canvasElement.width / 2;
- myShape.y = canvasElement.height / 2;
- draw(myShape);
- }
- function draw(myShape) {
- var myGraphics = myShape.graphics;
- myGraphics.beginStroke("#0000FF");
- myGraphics.beginFill("#00FFFF");
- myGraphics.drawCircle(0, 0, 40);
- stage.update();
- }
|
図001■インスタンスにロールオーバーするとマウスポインタが指差しカーソルに変わる
作成者: 野中文雄
更新日: 2012年11月29日 コード001をEaselJS 0.5.0対応とし、注[*2]を追加。
作成日: 2012年11月27日