Bagaimanakah Anda Boleh Menyambung Berbilang Titik Dengan Lancar Menggunakan JavaScript?

Menggunakan JavaScript untuk Melukis Lengkung Licin Melalui Berbilang Titik

Dalam aplikasi lukisan, adalah penting untuk dapat menyambungkan berbilang titik dengan lancar. Walau bagaimanapun, menggunakan fungsi lukisan garisan JavaScript asli (lineTo, quadraticCurveTo, dan bezierCurveTo) menyediakan pendekatan terhad, mengakibatkan kekusutan atau lengkung terputus. Artikel ini meneroka kaedah untuk mencipta lengkung licin melalui satu siri titik menggunakan teknik penghampiran.

Masalah Lengkung Terpisah

Apabila menggunakan fungsi "curveTo" yang berasingan untuk setiap pasangan mata, lengkung yang terhasil mempamerkan ketakselanjaran pada titik akhir. Ini kerana setiap segmen lengkung hanya dipengaruhi oleh titik kawalannya sendiri.

Pengiraan kepada Kelicinan

Penyelesaian yang dicadangkan melibatkan penyambungan lengkung ke titik tengah antara titik sampel berikutnya. Ini mewujudkan lebih banyak kesinambungan pada titik akhir, kerana titik akhir satu lengkung menjadi titik kawalan untuk yang seterusnya.

Kod Lukisan

Untuk melaksanakan anggaran ini, ikut langkah berikut:

1. Bergerak ke titik pertama menggunakan moveTo().
2. Lelaran melalui mata, tidak termasuk dua yang terakhir.
3. Untuk setiap pasangan mata (i, i 1), hitungkan titik tengah (xc, yc).
4. Gunakan quadraticCurveTo() untuk melukis lengkung dari titik semasa ke titik tengah, dengan berkesan beralih kepada lengkung baharu bermula dari titik tengah.
5. Lukis lengkung melalui dua mata terakhir menggunakan quadraticCurveTo().

Contoh Kod

Berikut ialah coretan kod yang menunjukkan pendekatan ini:

<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>

Kod ini menunjukkan kelancaran lengkung yang boleh dilukis melalui berbilang titik menggunakan teknik penghampiran ini.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menyambung Berbilang Titik Dengan Lancar Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!