[Javascript] Grafik entlang einer Kurve verzerren

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript-grafik-entlang-einer-kurve-verzerren_246273/page_1 - zur Vollversion wechseln!

Ahoi!

Ich arbeite gerade an einem Projekt bei dem es darum geht Winddaten durch Pfeile zu visualisieren. Dazu werden Streamlines berechnet um dann Pfeile entlang dieser Linien zu zeichnen. Die einfache Möglichkeit wäre wohl an das Ende einer solchen Streamline einen Pfeilmarker zu setzen. Aber ich würd lieber eine Pfeilgrafik entland der Linie verzerren.

Hab mir dazu mal nen SVG Pfeil in Inkscape gezeichnet. Dort kann ich den dann auch unter "Path Effect Editor" -> "Bend" mittels Bezier Kurve beliebig verzerren. Schaut dann zb. so aus:


Jetzt such ich ne Javascript Library die genau das kann. Aber irgendwie werd ich nicht fündig. Entweder gibts sowas tatsächlich nicht oder ich finds nicht. CSS3 kann sowas mit Text, aber für beliebige SVG-Grafiken wirds damit nicht funktionieren. Und alles was ich an javascript-Libraries im Zusammenhang mit SVG finde, is entweder sehr basic (zeichnen von einfachen Shapes) oder kann zwar alle möglichen Animationen, aber keine Verzerrung entlang einer Kurve.

Hat hier vllt jemand ne Idee?

tia!

würd mich wundern wenn sowas mit z.B. d3 nicht geht

edit: sowas z.b.: http://bl.ocks.org/larskotthoff/7830074 bzw. http://jsfiddle.net/manojmcet/BcW8z/

hat halt leicht anderen anwendungsfall aber der beispielcode sollte reichen um pfeile in diversen formen zu zeichnen

Danke, damit sind einfachen Pfeile problemlos möglich. Bei dem Pfeil aus meinem Beispiel oben bin ich mir aber nicht ganz sicher. Der besteht ja aus 7 Knoten mit Pfaden dazwischen die entsprechend verzerrt werden müssen.

Wobei, ich könnt den auch aus zwei einfachen zusammen setzen. Also ein größerer blauer mit nem kleineren weißen innerhalb. Werd mich mal rumspielen. Danke auf jeden Fall, hat mir gleich nen neuen Ansatz gebracht!

Eventuell blöde Frage, aber muss es JavaScript sein?

Sonst nämlich Python + Matlab Plot

Ja, da auf cesiumjs aufgebaut wird.

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025