createJS/easelJSで複数のオブジェクトを同時に移動する

Question

私は、プロジェクト用のcreateJSフレームワーク内でeaselJSを使用していましたが、最近はロードブロッキングに至るまで楽しんでいました。グループの1つがドラッグされたときに同時に移動したいオブジェクトが複数あります。赤い丸が移動したときに私は何をしたいことはある

、赤い十字線はまた、彼らは円に「ロック」されるように表示されるように移動します：ここに私の現在の状況です。緑色の円と同じです。

この質問への回答で述べたように、私は、コンテナに円や十字線を追加することによって、これに非常に近い何かを達成することができました：

Easeljs Scrollable Container

しかし、私が遭遇した問題は、ということですコンテナは実際には矩形であるため、円と十字線の間をクリックするとコンテナ内のさまざまなオブジェクトを移動できます。代わりに、円をクリックすると、オブジェクトが移動されるようにのみしたいと思います。

誰でもこれを達成する方法はありますか？私はこれがeaselJSコンテナで何らかの形で達成できると考えていますか？

Answer 1

コンテナは大丈夫です。あなたはマウスを無視するために十字線のmouseEnabledをオフにすることができます。

また、十字線/円ごとにオフセットを保存して、円が移動したときに十字線の位置を設定することもできます。ここで

は、迅速なデモです：オフセットを使用して http://jsfiddle.net/lannymcnie/kah9of6e/

// Set the offset when the circle is pressed 
circle.on("mousedown", function(e) { 
    circle.offset = new createjs.Point(crosshair.x-circle.x, crosshair.y-circle.y); 
}); 

// Add drag and drop to each shape 
circle.on("pressmove", handleDrag); 
crosshair.on("pressmove", handleDrag); 

function handleDrag(e) { 
    // Move the target to the mouse 
    e.target.x = e.stageX; e.target.y = e.stageY; 

    // If the target is the circle, also move the cross-hair 
    if (e.target == circle) { 
    // Move the cross-hair 
    crosshair.x = circle.x + circle.offset.x; 
    x.y = circle.y + circle.offset.y; 
    } 
}