Danielku15
Erfahrenes Mitglied
Hallo Miteinander.
Ich setze mich in meinem aktuellen Projekt mit HTML5 und dem Canvas Element auseinander. Ich glaube ich habe ein Verständnisproblem mit der Save/Restore Funktionalität. Mein Ziel ist folgendes:
Ich zeichne eine komplexe Grafik in mein Canvas und speichere diese Grafik mit Save(). Danach zeichne ich einen simplen Overlay auf diese Grafik um einige Elemente zu markieren. In einem gewissen Intervall werden diese Overlays aktualisiert. Dazu stelle ich den alten Zustand mit Restore() wiederher, speichere in erneut auf den Stack Save() und zeichne den Overlay neu. Seltsamerweise wird aber der mit Save() gespeicherte Zustand nicht wiederhergestellt. Das Coding ist jenes:
Hab ich diese save/restore Mechanismen falsch verstanden, oder habe ich einfach nur etwas vergessen?
Ich hab die Mechanismen wirklich falsch verstanden. Ich hab mir nochmals einige Dokus im Detail durchgelesen und habe herausgefunden dass lediglich Zeicheninformationen wie fillStyle, strokeStyle, lineWidth und lineJoin mit diesem save/store Mechanismus gespeichert werden. Für meinen Fall als Bild-Buffer werde ich die beiden Funktionen getImageData und putImageData verwenden müssen.
Grüße Daniel
Ich zeichne eine komplexe Grafik in mein Canvas und speichere diese Grafik mit Save(). Danach zeichne ich einen simplen Overlay auf diese Grafik um einige Elemente zu markieren. In einem gewissen Intervall werden diese Overlays aktualisiert. Dazu stelle ich den alten Zustand mit Restore() wiederher, speichere in erneut auf den Stack Save() und zeichne den Overlay neu. Seltsamerweise wird aber der mit Save() gespeicherte Zustand nicht wiederhergestellt. Das Coding ist jenes:
Javascript:
net.coderline.jsgs.tablature.Tablature.prototype.OnPaint = function() {
if(this.Track == null) { // invalid data
// paint info message
this.PaintBackground();
var text = this.ErrorMessage;
this.Canvas.setFillStyle("#4e4e4e");
this.Canvas.setFont("20px Arial");
this.Canvas.setTextBaseline("middle");
this.Canvas.fillText(text,20,30);
return;
}
else if(this.UpdateDisplay) { // complex update
// paint complex graphics
this.PaintBackground();
var displayRect = new net.coderline.jsgs.model.Rectangle(0,0,this.Width,this.Height);
this.ViewLayout.PaintCache(this.Canvas,displayRect,0,0);
// save state of complex graphics
this.Canvas.save();
this.UpdateDisplay = false;
}
else { // overlay update
// restore complex graphics
this.Canvas.restore();
// and save it for next restore
this.Canvas.save();
}
// paint overlay
this.PaintCaret();
}Ich hab die Mechanismen wirklich falsch verstanden. Ich hab mir nochmals einige Dokus im Detail durchgelesen und habe herausgefunden dass lediglich Zeicheninformationen wie fillStyle, strokeStyle, lineWidth und lineJoin mit diesem save/store Mechanismus gespeichert werden. Für meinen Fall als Bild-Buffer werde ich die beiden Funktionen getImageData und putImageData verwenden müssen.
Grüße Daniel
Zuletzt bearbeitet:
