我們可以透過建立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中文網其他相關文章!