javascript - KineticJS-ドラッグ可能なグループ/画像の一部を設定

Question

これは私がKineticJSで必要なものです：

300x300の大きな画像があります。ドラッグできるようにしたいのですが、画像の上部にクリックドラッグした場合に限ります。この画像の残りの部分をドラッグしようとしても、動かしたくありません。これは可能ですか？

さらに、この画像をドラッグしようとすると、グループ内の残りのアイテムを一緒にドラッグするにはどうすればよいですか？

Answer 1

最も簡単な方法は、画像の右上隅に長方形の領域を定義するカスタムヒット領域関数を作成することです。次に例を示します。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/

Answer 2

ここを参照してください：http：//jsfiddle.net/NnD5q/

box.on('mousedown', function(e){
    var bX = box.attrs.x, bY = box.attrs.y;

    // set draggable false if they aren't in our click range 
    // (a 20x20 square in the top left)
    if (e.x > bX + 20 || e.y > bY + 20)
        box.setDraggable(false);          
});
window.onmouseup = function(e){
    box.setDraggable(true);  // set draggable true on **window** mouseup.
};

別のオプションは、ドラッグハンドルオブジェクトを作成し、group.setDraggable(true)そのドラッグハンドルのマウスダウンで、次にgroup.setDraggable(false)ウィンドウのマウスアップで作成することです。この2番目のオプションは、おそらくはるかにクリーンです。