通常は次の形式の一連の JSON 座標が与えられます。
{from: {x:0, y:0}, to: {x:0, y:10}, ...}
単純な固定半径の丸みを帯びたコーナーで接続された一連の直線の点線のパスを描画したいと思います。直線に沿ってポイントを計算するために勾配切片フォームを見てきましたが、(ベジエ?) 曲線に沿ってポイントを計算するためのアプローチについて少し困惑しています。
たとえば、p1 と p2、および p3 と p4 の間に曲線を描きたいとします。貧弱なモックアップが暗示しているかもしれないにもかかわらず、コーナーが固定半径、たとえば10pxであることを嬉しく思います
描画ロジックを抽象化したいので、さまざまな方法でレンダリングできる JavaScript ポイント配列を返す一般化されたアプローチを探しています (したがって、SVG、Canvas などによって提供される組み込み関数の使用を避けています)。
必要なのは、3 次ベジエ曲線です。
http://www.blackpawn.com/texts/splines/
このページの最初のアプレットを見てください。A が p1、D が p2 の場合、方向 AB はライン 1 の角度で、方向 CD はライン 2 の角度です。これにより、必要なプロパティがどのように得られるかがわかります。角度 1 で開始し、角度 2 で終了し、角度 2 で終了します。ポイント。
したがって、ポイント C と D を取得するには、これを行う 1 つの方法は、線分 1 を取得してコピーし、p1 から始まるように配置することです。 D の場合は p2。
次に、計算を行います:)
http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves
曲線の方程式を作成したら、必要な精度のデルタ t (たとえば、t の 0.1 ごと、0.01 ごとなど) を使用してステップ実行し、曲線上の点のすべてのペアを線分として吐き出します。