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

【问题标题】：How can I change dynamically position of instance of a canvas created in Fabric.js如何动态更改在 Fabric.js 中创建的画布实例的位置
【发布时间】：2014-04-16 15:15:42
【问题描述】：

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

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

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

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

有没有办法动态改变画布实例的位置？

【问题讨论】：

标签： javascript php html dom fabricjs

【解决方案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 和left 属性。如果您的画布有明确的定位（不同于static），只需删除该行。

【讨论】：

我想更新画布的位置，而不是元素。
你是什么意思 画布的位置，而不是它的元素？你指的是哪个位置？
意味着我想设置左侧，画布的顶部位置。我将画布名称引用为 canInstance。我可以使用实例更改画布位置吗？
但那是哪个位置？您开始绘制的位置，还是什么？
就是canvas自己的位置。