无法在 canvas (fabric.js) 上添加新对象

Question

我正在使用 fabric.js 进行一个项目并遇到这个问题。

我有一个函数 fun() 并在事件 onclick 上调用它，所以基本上我每次点击屏幕时都期待一个圆圈，但结果我得到的只是一个空白屏幕。提醒 objetcs 肯定会给我类型为 circle 的对象的数量，并且每次我单击屏幕时都会增加，但我看不到屏幕上的圆圈，就像圆圈在那里但不可见。

代码如下：

<html>
<head>
<script type="text/javascript" src="C:\Users\Sunny\Documentsth 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>

为什么我看不到圆圈？

Answer 1

尝试使用 Fabric 的 on() 侦听器来连接 Javascript 中的事件。

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

在此处阅读有关面料活动的更多信息：

https://github.com/kangax/fabric.js/wiki/Working-with-events

去年搞了一个OU项目点对点画图的Fabric，你可以看看here或许能给你一些思路

无法在 canvas (fabric.js) 上添加新对象

can't add new objects on canvas (fabric.js)

javascript

fabricjs