javascript - 创建新的织物 Canvas 会更改 Canvas 位置

Question

我正在尝试了解fabricjs，并注意到当我创建一个新的fabric.Canvas对象时，它会改变我的 Canvas 的位置。

HTML

<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

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

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

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

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

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

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