JavaScript Progressives Ausfüllen von Vektorgrafiken in HTML5

[stice]

Hey Leute, ich stecke in einer Sackgasse fest.

Das Ziel: Animation von Flourish, primitives Flash-Beispiel hier

Rahmenbedingungen:
- Perfomant
- Hohe Browserkompatibilität
- Kein Flash

Meine ersten Überlegungen galten der Schablone, von Hand ausschneiden, wie invertieren, wie bekomme ich das Loch in die Schablone etc.
Im Endeffekt bin ich jetzt dabei gelandet die eigentliche Form in Inkscape zu erstellen (1) und dann entweder mit Rahmen invertieren (2) oder aus größeren Blöcken ausschneiden (3).

Zur Animation habe ich mit folgendem getestet:
- EaselJS: Habe das Zeichnen soweit hinbekommen das es einem Pfad folgen und diesen nach und nach ausfüllen könnte (demo). Allerdings ist die Performance nicht wirklich berauschend, vor allem wenn mehrere Zeichnungen parallel ausgeführt werden sollen. Dafür kann man die gewünschte Breite angeben und das Timing der Animationsstarts/stops dürfte relativ einfach sein.
- Snap.SVG: Arbeitet direkt mit SVGs. Scheint perfomanter, unterstützt allerdings kein direktes Zeichnen. Bin dafür über dieses hilfreiche Tutorial gestolpert (unten auf EDIT/RUN klicken).
- Direkte Animation der SVGs: Mit ein bisschen Hilfe kann man in SVGs direkt progressiv zeichnen, siehe dieses Beispiel.

Nachteil von Snap.SVG und der direkten Animation ist: Keine variable Breite. Diese wird beim Start der Animation festgelegt.
Das führt zu dem Problem, dass man zum füllen der Schablonen immer die höchste Breite nehmen muss. Damit der gezeichnete Strich nun nicht unter der Schablone hervorragt muss der Rahmen dieser also ebenfalls immer die maximale Breite haben. Das führt jetzt allerdings dazu, dass die Schablonen sich stark überschneiden, und man beim zeitgleichem Füllen die Ränder sieht.

Gehen würde es theoretisch wenn man den Hauptstrang zuerst zeichnet, die "gefüllte" Schablone dann durch das Original, also nicht-invertierte ersetzt, die anderen Schablonen dann unter dieses Original schiebt und unter diesen Schablonen dann weiter zeichnet. Allerdings erlaubt das kein paralleles Zeichnen, was im Endeffekt kacke aussehen würde.
Es soll ja so aussehen als wenn der Ast direkt wachsen würde.

Habt ihr Ideen wie das Problem einfacher/besser zu lösen wäre?
Bin für jeden Ratschlag dankbar.

stice

 

[Enigma]

Ich bin kein Designer, aber ich glaub, dass du auf dem richtigen Weg bist und die Lösung eigentlich schon vorliegt. Man muss es nur noch etwas "tunen" damit es auf deinen Anwendungsfall passt. Tunen heisst z.B. die Programmierung erweitern, dass auch eine variable Breite möglich ist. Als Programmierer sehe ich da jetzt kein grundlegendes Problem, man müsste in der Draw-Funktion eine variable Breite zusammen mit dem Path definieren. Leider habe ich nicht die Zeit das für dich zu lösen. Aber ich denke, damit kommst du weiter

 

[RagingBlast]

@Enigma: Verstehe den Sinn deiner Aussage nicht. Der TE sagt doch ganz klar, dass das nicht möglich sei. Deine Antwort klingt ziemlich nach abstraktem, generischem "Ich habe selber Null Ahnung will aber cool klingen".