以编程方式拖动对象答案

【问题标题】：Drag object programmatically以编程方式拖动对象
【发布时间】：2018-10-10 11:37:18
【问题描述】：

我有 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);

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

如何才能使对象被选中、立即移动到光标并在点击事件触发时启用拖动？

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案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 事件。

另外，如果您还没有这样做，您可能想仔细查看这个 Objects Bounding Rectangles 示例，以了解有关您的 NEAR 逻辑的更多想法，http://fabricjs.com/bounding-rectangle。

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

【讨论】：