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

问题描述：

I have make a canvas instance through 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?

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

  var canInstance = new fabric.Canvas（“drawCanvas”）; 
  code>  pre> 
 
 当我在执行某些计算后更改其位置时，画布位置似乎没有变化。


canInstance.left =“250px”; 
canInstance.top =“200px”; 
  code>  pre> 
 
 有没有 如何动态更改画布实例的位置？ p> 
  div>

答

The canvas object returned by fabric.getCanvas does not have left and top properties.

You need to get the actual DOM canvas and modify its style properties:

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. If your canvas have a explicit positioning (different to static), just remove that line.

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

相关推荐