캔버스 크기를 조정할 때 팬 및 확대/축소 캔버스 문제

Question

이 stackoverflow answer (live demo here)에있는 코드를 사용하여 내 캔버스에 팬 & 줌을 구현했습니다. 이것은 잘 작동하지만 문제가 있습니다.

내 전체 페이지가 캔버스이므로 브라우저의 크기가 조정될 때 캔버스의 크기도 조정됩니다. 어떤 코드도없이 이것은 단지 끔찍한 캔버스 스트레치를 만듭니다. 브라우저 크기를 조정할 때 jQuery를 설정하여 캔버스의 크기를 조정하면 나중에 정말 이상한 패닝 문제가 발생합니다.

캔버스의 크기가 조정 된 후 팬 및 확대/축소가 계속 작동하도록하려면 어떤 변수를 업데이트하거나 업데이트해야하는지 잘 모르겠습니다. 귀하의 경우에는

Answer 1

당신은 줌 후 수행해야합니다

canvas.width = canvas.offsetWidth 
canvas.height = canvas.offsetHeight 

은 또한 당신이 언급 한 질문에서 library했다. 팬 및 줌 기능을 훨씬 쉽게 사용할 수 있습니다.

Answer 2

헤이 @ 크리스이 질문은 조금 오래된, 그러나 나는 같은 질문을 나 자신이 있고 이것은 내가 무슨 짓을 : @Phrogz의 기능 trackTransforms (CTX)에서

window.addEventListener('resize', function() { 
    var transform = context.getTransform(); 
    context.setTranslate(transform.e, transform.f); 
    context.setScale(transform.d, transform.d); 
} , false); 

내가 두 개의 추가 기능을 추가 :

ctx.setTranslate = function(dx, dy) { 
    translate.call(ctx, dx, dy); 
}; 
ctx.setScale = function(sx,sy) { 
    scale.call(ctx, sx, sy); 
}; 

캔버스는 모든 컨텍스트 변경 사항을 잃어 버리며 멋진 팬 줌 시스템을 만들었습니다. 이 작업은 변환을 기반으로 변경 사항을 다시 시도합니다.