Für eine meiner Anwendungen müsste ich eine gestrichelte Kurve auf dem Bezier-Pfad in Html5-Canvas zeichnen ... Die Länge des Bindestrichs und die Lücken dazwischen sollten variabel sein ... Es ist in JavaFx möglich, Siehe diesen Link ... Ich möchte den gleichen Effekt mit Html5-Canvas erreichen. Ich weiß, wie man gestrichelte Linien zeichnet, aber keine gekrümmten Linien entlang der Bezier ...
Obwohl ich kein Experte bin, kenne ich den Bezier-Zeichenalgorithmus , ein Problem, das ich damit sehe Algorithmus ist, erlaubt es Ihnen, Koordinaten auf der Bezier mit dem Zeitparameter zu identifizieren, der von 0 bis 1 reicht ...
Das reicht nicht aus, da ich, um einen gestrichelten Bezier zu zeichnen, viele kleine Beziers mit spezifizierten Längenparametern und bei gegebener Lückenentfernung auf dem Hauptzierpfad zeichnen müsste. Es muss einen Algorithmus geben, der von JavaFx verwendet wird. Wenn mir jemand helfen kann, wäre das großartig.
Ich würde annehmen, dass JavaFX eine allgemeine Technik zum Zeichnen einer gestrichelten Kurve verwendet und es zufällig in diesem Beispiel auf einem Bezier verwendet.
Der schwierige Teil besteht darin, herauszufinden, wo jeder Strich beginnen und enden soll. Dazu müssen Sie die Bogenlänge Ihres Beziers kennen Kurve an verschiedenen Punkten entlang.
Es gibt einen analytischen Ansatz, aber ich würde Folgendes vorschlagen:
%Vor% Das Hauptproblem bei diesem Ansatz ist seine unintelligente Granularität. Wenn Schritt zu groß für Ihre (kleinen) Bindestriche oder (großen) Kurve ist, wird die Schrittgröße nicht gut funktionieren und Strichgrenzen werden nicht genau dort fallen, wo Sie sie haben möchten. Wenn der Schritt zu klein ist, können Sie lineTo() s an Punkten ausführen, die einen Subpixelabstand voneinander entfernt sind, was manchmal zu AA-Artefakten führt. Das Herausfiltern von Subpixel-Abstandskoordinaten ist nicht schwierig, aber es ist ineffizient, mehr "Vertices" zu erzeugen, als Sie wirklich benötigen. Eine bessere Schrittweite zu erreichen ist etwas, das ich analytischer angehen würde.
Es gibt einen Bonus bei der Verwendung dieses Ansatzes: Wenn Sie bezier(controlPoints, t) durch alles andere ersetzen, was zu einer Kurve führt, werden Sie gestrichelte whatevers zeichnen! - wieder mit den gleichen potenziellen Problemen, die im vorherigen Absatz aufgelistet sind. Aber eine wirklich gute Lösung für das Granularitätsproblem könnte für alle "braven" Kurven funktionieren.
Tags und Links javascript math geometry html5-canvas bezier