無法在畫布上添加新對象（fabric.js）

我正在使用fabric.js處理項目並面臨此問題。無法在畫布上添加新對象（fabric.js）

我有一個函數fun（）和它的onclick事件，所以基本上我期待一個圓圈，每次我點擊我的屏幕，但結果我得到的只是一個空白的屏幕。提醒objetcs確實給了我帶有類型圓的對象的數量，並且每當我點擊屏幕時遞增，但是我不能在屏幕上看到圓圈，就像圓圈在那裏但不可見。

這裏是代碼：

<html> 
<head> 
<script type="text/javascript" src="C:\Users\Sunny\Documents\6th Sem Ka Maal\Graph\project\GUI\fabric.js-1.5.0\dist\fabric.js"></script> 
<script> 

var canvas = new fabric.Canvas('p'); 
function fun(event){ 

var x = event.clientX; 
var y = event.clientY; 
alert(x); 
alert(y); 
alert(canvas); 
var circle= new fabric.Circle({ 
radius: 50, fill: 'green', left: x, top: y 
}); 
alert(circle); 
canvas.add(circle); 

} 
</script> 
</head> 
<body> 
<canvas id="p" height="993" width="1920" onclick="fun(event)"></canvas> 
</body> 
</html>

爲什麼我無法看到圓？

來源

2015-05-30 pankul garg

嘗試用Javascript代替佈線事件，使用Fabric的on()監聽器。

canvas.on('mouse:up', fun);

去年我用布瞎搞一個OU項目點至點圖，你可以看看它here可能會給你一些想法。

來源

2015-05-30 10:13:32 garryp

解釋爲什麼：'var canvas = new fabric.Canvas（'p'）;'此時，元素「p」還不存在，所以fabric爲一個不存在的畫布創建一個包裝。然後創建一個真實的畫布並將onclick綁定到一個函數，該函數使用不存在的畫布調用布料包裝器。 – ippi

garryp的回答是正確的。這裏有一個[jsFiddle]（http://jsfiddle.net/wL3kpawg/）和他說的...請使用'console.log（）'進行調試，而不是提示。例如：'console.log（canvas）'，'console.log（x）'等。您將在瀏覽器的Console中看到響應。 –

無法在畫布上添加新對象（fabric.js）

回答

相關問題