JavaScript Kurvenerzeugung

Question

Wie kann ich eine Funktion schreiben, die ein Array von 2D-Punkten akzeptiert und die Bezier-/Quadratische Kurve(n) zurückgibt, damit ich sie später mit der HTML5 Canvas bezierCurveTo oder quadraticCurveTo Methode neu zeichnen kann?

Answer 1

BEARBEITEN: verbessert.

Sehen Sie sich eine Demo an, die den folgenden Code verwendet.

var makeCurveArgs = function(points) {
  var copy = points.slice();
  var result = [];
  copy.shift(); //den ersten Punkt entfernen, er wird anderswo behandelt
  var tangent;
  if(copy.length >= 3) {
    var cp1 = copy.shift();
    var cp2 = copy.shift();
    var p2 = copy.shift();

    result.push([cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]]);            
  }
  while(copy.length >= 2) {
    var cp1 = [2 * p2[0] - cp2[0], 2 * p2[1] - cp2[1]];
    var cp2 = copy.shift();
    var p2 = copy.shift();
    result.push([cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]]);            
  }
  return result;
}

var notThatHard = function(points) {
  var origin = points[0].slice();
  var curves = makeCurveArgs(points);
  var drawCurves = function(context) {

    context.beginPath();
    context.moveTo(origin[0], origin[1]);
      for(var i = 0; i < curves.length; i++) {
      var c = curves[i];
      context.bezierCurveTo(c[0], c[1], c[2], c[3], c[4], c[5]);
  }
  };
  return drawCurves;
};

Der allgemeine Ansatz besteht darin, dass Sie mir die Koordinaten Ihrer Punkte und Steuerpunkte geben und ich Ihnen eine Funktion zurückgebe, die diesen Pfad auf einem Canvas-Kontext ausführt.

Die von mir bereitgestellte Funktion erfordert ein Array von 2N+2 2-Element-Arrays; jedes 2-Element-Array ist eine (x, y)-Koordinate. Die Koordinaten werden wie folgt verwendet:

points[0]: Startpunkt der Kurve
points[1]: liegt auf einer Linie tangent zu Beginn der 1. bezier-Kurve
points[2]: liegt auf einer Linie tangent zum Ende der 1. bezier-Kurve
points[3]: Ende der 1. bezier-Kurve, Anfang der 2. bezier-Kurve
points[4]: liegt auf einer Linie tangent zum Ende der 2. bezier-Kurve
points[5]: Ende der 2. bezier-Kurve, Anfang der 3. Kurve
...
points[2*K+2]: liegt auf einer Linie tangent zum Ende der K. bezier-Kurve
points[2*K+3]: Ende der K. bezier-Kurve, Anfang der (K+1). Kurve

Ich denke, eine ähnliche Funktion für quadraticCurveTo wäre nicht schwer zu schreiben.