JavaScript を使用して複数の点をスムーズに接続するにはどうすればよいですか?

JavaScript を使用して複数の点を通る滑らかな曲線を描く

描画アプリケーションでは、複数の点を滑らかに接続できることが不可欠です。ただし、ネイティブ JavaScript 線描画関数 (lineTo、quadraticCurveTo、および bezierCurveTo) を使用すると、アプローチが制限され、結果として曲線がねじれたり、不連続になったりします。この記事では、近似手法を使用して一連の点を通る滑らかな曲線を作成する方法について説明します。

互いに素な曲線の問題

点のペアごとに個別の "curveTo" 関数を使用する場合、結果として得られる曲線は、終点で不連続性を示します。これは、各曲線セグメントがそれ自体の特定の制御点によってのみ影響を受けるためです。

滑らかさの近似

提案された解決策には、後続のサンプル ポイント間の中間点に曲線を接続することが含まれます。これにより、ある曲線の終点が次の曲線の制御点になるため、終点の連続性が高まります。

描画コード

この近似を実装するには、次の手順に従います。

1. moveTo() を使用して最初の点に移動します。
2. 最後の 2 つを除き、点を繰り返します。
3. 各点のペア (i, i 1) について、中点 (xc, yc)。
4. quadraticCurveTo() を使用して現在の点から中点まで曲線を描き、中点から始まる新しい曲線に効果的に移行します。
5. 曲線を描く最後の 2 つの点は、quadraticCurveTo() を使用します。

コード例

このアプローチを示すコード スニペットは次のとおりです。

<code class="javascript">const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const points = [
  { x: 50, y: 50 },
  { x: 180, y: 100 },
  { x: 75, y: 120 },
  { x: 40, y: 40 },
];

// Move to the first point
ctx.moveTo(points[0].x, points[0].y);

// Iterate through the remaining points
for (var i = 1; i < points.length - 2; i++) {
  // Calculate the midpoint
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;
  // Draw a curve from the current point to the midpoint
  ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}

// Curve through the last two points
ctx.quadraticCurveTo(
  points[i].x,
  points[i].y,
  points[i + 1].x,
  points[i + 1].y
);

// Stroke the curve
ctx.stroke();</code>

このコードは、スムーズなこの近似手法を使用して、複数の点を通る曲線を描くことができます。

以上がJavaScript を使用して複数の点をスムーズに接続するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。