Zeichnung Hälfte eines Bézier-Pfades in Raphael

Question

Lassen Sie uns sagen, dass ich einen kubischen Bezier-Pfad haben als (formatiert für die Verwendung mit der Bahnfunktion Raphael) folgt:

M55 246S55 247 55 248

nur ein Beispiel. Dies wurde meiner Zeichnungsanwendung entnommen, wo ich den Cursor verwende, um eine Linie zu zeichnen, wenn der Benutzer die Maustaste gedrückt hält, etwa wie ein Bleistift oder eine Markierung. Ich verwende jquery's mousemove-Ereignis, um die Linie zwischen zwei Punkten jedes Mal zu zeichnen, wenn der Benutzer die Maus bewegt. Bevor die Linie gezeichnet wird, gibt es einen weiteren (den Referenzpunkt), so dass die Bezier-Kurve erstellt werden kann.

Hier ist meine Frage: ist es möglich, Raphael nur die Hälfte eines bestimmten Weges zu zeichnen? Ich kenne die Funktion getSubpath(), aber wenn ich die Bezier-Kurven richtig verstanden habe, wäre es ziemlich schwierig, das zweite Argument zu berechnen. Das Problem mit der Animate-Funktion ist, dass sie doppelte Linien erzeugt (dh, sie erzeugt die gekrümmte Linie, die ich möchte, und die kastenförmige Linie, die nicht gezeigt werden sollte, möglicherweise, weil die Maus schneller bewegt wird, als die Animation verarbeiten kann)).

Natürlich, wenn mein Ansatz selbst in irgendeiner Weise fehlerhaft ist (oder mein Verständnis der möglichen Lösungen), würde ich es gerne hören. Jede Hilfe wäre willkommen.

Answer 1

Es ist ein bisschen chaotisch, aber vielleicht wird diese beantworten:

line[line.length] = paper.path(drawPath); //drawPath being the fill line length 

//get a subpath, being half the length of your bezier curve 
subPath = line[line.length - 1].getSubpath(0, line[line.length - 1].getTotalLength()/2); 

//remove the full-length bezier curve 
line[line.length - 1].remove(); 

//Draw your new line 
line[line.length - 1] = paper.path(subpath); 

Ehrlich gesagt, das dies sehr ineffizient ist. Aber ich kann mir keinen besseren Weg vorstellen. Sie können nicht einfach die Tangente greifen und durch die Hälfte teilen, da eine Bezier-Kurve länger ist als die Länge einer Tangente (in der Luftlinie). Dies bedeutet, dass Sie die Linie über Rapheal bearbeiten müssen und dann einen subPath von der halben Länge erhalten.

Answer 2

Der Mittelpunkt kann berechnet werden, keine Funktionalität in Raffael bewusst, die den Bezier für Sie in die Hälfte schneiden wird.

Von den Blicken dieser Befehle, es ist Standard SVG-Markup (siehe die SVG-Spezifikation es besser zu verstehen: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands)

M => MoveTo die absolute Position 55,24 S => Glatte Kurve auf die absolute 55,247 55,248

Glatte Kurve kann als Standard CurveTo oder C umgeschrieben werden, wenn Sie möchten, S ist nur die Kurzschrift dafür und die Kurveto/C können Sie leicht den Mittelpunkt berechnen.

Answer 3

Eine Bezierkurve in zwei Hälften teilen ist nur ein bisschen Mathematik, nichts zu schwer. Sie könnten durch die path extensions for raphaël geholfen werden, und es sollte ziemlich einfach sein, eine Methode dort hinzuzufügen, um das Teilen zu tun.

Der Teil "nur ein bisschen Mathe" könnte z. B. De Castelau's algorithm zum Aufteilen der Kurve an einem beliebigen Punkt verwenden.