Comment pouvez-vous connecter facilement plusieurs points à l'aide de JavaScript ?

Utiliser JavaScript pour dessiner des courbes douces à travers plusieurs points

Dans les applications de dessin, il est essentiel de pouvoir connecter plusieurs points en douceur. Cependant, l'utilisation des fonctions de dessin de lignes JavaScript natives (lineTo, quadraticCurveTo et bezierCurveTo) offre une approche limitée, entraînant des plis ou des courbes disjointes. Cet article explore une méthode pour créer des courbes lisses à travers une série de points à l'aide d'une technique d'approximation.

Le problème des courbes disjointes

Lors de l'utilisation de fonctions "curveTo" distinctes pour chaque paire de points, le la courbe résultante présente des discontinuités aux extrémités. En effet, chaque segment de courbe n'est influencé que par ses propres points de contrôle spécifiques.

Une approximation de la douceur

La solution proposée consiste à connecter les courbes aux points médians entre les points d'échantillonnage suivants. Cela crée plus de continuité aux extrémités, car l'extrémité d'une courbe devient un point de contrôle pour la suivante.

Code de dessin

Pour mettre en œuvre cette approximation, suivez ces étapes :

1. Déplacez-vous vers le premier point en utilisant moveTo().
2. Parcourez les points, en excluant les deux derniers.
3. Pour chaque paire de points (i, i 1), calculez le point médian (xc, yc).
4. Utilisez quadraticCurveTo() pour tracer une courbe du point actuel au point médian, passant ainsi efficacement à une nouvelle courbe à partir du point médian.
5. Dessinez une courbe passant par les deux derniers points en utilisant quadraticCurveTo().

Exemple de code

Voici un extrait de code qui démontre cette approche :

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

Ce code démontre la fluidité courbe qui peut être tracée à travers plusieurs points en utilisant cette technique d'approximation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!