創建新的織物畫布更改畫布位置

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/