在 html5 画布上，我正在绘制对象（矩形、圆形等），这些对象具有缩放、倾斜、旋转等变换属性...这些对象可以嵌套。
问题发生在我应用转换后，我想找到给定对象的确切 x、y 坐标，但它超出了我的想象。
致所有从事交互式计算机图形学的专家；请帮我解决这个问题。
提前致谢。
【问题讨论】：
标签： javascript math graphics html5-canvas coordinate-transformation
Tom Larkworthy 的回答很完美，但有一个小错误。 矩阵求逆的正确公式为：
[ d/M -c/M (c*dy - d*dx)/M ]
[ -b/M a/M (b*dx - a*dy)/M ]
[ 0 0 1 ]
【讨论】：
2D 中的所有仿射变换都可以表示为以下形式的矩阵：
[ a c dx ]
T = [ b d dy ]
[ 0 0 1 ]
这可以用context.transform(a, b, c, d, dx, dy);的方法来表达。
当应用于某个坐标(x,y) 时，您首先必须添加第三个坐标，始终为1：<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)，并且您想知道对象上的哪个点，您可以乘以变换的倒数。
【讨论】：
var rect = canvas.getBoundingClientRect(); var xcoord = (event.clientX - rect.left) * canvas.widht /rect.widht) return newX = xcoord *a + ycoord*c + e 但这给出了错误的 newX。