我們可以透過建立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，反之亦然。
Displaying highlight effect with only one object
You can see that the object is being highlighted when the cursor is moved onto the element
在此範例中，我們將了解當滑鼠懸停在物件上時如何突出顯示該物件。每次滑鼠移動時，都會觸發mouse:move事件。這裡我們透過滑鼠指標的「x」和「y」位置，利用數學距離公式計算出座標平面中兩點之間的距離。這個距離再除以50，這是一個任意數，它使( dist/50 ) 分數變小（我們知道，隨著分母變大，分數變小），這樣當它再除以1 時，我們得到一個值更大且不透明度增加。
Displaying highlight effect with multiple objects
You can see that an object is being highlighted only when the cursor is moved onto the element and is depended on the distance
在本教學中，我們使用兩個簡單的範例來示範如何使用 FabricJS 在滑鼠懸停在物件上時突出顯示物件。
以上是如何使用 FabricJS 當滑鼠懸停在某個物件上時突出顯示該物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
