getImageData로 크기 조정 캔버스

Question

사용자가 터치/스타일러스를 사용하여 실제로 캔버스에 그릴 수있는 응용 프로그램을 개발 중입니다. 인터페이스의 일부는 전체 화면을 채우기 위해 캔버스의 크기를 늘려 더 많은 부동산을 허용하는 '크기 조정 버튼'입니다.

현재 캔버스가 확대되면 getImageData 및 putImageData를 사용하여 작은 캔버스를 복사하고 다시 그립니다. 이것은 어느 정도까지 잘 작동합니다.

큰 캔버스에서 그림을 그려 작은 캔버스로 되돌릴 때 자연스럽게 데이터의 일부가 잘리지 않습니다. 다시 말하지만, 문제는 아닙니다. 그러나 캔버스 자체에서 getImageData를 사용할 때 전체 화면으로 다시 전환하려면 더 작은 캔버스에 표시되는 데이터 만 복사합니다. 여기에 문제가 있습니다. 도면 데이터에 상관없이 내가에서 오전 볼 수있는, 남아하는 내가 좋아하는 것이 무엇

이다.

어떤 아이디어?

추신. 실례가 바닐라와 jQuery의 이상한 혼합, 나는 다른 사람의 제안을 신속하게 시도했다.

또한 sizer은 '크기 조정'버튼입니다. 내 캔버스 ID는 draw이고 내 캔버스는 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()을 시도했으며 어느 쪽도 실제로 작동하지 않았습니다. 어쩌면 나는 다만 그 (것)들을 완전히 이해하지 않는다! 하지만 어쨌든 비슷한 문제가있는 사람이 있다면 공유 할 것이라고 생각했습니다.