以编程方式拖动对象

Question

我有 3 个矩形，如下所示：

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

然后我有一个点击事件，它检测点击靠近（不在矩形上）矩形并使顶部矩形（3 个堆栈中最高的一个）可选择（拖动它）：

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

但是，这并没有设置光标上的对象，要拖动对象。

我怎样才能让对象被选中，立即移动到光标，并在点击事件触发后被拖动？

Answer 1

如果我理解正确的话，这应该让你相当接近。

单击 canvas 黑色方块内部和红色对象外部的任意位置。

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 逻辑，那么您需要将 on canvas mouse:down 事件更改为 on canvas object:selected 事件。

此外，如果您还没有这样做，您可能想仔细看看这个对象边界矩形示例，以进一步了解您的 NEAR 逻辑，http://fabricjs.com/bounding-rectangle。

任何人，告诉我你过得怎么样，伙计！

以编程方式拖动对象

Drag object programmatically

javascript

canvas

fabricjs