Mouse Interaction / CreateJS


CreateJSでつくったオブジェクトをマウスイベントに反応させる。
付属のチュートリアルに沿ってやってくよ。

クリックだけなら必要ないけど、マウスオーバー・マウスアウト使う時は下記のような宣言が必要です。
enableMouseOver は引数に一秒間に何回マウスオーバーを拾うか指定できる。(20回がデフォ)

1
2
stage = new createjs.Stage('canvas');
stage.enableMouseOver(10);

イベントはオブジェクト毎に指定します。
onClick, onMouseOver, onMouseOut, onPress, onDoubleClick などに指定可能です。

1
2
3
4
var object = new createjs.Shape();
object.onClick = function(){
    alert('クリック');
};

テキストだと隙間があるので hitArea の指定が可能です。

1
2
3
text = new createjs.Text('Text with hitArea', 'bold 20px Arial', 'red');
text.hitArea = new createjs.Shape();
text.hitArea.graphics.f('white').dr(0, 0, text.getMeasuredWidth(), text.getMeasuredHeight());

他にも、複数オブジェクトをまとめられる Container とかあって便利!
その場合は、コンテナにイベント付けたら子のオブジェクトのイベントを無視できたりと、すごくよくできてます。

1
2
container = new createjs.Container();
container.mouseChildren = false;

「Mouse Interaction / CreateJS」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です