マウスがベジェ曲線上にあるかどうかを確認します

debugcn 投稿 Dev

チアゴ

私のアプローチは、曲線をループして、さまざまなポイントまでのマウスの距離を確認することでした。

ただし、曲線が急になるにつれてポイントは互いに近づき、マウスの距離のしきい値が高すぎると、マウスのクローゼットではなく、ループの最初のポイントが優先されます。

均一なポイントを取得する方法はありますか？または、マウスがベジエ曲線上にあるかどうかを確認して、曲線内の位置を取得しますか？

スペクトル

私はこのようにします：

カーブをいくつかのチャンクに分割します

チャンクの数は、曲線の順序によって異なります。私は通常キュービックを使用しているので、経験的に8チャンクで十分であることがわかります（私の目的には）。
チャンクに最も近い点を計算する

したがって、各チャンクを線として扱い、線上のマウスの位置に最も近い点（最小垂直距離）を計算するだけです。チャンクごとにそれを計算し、最も近いものを覚えておいてください。

この後、どのチャンクに「最も近い」点が含まれるかがわかるので、線と垂直線の交点から前のステップでマウスの位置を通過するまでu=<0,1>、チャンク線のどこに最も近い点があるかを示すパラメーターが必要です。tチャンクラインの両方の端点の曲線パラメータを知っています（t0,t1）。これから、これをt行うだけで最も近い点を概算できます。
```
t = t0 + (t1-t0)*u
```
画像上t0=0.25とt1=0.375。これで十分な場合もありますが、より良い解決策が必要な場合は、次のように設定してください。
```
dt = (t1-t0)/4
t0 = t-dt
t1 = t+dt
```
Use the t0,t,t1 to compute 3 endpoints of 2 chunks and look for the closest point again. You can recursively do this few times as with each iteration you increase precision of the result

The perpendicular distance of point to a line is computed by computing intersection between the line and axis perpendicular to it going through the point in question. So if the line is defined by endpoints p0,p1 and the queried point (mouse) is q then the axis in 2D will be:

dp=p1-p0        // line direction
dq=(dp.y,-dp.x) // axis direction is perpendicular to dp
dq/= |dq|       // normalize
p(u) = p0+dp*u  // point on line
p(v) = q +dq*v  // point on axis
u = <0,1>       // parameter on line
v = <-inf,+inf> // parameter on axis

And we want to know u,v from

p0+dp*u = q +dq*v

これは、2Dの2つの線形方程式のシステムです。3Dではdq、外積を利用してを取得する必要があり、システムには3つの方程式が含まれます。こののsytemの解決はあなたを与えるだろうu,vどこuチャンクに最も近い点があり、どこを教えてくれる|v|の垂直距離そのものです。uが範囲内にない場合は<0,1>、線のより近い端点を最も近い点として使用する必要があることを忘れないでください。

システムは代数的に解くことができます（ただし、2Dの方程式には2つの解があるため、エッジケースに注意してください）。または逆行列を使用します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-5

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

マウスがベジェ曲線上にあるかどうかを確認します

マウスがベジェ曲線上にあるかどうかを確認します

要素にイベントリスナーがあるかどうかを確認します。jQueryなし

オブジェクトにJavaのメソッドがあるかどうかを確認しますか？

マウスがProcessing 3でキャンバス上にあるかどうかを確認するにはどうすればよいですか？

マウスがjQueryの要素の上にあるかどうかを確認するにはどうすればよいですか？

オブジェクトがリストの一部であるかどうかを確認します

ブラウザ機能-オブジェクトがClojureScriptに存在するかどうかを確認します

Angular 2 RxJSは、遅延後もマウスイベントがまだアクティブであるかどうかを確認します

jQuery：マウスがアニメーションの上にあるかどうかを確認しますか？

ウィジェットが有効になっているかどうかを確認します

点が線ベクトル上にあるかどうかを確認します

曲線が閉じているかどうかを確認します

マウスがContextMenuStripまたはそのアイテムにあるかどうかを確認する方法

対角線が同じ値であるかどうかを確認します

リストにウィジェットが存在するかどうかを確認したいですか？

フェイザー3でマウスがgameObjectの上にあるかどうかを確認するにはどうすればよいですか？

ウェブサイトにjsonがあるかどうかを確認する方法はありますか

オブジェクトがマトリックス内の範囲内にあるかどうかを確認します

マウスがランダムにスポーンするオブジェクトの上にあるかどうかを確認するにはどうすればよいですか

線が凡例の一部であるかどうかを確認します

線が凡例の一部であるかどうかを確認します

オブジェクトがスコープ内にあるかどうかを確認します

選択マーキーが回転した長方形の上にあるかどうかを確認します

マウスが要素Aまたは要素Bの上にあるかどうかを確認します

マウスが円の中にあるかどうかを確認すると、円が動いています

配列にJavascriptで正確なKeyValueオブジェクトがあるかどうかを確認します

オブジェクトがlocalStorageにあるAngularJS配列にあるかどうかを確認します

マウスがC＃の画像の上にあるかどうかを確認する方法

li内にラベルがあるかどうかを確認します

zsh：$ PWDがtmpfsにマウントされたファイルシステム上にあるかどうかを確認します