zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Erstellen einer laufenden Handschrift als SVG

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.02.2012, 13:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2012
Beiträge: 5
Dennis1985 befindet sich auf einem aufstrebenden Ast
Standard Erstellen einer laufenden Handschrift als SVG

Hallo zusammen!

Ich habe mich bisher grob in SVG eingelesen, aber keine Idee, wie ich folgendes verwirklichen kann:
Ich würde gerne eine SVG-Grafik erstellen (für die Homepage eines Grundschulpädagogik-Instituts), die so aussieht, als würde gerade jemand auf dem Bildschirm die Worte "Grundschulpädagogik Deutsch" in Echtzeit schreiben. Ist das einfach zu verwirklichen oder eher kompliziert?
Cool wäre, wenn man JavaScript vermeiden könnte.
Vielen Dank vorab!

Grüße,
Dennis
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.02.2012, 16:46
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

SVG baut auf geometrischen Figuren auf, eine Handschrift ist das eben nicht, weil zu ungleichmäßig. Nimm doch ein gif mit 8 Farben (smooth) und Transparenz und lass das animieren. Solltest mit 40 frames hinkommen: 100k oder kleiner. (geschätzt)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.02.2012, 18:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2012
Beiträge: 5
Dennis1985 befindet sich auf einem aufstrebenden Ast
Standard

ich habe von meinem prof folgende datei erhalten, die aus handschriftdaten erstellt wurde:
http://classicservice.bplaced.net/test2.svg
diese hat den effekt "verblassen". also geht es doch eigentlich schon mit "svg", oder?
ich bin wirklich ein laie, wie stelle ich es denn mit gif an? gibt es ein programm?
danke vorab!

falls ich mich missverständlich ausgedrückt haben sollte, so soll das aussehen (nur mit echten handschriftdaten):

http://classicservice.bplaced.net/test.gif

Geändert von Dennis1985 (29.02.2012 um 18:51 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 06.03.2012, 10:15
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

SVG ist schon sehr sparsam, was die Dateigrösse angeht. Aber ich kenne das Format auch nicht so gut. "Verblassen" blendet Dir aber nur die ganze Grafik ein oder aus. Du müßtest also sehr viele Grafiken anlegen und dann kannst Du gleich ein gif nehmen, zumal die Illusion des "Schreibens" damit nicht geht.
Aber vielleicht hat svg entlang des Paths eine andere Funktion dafür.

Animierte Gifs kannst Du mit jedem halbwegs tauglichen Grafikprogramm erstellen. Du nimmst die immer gleiche Grafik, Beispiel der Name "Bernd" und radierst ( oder malst weiß z.B.) erstmal alles aus, dann läßt Du einen Teil stehen und dann nochmal ein Teil. Das Grafikprogramm erstellt dann in der gewünschten Reihenfolge (grafiken nummerieren kann helfen) ein animiertes gif und erzeugt den Eindruck des "Schreibens" wenn man es geschickt macht.

Obiges habe ich fett geschrieben, weil ich denke, dass es dafür eine Funktion in svg gibt - du musst sie nur finden.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 08.03.2012, 10:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 748
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

SVG (ohne JS polyfill) kannst du vergessen. Das wird meines Wissens vom IE < 9 nicht unterstützt. Selbst der IE9 unterstützt dann nicht SMIL, was ziemlich sicher auch bedeutet: JavaScript muss sein. (Ob SMIL überhaupt eine Option wäre, weiß ich nicht.)

Quelle: When can I use... Support tables for HTML5, CSS3, etc

Generell solltest du dich fragen, ob ein ziemlich sekundäres Feature den Aufwand wert ist. Der ist nämlich so oder so meiner Einschätzung nach erheblich. Selbst wenn du fertigen Code findest, muss der Handschrift-Pfad ja definiert werden.

Hast du so ein Script schon mal irgendwo gesehen?

(Ich weiß von dieser einen Mozilla-Aktion, bei der Unterschriften geschrieben werden konnten… Aber habe alle Links dazu gelöscht und glaube, das Zeugs war zuletzt ohnehin wieder offline.)

Falls du dazu was findest, würde mich das interessieren.

Ein halbwegs guter Suchbegriff wäre etwa: „svg draw path progressive“

- javascript - How to draw a vector path progressively? (Raphael.js) - Stack Overflow
Mit Zitat antworten
  #6 (permalink)  
Alt 08.03.2012, 10:39
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von mermshaus Beitrag anzeigen
muss der Handschrift-Pfad ja definiert werden
Das ist ziemlich einfach, hier mit Inkscape



mit Illustrator geht das auch, wie, findest du im unten verlinkten Tutorial...


Zitat:
Zitat von mermshaus Beitrag anzeigen
Hast du so ein Script schon mal irgendwo gesehen?
jVectorMap arbeitet z.B. mit definierten Pfaden, hier findest ein Tut, wie du dort eigene Pfade definieren kannst jQuery-Tutorial: SVG-Daten mit jVectorMap darstellen - Matthias Schütz

Geändert von cebito (08.03.2012 um 10:42 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.03.2012, 10:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 748
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

Wie ich es verstehe, ist die Aufgabe:

Umwandlung eines Scans eines handgeschriebenen Worts in einen SVG-Pfad, dessen Nodes so arrangiert sind, dass sich durch zeitlich voranschreitendes Einblenden von Folgenodes der Eindruck ergibt, das Wort würde in Echtzeit geschrieben.

Wegen t-Strichen und i-Punkten und generell Stellen, an denen neu angesetzt werden muss, müssten es vermutlich sogar mehrere Pfade sein.

Geändert von mermshaus (08.03.2012 um 11:01 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.03.2012, 11:08
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Mehrere Pfade werden dort untereinander aufgelistet, man kann sich jeden einzelnen kopieren. Die Daten könnte man dann nutzen um in einem Canvas das Ganze nachzuzeichnen - auch animiert. Ohne JavaScript kommst dabei freilich nicht aus.
Mit Zitat antworten
  #9 (permalink)  
Alt 08.03.2012, 11:20
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 748
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

Ich weiß nicht, was Inkscape so treibt. Nutze das zwar auch, aber noch nie für so was. Die Umwandlung des Scans in einen Pfad sollte generell durch etwas Gebastel machbar sein, oder?

Aber müsste man nicht dennoch wahrscheinlich an allen möglichen Stellen Hand anlegen, um etwa Bögen (l, e, o, …) zu reparieren (da muss der Pfad ja ein Stück „rückwärts“ laufen)?

Wie sieht es generell mit Bezier-Kurven aus? Deren Schwünge sind ja in der „unfixierten“ Variante (mir fehlt Vokabular) vom Folgepunkt abhängig, der aber bei fortschreitender Darstellung noch nicht existiert, sodass die Kurve dann theoretisch nachträglich ihren Verlauf ändern würde, wenn sie nicht „korrekt“ definiert ist.

Zudem müssen Knotenpunkte gleichmäßig verteilt sein, sodass sich eine fließende Schreibbewegung ergibt.

Das ist alles nicht mein Gebiet, ich glaube aber, mit der ganzen Sache kann man sich schon eine ganze Zeit beschäftigen…

Edit: Wobei das Bezierproblem wohl wegfällt, wenn du auf canvas zeichnest? Das ist ja afaik Raster.

Geändert von mermshaus (08.03.2012 um 11:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.03.2012, 11:24
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Einen Pfad bekommst du, wenn du ein bspw. eingescanntes Bild öffnest und dann auf Pfad -> Bitmap vectorisieren gehst, da gibbet dann noch paar Optionen, hab dir mal das Erstbeste zu rausgesucht Inkscape tutorial: Vektorisieren

Zu deinem Edit - auf Canvas kannst du beides - einzelne Pixel manipulieren aber auch Pfade definieren und zeichnen... http://canvas.quaese.de/

Geändert von cebito (08.03.2012 um 11:31 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Website erstellen - Layout Probleme Jerry0022 CSS 3 14.06.2011 18:30
Wie Hintergrundkachel bei em-Angaben erstellen? Mr.T CSS 19 16.06.2007 03:29
Faux Columns Hintergrund erstellen SPMan CSS 24 25.05.2007 15:58
Image erstellen: "Norton Ghost" vs. "Acronis True Image" vs. "Phoenix Backup" Lloyd Larkin Offtopic 8 14.09.2006 21:59
Forum erstellen! :( lippoli15 Serveradministration und serverseitige Scripte 3 17.03.2005 20:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:38 Uhr.