创建新的结构画布会更改画布位置

Creating new fabric canvas changes canvas position

本文关键字：位置 布位置 布会更 结构 创建      更新时间：2023-09-26

我正在尝试学习fabricjs，并在创建新结构时注意到了这一点。画布对象它改变了我的画布的位置。

.HTML

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

CSS

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

爪哇语

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');

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

你没有做错任何事。调用结构。本机画布元素上的画布构造函数将导致本机画布被.canvas-containerdiv 包装。原始画布获得一个添加的.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/

相关文章：