Comment dessiner des courbes douces à travers plusieurs points dans un canevas HTML5 ?

Comment dessiner des courbes douces à l'aide de plusieurs points dans un canevas HTML5 Javascript

Dans une application de dessin, les artistes doivent souvent créer des courbes douces qui passent à travers plusieurs points. Bien que le canevas HTML5 fournisse des fonctions de dessin de lignes telles que lineTo, quadraticCurveTo et bezierCurveTo, leur utilisation séquentielle pour chaque groupe de points peut conduire à des courbes disjointes. Cet article présente une solution pour dessiner des courbes douces passant par un nombre quelconque de points.

Interpolation du point médian pour des transitions douces

La clé pour dessiner des courbes douces est d'éviter les angles vifs où les courbes se rejoignent. Ceci peut être réalisé en traçant des courbes entre les milieux de points adjacents. Cela garantit que les points finaux de chaque courbe partagent un point de contrôle commun, ce qui entraîne une transition douce entre les courbes.

Méthode d'approximation

L'extrait de code suivant montre le point médian méthode d'interpolation :

<code class="js">// move to the first point
ctx.moveTo(points[0].x, points[0].y);

for (var i = 1; i < points.length - 2; i++) {
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;
  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);</code>

Dans ce code, nous passons au premier point, puis parcourons les points restants. Pour chaque point, nous calculons le point médian entre le point actuel et le point suivant, et traçons une courbe quadratique jusqu'à ce point médian. Enfin, nous traçons une courbe quadratique entre les deux derniers points.

Avantage de l'approximation

Bien que cette méthode ne suive pas exactement chaque point, elle fournit un résultat visuellement fluide approximation. Pour la plupart des applications de dessin, ce niveau de précision est suffisant.

Lectures complémentaires

Pour une méthode plus précise qui passe par chaque point, référez-vous à la ressource suivante : http https://www.cartogrammar.com/blog/actionscript-curves-update/.

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!