Question

在缩小画布后，我遇到了context.getImageData（）的问题。我将画布添加到HTML页面：



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

<canvas id="canvas" width="960" height="620"></canvas> 我在画布上绘制的图像就像按钮一样。我正在测试alpha通道，以了解鼠标是否在按钮上方：

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 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;
    }

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);

this.context.drawImage(btn, 0,0, btn.width, btn.height, 100, 100, btn.width, btn.height); 在我缩小画布后，按钮按击/超过区域大于按钮/图像本身。它看起来没有缩放，它需要原始的宽度和高度。但是，图形会根据画布比例进行缩放。我尝试将宽度和高度乘以比率，但它会缩放按钮的图像，但鼠标反应的区域仍然比按钮大。我应该在代码中改变哪些问题？

P.S。我为我的英语道歉。：）

修改

我用来缩放画布的功能

Answer 1

您正在使用CSS缩放画布。当你这样做时，你实际上并没有影响画布本身，你只是影响它在网站的DOM中的表示。在大多数情况下，不建议使用CSS来缩放画布，因为它不会更改内部绘图分辨率，这意味着画布将显示为模糊。但它也导致一个画布像素不再等同于一个屏幕像素。

context.getImageData仍然使用内部分辨率（width="960" height="620）作为其坐标，而您使用的鼠标坐标是在嵌入画布的网页的坐标系中测量的。

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

当您将屏幕像素坐标（从鼠标事件）转换为画布像素坐标（用于调用上下文函数）时，当前缩放系数的因子。
不要通过CSS缩放画布。直接更改canvas.width和canvas.height并相应地调整context.scale，以便960px仍然是画布的整个宽度。

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

Answer 2

我想我终于成功了。 @Philipp感谢右侧相关列的方向和堆栈溢出。我发现帖子，stackoverflow.com/questions/14544260/和我重写了一些粘贴的调整大小功能，它有效！我很高兴，从昨天起我一直在与之抗争。

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

2 个答案: