用于查看 2D 绘图的变换矩阵

Question

我正在重构一个显示绘图的图形程序。程序使用了自己的变换，代码相当复杂。我想用转换矩阵重构代码。

窗口和视图坐标为 X 向右，Y 向下。

窗口中的绘图使用左上角点作为基点(0,0)。该视图是一个屏幕矩形区域，其基点 (0,0) 也在左上角。

视图区域可以是屏幕上的任意矩形。它显示 80%x80% 区域内的绘图，周围留有一些边距。

绘图的尺寸为宽 x 高。程序应在两个方向上以相同的比例显示绘图。绘图的中心映射到视图区域的中心。绘图可旋转0~360度任意角度。

给定以下数据，一般的变换矩阵是什么：

1. 绘图的宽度和高度
2. 旋转角度
3. 视图区域的宽度和高度
4. 绘图周围的边距

Answer 1

首先，您需要包含旋转图像的框的宽度/高度

x0 = image_width/2 * cos(angle) + image_height/2 * sin(angle)
x1 = image_width/2 * cos(angle) - image_height/2 * sin(angle)
y0 = image_width/2 * sin(angle) + image_height/2 * cos(angle)
y1 = image_width/2 * sin(angle) - image_height/2 * cos(angle)
rotated_width = max(abs(x0), abs(x1)) * 2
rotated_height = max(abs(y0), abs(y1)) * 2

，然后您需要计算两个维度中的哪一个将是缩放约束，

sf = min((view_width - 2*border) / rotated_width,
         (view_height - 2*border) / rotated_height)

然后您可以计算 3x2 变换矩阵

m11 = sf*cos(angle)
m12 = sf*sin(angle)
m21 = -sf*sin(angle)
m22 = sf*cos(angle)
m31 = view_width/2 - image_width/2 * m11 - image_height/2 * m21
m32 = view_height/2 - image_width/2 * m12 - image_height/2 * m22