letzte Aktion rückgängig machen

[rernanded]

Hallo

brauche Idee für eine Funktion um die letzte Aktion (hier : Ziehen einer Linie in einem canvas) rückgängig zu machen.
Wird sich wahrscheinlich auf
lastX = x;
lastY = y;
beziehen.

Moni

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
ctx = document.getElementById('canvas123').getContext("2d");

$('#canvas123').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});

$('#canvas123').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});



$('#canvas123').mouseup(function (e) {
mousePressed = false;
});

$('#canvas123').mouseleave(function (e) {
mousePressed = false;
});



}

function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}



lastX = x;
lastY = y;



}



function clearArea() {
// use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

 

[Parantatatam]

Die einfachste Lösung ist wohl, wenn Du vor einer Änderung den vorherigen Stand speicherst, damit Du diesen bei Bedarf wiederherstellen kannst. Wenn Du allerdings alle Zustände speichern willst, also beliebig weit zurück gehen willst, kann ich mir vorstellen, dass dann der Speicherbedarf recht hoch wird (kommt natürlich auf die Anzahl der Schritte und die Größe Deines Canvas an).

 

[rernanded]

@einfach nur crack Danke.
Ich dachte auch schon an localStorage hab aber keine Idee wie das einzubauen ist, wenns dann überhaupt das Mittel der Wahl ist.
MONI

 

[Sempervivum]

Ich glaube eher nicht, dass Localstorage das Mittel der Wahl ist. Ich habe so etwas mit getImageData() zum Sichern und putImageData() zum Wiederherstellen gemacht. Damit ist beides mit je einer Zeile Code getan. Man kann entweder das ganze Canvas oder nur einen Ausschnitt sichern.