HTML5 canvas 이미지의 확대/축소 context.getImageData 버튼

Question

캔버스의 크기를 축소 한 후 context.getImageData() 문제가 있습니다. 캔버스가 HTML 페이지에 추가되었습니다.

<canvas id="canvas" width="960" height="620"></canvas> 

버튼과 같은 캔버스에 그린 그림이 있습니다.

var mx = (e) ? (e.offsetX || e.layerX) : 0; 
var my = (e) ? (e.offsetY || e.layerY) : 0; 
var cx = mx - (btn.x * this.ratio - 2; 
var cy = my - btn.y * this.ratio - 2; 
var pixels = btn.getContext().getImageData(cx, cy, 1, 1); 
for (var j : number = 3; j < pixels.data.length; j += 4) 
{ 
    if((pixels.data[j])!=0 && e) 
    { 
    console.log('mouse over'); 
} 
} 

버튼이 큰 이미지에서 슬라이스 사전이 렌더링 :

var btn = createCanvas("img.png", 0, 0, 100, 100); 
function createCanvas(img, sx , sy , w , h) 
    { 
     var canvas = document.createElement("canvas"); 
     canvas.width = w; 
     canvas.height = h; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, sx, sy, w, h, 0, 0, w, h); 

     return canvas; 
    } 

그 슬라이스 버튼/이미지는 주 캔버스에 추가 된 후 나는 마우스가 버튼 또는하지를 통해 있는지 알고 알파 채널을 테스트입니다.

this.context.drawImage(btn, 0,0, btn.width, btn.height, 100, 100, btn.width, btn.height); 

전체 캔버스의 크기를 조정하기 전에는 제대로 작동합니다.

function scale() { 
    var scale = {}; 
    scale.x = window.innerWidth/this.canvas.width; 
    scale.y = window.innerHeight/this.canvas.height; 
    var ratio = scale.x <= scale.y ? scale.x : scale.y; 
} 

캔버스의 크기를 줄인 후에는 단추의 맞음/겹치기 영역이 단추/이미지보다 큽니다. 그것은 크기가 조정되지 않았으며 원래의 너비와 높이를가집니다. 그러나 그래픽은 캔버스 크기에 따라 조정됩니다. 비율에 너비와 높이를 곱하려고 시도했지만 버튼의 이미지는 확대/축소되지만 마우스가 반응하는 영역은 버튼보다 여전히 크다. 문제를 해결하기 위해 코드에서 무엇을 변경해야합니까?

p.s. 나는 내 영어를 사과한다. :)

편집

나는 캔버스

window.addEventListener('resize', resize, false); 
window.addEventListener('orientationchange', resize, false); 
var canvas = $('#canvas'); 
var ratio = 1; 
var originalCanvasW = 800; 
var originalCanvasH = 600 
function resize(e) 
    { 
     var scale = {x: 1, y: 1}; 
     var s : string = ''; 
     scale.x = window.innerWidth/canvas.width; 
     scale.y = window.innerHeight/canvas.height; 

     ratio = scale.x <= scale.y ? scale.x : scale.y; 
     ratio = (ratio > 1) ? 1 : ratio; 

     canvas.css('width',originalCanvasW*ratio); 
     canvas.css('height',originalCanvasH*ratio); 
    } 

Answer 1

당신은 CSS와 캔버스를 확장하는을 확장하는 데 사용하는 기능. 그렇게하면 실제로 캔버스 자체에 영향을 미치지 않고 웹 사이트의 DOM 표현에 영향을 미치게됩니다. CSS를 사용하여 캔버스 크기를 조정하는 것은 대부분의 경우 권장되지 않습니다. 내부 드로잉 해상도를 변경하지 않기 때문에 캔버스가 흐리게 표시됩니다. 그러나 한 캔버스 픽셀이 더 이상 한 화면 픽셀과 동일하지 않게됩니다.

는

context.getImageData 마우스가 캔버스가에 포함 된 웹 페이지의 좌표계로 측정됩니다 사용하십시오 조정하면서 여전히 그 좌표에 대한 내부 해상도 (width="960" height="620)를 사용 않습니다.

가이 문제를 해결하려면 두 가지 가능성 :

• 화면 픽셀 좌표 (마우스 이벤트에서)를 캔버스 픽셀 좌표 (컨텍스트 기능 호출)로 변환 할 때의 현재 배율 인수에 영향을줍니다.
• CSS를 통해 캔버스의 크기를 조정하지 마십시오. canvas.width 및 canvas.height을 직접 변경하고 그에 따라 context.scale을 조정하여 960 픽셀이 여전히 캔버스의 전체 너비가되도록합니다.

두 번째 솔루션을 사용하는 것이 좋습니다.

Answer 2

나는 마침내 관리했다고 생각합니다. @Pilipp은 오른쪽에있는 관련 칼럼의 방향과 스택 오버플로에 감사드립니다. 나는 그 게시물, stackoverflow.com/questions/14544260/과 내가 붙여 넣은 크기 조정 기능의 비트를 재작 성 발견하고 그게 효과가! 나는 행복하다, 나는 어제부터 그와 싸우고있다.