マウスの動きに合わせて線を引く / CreateJS


チュートリアルにある Finger Paint やってみる。
マウスイベントの続きだけど、canvas (CreateJSのstage) でのイベント処理と言う感じ。

MouseMove イベントで拾ったマウス座標を使って、一つ前から今の座標まで線を引きます。
stage でも図形と同じように下記のように指定します。

1
stage.onMouseMove = handleMouseMove;

前回の座標を old として、MouseMove イベントで呼び出される度に線を引きます。
現在の座標は event.stageX, event.stageY を使います。

1
2
3
4
function handleMouseMove(event){
    line.graphics.s('#F00').ss(size, 'round').mt(old.x, old.y).lt(event.stageX, event.stageY);
    old = { x: event.stageX, y: event.stageY };
}

ちなみにキャンバスからマウスがはみ出た場合に、座標がキャンバスサイズ以上にならないオプションも用意されてます。
その際、キャンバスからはみ出た実際の座標は event.rawX, event.rawY で取得できるみたい。ホント気が利くなあ。

1
2
stage = new createjs.Stage('canvas');
stage.mouseMoveOutside = true; // はみ出ない

コメントを残す

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