ラファエル：不明瞭な点を前面に持ってくる

Question

ラファエルサークルオブジェクトはキャンバス上にたくさんあります。多くの場合、重なり合うことがあります。小さな円は、大きな円で完全に覆われます。このような場合には、小さい円を前方に持っていきたい - より正確には、それに含まれる座標がマウスオーバーしている。

私はmousemoveハンドラの一部としてgetElementsByPoint（）メソッドを試してきましたが、そのパフォーマンスが実際には鈍いことがわかりました。ラファエルキャンバス上前方覆われるか隠さドットをもたらすため

任意のヒントやトリック？

ありがとうございます。

Answer 1

オーバーレイマスクを透明なrectとして作成し、キャンバス領域全体をカバーし、各シェイプのパス座標を含むシェイプをハンドラとしてアタッチすることができます。

この場合、オーバーレイマスクが発生するカスタムイベントを作成し、キャッチするシェイプのカスタムイベントを作成する必要があります。「shape-coor-over」と「shape-coor-out」と呼びましょう。

このマスクはメディエータとして動作します。特定の条件（マウスがパスのエリアに入った場合など）にshape-coor-overとshape-coor-outというカスタムイベントを発生させ、登録されたシェイプに通知するとハンドラーは、形状のtoFront()またはtoBack()を呼び出します。