无法在画布上添加新对象（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）

回答

相关问题