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

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

你没有做错什么。在本地画布元素上调用fabric.Canvas构造函数将导致您的本地画布被.canvas-container div包裹。原始画布获得一个增加的.lower-canvas类和它的left, right css样式设置为0px。除此之外，兄弟画布被添加到您的原始画布下方，并且类别为upper-canvas。这两个画布像层一样起作用，由Fabric.js（magic：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/