Test mit bezierCurveTo()
Grundlage für mein Vorgehen habe ich der Beschreibung von developer.mozilla.org entnommen. Für die Demonstration ist es um die interaktiven Kontrollpunkte und deren Zuordnungslinien erweitert. Die Linie zum ersten Wertepaar bis Kontrollpunkt ist: lang gestrichelt, zum zweiten: kurz gestrichelt.
Das Formularfeld textarea ist geeignet, Eingaben zu verändern, Zeilen zu löschen oder hinzuzufügen.
Erklärung hierzu:
In der zweiten Zeile habe ich den Eintrag ctx.moveTo(); freigelassen. Dieser kann wie alle anderen mit Werten in den Dimensionen 400,250 eingetragen werden, um nicht außerhalb des sichbaren Bereiches zu landen. Mit diesem Eintrag beginnt die Kurve dann nicht mehr mit dem ersten Wertepaar der ersten Kurvenbeschreibung.
Der Eintrag ctx.setLineDash([5, 0]); ist notwendig, um die zu letzt gesetzte Eigenschaft für die Hilfslinie help.setLineDash([2,3]); wieder zu überschreiben.
Mit help habe ich irgendwie gehofft, so etwas wie einen zweiten Layer zu eröffnen. Falsch gedacht!
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var help = canvas.getContext("2d");
Mit help sollten alle nicht zur Kurvendemonstration gehörenden Zeichnungen ihre Eigenschaften erhalten. So etwas ist also für das canvas-Element nicht vorgesehen. Schade!!! Damit fällt auch die Arbeit mit Objektgruppen aus.
Wer aus Grafikprogrammen die Arbeit mit Pfaden kennt, wird hier umdenken müssen. Die Kontrollpunkte erhalten hier eine andere Zuordnung zu den Knotenpunkten.
Um irgendwie ein Verständnis zu erlangen, muss ich einen Umweg beschreiten. In Illustrator einen „annähernden“ Kreis aus vier Kurvenpunkten konstruiert, mittels plugin „ai2canvas“ ein Dokument erstellt und die Attribute nebst Werten hierher kopiert.
ktx.beginPath(); ktx.moveTo(110, 10); ktx.bezierCurveTo(165, 10,210, 55,210,110); ktx.bezierCurveTo(210,165,165,210,110,210); ktx.bezierCurveTo( 55,210, 10,155, 10,110); ktx.bezierCurveTo( 10, 55, 55, 10,110, 10); ktx.closePath(); ktx.fillStyle = "rgb(255, 255, 255)"; ktx.fill(); ktx.lineWidth = 2; ktx.strokeStyle = "black"; ktx.stroke();
Die Kreisabbildung ist genähert, da ich zur besseren Übersicht keine Dezimalzahlen einsetze. Die Verwirrung ist schon groß genug.
Es folgt der Versuch, die Knotenpunkte zu beschreiben. Es muss hier umgedacht werden. Der erste Kontrollpunkt (kp1=blau) des ersten Knotens (k=blau) ist für das Verständnis aus Sicht eines Freehand- oder Illustrator-Grafikers der Vektor zum Vorgänger, falls vorhanden. Dies erfüllt der Vektor, nur hat dieser nicht die von mir erwarteten Koordinaten: x 210, y ca. -55% des Knotens [(110-10)*.55 = 55]. Für den Vektor (kp2=blau) würde gelten: [(100*.55)+110 = 165], aber den Wert hat schon Vektor kp1=blau. Das gilt nun für alle weiteren Knoten und Bézierpunkte/Kontrollpunkte.
Bei einer solchen, für mich verwirrenden Kurvenbeschreibung kommt mir in den Sinn, dass vielleicht garnicht davon ausgegangen wird, so etwas von Hand schreiben zu wollen.
Wer nicht weiter weiß, malt erst mal nen Kreis.
Gut, einen solchen kann man auch gleich als Kreis definieren. Aus Freehand kenne ich „Gruppierung aufheben“ und erhält dann von einem Kreis ausgehend eine solche Darstellung. Dies ist nun für mich nachvollzieh- und replizierbar. Deshalb der kreisnahe Pfad aus vier Knoten. Aber auf bezierCurveTo() ist das mit den erfassten Vektoren nicht übertragbar. Nun gut, dann kann nur noch Illustrator selbst auf dem Exportumweg weiterhelfen. Wahrscheinlich ist das auch das einzige Mittel zum Erfolg.