4

HTML5 Canvas で次のように描画された線があるとします。

...
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.closePath();
...

この行でマウスダウンイベントが発生したかどうかを確認したいのですが、次のようなコードがあります。

var handleMouseDown = function(e) {
  var coords = translateCoords(e.x,e.y);
  ...
  if (ctx.isPointInPath(coords.x, coords.y) {
    ...

現在、このコードは円と長方形の場合は正常に機能しますが、線の場合は機能しません。2 つの質問があります。

  1. おそらく、行自体で closePath() を呼び出すのは間違っていると思います。質問 - この行でマウス ダウン イベントが発生したかどうかを確認するにはどうすればよいですか?

  2. これを拡張して、マウスダウンイベントが線の近くで発生したかどうかを確認するにはどうすればよいですか?

4

3 に答える 3

8

最初のステップは、点の線への法線投影を見つけることです。これは実際には非常に簡単です。ポイント 1 からターゲットまでの距離とポイント 2 からターゲットまでの距離を取り、それぞれを D1 と D2 と呼びます。次に計算しD1+(D2-D1)/2ます。これは、ポイント 1 から直線上に投影されたポイントまでの距離です。

その点を見つけて、その点からターゲットまでの距離を取得できます。距離がゼロの場合、ターゲットは正確に直線上にあります。距離が 5 未満の場合、ターゲットは 5 ピクセル未満の距離にありました。

編集: 百聞は一見にしかず。これが図です：

ダイアグラム
(出典: adamhaskell.net )

（後から考えると、おそらくこれらの円は別の色にするべきだった...また、紫色の線は線ABに垂直であるはずです。青い線で私のひどい狙いを非難してください！）

于 2013-01-17T04:14:07.767 に答える
1

これには 2 つのオプションがあります。あなたの「簡単な」オプションは、キャンバスを使用してそれを行うことです-マウスがどこにあるかに関係なくピクセルデータを読み取り、それが線と同じ色の場合、ユーザーは線をクリックしました。ただし、これは、キャンバス上のすべてが異なる単色でレンダリングされるなど、多くの仮定を立てます。ただし、これは可能です。一般的なトリックは、すべてをオフスクリーン キャンバスに異なる単色でレンダリングすることです。次に、ユーザーが何かをクリックすると、その 1 つのピクセルの色を読み取って元のオブジェクトにマッピングし直すことで、それが何であるかを正確に知ることができます。

しかし、それはまさにあなたが求めたものではありません:)

ユーザーが行をクリックしたかどうかは知りたくありません。線は無限に細いので、正確に水平または垂直でない限り、クリックすることはありません。代わりに、マウスが線からどれだけ離れているかを確認する必要があります。コリンクはその部分に答えただけなので、ここでやめます:)

于 2013-01-17T04:14:56.940 に答える