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

Question

我正在尝试学习fabricjs，并注意到当我创建一个新的fabric.Canvas对象时，它会更改画布的位置。

HTML

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

的CSS

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

Java脚本

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-container div包装。 原始画布获得一个添加的.lower-canvas类，其left, right css样式设置为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/