javascript - Canvas ページ上でマウスをクリックしたとき、その点の位置がその中に描かれた線の上にあるかどうかを判断するにはどうすればよいですか?描かれた線で何かがイベントをトリガーしますか?

Question

以下の 3 つの下線付きコードは、私自身が編集モードに入ると、マウスの左ボタンをクリックすると、vcanvas 内の左ボタンの対応する位置が記録されます。クリックした点が描画した線分上にあるかどうかを確認するにはどうすればよいですか?

//これは下線付きのキーコードです

リーリー

Answer 1

一般的にはこのように、ゲームを書くのと同じように、まず線分の選択範囲(4つの頂点のx,y)を設定する必要があります。
次に、キャンバス内のマウス座標を取得して、マウスが配置されているオブジェクトの選択範囲を決定します。この時点で、オブザーバー モードを使用してイベント バインディングを実装することを検討できます。
座標が範囲内にあるかどうかを判定するアルゴリズムは、線分法（線分の回転や拡大縮小を考慮）で判定できます。

これについてお手伝いしたいのですが、少し前にコンピューターのハードドライブを壊してしまい、私が書いたソースコードが消えてしまいました。
基本的なアイデアを書き留めておきます:
まず、コメントの例を参照して範囲を設定します。 4 つの頂点が設定されたら、基本的に有効な範囲が決まります。それはあなたの個人的なニーズによって異なります。

2. 「オブザーバー モード (パブリッシャー/サブスクライバー モード)」の基本的なコードは、オンラインで検索できます。実際は非常に簡単です。

3. 回転後の座標のアルゴリズムについては、ここをクリックして（これは反時計回りの回転の式であることに注意してください）、そのまま適用してください。

4. レイ法の場合、計算にベクトルを使用する必要がある場合があります。高校の数学を思い出してください。

リンクを修正しました。まずはゆっくりと学んでください。面倒そうに見えますが、理解すれば実はとても簡単です。