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

Question

有一些对象（例如矩形），当我使用 js 更改它的位置时，我无法将它从新位置拖动，只能从旧位置拖动。下面有例子。按 "MOVE" 移动对象，然后尝试拖动它。如果你尝试它不会拖动，但如果你拖动他的旧位置它会。

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;
}

<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="200" height="200"></canvas>
<button id="init">
INIT
</button>
<button id="move">
MOVE
</button>

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>

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

Fabric js object boudaries won't update after object moved programmatically

fabricjs