如何使用 FabricJS 使多边形对象对拖放事件做出反应?
fabricjsjavascripthtml5 canvas
我们可以通过创建 fabric.Polygon 实例来创建多边形对象。多边形对象的特征可以是任何由一组连接的直线段组成的封闭形状。由于它是 FabricJS 的基本元素之一,我们还可以通过应用角度、不透明度等属性轻松地对其进行自定义。我们使用 event:dragover 和 event:drop 事件使多边形对象对拖放事件做出反应。
语法
event:dragover event:drop
示例 1:显示对象如何对放置事件做出反应
让我们看一个代码示例,以查找当我们将"h1"元素放在添加到画布的多边形对象顶部时记录的输出。我们创建了一个"h1"元素并赋予它 id = "drop-me"。然后我们使用 getElementById() 方法返回"h1"元素,并使用 addEventListener() 方法来监听 drop 事件。因此,当我们抓取"h1"元素并将其放到多边形对象上时,将显示与该事件相关的属性。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Displaying how the object reacts to drop event</h2> <p> You can drop the box on the object and open the console from the dev tools to see that the event name, subTargets and target are being shown </p> <canvas id="canvas"></canvas> <h1 draggable="true" id="drop-me" style=" color: black; background-color: rgb(166, 103, 248); width: 130px; height: 70 px; padding: 10px;"> Drop me </h1> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化一个多边形实例 var polygon = new fabric.Polygon( [ { x: 0, y: 0 }, { x: 0, y: 150 }, { x: 150, y: 150 }, { x: 150, y: 0 }, ], { left: 100, top: 60, fill: "red", stroke: "blue", strokeWidth: 2, objectCaching: false, } ); // 将其添加到画布 canvas.add(polygon); // 启动 observe 观察函数 function observe(eventName) { canvas.getObjects().forEach(function (object) { object.on(eventName, function evt(x) { console.log("Drop event has been fired", x); }); }); } // 使用 addEventListener 并监听 drop 事件 document .getElementById("drop-me") .addEventListener("change", observe("drop")); </script> </body> </html>
示例 2:显示对象如何对 dragover 事件作出反应
让我们看一个代码示例,以查找当我们将"h1"元素拖到添加到画布的多边形对象上时记录的输出。当我们将对象移动到其他位置时,会发生拖动事件。但是,当我们将一个对象拖到另一个对象上时,会发生 dragover 事件。在这里,当我们将"h1"元素拖到多边形对象上时,事件名称、目标和子目标将记录在控制台中。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Displaying how the object reacts to dragover event</h2> <p> You can drag the box on the object and open the console from the dev tools to see that the event name, target and subTargets are being shown </p> <canvas id="canvas"></canvas> <h1 draggable="true" id="drag-me" style=" color: black; background-color: purple; width: 130px; height: 70 px; padding: 10px;" > Drag me </h1> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化一个多边形实例 var polygon = new fabric.Polygon( [ { x: 0, y: 0 }, { x: 0, y: 150 }, { x: 150, y: 150 }, { x: 150, y: 0 }, ], { left: 100, top: 60, fill: "red", stroke: "blue", strokeWidth: 2, } ); // 将其添加到画布 canvas.add(polygon); // 启动 observe 观察函数 function observe(eventName) { canvas.getObjects().forEach(function (object) { object.on(eventName, function evt(x) { console.log("Dragover event has been fired", x); }); }); } // 使用 addEventListener 并监听 dragover 事件 document .getElementById("drag-me") .addEventListener("change", observe("dragover")); </script> </body> </html>
结论
在本教程中,我们使用了两个简单示例来演示如何使用 FabricJS 使多边形对象对拖放事件做出反应。