FabricJS を使用してマウスがオブジェクトの上にあるときにオブジェクトを強調表示するにはどうすればよいですか?

fabric.Polygonのインスタンスを作成することで、Polygon オブジェクトを作成できます。ポリゴン オブジェクトは、接続された直線セグメントのセットで構成される閉じた形状として特徴付けることができます。これは FabricJS の基本要素の 1 つであるため、角度や不透明度などのプロパティを適用することで簡単にカスタマイズすることもできます。 FabricJS は、さまざまな効果を作成するために使用できる広範なイベントのセットを提供します。

マウスオーバー時に変更が発生するようにするため、マウスを移動したときに発生するmouse:moveイベントを使用します。 2 番目の要件はオブジェクトを強調表示することです。これはopacityプロパティを使用することで実現できますが、キャンバス上に多数のオブジェクトがあり、その上にあるオブジェクトを強調表示したい場合は、次の操作が必要です。forEachObjectメソッドを使用します。このメソッドは、指定された関数に対して for-each ループを実行し、オブジェクトごとにループを実行します。

パラメータ

• callback- このプロパティは、現在のオブジェクトを最初の引数として、インデックスを 2 番目の引数として受け取るfunctionを受け入れます。 3 番目としてすべてのオブジェクトの配列。

• context- このプロパティは、コールバック関数が呼び出されたコンテキストを表すObjectを受け入れます。

例 1: 1 つのオブジェクトのみを使用してハイライト効果を表示する

キャンバス上にオブジェクトが 1 つだけある場合にハイライト効果を追加する方法をコード例で見てみましょう。

およびmouseoutイベントをポリゴン オブジェクト (この場合は三角形) にアタッチしました。mouseoverマウスがオブジェクト上に移動すると実行されます。mouseoutマウスがオブジェクトの外側に移動すると実行されます。カーソルを要素の上に移動すると、その不透明度が 0.5 から 1 に、またはその逆に変わります。リーリー例 2: 複数のオブジェクトのハイライト効果を表示する

この例では、オブジェクトの上にマウスを置いたときにオブジェクトを強調表示する方法を説明します。マウスが移動するたびに、

イベントがトリガーされます。ここでは、数学的な距離公式を使用して、マウス ポインタの「x」および「y」位置を通る座標平面内の 2 点間の距離を計算します。次に、この距離を 50 で割ります。これは、(dist/50) の分数を小さくする任意の数です (分母が大きくなると分数が小さくなることがわかっています)。1 で割ると、次のようになります。 a 値が大きいほど不透明度が高くなります。リーリー ＃＃＃結論は＃＃＃このチュートリアルでは、2 つの簡単な例を使用して、マウスがオブジェクト上にあるときに FabricJS を使用してオブジェクトを強調表示する方法を示します。

以上がFabricJS を使用してマウスがオブジェクトの上にあるときにオブジェクトを強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。