javascript - HTML5 canvas如何缩放图像按钮的context.getImageData

Question

缩小 Canvas 后，我遇到了 context.getImageData() 问题。我已将 Canvas 添加到 HTML 页面:

我在 Canvas 上绘制了图像，就像按钮一样。我正在测试 Alpha channel 以了解鼠标是否位于按钮上方:

var mx = (e) ? (e.offsetX || e.layerX) : 0;
var 我的 = (e) ? (e.offsetY || e.layerY) : 0;
var cx = mx - (btn.x * this.ratio - 2;
var cy = my - btn.y * this.ratio - 2;
var 像素 = btn.getContext().getImageData(cx, cy, 1, 1);
for (var j : number = 3; j 
    
     {
     
 if((pixels.data[j])!=0 && e)
     
 {
     
 console.log('鼠标悬停');
     
 }
     
}
     

    

该按钮是从大图像中切片并预渲染的:

var btn = createCanvas("img.png", 0, 0, 100, 100);
函数 createCanvas(img, sx , sy , w , h )
    {
        var canvas = document.createElement("canvas");
         Canvas 宽度=w；
         Canvas 高度=h；
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, sx, sy, w, h, 0, 0, w, h);

        返回 Canvas ；
    }

之后，将切片按钮/图像添加到主 Canvas 中。

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

它工作得很好，直到我开始缩放整个 Canvas 。

函数规模() {
   变量比例= {};
   scale.x = window.innerWidth/this.canvas.width;
   scale.y = window.innerHeight/this.canvas.height;
   变量比率=scale.x<=scale.y？比例.x : 比例.y;
}

当我缩小 Canvas 后，按钮点击/上方区域比按钮/图像本身更大。看起来它没有被缩放，并且它采用原始的宽度和高度。然而，图形会根据 Canvas 比例进行缩放。我尝试将宽度和高度乘以比率，但它缩放了按钮的图像，但鼠标 react 的区域仍然比按钮大。我应该在代码中更改什么才能解决该问题？

附:我为我的英语道歉。 :)

编辑

我用来缩放 Canvas 的函数

 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 缩放 Canvas 。当您这样做时，您实际上并没有影响 Canvas 本身，您只是影响了它在网站 DOM 中的表示。在大多数情况下，不建议使用 CSS 缩放 Canvas ，因为它不会改变内部绘图分辨率，这意味着 Canvas 将显示模糊。但这也导致一个 Canvas 像素不再相当于一个屏幕像素。

context.getImageData 仍然使用内部分辨率 (width="960"height="620) 作为其坐标，而您使用的鼠标坐标是在 Canvas 嵌入的网页的坐标系。

要解决这个问题，有两种可能:

• 将屏幕像素坐标(来自鼠标事件)转换为 Canvas 像素坐标(用于调用上下文函数)时考虑当前缩放因子。
• 不要通过 CSS 缩放 Canvas 。直接更改canvas.width和canvas.height并相应调整context.scale，使960px仍然是 Canvas 的完整宽度。

我会推荐第二种解决方案，因为它可能看起来也会好得多。