JavaScriptで曲線の長さを求める公式を詳しく解説

JavaScript は、通常 Web ブラウザ上で実行されるオブジェクト駆動型およびイベント駆動型のスクリプト言語であり、Web ページの動的な対話プロセスを制御するために使用されるスクリプト言語です。フロントエンド開発では、多くの場合、座標に基づいて曲線の長さを計算する必要があります。この記事では、JavaScript で曲線の長さを求める公式について説明し、詳しく説明します。

1. 曲線の長さの概要

幾何学において、曲線の長さは曲線の固有のプロパティの 1 つであり、曲線の弧の長さを指します。円弧長の概念は円周率の計算に由来しており、円周率の計算形式は $π = 2l/d$ ($l$ は円周の円弧長、$d$ は円の直径を表します) となります。同様に、任意の曲線についても、円弧の長さを計算することでその長さを知ることができます。円弧の長さの計算には、微積分学の積分公式を使用する必要がありますが、JavaScript では、曲線の長さを計算するために数値計算手法に依存します。

2. 曲線の長さの計算

JavaScript で曲線の長さを求めるには、通常、次の式が使用されます: $L=\sum_{i=0}^{n-1}\sqrt {(x_{ i 1}-x_i)^2 (y_{i 1}-y_i)^2}$。このうち、$L$は曲線の長さを表し、$n$は曲線の点の数を表し、$x_i$と$y_i$は曲線上の$i$番目の点の横座標と縦座標を順に表します。この式は曲線​​をいくつかの小さな線分に分割します。各小さな線分の長さはユークリッド距離の公式に従って計算でき、その後、すべての小さな線分の長さを加算することで曲線の長さが得られます。

サンプルコードは以下の通りです。

function getCurveLength(points) {
  var length = 0;
  for (var i = 1; i < points.length; i++) {
    var dx = points[i].x - points[i - 1].x;
    var dy = points[i].y - points[i - 1].y;
    length += Math.sqrt(dx * dx + dy * dy);
  }
  return length;
}

このうち、$points$は曲線上に設定された点を表し、各点は以下のように横軸と縦軸を持つオブジェクトとして表現されます。 :

var points = [
  { x: 0, y: 0 },
  { x: 0, y: 10 },
  { x: 10, y: 10 },
  { x: 10, y: 0 },
  { x: 0, y: 0 }
];

曲線の長さを計算する関数に上記のコードを入れて曲線の長さを取得します。

3. 曲線の長さの計算の例

以下は、上記の式を使用してさまざまな曲線の長さを計算する例です:

1. 二次ベジェ曲線

二次ベジェ曲線は、特定の制御点に従って曲線上を移動する 2 つの点の移動によって形成される曲線形状です。その式は次のとおりです: $B(t)=(1-t)^2P_0 2t(1-t)P_1 t^2P_2$。このうち、$P_0$、$P_1$、$P_2$ は 3 つの制御点の座標、$t$ は補間係数、値の範囲は $[0,1]$ です。

制御点の座標をそれぞれ $(0,0)$、$(5,10)$、$(10,0)$ とすると、二次ベジェ曲線は次のように取得できます。コードの長さ:

var points = [];
for (var t = 0; t <= 1; t += 0.01) {
  var x = Math.pow(1 - t, 2) * 0 + 2 * t * (1 - t) * 5 + Math.pow(t, 2) * 10;
  var y = Math.pow(1 - t, 2) * 0 + 2 * t * (1 - t) * 10 + Math.pow(t, 2) * 0;
  points.push({ x: x, y: y });
}
var length = getCurveLength(points);  // 得到曲线长度

曲線の最終的な長さは $29.02$ です。

2. 3次ベジェ曲線

3次ベジェ曲線は、3つの制御点によって定義される曲線形状です。その式は次のとおりです: $B(t)=( 1-t)^3P_0 3( 1-t)^2tP_1 3(1-t)t^2P_2 t^3P_3$。このうち、$P_0$、$P_1$、$P_2$、$P_3$ は 4 つの制御点の座標、$t$ は補間係数、値の範囲は $[0,1]$ です。

制御点の座標がそれぞれ $(0,0)$、$(5,10)$、$(5,5)$、$(10,0)$ であると仮定すると、次のようになります。コードを使用できます。 3次ベジェ曲線の長さを求めます:

var points = [];
for (var t = 0; t <= 1; t += 0.01) {
  var x = Math.pow(1 - t, 3) * 0 + 3 * Math.pow(1 - t, 2) * t * 5 + 3 * (1 - t) * Math.pow(t, 2) * 5 + Math.pow(t, 3) * 10;
  var y = Math.pow(1 - t, 3) * 0 + 3 * Math.pow(1 - t, 2) * t * 10 + 3 * (1 - t) * Math.pow(t, 2) * 5 + Math.pow(t, 3) * 0;
  points.push({ x: x, y: y });
}
var length = getCurveLength(points);  // 得到曲线长度

曲線の最終的な長さは $28.36$ です。

4. まとめ

上記の例の計算を通じて、JavaScript で曲線の長さを求める場合、通常はユークリッド距離の公式に基づいて計算されることがわかります。精度が高く、さまざまなタイプの曲線形状に適用できます。同時に、特定のニーズを満たすために、さまざまなタイプの曲線に対して個別に長さの計算を実行することもできます。

つまり、JavaScript の曲線の長さの式は、多くのフロントエンド開発におけるちょっとしたトリックにすぎませんが、Web アプリケーションのパフォーマンスとインタラクティブな効果に大きな影響を与えます。したがって、私たちは技術レベルと創造性を向上させるために学び、探究し続ける必要があります。

以上がJavaScriptで曲線の長さを求める公式を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。