《计算机图形学》第二课笔记-----二维变换的推导

前言：为什么这么突兀的把这一节内容放在了第二课，第一是因为我急于求成，第二是因为这一章节太重要了，这几乎是二维三维变换的最核心的东西，理解了这一章节内容，后面的就会像打通了任督二脉一样，so,那让我们开始吧，我们只用初中的知识把这一章说清楚

所谓的二维变换核心的东西其实就是求一个点绕一个点旋转后的位置

让我们对这段话进行一些约束，在一个去掉了Z轴的笛卡尔坐标系内，让我们再大白话点，在一个平面坐标系内，让我们再大白话点，就是小时候上数学课时候老师在黑板上化的那个一横一竖，上面一个箭头，前面一个箭头那种坐标系内
我们终于白话完了，正文开始，在一个坐标系内一个点绕着原点o旋转一定的度数，旋转到新的一个点，求这个点在这个坐标系内的位置，也就是新的点位的x’的长度和y’的长度。
结合下图描述了一个已知的点[x,y]，沿原点o旋转了β度到达了新的点[x’,y’],求[x’,y’]的位置
我们需要了解的前提是[x,y]是已知的
那么x’也可以写成r*cos(α+β),因为我们是绕原点旋转，等于在绕原点画圆，so，每一个半径都应该是相等的，记住这个前提，后面要用。

在这里插入图片描述

$x^{'} = r * cos (α + β ）$
上面这个式子应该很好理解，如果不理解可以只补一下三角函数的cos 和 sin即可

接下来我们展开这个式子，有人可能会在这里卡住一下，但这其实都是固定推导您只需复制展开前的式子问下一ai，他会说的比我清楚多了，总而言之如果您不想深究，不用理会为什么展开以后是这样子，直接过即可
$x^{'} = r * cos α * cos β - r * s in α * s in β$

当我们观察展开的式子，这个时候神奇的事情发生了，r*cosα，不就是 $r\frac{x}{r}$ ,约分以后不就是x么
我们再观察r*sinα，那不就是 $r\frac{y}{r}$ ,约分以后那不就是y么

然而x,y又是已知的，那不就是用已知的x,y去乘我们旋转的β角的cos和sin么，至此答案已经很清晰了，可以说这篇博客要说的已经说完了，您仅需初中知识就可以理解这一切，后续的剩下的推导也只是上述思考过程的重复，当然我们还是要写完这一切。

$x^{'} = x * cos β - y * s in β$
$y^{'} = x * s in β + y * cos β$

最后我们把他写成矩阵的形式就是下面的式子，我们需要注意的是矩阵乘法并不满足交换律，so，我们不能调换位置

$\begin{bmatrix} cosβ & -sinβ \\ sinβ & cosβ \\ \end{bmatrix}\begin{bmatrix} x\\ y\\ \end{bmatrix}$

当然我们需要注意，当前我们讨论的是逆时针旋转这种情况，顺时针的推到过程在下下张图

那么剩下的顺时针推导我们就不写这么详细了，因为一切已经不言自明了，下一节我们就去到代码层面去实现它，平移我们也就不在此解释了，因为那些比这个容易理解的多。

在这里插入图片描述

原因如上，顺时针的推导就不赘述了

在这里插入图片描述

敲黑板``有个非常重要的问题，我们基于数学上的推导角度都是没有符号的，也就是说我们有两种方式实现顺逆的切换

角度不变，也就是无论顺逆都使用正角度表达
用算法切换正逆，也就是逆时针用这个矩阵 $\begin{bmatrix} cosβ & -sinβ \\ sinβ & cosβ \\ \end{bmatrix}\begin{bmatrix} x\\ y\\ \end{bmatrix}$ 顺时针用这个矩阵 $\begin{bmatrix} cosβ & +sinβ \\ -sinβ & cosβ \\ \end{bmatrix}\begin{bmatrix} x\\ y\\ \end{bmatrix}$

敲黑板``那如果您不想通过切换算法的方式来实现正拟切换，那么算法用固定的，此处以使用逆时针算法举例，固定使用了逆时针算法，那么逆时针旋转还是使用正角度，如果要使用顺时针算法秩序给角度前面加上负号即可。

现在我们来到代码层面，UI框架选择c++ qt5，因为我更熟悉这个框架，而且如果我们仅仅知识为了演示二维变换的推导，qt5足够了，主要原因还是我足够熟悉。不用opengl是因为我们像尽其可能的展示细节，而不是直接调用显卡为我们实现好的接口。

头文件

#ifndef TWOCUBE_1_H // 防止头文件被重复包含
#define TWOCUBE_1_H
#include <QGridLayout>
#include <QPushButton>
#include <QSpacerItem>
#include <QWidget> // 包含QWidget类，用于创建窗口
#include <QTimer>  // 包含QTimer类，用于定时器功能// TwoCube_1类继承自QWidget，用于创建自定义窗口
class TwoCube_1: public QWidget
{Q_OBJECT // 启用Qt的元对象系统，支持信号和槽机制public:// 构造函数，参数为父窗口指针TwoCube_1(QWidget* parent);// 析构函数~TwoCube_1();protected:// 重写paintEvent函数，用于处理窗口的绘制事件void paintEvent(QPaintEvent* event) override;private:QList<QPointF> rectPoints;  // 用于存储矩形的顶点坐标（2D坐标）int angle = 0;              // 旋转角度，初始化为0float rWidth = 300;         // 矩形的宽度float rHeight = 180;        // 矩形的高度QGridLayout grid_main;QPushButton btn_resetAngle;QPushButton btn_turned;int direction=1;
};#endif // TWOCUBE_1_H // 结束头文件定义

cpp文件

#include "twocube_1.h"
#include <QPainter>
#include <QDebug>
#include <cmath>// 构造函数，初始化窗口和矩形点集
TwoCube_1::TwoCube_1(QWidget* parent): QWidget(parent)
{// 设置窗口的最小大小为800x800setMinimumSize(800, 800);this->setLayout(&grid_main);grid_main.addItem(new QSpacerItem(2000, 2000),1,1);grid_main.addItem(new QSpacerItem(2000, 2000),1,2);grid_main.addWidget(&btn_resetAngle,8,9);btn_resetAngle.setText("重置角度");connect(&btn_resetAngle,&QPushButton::clicked,this,[=]{angle=0;});grid_main.addWidget(&btn_turned,9,9);btn_turned.setStyleSheet("background:Purple;color:white");btn_turned.setText("逆时针旋转");connect(&btn_turned,&QPushButton::clicked,this,[=]{direction=!direction;if(direction){angle=0;btn_turned.setStyleSheet("background:Purple;color:white");btn_turned.setText("逆时针旋转");}else{angle=0;btn_turned.setStyleSheet("background:green;color:white");btn_turned.setText("顺时针旋转");}});// 初始化矩形的四个顶点坐标rectPoints.append(QPointF(0,0));           // 左上角rectPoints.append(QPointF(0,rHeight));      // 左下角rectPoints.append(QPointF(rWidth,rHeight)); // 右下角rectPoints.append(QPointF(rWidth,0));       // 右上角// 创建定时器用于动画效果QTimer* timer = new QTimer(this);// 连接定时器的timeout信号到lambda表达式，每16ms触发一次connect(timer, &QTimer::timeout, this, [this]() {angle += 1;  // 每次更新角度减少1度，顺时针旋转update();    // 触发重绘事件});timer->start(16); // 定时器每16ms触发一次，约60fps
}// 析构函数
TwoCube_1::~TwoCube_1()
{// 析构函数为空，没有需要释放的资源
}// 重写paintEvent函数，处理窗口的绘制事件
void TwoCube_1::paintEvent(QPaintEvent *event)
{QPainter painter(this);  // 创建QPainter对象，用于绘制// 将绘制原点移动到窗口中心painter.translate(width() / 2, height() / 2);// 反转Y轴painter.scale(1, -1);// 设置画笔颜色为黑色，线宽为1painter.setPen(QPen(Qt::black, 1));// 绘制X轴和Y轴painter.drawLine(-width() / 2, 0, width(), 0);  // X轴painter.drawLine(0, -height() / 2, 0, height()); // Y轴// 用于存储旋转后的矩形顶点QList<QPointF> tempRectPoints;// 对矩形的每个顶点进行旋转变换for (int i = 0; i < rectPoints.length(); i++){float x = rectPoints[i].x();  // 获取当前顶点的X坐标float y = rectPoints[i].y();  // 获取当前顶点的Y坐标float newX;float newY;if(direction){// 计算旋转后的新坐标newX = x * cos(angle * M_PI / 180) - y * sin(angle * M_PI / 180);newY = x * sin(angle * M_PI / 180) + y * cos(angle * M_PI / 180);}else{// 计算旋转后的新坐标newX = x * cos(angle * M_PI / 180) + y * sin(angle * M_PI / 180);newY = -x * sin(angle * M_PI / 180) + y * cos(angle * M_PI / 180);}// 更新旋转后的坐标x = newX;y = newY;// 将旋转后的点添加到临时列表中QPointF tempPoint(x, y);tempRectPoints.append(tempPoint);}// 设置画笔颜色为绿色，线宽为5painter.setPen(QPen(Qt::green, 5));// 绘制旋转后的矩形painter.drawLine(tempRectPoints[0], tempRectPoints[1]);  // 左边painter.drawLine(tempRectPoints[1], tempRectPoints[2]);  // 下边painter.drawLine(tempRectPoints[2], tempRectPoints[3]);  // 右边painter.drawLine(tempRectPoints[3], tempRectPoints[0]);  // 上边//绘制测试坐标系的矩形，如果该矩形在Y轴上边那就是右手系二位坐标系painter.setPen(QPen(Qt::black, 1));painter.drawLine(rectPoints[0], rectPoints[1]);  // 左边painter.drawLine(rectPoints[1], rectPoints[2]);  // 下边painter.drawLine(rectPoints[2], rectPoints[3]);  // 右边painter.drawLine(rectPoints[3], rectPoints[0]);  // 上边
}

最后放上一张效果图
我们演示使用的是顺时针旋转，在一个定时器内每个16ms角度自身减1，重新触发绘制，代码里演示的就是固定角度，也就是无论顺逆都是角度递增，但是切换了算法

角度使用了固定角度

angle += 1;  // 每次更新角度减少1度，顺时针旋转

当用户切换了顺逆后选择不同的算法

// 计算旋转后的新坐标
{// 计算旋转后的新坐标newX = x * cos(angle * M_PI / 180) - y * sin(angle * M_PI / 180);newY = x * sin(angle * M_PI / 180) + y * cos(angle * M_PI / 180);
}
else
{// 计算旋转后的新坐标newX = x * cos(angle * M_PI / 180) + y * sin(angle * M_PI / 180);newY = -x * sin(angle * M_PI / 180) + y * cos(angle * M_PI / 180);
}