当我创建Fabric.js画布对象时，Canvas会丢失样式

Question

我有一个Canvas对象，其顶部和左侧属性通过之前的JavaScript函数定义，但是当我创建一个结构Canvas对象时

  var fabricCanvas= new fabric.Canvas('mycanvas');

我的HTML Canvas将top和left属性设置为0.

我尝试在通过脚本创建Fabric Canvas对象后设置top和left属性，但是当我这样做时，canvas会改变位置，但是fabric函数（选择和移动函数）仍然保留在画布之前所在的位置（其中） fabric Canvas定位它！）

我该怎么做才能解决这个冲突？有没有办法让画布保持平等？

Answer 1

当您使用Fabric.js创建画布时，它将其包装在div中并添加第二个<canvas>（用于选择在第一个画布中渲染的对象）。这在Fabric.js的wiki page中有解释。如果要定位画布，请将CSS规则应用于父类div元素，该元素属于“canvas-container”类。

Answer 2

从我的identical thread

回答

  

申请

margin: 0 auto;

     

to class = canvas-container

     

canvas-container由fabric自动创建。

     

请参阅fiddle

Answer 3

请注意，如果您使用某种css预处理器（对我来说是Angular中的scss样式表）-在组件scss文件中定位“ canvas-container”类将不起作用。对我来说，解决方法是常规项目css文件。