HTML canvas setTranslate 不适用于 onClick

Question

我有一个包含一些内容的 HTML 画布。此内容需要绘制翻译到画布上。那是有效的。但是现在我需要检测点击了哪个对象，所以我需要在对象的坐标中搜索以找到匹配的对象。但是由于对象是在不同的 x、y 位置绘制的，所以我不知道如何匹配它们。

我创造了这种情况。我想在单击时突出显示正确的对象。要记住的一件事是，此画布用于我没有通常在浏览器中可用的全部功能的环境（与 PLC 连接的 HMI 屏幕）中。这也意味着我只能在“onClick”函数上获得 x 和 y 坐标。

https://jsfiddle.net/gkho89wd/

这段代码不是最干净的，但我用它来尝试一些事情。 这段代码的快速解释：

我有一个包含一些对象（盒子）的数组

const rawPositions = [];

每个位置都有一些属性，包括x和y，宽度和长度。这些用于在画布上绘制一些矩形。我还计算了“ratioX”和“ratioY”来缩放所有内容。那些 x 和 y 用于实际绘制。

在绘制矩形之前，我正在执行“setTransform”以水平翻转画布：

ctx.setTransform(1, 0, 0, 1, 0, ctx.height);

如何将坐标从点击事件转换为“原始”事件？