画布高宽不同时的旋转逻辑答案

【问题标题】：rotation Logic When Canvas Height and Width is Different画布高宽不同时的旋转逻辑
【发布时间】：2014-11-21 11:14:40
【问题描述】：

在画布上应用旋转时需要帮助来获取画布 XY 坐标，尤其是在画布大小不同时。

【问题讨论】：

请澄清您的问题 :-) “获取画布 XY 坐标”是什么意思？注意：请记住 context.rotate(angle) 会旋转整个画布坐标系。如果在旋转和绘制之后，您还没有将画布恢复到其默认坐标系，那么任何新的绘制仍将在旋转空间中，因此您可以使用未旋转的坐标进行绘制，并且画布将为您旋转。但是...浏览器的鼠标处理程序对画布旋转一无所知，因此即使画布仍在旋转，鼠标处理程序中的鼠标坐标也会处于未旋转的坐标中。
那么如何将鼠标事件的 XY 坐标映射到我的画布当前旋转状态？

标签： math canvas html5-canvas

【解决方案1】：

我看到你的问题包含“数学”标签但不包含代码，所以我会给你一个叙述性数学解决方案。

问题

正如您所发现的，浏览器的鼠标事件在未旋转的空间中返回 clientX 和 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/

【讨论】：