创建新的织物画布会更改画布位置

Question

我正在尝试了解 Fabricjs，并注意到当我创建新的 Fabric.Canvas 对象时，它会更改画布的位置。

超文本标记语言

<canvas id="c"></canvas>

CSS

#c {
border: thin red solid;
      position: absolute;
      top: 50px;
      left: 100px;
}

JavaScript

var c = document.getElementById("c");
var ctx = c.getContext("2d");

var img = new Image();
img.src = 'cheese.jpg';
img.onload = function() {
   ctx.drawImage(img, 0, 0);  
};

// applying the below line shifts the canvas element back to 0,0 position
var cFabric = new fabric.Canvas('c');

希望你们知道我做错了什么。

Answer 1

你没有做错任何事。在原生画布元素上调用 Fabric.Canvas 构造函数将导致原生画布被.canvas-containerdiv 包裹。原始画布获得一个添加的.lower-canvas类，并且其left, rightcss 样式设置为0px. 除此之外，将在原始画布下方添加一个同级画布，其类为upper-canvas. 这两个画布就像层一样，由 Fabric.js 的内部运作管理（神奇：O）。

如果您需要定位画布并设置其样式，我建议您使用包装器 div 包装 html 画布。

<div id="canvas-wrapper">
    <canvas id="c"></canvas>
</div>

接下来将您的 css 规则传输到包装器

#canvas-wrapper {
  position: absolute;
  top: 50px;
  left: 100px;
}

这是我通过更新 @Mullainathan 的示例小提琴制作的一个简单的小提琴： https: //jsfiddle.net/eo7vdg1t/1/