我们可以通过创建fabric.Polygon的实例来创建一个Polygon对象。多边形对象的特征可以是由一组连接的直线段组成的任何闭合形状。由于它是 FabricJS 的基本元素之一,我们还可以通过应用角度、不透明度等属性轻松自定义它。FabricJS 为我们提供了一组广泛的事件,我们可以使用它们创建不同的效果。
由于我们希望在鼠标悬停时发生更改,因此我们将使用鼠标移动时触发的 mouse:move 事件。我们的第二个要求是突出显示一个对象,这可以通过使用 opacity 属性来实现,但是,当画布上有很多对象并且我们想要突出显示悬停在其上的对象时,我们需要使用forEachObject 方法。此方法为给定函数运行 for-each 循环,从而为每个对象执行它。
forEachObject( callback: function, context: object ): Self
callback - 此属性接受一个函数,该函数使用当前对象作为第一个参数、索引作为第二个参数和一个所有对象的数组作为第三个。
context - 此属性接受一个 Object,它表示调用回调函数的上下文。
让我们看一个代码示例,看看当画布上只有一个对象时如何添加突出显示效果。我们已将 mouseover 和 mouseout 事件附加到多边形对象(在本例中为三角形)。 mouseover 当鼠标移动到对象上时执行,mouseout 当鼠标悬停在对象外时执行。一旦我们将光标移动到元素上,其不透明度就会从 0.5 更改为 1,反之亦然。
<!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 highlight effect with only one object</h2> <p> You can see that the object is being highlighted when the cursor is moved onto the element </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating a points array var points = [ { x: 30, y: 50 }, { x: 0, y: 0 }, { x: 60, y: 0 }, ]; // Initiating a polygon object 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, }); // Adding it to the canvas 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>
在此示例中,我们将了解当鼠标悬停在对象上时如何突出显示该对象。每次鼠标移动时,都会触发 mouse:move 事件。这里我们通过鼠标指针的“x”和“y”位置,利用数学距离公式计算出坐标平面中两点之间的距离。这个距离再除以 50,这是一个任意数,它使 ( dist/50 ) 分数变小(我们知道,随着分母变大,分数变小),这样当它再除以 1 时,我们得到一个值更大并且不透明度增加。
<!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 highlight effect with multiple objects</h2> <p> You can see that an object is being highlighted only when the cursor is moved onto the element and is depended on the distance </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating a points array var points = [ { x: 30, y: 50 }, { x: 0, y: 0 }, { x: 60, y: 0 }, ]; // Initiating a polygon object 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, }); // Adding it to the canvas 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 在鼠标悬停在对象上时突出显示对象。
以上就是如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象?的详细内容,更多请关注php中文网其它相关文章!
已抢23781个
抢已抢118298个
抢已抢139528个
抢已抢6342个
抢已抢36682个
抢已抢66984个
抢