Question

我正在尝试了解fabricjs，并注意到当我创建一个新的fabric.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-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/

创建新的布料画布可更改画布位置

1 个答案: