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

Question

我已经通过Fabric.js创建了一个画布实例。

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

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

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

有什么方法可以动态更改画布实例的位置？

Answer 1

fabric.getCanvas返回的canvas对象没有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和left属性。 如果您的画布具有明确的位置（不同于static ），则只需删除该行。