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

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

单击画布黑色方块内和红色对象外的任何位置。

＆＃13;

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();

＆＃13;

#c {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

我故意在矩形上注释掉padding，但是将它留在代码中，以防你想将它用作NEAR逻辑而不是你已经拥有的逻辑。如果您确实选择使用padding作为NEAR逻辑，则需要将画布上的mouse:down事件更改为画布object:selected事件。

此外，如果您还没有这样做，您可能需要仔细查看此对象边界矩形示例，以获得有关NEAR逻辑http://fabricjs.com/bounding-rectangle的其他一些想法。

任何人，让我知道你是怎么过的，伙计！

以编程方式拖动对象

1 个答案: