Zeichnen von Vektoren auf dem Canvas-Element: So erstellen Sie die Vektor-Saiten

Question

Für ein Projekt muss ich gerade ein interaktives Leinwandelement implementieren. Es wird eine Form auf Leinwand geben, die in die Anzahl der Untergebiete unterteilt ist. Benutzer sollte in der Lage sein, Unterbereiche auszuwählen und verschiedene Farben in den ausgewählten Bereich anzuwenden. [Diese Bereiche sind keine Quadrate oder Kreise, sondern benutzerdefinierte Pfade]

Dies enthält etwas Ähnliches, was ich erreichen möchte. Es verwendet kinetic.js. Es zeigt, wie die Weltkarte mithilfe von Kinetic.Path () -Methode - mit Vektor-Saiten für jedes Land zeichnet.

Bitte setzen Sie mich auf die Linie, um etwas Ähnliches für Fußform / oder andere Form zu erreichen. Wie sollte ich diese Vektorzeichenfolge erhalten, um die gewünschte Form zu ziehen?

und ist das der beste Weg, um es zu tun?

Diese Datei ( http://raphaeljs.com/world/world.js ) enthält Vektor-Saiten für World-Map. Ich bin nicht sicher, wie sie es generiert haben. Dort bin ich interessiert.

Gibt es eine Möglichkeit, Vektor-Saiten aus einem Bild zu erstellen?

Answer 1

Verwenden Sie einen SVG-Editor (z. B. dies Online-SVG-Editor ).Importieren Sie dann Ihr Bild und wiederholen Sie die Elemente Ihres Bildes mithilfe von Pfaden.