[英]How can I change dynamically position of instance of a canvas created in Fabric.js
I have make a canvas instance through Fabric.js. 我已经通过Fabric.js创建了一个画布实例。
var canInstance = new fabric.Canvas("drawCanvas");
When I change its position after performing some calculation, it seems no change in canvas position. 在执行一些计算后更改其位置时,画布位置似乎没有变化。
canInstance.left = "250px";
canInstance.top = "200px";
Is there any way to change position of canvas instance dynamically? 有什么方法可以动态更改画布实例的位置?
The canvas object returned by fabric.getCanvas
does not have left
and top
properties. fabric.getCanvas
返回的canvas对象没有left
和top
属性。
You need to get the actual DOM canvas and modify its style properties: 您需要获取实际的DOM画布并修改其样式属性:
var canvasNode = canInstance.getElement(); //return the HTMLCanvasElement.
canvasNode.style.position = 'relative';
canvasNode.style.left = '250px';
canvasNode.style.top = '200px';
I've changed the position
property to relative
because, by default, elements have position: static
, which causes the layout engine to ignore top
and left
properties. 我将position
属性更改为relative
因为默认情况下元素具有position: static
,这会导致布局引擎忽略top
和left
属性。 If your canvas have a explicit positioning (different to static
), just remove that line. 如果您的画布具有明确的位置(不同于static
),则只需删除该行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.