Einstieg in Svelte | SVG Graph Editor programmieren
In diesem Tutorial entwickeln wir mit dem Web-Framework Svelte einen Graph Editor für den Browser, der Vektorgrafiken (SVGs) erzeugt. Man kann also Knoten zeichnen und sie mit Linien oder Pfeilen verbinden. Es gibt dabei verschiedene Einstellungsmöglichkeiten für die Knoten und Kanten, und natürlich kann man die Knoten auch beliebig verschieben. Das Tutorial kann auch als Einstieg in Svelte dienen.
Ein ähnliches Tutorial gab es bereits vorher auf meinem Kanal ( • Einstieg in Svelte | Graph Editor programm... ), wo allerdings keine Vektorgrafiken benutzt worden sind.
📝 Demo & Quellcode
● Demo: https://graph-editor-svg.netlify.app/
● Code: https://github.com/ScriptRaccoon/grap...
⏱ Zeitmarken
● Vorstellung des alten Projektes 00:00
● Vorstellung des Projektes 00:49
● SVG-Export 02:27
● Setup von Svelte mit Vite 03:17
● Aufbau einer Svelte-Komponente 06:06
● Canvas-Komponente 07:50
● SVG-Grundlagen 09:46
● Reaktivität mit SVGs 11:45
● SVG-Koordinatensystem 14:03
● XML-Namespace 14:59
● Liste der Knoten 16:02
● Knoten erzeugen 17:38
● Mausposition 22:00
● Knoten auswählen 23:15
● Knoten-Komponente 27:11
● Knoten verschieben 29:11
● Lebenszyklus-Funktionen 31:42
● Linie-Komponente 33:33
● Liste der Linien 35:49
● Linien erzeugen 37:22
● Vorschau der Linie 40:55
● Reaktivität der Linien 43:04
● Linie auswählen 44:44
● Rahmen um Linie 47:20
● Entfernen von Knoten/Linien 48:56
● Vergrößern von Knoten/Linien 53:59
● Verkleinern von Knoten/Linien 55:36
● Farben der Knoten 57:01
● Pfeiltypen 59:35
● Pfeilspitze 01:01:38
● Transformation der Spitze 01:07:10
● Spitze am Anfang 01:12:36
● Bugfixes 01:13:29
● Keys 01:15:55
● Abschluss 01:17:40
📙 Quellen
● Svelte Docs: https://svelte.dev/docs
● Vite: https://vitejs.dev
● SVG Tutorial: https://www.w3schools.com/graphics/sv...
💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...
#SVG #Tutorial #Svelte