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

Question

我有一个Canvas对象，通过先前的JavaScript函数定义了top和left属性，但是当我创建一个fabric Canvas对象时

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

我的HTML画布的top和left属性都设置为0。

我尝试通过脚本在创建fabric Canvas对象后设置top和left属性，但是当我这样做时，画布会改变位置，但fabric功能（选择和移动功能）仍停留在以前canvas所在的位置（即fabric Canvas定位它的位置）！

我该怎么解决这个冲突？有没有办法保持画布相等？

- JBerta93

Answer 1

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

- Laure Jonchery

---

我无法覆盖布料对画布的定位。 - dsdsdsdsd

canvas-container类没有覆盖，它没有应用任何CSS到这个div上。 - Dr. Piyush Dholariya

@PiyushDholariya 我认为你在使用 CSS in js 或类似的 scoped CSS，实际上，我使用 vue.js 的 fabric 遇到了相同的问题，但当我将 canvas-container 的 CSS 规则移动到全局文件中时，它就可以工作了。 - Umair Ahmed

Answer 2

请注意，如果您正在使用某种 CSS 预处理器（对我来说是 Angular 中的 scss 样式表），则在组件 scss 文件中针对 "canvas-container" 类进行定位将无效。对我来说，解决方法是使用通用的项目 CSS 文件。

- Maoritzio

Answer 3

您可以在初始化时覆盖canvas-container类，如下所示：

new fabric.Canvas('canvasId', {containerClass: 'custom-container-class'});

http://fabricjs.com/docs/fabric.Canvas.html#containerClass

- ScottA

Answer 4

来自我的相同的主题的答案

apply

margin: 0 auto;

to class = canvas-container

canvas-container is automatically created by fabric.

see fiddle

- dsdsdsdsd

---

canvas-container类没有覆盖，它没有应用任何CSS到这个div。 - Dr. Piyush Dholariya