Question

我试图通过转换来改变我的canvas。我使用scale（-1，-1）将其颠倒。但是画布内的可点击区域不受此变换的影响。谷歌没有解决这个问题的答案。我认为它真的很奇怪。有人能解释为什么吗？并且可能会针对此问题提供解决方法。

这是fiddle。我在研究我的问题时遇到过这个问题。尝试使用transform:scale(-1,-1);等CSS规则对其进行转换。即使代码清楚地从画布中拾取像素（被点击），可点击区域也会被搞砸。

Answer 1

如果它只是缩放，那么只需将鼠标转换为相同的颜色。

mouse.x = ?
mouse.y = ?
var scalex = -1;
var scaley = -1;
mouse.tx = mouse.x * scalex;
mouse.ty = mouse.y * scaley;

但我猜你也会移动你正在绘制的图像，以便你可以看到它。

所以你可能做过像

这样的事情

var drawImage(image,-200,-200); // move image back onto the canvas

您必须对鼠标执行相同操作（缩放和平移）。当您执行转换的反向时，您可以反向执行。因此，当您缩放然后平移时，您可以通过平移，然后缩放来反转它。

var box = {  // a hit region in normal screen coordinates.
    x : 20,
    y : 20,
    w : 60,
    h : 60,
}
// the mouse 
mouse.x = ?
mouse.y = ?
// the scale on translations so you can see the box
var scalex = -1;
var scaley = -1;
var originx = -200;
var originy = -200;

// transform the mouse screen coords into transformed canvas space
mouse.tx = mouse.x + orginx;  // translate first
mouse.ty = mouse.y + orginy;
mouse.tx *= scalex;   // then scale
mouse.ty *= scaley;

// draw the transformed image/box/whatever
ctx.scale(scalex,scaley);
ctx.translate(originx,originy);
ctx.strokeRect(box.x,box.y,box.w,box.h);  // draw the back to front box

// is the mouse over the hit region and hence the box
if(mouse.tx > box.x && mouse.tx < box.x + box.w && mouse.ty > box.y && mouse.ty < box.y + box.h){
    ctx.fillStyle = "red"
    ctx.fillRect(box.x,box.y,box.w,box.h);
}

这是只有缩放和平移的简单版本，只要你不旋转它就适用于所有比例和翻译。如果旋转，则需要进行完全反转。您可以在此问题HTML Canvas, mouse position after scale and translate

中找到如何执行此操作

转换画布不会影响可点击区域

1 个答案: