資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 在滑鼠懸停在物件上時突出顯示該物件？
我們可以透過建立fabric.Polygon的例項來建立一個多邊形物件。多邊形物件可以由任何由一組連線的直線段組成的封閉形狀來表示。由於它是 FabricJS 的基本元素之一，因此我們也可以透過應用角度、不透明度等屬性輕鬆自定義它。FabricJS 為我們提供了一套廣泛的事件，我們可以用這些事件來建立不同的效果。
由於我們希望更改在滑鼠懸停時發生，因此我們將使用mouse:move事件，該事件在滑鼠移動時觸發。我們的第二個要求是突出顯示一個物件，這可以透過使用opacity屬性來實現，但是，當畫布上有多個物件並且我們希望突出顯示正在懸停的物件時，我們需要使用forEachObject方法。此方法為給定函式執行一個 for-each 迴圈，從而為每個物件執行它。
語法
forEachObject( callback: function, context: object ): Self
引數
callback − 此屬性接受一個函式，該函式以當前物件作為第一個引數、索引作為第二個引數以及所有物件的陣列作為第三個引數呼叫。
context − 此屬性接受一個物件，該物件表示在其中呼叫回撥函式的上下文。
示例 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 在滑鼠懸停在物件上時突出顯示該物件。
1K+ 瀏覽量
