Javascript 变换画布不会影响可单击区域

我试图通过转换画布来更改画布。我用比例（-1，-1）把它倒过来。但是画布内的可单击区域不受此转换的影响。谷歌对此问题没有答案。我觉得很奇怪。有人能解释一下原因吗？并有可能解决这个问题

---

这是一本书。我在研究我的问题时遇到了这个问题。尝试使用CSS规则进行转换，如

transform:scale（-1，-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);
}

var-box={//正常屏幕坐标中的命中区域。
x:20，
y:20，
w:60，
h:60，
}
//老鼠
鼠标.x=？
鼠标.y=？
//在平移上显示比例，以便您可以看到方框
var-scalex=-1；
var-scaley=-1；
var originx=-200；
var原始值=-200；
//将鼠标屏幕坐标转换为已转换的画布空间
mouse.tx=mouse.x+orginx；//先翻译
mouse.ty=mouse.y+orginy；
mouse.tx*=scalex；//然后规模
mouse.ty*=scaley；
//绘制变换后的图像/框/任何东西
ctx.scale（scalex，scaley）；
翻译（originx，originy）；
ctx.strokeRect（box.x，box.y，box.w，box.h）；//把箱子拉回到前面
//鼠标是否在命中区域上，从而在框上
if（mouse.tx>box.x&&mouse.txbox.y&&mouse.ty

这是一个只有缩放和平移的简单版本，只要不旋转它，它将适用于所有缩放和平移。如果旋转，则需要进行完全反转。你可以在这个问题上找到如何做到这一点
画布上的可点击区域是编程的，如果你更改了画布，但没有对管理可点击区域的代码应用相同的效果，不要期望CSS为你做这些工作，它们是分开的。你能用我上面链接的小提琴来实现吗？我想自己试试，但我不知道如何获取/设置
tx
和
ty
。谢谢。@Bharath您链接的小提琴使用画布像素alpha值进行训练，无论是否单击地面。无论您如何变换图像，它都将起作用。
鼠标。
只是一个用来保持鼠标坐标的任意对象。只需移除
鼠标。
并将
x
，
y
设置为鼠标移动事件中获得的鼠标坐标，然后设置
tx
，
ty
，如答案所示。如果没有实际的代码，您就会遇到问题，我们实际上只是在猜测解决方案