Web Worker - Layoutprozess und Zeichnen in Canvas

Danielku15

Erfahrenes Mitglied
Hallo Miteinander.
Ich möchte meine JavaScript Bibliothek erweitern sodass ich den internen Layoutprozess sowie das Zeichnen in ein Canvas in einen Web Worker ausgelagert wird. Der synchrone Aufruf in Javascript passiert zurzeit so:
Javascript:
var songLoaded = function(song)
{
    // fire parameter callback
    if(self.options.loadCallback)
        self.options.loadCallback(song);
    ...
    self.tablature.setTrack(song.tracks[self.options.track]);
    ...
    // fire plugin callbacks
    for(var i = 0; i < self.loadCallbacks.length; i++){
        self.loadCallbacks[i](song);
    }
}

Die setTrack Methode setzt intern im Tablature Objekt das track Attribut, ruft den Layoutprozess auf und startet den Zeichenvorgang in ein Canvas (welches ebenfalls in einem Attribut abgelegt ist). [^Klick]

Um euch die Einlesearbeit zu ersparen. Auf oberster Ebene muss ich folgende Methoden Aufrufen können:
tablature.viewLayout.updateSong(); - Verwendet tablature.track
tablature.doLayout(); - Verwendet tablature.track und das ein Canvas Element (Größe setzen/lesen)
tablature.onPaint(); - Verwendet tablature.track und zeichnet ins Canvas Element

Dieser Layout und Zeichenvorgang ist nun enorm aufwändig (Viele Pfade uns Formen) wodurch die GUI kurz blockt. Ein ordentlicher Lade-Indikator mit asynchronem Verarbeiten dieser Operation über Web Worker muss also her. Aber alles leichter als gesagt. WebWorker haben starke Einschränkungen was den Zugriff auf Objekte angeht und ich benötige den Zugriff auf die oben genannten Operationen. Da diese Elemente nicht nur Datencontainer sind sondern auch eine Reihe von Operationen anbieten, können sie nicht zu JSON umgewandelt werden. (für postMessage)

Ich denke es haben sicher noch mehr Leute ein derartiges Problem doch ich konnte noch keine Lösung finden.

Grüße
Daniel
 
Zurück