如何使用 FabricJS 在鼠标悬停在对象上时突出显示该对象?
我们可以通过创建 fabric.Polygon 实例来创建 Polygon 对象。多边形对象的特征可以是任何由一组连接的直线段组成的封闭形状。由于它是 FabricJS 的基本元素之一,我们还可以通过应用角度、不透明度等属性轻松地对其进行自定义。FabricJS 为我们提供了一组广泛的事件,我们可以利用这些事件创建不同的效果。
由于我们希望在鼠标悬停时发生变化,我们将使用在鼠标移动时触发的 mouse:move 事件。我们的第二个要求是突出显示一个对象,这可以通过使用 opacity 属性来实现,但是,当画布上有许多对象并且我们想要突出显示悬停的对象时,我们需要使用 forEachObject 方法。此方法针对给定函数运行 for-each 循环,从而针对每个对象执行该循环。
语法
forEachObject(callback: function, context: object): Self
参数
callback − 此属性接受一个 函数,该函数以当前对象作为第一个参数、索引作为第二个参数、所有对象的数组作为第三个参数来调用。
context − 此属性接受一个 Object,表示调用回调函数的上下文。
示例 1:仅使用一个对象显示突出显示效果
让我们看一个代码示例,看看当画布上只有一个对象时如何添加突出显示效果。我们已将 mouseover 和 mouseout 事件附加到多边形对象(在本例中为三角形)。当鼠标移到对象上时执行 mouseover,当鼠标悬停在对象外时执行 mouseout。只要我们将光标移到元素上,其不透明度就会从 0.5 变为 1,反之亦然。
<!DOCTYPE html> <html> <head> <!-- 添加 Fabric JS 库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>仅使用一个对象显示高亮效果</h2> <p>您可以看到当光标移动到元素上时,对象被高亮显示</p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化 points 点数组 var points = [ { x: 30, y: 50 }, { x: 0, y: 0 }, { x: 60, y: 0 }, ]; // 初始化多边形对象 var triangle = new fabric.Polygon(points, { left: 100, top: 40, fill: "#1e90ff", strokeWidth: 4, stroke: "green", flipY: true, scaleX: 2, scaleY: 2, opacity: 0.5, }); // 将其添加到画布 canvas.add(triangle); // Using mouseover event triangle.on("mouseover", () => { triangle.set("opacity", 1); canvas.renderAll(); }); // Using mouseout event triangle.on("mouseout", () => { triangle.set("opacity", 0.5); canvas.renderAll(); }); </script> </body> </html>
示例 2:使用多个对象显示高亮效果
在此示例中,我们将了解如何在鼠标悬停在某个对象上时突出显示该对象。每次鼠标移动时,都会触发 mouse:move 事件。在这里,我们使用鼠标指针的"x"和"y"位置计算距离,并使用数学距离公式计算坐标平面中两点之间的距离。将此距离进一步除以 50,这是一个任意数,它使 (dist/50) 分数变小(我们知道分母越大,分数越小),这样当它进一步除以 1 时,我们会得到更大的值,并且不透明度会增加。
<!DOCTYPE html> <html> <head> <!-- 添加 Fabric JS 库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>显示多个对象的高亮效果</h2> <p>您可以看到,只有当光标移动到元素上时,对象才会被高亮显示,并且取决于距离</p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化 points 点数组 var points = [ { x: 30, y: 50 }, { x: 0, y: 0 }, { x: 60, y: 0 }, ]; // 初始化多边形对象 var triangle = new fabric.Polygon(points, { left: 100, top: 40, fill: "#1e90ff", strokeWidth: 4, stroke: "green", flipY: true, scaleX: 2, scaleY: 2, opacity: 0.5, }); // 将其添加到画布 canvas.add(triangle); // Using clone method triangle.clone(function (c) { canvas.add( c.set({ left: 500, top: 79, angle: 15, scaleX: 0.7, scaleY: 0.7, fill: "red", }) ); }); // Using clone method triangle.clone(function (c) { canvas.add( c.set({ left: 340, top: 90, angle: -15, scaleX: 2, scaleY: 2, fill: "black", }) ); }); // Using clone method triangle.clone(function (c) { canvas.add( c.set({ left: 280, top: 190, angle: 21, scaleX: 0.9, scaleY: 0.9, fill: "#ffa500", }) ); }); // Using mouse:move event canvas.on("mouse:move", (options) => { // Get the mouse coordinates var p = canvas.getPointer(options.e); canvas.forEachObject(function (obj) { // Get distance between objects and mouse pointer var distX = Math.abs(p.x - obj.left), distY = Math.abs(p.y - obj.top), dist = Math.round( Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2)) ); // Update the opacity as a proportion of distance obj.set("opacity", 1 / (dist / 50)); }); canvas.renderAll(); }); </script> </body> </html>
结论
在本教程中,我们使用了两个简单示例来演示如何使用 FabricJS 在鼠标悬停在某个对象上时突出显示该对象。