Für Android/Opera Mobile: Via Display eine Unterschrift setzen

[obiwan1973]

Hallo zusammen,

ich habe hier was ganz kniffeliges:

Ich habe den Auftrag erhalten, für eine Android/OperaMobile Web App, die bereits im Einsatz ist, ein neues Feature zu programmieren:
Die Möglichkeit, über das Display eine elektronische Unterschrift einzugeben.

Meine aktuelle Idee:

Ich nehme eine winzig kleine Ebene/DIV, die gerade so groß ist, dass der Daumen drauf geht.
Das Ding wird aussehen wie ein Kugelschreiber.

Über ein bissel JS/CSS-Code würde ich dann dafür sorgen, dass man die Ebene mit der Maus (am PC) bzw. mit dem Finger bewegen kann.
Das geht schon mal, da bin isch mol janz sischer!

Aber wie speichere ich die Bewegung?
Und dann auch noch so, dass man sie wieder abfrufen kann?

Die Position der Maus/des Cursors/des Fingers kann ich in Pixeln speichern.
Das kann ich auch noch.

Ich hätte da zwei Möglichkeiten:

• Ich speichere alle Pixelpositionen als String,
    und lege den irgendwo ab, bspw. in einer DB-Tabelle.
    Und bei Bedarf könnte ich in den String per Schleife
    auslesen und die einzelnen Pixel als Punkte auf dem
    Bildschirm darstellen.

• Oder ich versuche was mit einer Leinwand/Canvas
    oder so ähnlich.
    Kann das Opera Mobile?
    Ich glaube, das ist was FF-spezifisches, oder?

Habe ich was übersehen, oder gibt es eine dritte, einfachere Möglichkeit?

Wenn ich es mir direkt überlege, finde ich meinen ersten Weg gar nicht mal schlecht.
Er ist browserunabhängig und ich habe die Pixel als String, also jederzeit abruf- und darstellbar.

Freue mich auf Input.

Gruß

Thomas

[Encoder]

Du willst eine Unterschrift realisieren bei der man zuerst den "Stift" suchen und festhalten muss? Und ihn dann in möglichst einem Zug über den Bildschirm bewegen?
Schlechte Idee. Das geht in die Hose!

Ich würde hier mit den Events MouseDown, MouseMove, MouseUp was basteln, das dir den gezeichneten Pfad speichert. Als Folge einzelner Punkte. Wenn man absetzt gibt es eine neue Folge von Punkten.

[molily]

Hallo,

Aber wie speichere ich die Bewegung?

Als Array von x/y-Positionen.

[ {x: 1, y: 1}, {x: 2, y: 2}, … ]

Man muss sich natürlich überlegen, relativ zu welchem Element die Positionen gespeichert werden. Ich würde vorschlagen, relativ zur Zeichenfläche (das »Unterschriftenfeld«).

• Ich speichere alle Pixelpositionen als String,
    und lege den irgendwo ab, bspw. in einer DB-Tabelle.
    Und bei Bedarf könnte ich in den String per Schleife
    auslesen und die einzelnen Pixel als Punkte auf dem
    Bildschirm darstellen.

Ja.

• Oder ich versuche was mit einer Leinwand/Canvas
    oder so ähnlich.

Wie du die Positionen letztlich *zeichnest*, hat mit der *Speicherung* der Positionen wenig zu tun.

Du *kannst* für das Zeichnen die Canvas-2D-API verwenden, ja. Du könntest auch SVG, Flash oder eine serverseitige Technik verwenden.

Kann das Opera Mobile?
  Ich glaube, das ist was FF-spezifisches, oder?

Canvas (genauer gesagt der 2D-Kontext für das HTML5-Element canvas) ist breit implementierter Webstandard.

Er ist browserunabhängig und ich habe die Pixel als String, also jederzeit abruf- und darstellbar.

Ja, *das* solltest du auf jeden Fall tun.

Grüße
Mathias

[obiwan1973]

Hallo,

da sich die Aufgabenstellung etwas verändert hat, hier mein neuer Beitrag:

http://forum.de.selfhtml.org/?t=215929&m=1479342