Javascript Html5画布转换算法-应用转换后查找对象坐标

在html5画布上，我正在绘制对象（矩形、圆形等），这些对象具有缩放、倾斜、旋转等变换属性。。。这些对象可以嵌套

当我在应用变换后，想要找到给定对象的精确x，y坐标时，问题就出现了，但这超出了我的理解范围

所有的专家谁是交互式计算机图形；请帮我解决这个问题

---

提前感谢。

2D中的所有仿射变换都可以表示为以下形式的矩阵：

    [ a  c  dx ]
T = [ b  d  dy ]
    [ 0  0   1 ]

这可以用方法

context.transform（a，b，c，d，dx，dy）表示

当应用于某个坐标时，
（x，y）
，首先必须添加第三个坐标，该坐标始终为
1
：
。然后，您可以将变换矩阵相乘以获得结果：

[ a*x + c*y + dx ]
[ b*x + d*y + dy ]
[       1        ]

如果在最后一个坐标中得到的不是“1”，则必须将向量除以它


要走另一条路，必须反转矩阵：

[ d/M  -c/M  (c*dy - d*dx)/M ]
[ b/M   a/M  (b*dx - a*dy)/M ]
[  0     0          1        ]

其中
M
是
（a*d-b*c）


通过将矩阵相乘，可以按顺序应用多个变换。乘法的顺序很重要


context.translate（dx，dy）context.transform（1，0，0，1，dx，dy）
context.rotate（θ）context.transform（c，s，-s，c，0，0）
context.scale（sx，sy）context.transform（sx，0，0，sy，0，0）

其中
c=Math.cos（θ）
和
s=Math.sin（θ）


如果您在对象空间中获得了一些坐标
（x，y）
，并且希望知道它在屏幕上的最终位置，则可以对其应用变换

如果你在屏幕上看到一些坐标
（x，y）
，你想知道物体上的哪一点，你可以乘以变换的倒数。
汤姆·拉克沃蒂的答案很完美，但有一点输入错误。
矩阵求逆的正确公式为：

[  d/M  -c/M  (c*dy - d*dx)/M ]
[ -b/M   a/M  (b*dx - a*dy)/M ]
[   0     0          1        ]

重复：不，这不是重复，它类似于这个问题（），但不同。我正在为我的问题寻找类似的答案。但是，感谢您的参考链接也提供了帮助……这在一定程度上混淆了矩阵元素的布局，因为画布API中的setTransform（a，b，c，d，e，f）是这样布置的：[a，c，e\n b，d，f\n 0 1]，请参阅@TomLarkworthy谢谢。修正。你用什么方法获得原始坐标？我使用的是
var rect=canvas.getBoundingClientRect（）
var xcoord=（event.clientX-rect.left）*canvas.widt/rect.widt）
return newX=xcoord*a+ycoord*c+e
但这给出了错误的newX。
[  d/M  -c/M  (c*dy - d*dx)/M ]
[ -b/M   a/M  (b*dx - a*dy)/M ]
[   0     0          1        ]