如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象？-js教程-PHP中文网

如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象？

我们可以通过创建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，反之亦然。

Displaying highlight effect with only one object

You can see that the object is being highlighted when the cursor is moved onto the element

登录后复制

示例2：显示多个对象的高光效果

在此示例中，我们将了解当鼠标悬停在对象上时如何突出显示该对象。每次鼠标移动时，都会触发mouse:move事件。这里我们通过鼠标指针的“x”和“y”位置，利用数学距离公式计算出坐标平面中两点之间的距离。这个距离再除以 50，这是一个任意数，它使 ( dist/50 ) 分数变小（我们知道，随着分母变大，分数变小），这样当它再除以 1 时，我们得到一个值更大并且不透明度增加。