在以编程方式移动对象后，Fabric js对象boudaries不会更新

Question

有一些对象（矩形作为例子），当我用js改变它的位置时，我无法将它从新的地方拖出来，只是从旧地方。 下面是一个例子。按“移动”移动对象，然后尝试拖动它。如果你尝试，它不会拖动，但如果你拖动他的旧位置，它将会拖动。

destroy

var c = new fabric.Canvas('c');
c.add(new fabric.Rect({
	left: 0,
  top: 0,
  width: 40,
  height: 40,
  fill: 'red'
}));

$('#init').click(function() {
	c.item(0).setLeft(0);
  c.item(0).setTop(0);
  c.renderAll();
});

$('#move').click(function() {
	c.item(0).setLeft(100);
  c.item(0).setTop(100);
  c.renderAll();
});

#c {
  outline: 2px solid black;
}

Answer 1

问题出现了，因为在更改 位置后，您没有更新对象的控件坐标。

您需要在对象上调用 .setCoords() 方法来更新的控制坐标。

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ

var c = new fabric.Canvas('c');
c.add(new fabric.Rect({
   left: 0,
   top: 0,
   width: 40,
   height: 40,
   fill: 'red'
}));

$('#init').click(function() {
   c.item(0).setLeft(0);
   c.item(0).setTop(0);
   c.item(0).setCoords(); //<-- call this
   c.renderAll();
});

$('#move').click(function() {
   c.item(0).setLeft(100);
   c.item(0).setTop(100);
   c.item(0).setCoords(); //<-- call this
   c.renderAll();
});

#c{outline: 1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="180" height="180"></canvas>
<button id="init">
   INIT
</button>
<button id="move">
   MOVE
</button>