getImageDataを使用したキャンバスのサイズ変更

Question

私はユーザーが物理的にタッチ/スタイラスを使用してキャンバスに描画できるアプリケーションを開発しています。インターフェイスの一部には「サイズ変更ボタン」があり、キャンバスのサイズを拡大して画面全体を埋めることで、より多くの不動産を購入できます。

現在、getImageDataとputImageDataを使用して小さなキャンバスをコピーし、キャンバスを拡大した後に再描画します。これは、ある程度はうまくいく。

大きなキャンバスに描画して小さなキャンバスに戻すと、データの一部が切り取られるという問題があります。もう一度、問題ではありません。しかし、キャンバス自体でgetImageDataを使用しているときに、フルスクリーンのAGAINに切り替えると、小さなキャンバスに表示されるデータだけがコピーされます。ここに問題があります。描画データが残っするために、私は希望何

は、私が午前閲覧かかわらずである。

任意のアイデア？

PS。バニラとjQueryの私の奇妙な組み合わせを間違えて、私は他の誰かの提案をすぐに試していた。

また、sizerは「サイズ変更」ボタンです。 drawはキャンバスID、right-panelはキャンバスをラップします。

var panelWidth = $(".right-panel").width(); 
var panelHeight = $(".right-panel").height(); 

var c = document.getElementById("draw"); 
var ctx = c.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, panelWidth, panelHeight); 

$(".sizer").click(function(){ 
    var imgData = ctx.getImageData(0, 0, panelWidth, panelHeight); 
    $('.right-panel').toggleClass('huge'); 
    var width = $(".right-panel").css("width"); 
    var height = $(".right-panel").css("height"); 
    var el = $("canvas"); 
    el.attr("width", width); 
    el.attr("height", height); 
    panelWidth = $(".right-panel").css("width").replace(/[^-\d\.]/g, ''); 
    panelHeight = $(".right-panel").css("height").replace(/[^-\d\.]/g, ''); 
    ctx.fillStyle = "red"; 
    ctx.fillRect(0, 0, panelWidth, panelHeight); 
    ctx.putImageData(imgData, 0, 0); 
}); 

Answer 1

最終的に正しいかどうかは分かりませんでした。 :) 私がやったことは、最初は大きなキャンバスを作成し、コンテナのオーバーフローを制限することでした。次に、「サイザー」アイコンをクリックすると、残りのキャンバスが効果的に表示されます。シンプルですが、機能します。

私はgetImageDataとdrawImage()を試してみましたが、どちらも実際に働いていませんでした。たぶん私はそれらを完全に理解していないでしょう！しかし、とにかく、誰かが似たような問題を抱えている場合は、私が共有すると思った。