当我创建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文件。