"Schöne" Kurve aus Mausbewegung

[Der Thomas]

Hallo.

Folgendes Szenario:
Der User malt etwas. Dabei sollen die gezeichneten Linien in "schönere" Linien umgewandelt werden. D.h. kleinere Ausreißer bei der Mausbewegung sollen z.B. geglättet werden.

Meine Idee ist aus den ganzen Koordinaten die ich von seinen Mausbewegungen erhalte irgendwie Bezier-Kurven zu errechnen.
Mir fehlt nur leider der Ansatz.

Das ganze soll in JavaScript (mit einem Canvas-Objekt) umgesetzt werden.
Aber im Grunde suche ich einfach einen Algorithmus oder zumindest eine Idee :)

Danke,
Thomas

[ChrisB]

Hi,

Der User malt etwas. Dabei sollen die gezeichneten Linien in "schönere" Linien umgewandelt werden. D.h. kleinere Ausreißer bei der Mausbewegung sollen z.B. geglättet werden.

Also im Grunde wohl erst mal ein typisches Interpolations-Problem.

Nur willst du nicht möglichst nah an eine Funktion heran kommen, die die „Messwerte“ *perfekt* erreicht, sondern im Gegenteil eher was „grobes“ haben, was sich einzelnen Ausreißern bewusst gar nicht allzu sehr annähert.

Meine Idee ist aus den ganzen Koordinaten die ich von seinen Mausbewegungen erhalte irgendwie Bezier-Kurven zu errechnen.

Dazu müsstest du aber schon eine Einteilung der „Punkte“ in „gute“ und „schlechte“ vornehmen (können).

Vielleicht kommst du besser zum Ziel, wenn du den User erst mal Start- und Endpunkt einer Kurve durch Klicken setzen lässt - und dann die Kontrollpunkte zum „ziehen“ anbietest ...? (Analog zur Arbeit mit dieser Funktionalität in einem Grafikprogramm.)
Die Methoden quadraticCurveTo und bezierCurveTo bietet dir ein 2D-Canvas-Context ja bereits an - die müssten dann nur noch mit entsprechenden Koordinaten gefüttert werden.

Ansonsten könnte man vielleicht erst mal mit einer gedachten Gerade von Start- zu Endpunkt beginnen, und dann die orthogonale Abweichung der Messpunkte dazwischen betrachten - kleiner einem bestimmten Grenzwert wird ignoriert, für Punkte mit größeren Abweichungen wird eine weitere Iterationsrunde dieses Verfahrens gestartet. Damit könnte man kleinere „Zitter“-Abweichungen ignorieren, größeres „Haken schlagen“ aber als bewusstes Kurven-Zeichnen klassifizieren.
Wenn man dann die „Extrem-Punkte“ hat, kann man diese Stückweise mit Kurven verbinden.
Auch dabei könnte man den Nutzer wieder mit entscheiden lassen, welche dieser Punkte er berücksichtigt haben, und welche er ggf. „löschen“ lassen möchte. Bzw. mehrere Kurven, die sich aus unterschiedlich „scharfen“ Anwendungen dieses Algorithmus ergeben (unterschiedlich hohe Grenzwerte) zur Auswahl anbieten, von denen dann wieder eine per Klick übernommen werden kann.

MfG ChrisB

[EisFuX]

(Hallo|Hi(ho)|Tag) Der Thomas,

Der User malt etwas. Dabei sollen die gezeichneten Linien in "schönere" Linien umgewandelt werden. D.h. kleinere Ausreißer bei der Mausbewegung sollen z.B. geglättet werden.

Meine Idee ist aus den ganzen Koordinaten die ich von seinen Mausbewegungen erhalte irgendwie Bezier-Kurven zu errechnen.
Mir fehlt nur leider der Ansatz.
Das ganze soll in JavaScript (mit einem Canvas-Objekt) umgesetzt werden.
Aber im Grunde suche ich einfach einen Algorithmus oder zumindest eine Idee :)

De Boor's Algorithm
Draw a Smooth Curve through a Set of 2D Points with Bezier Primitives

Ja, ich weiß: kein JavaScript, aber irgendwas is' ja immer ...

MffG
EisFuX

[Der Thomas]

Hallo.

De Boor's Algorithm
Draw a Smooth Curve through a Set of 2D Points with Bezier Primitives

Das bringt mich weiter.
Danke :)

Thomas