基于 C++ MFC 实现二维变换的画图软件【100010873】

# 基于 MFC 和二维变换的画图软件 ## 摘 要 本文描述了二维复合变换的基本方法和思想，根据鼠标位置坐标获取起始点 pStart 和终止点 pEnd 的坐标，设计实现每个基本图形的画图方法，根据 pStart 和 pEnd 即可确定基本图形的控制点，进而绘制对应图形。规范化齐次坐标以后，图形几何变换可以表示为图形控制点点集合的规范化齐次坐标矩阵与二维变换矩阵相乘的形式，分别设置二维变换矩阵的参数信息，设计实现对应的方法，即可实现图形的二维变换功能。 ## 设 计 “基于二维复合变换的动画制作软件”的设计中包括以下几个部分：(1) 程序结构设计，(2)鼠标消息映射，(3) 图形绘制实现，(4) 图形变换,（5）动画扩展实现,（6）信息保存,(7)程序交互设计。 ## 1 程序总体结构 ### 1.1 总体结构设计 #### 1.1.1 绘图设计 基本图形包括点，直线，曲线，自由画笔，矩形，圆形，椭圆，三角形，左箭头，上箭头，五角星，四角形，五边形共 12 钟类型，每个基本图形都有自己的编号，用户在选择基本图形后，被选择图形的编号信息保存到 dstyle 变量中，绘图模块即可根据 dstyle 中的编号绘制相应的图形。图形大小，位置信息由全局变量 pStart 和 pEnd 控制，pStart 和 pEnd 分别为用户在窗口内拖动鼠标时的起点坐标和终点坐标。根据两个坐标确定一个矩形，按照比例，设置相应的控制点，再根据控制点即可绘制相应图形。绘图流程图见图 1.1。 #### 1.1.2 变换设计 图形变换包括图形移动，图形旋转，图形放缩。绘图模块绘制图形结束后，会将 pStart，pEnd，style 等基本信息存入图表中。例如，选择旋转类型后，执行对应函数，将图表中所有图形的位置信息修改，再执行重绘函数，按照点表内容依次重绘变换之后的图形，即可实现图形的旋转变换。变换流程图见图 1.2。 [](https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200619203701.png) 图 1.1 绘图流程图 [](https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200619203702.png) 图 1.2 变换流程图 ## 2 程序实现 ### 2.1 鼠标绘图的消息映射 为了实现基本图形的绘制和组合，需要在项目的视图 View 类中定义鼠标左键按下 OnLButtonDown，鼠标移动 OnMouseMove，以及鼠标左键抬起 OnLButtonUp 的消息映射，以实现拖动鼠标绘图功能。当鼠标左键按下时，设置一个变量为 true 保存绘图状态并且记录按下时的点，记为 pStart，只有当该变量为 true 时，鼠标移动时才会将绘图，当鼠标左键抬起时，该变量赋值为 false,并保存此时的点，记为 pEnd。 其中，在鼠标左键按下并移动时，使用橡皮筋技术，即移动过程中选用画笔颜色取反模式（SetROP2(R2_NOT)），即可消除移动过程中不断绘制的图形，在鼠标左键抬起时，设置画笔为颜色覆盖模式（SETROP2(R2_COPYPEN)），绘制最终的图形，并保存 pStart 点和 pEnd 点，以及笔的粗细，形状，颜色等其他信息。 ### 2.2 图形绘制实现 #### 2.2.1 点 由于单个点的像素太小，不利于在图形绘制中使用与观察。这里使用了画一个微型填充圆的方法代替原始像素点。 #### 2.2.2 直线 从直线起的以下图形的绘制均为根据外接矩形绘制内部图形。绘制图形时，当点击鼠标左键时获取矩形起点，按住不放拖动鼠标直至放开左键，放开鼠标左键的位置记录为矩形的终点。直线的绘制则根据矩形起始点使用 MoveTo()和 LineTo()函数绘制。 #### 2.2.3 等腰和直角三角形 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。三角形包括 3 个顶点。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。根据两种三角形在矩形中绘制时的对应比例，等腰三角形 3 个顶点坐标分别为： P1 (pStart.x+pEnd.x)/2,pStart.y); P2 (pStart.x,pEnd.y); P3 (pEnd.x,pEnd.y); 直角三角形的三个顶点坐标为： P1 (pStart.x,pStart.y); P2 (pEnd.x,pEnd.y); P3 (pStart.x,pEnd.y); ##### 2.2.4 矩形和填充矩形 在使用鼠标拉取的矩形中获取了起始点和终止点后用矩形函数实现。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。要绘制矩形由绘制矩形的函数实现 pdc->Rectangle(pStart.x , pStart.y , pEnd.x, pEnd.y)。绘制填充矩形则在绘制前使用画刷以填充内部。 #### 2.2.5 圆形和填充圆 在使用鼠标拉取的矩形中获取了起始点后。将两点间的距离作为要画圆的半径 r。使用绘制圆函数进行绘制 pdc->Ellipse(pStart.x-r,pStart.y-r , pStart.x+r , pStart.y+r)。绘制填充矩形则在绘制前使用画刷以填充内部。 #### 2.2.6 自由画笔 在鼠标左键按下，并且移动的过程中，通过不断触发 OnMouseMove 消息映射，在移动中的点的位置和上一个位置间连线，即可实现自由画笔功能。 #### 2.2.7 左箭头 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。左箭头包括 7 个顶点。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。根据左箭头在矩形中绘制时的对应比例，7 个顶点坐标为： P1 (pStart.x, pStart.y-dy/2); P2 (pStart.x+dx/2),pStart.y); P3 (pStart.x+dx/2), pStart.y-dy/4); P4 (pEnd.x, pStart.y-dy/4); P5 (pEnd.x, pStart.y-3*dy/4); P6 (pStart.x+dx/2), pStart.y-3*dy/4); P7 (pStart.x+dx/2),pEnd.y); 其中 dy=pStart.y-pEnd.y;dx= pEnd.x-pStart.x #### 2.2.8 上箭头 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。上箭头包括 7 个顶点。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。根据上箭头在矩形中绘制时的对应比例，7 个顶点坐标为： P1 (pStart.x, pStart.y-dy0/2); P2 ( (pStart.x+dx0/2,pStart.y); P3 (pEnd.x, pStart.y-dy0/2); P4 (pStart.x+3*dx0/4, pStart.y-dy0/2); P5 (pStart.x+3*dx0/4,pEnd.y); P6 (pStart.x+dx0/4,pEnd.y); P7 (pStart.x+dx0/4, pStart.y-dy0/2); 其中 dy0=pStart.y-pEnd.y;dx0=pEnd.x-pStart.x #### 2.2.9 五角星 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。五角星绘制包括 5 个顶点。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。根据五角星在矩形中绘制时的对应比例，5 个顶点坐标为： P1(pStart.x+pEnd.x)/2),pStart.y); P2(pStart.x+RX*(sin(72*pi/180)cos(54*pi/180))/2/sin(72*pi/180)),pEnd.y); P3(pEnd.x, pStart.y+RY*(1-cos(72*pi/180))/(1+sin(54*pi/180))); P4(pStart.x, pStart.y+RY*(1-cos(72*pi/180))/(1+sin(54*pi/180))); P5(pStart.x+RX*(sin(72*pi/180)+cos(54*pi/180))/2/sin(72*pi/180),pEnd.y); 其中 pi = 3.1415926;RX = -(pStart.x-pEnd.x);RY = -(pStart.y-pEnd.y); #### 2.2.10 五边形 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。五边形包括 5 个顶点。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。根据五边形在矩形中绘制时的对应比例，5 个顶点坐标为： P1 (pStart.x+pEnd.x)/2,pStart.y); P2 (pStart.x,(pEnd.y-pStart.y)*0.41+pStart.y); P3 (pStart.x+(pEnd.x - pStart.x)*0.19,pEnd.y); P4 (pStart.x+(pEnd.x - pStart.x)*0.81,pEnd.y); P5 (pEnd.x, (pEnd.y-pStart.y)*0.41+pStart.y); #### 2.2.11 四角星 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。四角星包括 8 个顶点。拉取矩形的起点坐标为(pStart.x,pStart.y),终点坐标为(pEnd.x,pEnd.y)。根据四角星在矩形中绘制时的�