ドラッグオブジェクトは、プログラム的

Question

私はそうのようにお互いの上に3つの長方形があります。

new Fabric.Rect({ 
    width: 200 - index * 30, 
    height: 20, 
    hasBorders: false, 
    selectable: false, 
    hasControls: false 
}); 

、その後、私は（長方形でない）NEARクリックを検出し、クリックイベントを持っている長方形をして（最高先頭の矩形を作ります3）選択（ドラッグする）のスタックのいずれか

var first = this.first().shape; // Fabric.Rect 
canvas.setActiveObject(first); 

しかし、これは、オブジェクトをドラッグし、カーソル上のオブジェクトを設定していません。

オブジェクトを選択してすぐにカーソルに移動し、クリックイベントが発生するとドラッグできるようにするにはどうすればよいですか？

Answer 1

私はあなたを正しく理解していれば、これはかなり近づくはずです。

キャンバスの黒い四角の内側と赤いオブジェクトの外側をクリックします。

var canvas = new fabric.Canvas('c', { 
 
    selection: false, 
 
}); 
 
var rectangle = new fabric.Rect({ 
 
    fill: 'red', 
 
    left: 10, 
 
    top: 10, 
 
    width: 100, 
 
    height: 100 //, 
 
    //padding: 50 
 
}); 
 
canvas.on('mouse:down', function(env) { 
 
    var x = env.e.offsetX; 
 
    var y = env.e.offsetY; 
 
    rectangle.setLeft(x - rectangle.width/2); 
 
    rectangle.setTop(y - rectangle.height/2); 
 
    canvas.setActiveObject(rectangle); 
 
    rectangle.setCoords(); 
 
    canvas.renderAll(); 
 
    canvas.on('mouse:move', function(env) { 
 
    var x = env.e.offsetX; 
 
    var y = env.e.offsetY; 
 
    rectangle.setLeft(x - rectangle.width/2); 
 
    rectangle.setTop(y - rectangle.height/2); 
 
    rectangle.setCoords(); 
 
    canvas.renderAll(); 
 
    }); 
 
    canvas.on('mouse:up', function(env) { 
 
    canvas.off('mouse:move'); 
 
    }); 
 
}); 
 
canvas.add(rectangle); 
 
canvas.renderAll();

#c { 
 
    border: 1px solid black; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
 
<canvas id="c" width="200" height="200"></canvas>

私は意図的に長方形のpaddingをコメントアウトしていますが、代わりにあなたがすでに持っているものをお使いNEARロジックとしてそれを使用したい場合には、コードでそれを残しました。 paddingをNEARロジックとして使用する場合は、オンキャンバスmouse:downイベントをオンキャンバスobject:selectedイベントに変更する必要があります。

また、まだ作成していない場合は、NEARロジックの追加のアイデアについては、http://fabricjs.com/bounding-rectangleのオブジェクトの境界の四角形の例を詳しく見てください。

Any-who、あなたがどうやったらどうなるのか教えてください。