如何动态更改在Fabric.js中创建的画布实例的位置

Question

我通过Fabric.js制作了一个画布实例。

var canInstance = new fabric.Canvas("drawCanvas");

当我在执行一些计算后改变其位置时，画布位置似乎没有变化。

canInstance.left = "250px";
canInstance.top = "200px";

有没有办法动态更改canvas实例的位置？

Answer 1

fabric.getCanvas返回的画布对象没有left和top属性。

您需要获取实际的DOM画布并修改其样式属性：

var canvasNode = canInstance.getElement(); //return the HTMLCanvasElement.
canvasNode.style.position = 'relative';
canvasNode.style.left = '250px';
canvasNode.style.top = '200px';

我已将position属性更改为relative，因为默认情况下，元素有position: static，这会导致布局引擎忽略top和{{ 1}}属性。如果您的画布具有明确的定位（与left不同），则只需删除该行。