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

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

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

＃＃＃文法＃＃＃ リーリー

パラメータ

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

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

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

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

mouseover

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

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

mouse:move

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

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