Wie können Sie mehrere Punkte mithilfe von JavaScript reibungslos verbinden?

Mit JavaScript glatte Kurven durch mehrere Punkte zeichnen

Bei Zeichenanwendungen ist es wichtig, mehrere Punkte reibungslos verbinden zu können. Die Verwendung der nativen JavaScript-Funktionen zum Zeichnen von Linien (lineTo, quadraticCurveTo und bezierCurveTo) bietet jedoch einen eingeschränkten Ansatz, der zu Knicken oder disjunkten Kurven führt. In diesem Artikel wird eine Methode zum Erstellen glatter Kurven durch eine Reihe von Punkten mithilfe einer Näherungstechnik untersucht.

Das Problem mit disjunkten Kurven

Bei Verwendung separater „curveTo“-Funktionen für jedes Punktpaar wird die Die resultierende Kurve weist an den Endpunkten Diskontinuitäten auf. Dies liegt daran, dass jedes Kurvensegment nur durch seine eigenen spezifischen Kontrollpunkte beeinflusst wird.

Eine Annäherung an die Glätte

Die vorgeschlagene Lösung besteht darin, die Kurven mit den Mittelpunkten zwischen den aufeinanderfolgenden Abtastpunkten zu verbinden. Dadurch entsteht mehr Kontinuität an den Endpunkten, da der Endpunkt einer Kurve zum Kontrollpunkt für die nächste wird.

Zeichnungscode

Um diese Näherung zu implementieren, befolgen Sie diese Schritte:

1. Gehen Sie mit moveTo() zum ersten Punkt.
2. Iterieren Sie durch die Punkte, mit Ausnahme der letzten beiden.
3. Berechnen Sie für jedes Punktpaar (i, i 1) die Mittelpunkt (xc, yc).
4. Verwenden Sie quadraticCurveTo(), um eine Kurve vom aktuellen Punkt zum Mittelpunkt zu zeichnen und so effektiv zu einer neuen Kurve ausgehend vom Mittelpunkt überzugehen.
5. Zeichnen Sie eine Kurve durch die letzten beiden Punkte mit quadraticCurveTo().

Codebeispiel

Hier ist ein Codeausschnitt, der diesen Ansatz demonstriert:

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

Dieser Code demonstriert die Glättung Kurve, die mit dieser Näherungstechnik durch mehrere Punkte gezeichnet werden kann.

Das obige ist der detaillierte Inhalt vonWie können Sie mehrere Punkte mithilfe von JavaScript reibungslos verbinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!