範囲選択したエリアのお絵かきをドラッグ＆ドロップで移動できる機能を実装した。
あと、ついでスポイトツールも。
作ったもの
描画内容の移動は必ず範囲選択ツールで範囲を決めることが前提。範囲が決まっていないとドラッグ＆ドロップできない。
スポイトツールは、ボタンを押した後にお絵描きエリアをクリックすると、その場所の色情報をカラーパレットに反映。
クラス図
設定をリセットしてしまったので、レイアウトが変わってしまった。
今回から追加したクラスがわかりやすくなるように青点線で囲んだ。
SlectRangeLayerクラスは範囲選択のUIを表示するためのもの。
DragLayerクラスは、指定された範囲の描画内容をDrawLayerクラスから取得して描画し、ドラッグ＆ドロップに対応。
位置が決定したら、描画内容をDrawLayerクラスに返す。
レイヤーの種類が増えてきたので、以下にレイヤー構造の概略図を載せておく
DragLayerクラス。
DrawLayerクラスと切り分けることでこのレイヤーそのものをドラッグ＆ドロップに対応させるだけでよくなった。
つまづきポイント
範囲選択したエリアの描画内容を移動させるための処理の流れ
今回のポイントは上の図の②で、任意の範囲のみの描画データ（DrawLayerData）を取得できるようになったこと。
これにより、今後実装を予定している複数のレイヤーやワークスペース実装時に、
それらを横断したデータの移動（コピペ）のベースとなる仕組みができた。
スポイトツールは、②の応用。
指定した範囲をマウス座標に対して１ドットの範囲に限定し、
その範囲の情報をDrawLayerDataクラスにして取得。
そこから色情報だけを抜き出している。
マウスドラッグ時はオブジェクトの基準点に対するマウスの相対座標を考慮
オブジェクトをドラッグした座標と基準点との差を計算に含めておかないと
変な挙動になる。
参考：CreateJS のドラッグ＆ドロップの実装方法 – ICS MEDIA
CreateJSでマウスオーバーを使うときは要注意
以下を記述しないとマウスオーバーイベントが発生しない。
stage.enableMouseOver();ちなみに、pressmoveやpressupイベントは上の記述がなくても発生する。
参考：[CreateJS] マウスオーバー時のイベントがうまく動かない時は
追加したイシュー
ひとこと
選択範囲のデータ抜き出しは、全体のデータ取得時と同様に、
Canvasにアクセスして座標・色情報を取得している。
既存のJSONデータから切り貼りできると処理が軽量化できるとおもうが、
ロジックを組み立てるのにかなり苦労しそうなのでしばらくは今のままで。
