画布高度和宽度不同时的旋转逻辑

Question

当画布大小不同时，在画布上应用旋转时，需要帮助才能获得画布XY合成符号。

Answer 1

我看到你的问题包含'math'标签，但不包含任何代码，所以我会给你一个叙事数学解决方案。

问题

正如您所发现的，浏览器的鼠标事件会返回clientX＆amp; clientY值在未旋转的空间中而不是在旋转的画布坐标中。

潜在的解决方案

要跟踪画布的当前旋转状态，您可以使用仿射变换矩阵。仿射矩阵使用3x3矩阵的9个元素中的6个来保存有关所有画布变换的累积信息：旋转，平移，缩放等。矩阵可以简单地用6个元素的数组表示。

var matrix=[ 1, 0, 0, 1, 0, 0 ];

canvas元素保留了这样的变换矩阵，但不幸的是（并且意外地）它的变换矩阵被隐藏了。

有效的解决方案

因此，每次在上下文中发出转换命令时，都可以将该更改镜像到您自己维护的转换矩阵。这样你的矩阵就会“保存”当前的旋转状态，无论你对画布进行多少次旋转等。

然后，当您在未旋转的空间中定义鼠标[x，y]时，可以使用该变换矩阵将该未旋转的鼠标坐标转换为旋转的画布空间。

// convert mouse coordinates to transformed canvas coordinates
function tmPoint(matrix, mouseX, mouseY){
  return({
    canvasX: mouseX*matrix[0] + mouseY*matrix[2] + matrix[4],
    canvasY: mouseX*m[1] + mouseY*matrix[3] + matrix[5]
  };
}

如何到...

你可以在这里'学习'转换矩阵：

https://blog.safaribooksonline.com/2012/04/26/html5-canvas-games-tracking-transformation-matrices/