現時点で私は問題を抱えています。他の誰かが直面し、おそらく私の前に解決したと確信しています。悲しいことに、この問題を何と呼ぶべきか、どのキーワードを使用して検索すればよいかわかりません。これまでのところ、私の研究は成功していません。
私を正しい方向に向けるか、私が個人的に複雑すぎると思う現在の解決策よりも簡単な解決策を見つけるのを手伝っていただければ幸いです。
言語: Javascript オブジェクト: SVG オブジェクト
タスク：
データポイントと幅を象徴する座標の配列が与えられます。私の目的は、すべてのポイントで指定された幅を持つポイント間に線を生成することです。また、中間の線を隣接する点に分割できる必要があります。幅が 3 または 4 ピクセル未満の場合、ポリラインを使用するだけで簡単に実現できます。しかし、幅が大きくなると、ポリラインのエラーが大きくなります。
例 01 - 小さな青い点は元の座標を表します
エラーは、svg ポリラインが座標を超えて拡張され、角の先端が生成されることです。これにより、情報の正確な表現が不完全になります。私の目的は、この延長されたコーナーの先端が指定された座標上に正確に (1 ピクセルの許容範囲) 配置されるように、座標を再計算することです。
ラインをポリゴンに置き換えるか、複数のフォームを介して構築することも可能です。
最終的に、結果はこのペイント スキルの傑作のように見えるはずですが、単なるアウトラインではなく塗りつぶされています。今仕様に：
- 始点と終点は線の中央にあります (点 1 と 5)
- 90 度未満の角度 (点 2 と 3) は、結果の先端 (内角) の先端で表されます。
- 90 度を超えるポイント (ポイント 4) は、角度の二等分線上にある必要があります
現時点では、私のソリューションはジオメトリに基づいており、私が知っている値から角度を取得してから新しいポイントを計算していますが、それはすでに非常に複雑で複雑であり、同じくらい正確になるには時間がかかるのではないかと心配しています私はそれが必要です。
Photoshop やその他のベクトル化ツールなどのプログラムは、私の状況と同様のことを行うことができると思いますが、この問題/アルゴリズムがどのように呼び出されるかがわからないため、有用な情報はまだあまり見つかりません.
どうもありがとうございました！