HTML5キャンバスの変更履歴

キャンバスを使用してHTML5ベースのペイントアプリケーションを開発しています。今、キャンバスのすべての変更の履歴を作成したいと思います。私はユーザーの行動の歴史を意味します。HTML5キャンバスの変更履歴

どうすればいいですか？

2011-07-24 Mark

データURLをアレイに保存：http://jsfiddle.net/eGjak/54/。

var cv = $('#cv').get(0); 
var ctx = cv.getContext('2d'); 

var history = []; 

$("#b1").click(function() { 
    history.push(cv.toDataURL()); 

    ctx.beginPath(); 

    ctx.arc(Math.random() * 200 + 100, 
      Math.random() * 200 + 100, 
      Math.random() * 200, 
      0, 
      2 * Math.PI); 

    ctx.stroke(); 
}); 

$("#b2").click(function() { 
    ctx.beginPath(); 

    var img = new Image; 

    img.onload = function() { 
     ctx.clearRect(0, 0, 400, 400); 
     ctx.drawImage(img, 0, 0); 
    }; 

    img.src = history.pop(); 
});

出典

2011-07-24 11:30:19 pimvdb

を傷つける可能性がありますがRAMに問題がないこと、と思いますか？ユーザーがたくさんの行動を取る場合。 – Mark

@マーク：キャンバスのサイズによって、正しいです。しかし、ピクセルだけが保存されるので、各アクションは同じ量のメモリを使用します（描画の複雑さに関係なく、サイズのみが重要です）。私のバイブルはそれほど記憶を詰まらせません。 – pimvdb

ありがとう、ありがとう – Mark

あなたがしようとする可能性があることは、イベントの配列を作成し、あなたのonclick（または興味のあるイベント）が発生するたびにそれを入力することです。この方法では、すべてのユーザー入力の履歴があります。

以前の状態での再描画を簡略化するために、イベントのみを保存したり、使用しているツールを保存したりすることもできます。

これはあなたが望むものですか？

出典

2011-07-24 11:29:51

これは同様に私の最初の考えだったが、これはアンドゥ・プロセス（すべてやり直す全体のユーザーアクションをやり直すあなたを強制的に） – sternr

HTML5キャンバスの変更履歴

答えて

関連する問題