0

ここに私のページがあります http://www.dev.1over0.com/canvas/canvas_web.html

元に戻す機能に問題があります – 近づいていると思いますが、ここに問題があります

最初に、描画アプリケーションの基本について説明します。4 つの異なるキャンバスをレイヤー化 していますhttp://www.dev.1over0.com/canvas/js/canvas_web.js js ファイルを見ると、上部には、キャンバスで行っていることに関するすべてのコメントがあります

ユーザーがツールを使用して描画すると、実際には imageTemp キャンバス上で最初に一時的に描画されます。各ツールには独自のオブジェクト (鉛筆、四角形、線) があり、mousedown、mousemove、および mouseup イベント用の関数が含まれています。

mouseup イベントの最後に、この関数を呼び出します

function img_update() {
contexto.drawImage(canvas, 0, 0);
saveActions();
context.clearRect(0, 0, canvas.width, canvas.height);
}

ここで、一時キャンバスにある画像は最終的に imageView キャンバスに描画されるため、基本的に imageTemp キャンバスは毎回消去されます

したがって、元に戻す機能のために、最初に空の配列を宣言します

var undoHistory = [];

新しいイメージも宣言します

var undoImg = new Image();

img_update が呼び出されると、別の関数 saveActions が呼び出されます

function saveActions() {
var imgData = canvaso.toDataURL("image/png");
undoHistory.push(imgData);
$('#undo_canvas button').removeAttr('disabled');
}

この関数では、新しく描画されたイメージ キャンバスを undoHistory 配列に保存しています。これは正常に動作しているようです (私は信じています)。したがって、永続的な imageView キャンバスが更新されるたびに、その状態が配列に保存されます。

画像を描画して imageView キャンバスに保存すると、元に戻すボタンが有効になります。

したがって、元に戻すボタンをクリックすると、この関数が呼び出されます

function undoDraw() {
if(undoHistory.length > 0){ 
$(undoImg).load(function(){
contexto.drawImage(undoImg, 0,0);
 });
undoImg.src = undoHistory.pop();
if(undoHistory.length == 0) { 
$('#undo_canvas button').attr('disabled','disabled');
}
}
}

ここで私がやろうとしているのは、前の画像の状態を取得してキャンバスに描画することです。画像の z-index に影響を与えますが、画像を取り除くことはありません。2 回クリックする必要があります。それは私を混乱させます

したがって、3 つの長方形を重ねて描画してみることができれば、[元に戻す] ボタンをクリックすると、z-index が影響を受けます。3 回クリックすると、私の意図がわかるはずです。

4

1 に答える 1

1

最後の画像を描画する前にキャンバスをクリアする必要があります。そうしないと、前のキャンバスに画像が描画されます。また、押し込んだばかりの最後の画像をポップします（これが、2回クリックする必要がある理由です）。したがって、このようなものを試してください（コードを調整する必要があるかもしれませんが、箱から出してすぐに機能するかどうかはわかりません）

function undoDraw(){
   if(undoHistory.length > 0){ 
      $(undoImg).load(function(){
          contexto.clearRect(0,0, canvas.width, canvas.height);     
          contexto.drawImage(undoImg, 0,0);
     });
   undoHistory.pop();
   undoImg.src = undoHistory.pop();
   if(undoHistory.length == 0) { 
   $('#undo_canvas button').attr('disabled','disabled');
        }
     }                
}
于 2012-06-22T15:20:04.003 に答える