Einfaches Vektorgrafikprogramm im Browser programmieren

[-FX-]

Hi,

ich hatte im laufe vieler Jahre immer mal wieder mit verschiedensten Programmiersprachen zu tun, aber meist nur für Anpassungen / Programmierung einfachster kleiner Hilfstools. Also von Vielem so ein ganz kleines bisschen, aber nichts richtig

Ich würde mich gerne daran versuchen eine Webanwendung zu programmieren, in der man vorgegebene (Vektor)grafiken in Größe und Drehung manipulieren und zueinander (mittels Fang-Punkten) positionieren kann. Optimal wäre, wenn sich das Ganze noch relativ einfach in eine Smartphone-Anwendung übersetzen liese.

Noch fehlt mir im Dschungel der Programmier- & Darstellungssprachen und besonders der Frameworks der Ansatz. Daher wäre ich für ein paar Vorschläge dankbar, wo ich mal beginnen könnte mich einzulesen.

Danke
FX

 

[pseudopseudonym]

Spontan würde ich ne Node.JS-Anwendung bauen und mich bei den Modulen bedienen, die man über NPM so bekommt. React ist für das Frontend sicher keine üble Wahl, zumal es auch dafür sehr viele Erweiterungen gibt. Ich meine, dass es auch irgendein react-transformable-draggable (und ähnliches) gibt, das sich sicher gut für seine Zwecke eignet.

 

[BeBur]

Du solltest schauen, Woche Sprache dir die umfangreichsten Vektorgrafik-Manipulationen anbietet. Wenn du das von Hand machst dann wird das sehr schnell sehr aufwendig.
Das Browser hat du die zwei Optionen Javascript oder so reine Backend-Frameworks, aber ka ob diese für klappt für deinen Anwendungsfall.
Nodejs ist Backend und hat eher wenig mit dem Projekt an sich zu tun.

Fazit: Schau nach js Bibliotheken.

 

[Dalek]

Bei dieser Anwendung kommt es auf sehr direktes Feedback an wenn der Benutzer die Graphiken manipuliert, ich würde das also auf jeden Fall im Frontend machen, und nicht im Backend berechnen. Je nachdem wo die Graphiken herkommen und was sonst noch so an Features geplant ist brauchst du zumindest für den Anfang gar kein Backend.

Für Frontend ist Javascript die einfachste Version, es gibt zwar auch andere Varianten aber die würde ich nicht für den Anfang empfehlen.

Bei den Kernfeatures hilft dir keines der üblichen Frontendframeworks wie React oder Vue, ich würde daher erstmal ohne die anfangen und erst wenn du richtige UI drumherumbaust ein Framework auswählen (oder es einfach per Hand machen, wenn es eine sehr kleine Anwendung bleibt. Ich würde mir D3 mal ansehen, das ist für interactive Visualisierungen gedacht und könnte hilfreiche Features haben, aber ich bin mir nicht sicher ob es diesen Fall kann. Ansonsten einfach mal SVG libraries in Javascript ansehen ob da etwas nützliches dabei ist. Aber einfach nur Skalieren und Bewegen kann man auch recht einfach indem man das SVG selbst per Hand manipuliert indem du das transform Attribut setzt. Wenn es aber deutlich mehr als das wird würde ich mir eine Library suchen.

 

[BeBur]

Bei den Kernfeatures hilft dir keines der üblichen Frontendframeworks wie React oder Vue, ich würde daher erstmal ohne die anfangen und erst wenn du richtige UI drumherumbaust ein Framework auswählen

Ja genau. Die ganzen Funktionen einfach mit lokalem Javascript (bzw. entsprechender Bibliotheken) bauen. Wie das ganze am Ende ausgeliefert wird web-mäßig ist ja ziemlich zweitrangig.

 

[pseudopseudonym]

Nur mal so an einige hier, React ist für Frontend. Das wird zwar per Node.JS zur Verfügung gestellt, führt aber letztendlich jede Menge JavaScript im Browser des Nutzers aus.

 

[BeBur]

Das ist klar, aber es ist halt eine Interface-Library und auf welche Weise die Buttons und Slider gebaut werden ist im Prinzip erst einmal zweitrangig, weil die Kern-Funktionalität die dann hinter so einem Interface stecken wird hier im Zentrum steht und vermutlich mithilfe einer Javascript Grafik/SVG/Visualisierung-Library werden muss.
Daher der Hinweis erst einmal zu schauen, dass man das was man eigentlich machen will hinkriegt und dann erst über Backend oder Interface nachdenken.

Vielleicht denke ich auch zu kompliziert und wenn der TE genau diese drei beschriebenen Dinge tun will und nichts anderes und z.B. React genau diese Dinge aber auch anbietet, dann muss man natürlich so einen Aufriss machen. "Fangpunkte" definieren und Grafiken daran andocken klingt für mich aber out-of-scope für React.

 

[pseudopseudonym]

Vielleicht denke ich auch zu kompliziert

Jup. Mit den Transformables kannst du nämlich erstmal ein paar einfache Formen auf den Bildschirm holen und verändern und dann eben gucken, wie du das als Vektorgrafik speicherst. Dafür gibt's sicher auch ne Lib.
Das ist dann zwar erstmal sehr primitiv, aber ein Anfang.