如何使用 FabricJS 當滑鼠懸停在某個物件上時突出顯示該物件？
- 王林轉載
- 2023-08-29 11:21:16835瀏覽
我們可以透過建立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>
<!-- 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>
範例2：顯示多個物件的高光效果
在此範例中，我們將了解當滑鼠懸停在物件上時如何突出顯示該物件。每次滑鼠移動時，都會觸發 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中文網其他相關文章！