
我们可以通过创建fabric.Polygon的实例来创建一个Polygon对象。多边形对象的特征可以是由一组连接的直线段组成的任何闭合形状。由于它是 FabricJS 的基本元素之一,因此我们还可以通过应用角度、不透明度等属性轻松自定义它。我们使用 mouseup 和 mousedown 事件来演示如何多边形对象对用户触发的鼠标事件做出反应。
语法
polygon.on(“mouseup”, callbackFunction); polygon.on(“mousedown”, callbackFunction);
示例 1:显示对象如何响应 mouseup 事件
让我们看一个代码示例,了解触发 mouseup 事件时多边形对象如何反应。当用户释放鼠标左键时,会发生 mouseup 事件。这里,一旦触发 mouseup 事件,描边宽度就会变为 33。
Displaying how the object reacts to the mouseup event
You can select the object and release the left mouse button to see that the stroke width has changed
示例 2:显示对象如何响应 mousedown 事件
让我们看一个代码示例,了解触发 mousedown 事件时多边形对象如何反应。当用户按下按钮时,会发生 mousedown 事件。在这里,我们可以看到该对象通过将其描边宽度从 33 更改为 2 来响应 mousedown 事件。
Displaying how the object reacts to the mousedown event
You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed
结论
在本教程中,我们使用两个简单的示例来演示如何使用 FabricJS 使多边形对象对鼠标事件做出反应。










