绘图程序
1 核心算法
1.1 图元生成
1.1.1 直线
画直线的算法采用了课上讲到的 Bresenhan 算法,采用整数增量运算,精确而有效的光栅设备生成算法。
基本思想是:当直线斜率的绝对值小于 1 时,从左端点开始作为起点,沿 x 方向单位距离取样,并在每个取样位置都选择离直线路径最近的像素作为线段的离散点。逐个处理每个后继取样位置直到右端点。绝对值大于 1 时则沿 y 方向取样,所有操作对称过来即可。
图 1
|m|<1 的 Bresenham 画线算法:
输入线的两个端点,并将左端点存贮在(x0,y0)中;
将(x0,y0)装入帧缓冲器,画第一个点;
计算常量:△x、△y、2△y 和 2△y-2△x,起始位置(x0,y0)的决策参数 p0 计算为:p0=2△y-△x
k=0 开始,在每个离散取样点 xk 处,进行下列检测:
若 pk< 0,画点(xk+1,yk),且:pk+1= pk+2△y;
若 pk 0, 画点(xk+1,yk+1),且:pk+1=pk+2△y-2△x。
k=k+1;
重复步骤 4,共 △x 次。
1.1.2 圆
画圆算法则采用了中点画圆法,这里之所以不采用 Bresenham 算法,是为了避免平方根运算,而中点画圆法可以直接采用像素与远距离的平方作为判决依据,通过检验两候选像素中点与圆周边界的相对位置关系(圆周边界的内或外)来选择像素。基本思想和上面一样,也是通过决策参数来判定下一步的点应该取在哪里。不过这里只画八分之一个圆即可,剩余部分可利用圆的对称性经过对称变换得到。
图 2
具体算法
输入圆半径 r 和圆心(xc,yc),并得到圆心在原点的圆周上的第一点为(x0,y0)=(0,r)。
计算圆周点(0,r)的初始决策参数值为:p0=5/4-r;
从 k=0 开始每个取样位置 xk 位置处完成下列检测:
若 pk<0,选择像素位置:(xk+1,yk),且:pk+1=pk+2xk+1+1;(决策参数增量计算)
若 pk> 0,选择像素位置:(xk+1,yk-1),且:pk+1=pk+2xk+1+1-2yk+1。 (决策参数增量计算)
(其中:2xk+1=2xk+2,且 2yk+1=2yk-2)。
确定在其它七个八分圆中的对称点。
将计算出的像素位置(x,y)移动到中心在(xc,yc)的圆路径上,即:对像素位置进行平移:x=x+xc,y=y+yc;
重复步骤 3 到 5,直至 x≥y。
1.1.3 椭圆
画椭圆的算法也采用了中点画椭圆法,与上面的画圆算法比较类似,不同之处主要在于决策参数计算方法不同以及区域分割方式不同。因为椭圆有长短轴之分,所以在绘制时分成四部分。以中心为原点,画完第一象限再对称变换到其他象限。第一象限中又分为两个区域,以斜率绝对值等于一为分界点。
具体算法
输入 rx、ry 和中心(xc,yc),得到中心在原点的椭圆上的第一个点:(x0,y0)=(0,ry);
计算区域 1 中决策参数的初值为:p10=ry2-rx2ry+ rx2/4
图 3
在区域 1 中每个 xk 位置处,从 k=0 开始,完成下列测试:
若 p1k<0,椭圆的下一个离散点为(xk+1,yk),且 p1k+1=p1k+2ry2xk+1+ry2。
若 p1k>0 ,椭圆的下一个离散点为(xk+1,yk-1),且 p1k+1= p1k+2ry2xk+1-2rx2yk+1+ry2。
(其中:2ry2xk+1=2ry2xk+2ry2;2rx2 yk+1=2rx2yk-2rx2,该过程循环直到:2ry2x≥2rx2y)
使用区域 1 中最后点(x0,y0)来计算区域 2 中参数初值为 p20=ry2(x0+1/2)2+rx2 (y0-1)-rx2ry2
图 4
在区域 2 的每个 yk 位置处,从 k=0 开始,完成下列检测:
若 p2k>0,椭圆下一点选为(xk,yk-1),且 p2k+1=p2k-2rx2yk+1+rx2,
否则,沿椭圆的下一个点为(xk+1,yk-1),且 p2k+1=p2k+2ry2 xk+1-2rx2 yk+1+rx2,
使用与区域 1 中相同的 x 和 y 增量计算,该过程循环直到(rx,0)
确定其它三个象限中对称的点。
将每个计算出的像素位置(x,y)平移到中心在(xc,yc)的椭圆轨迹上,并按坐标值画点: x=x+xc,y=y+yc
1.1.4 多边形
多边形就是随着鼠标的点击,不断采集新的端点并把新的点和上一个点连起来。连的方法还是 Bresenham 画直线法,此处不再赘述。
1.1.5 曲线
这里的曲线绘制的是三阶 Bézier 曲线,共有四个控制点。设它们分别为 P0~P3。
则当参数 u 从 0 变化到 1 时,
由公式:P(u)=(1-u)3P0+3u(1-u)2P1+3u2(1-u)P2+u3P3 可得到 P0~P3 所有点。控制 u 每次的增量来调整曲线的连续程度。
具体算法
for from to 1:(每次增加 0.001)
定义四个 double 值:a=(1-u)3、b=3u(1-u)2、c=3u2(1-u)、d=u3
定义点 P,使其 x=aP0x+bP1x+cP2x+dP3x;y=aP0y+bP1y+cP2y+dP3y
添加点 P 到曲线的点集
1.2 图元填充
图元填充算法有圆、椭圆、多边形三种可供填充。这里它们都使用的是扫描线算法。
1.2.1 圆
圆的填充算法较为简单,首先根据圆心的位置和端点的位置得到半径,从而计算出 miny 和 maxy。然后对 y from miny to maxy 进行遍历。根据圆的公式计算出圆与扫描线的两个交点。把两个交点中间的部分设为应该填充的点。
1.2.2 椭圆
椭圆的填充算法与圆基本相同,略微的差别在于计算 miny 与 maxy 时要根据半轴长计算。以及求交点时要根据椭圆的公式来计算。
1.2.3 多边形
多边形的填充算法采用了扫描线算法。大概思想是,找到多边形的最小 y 值和最大 y 值,然后用这个范围内的每一条水平线与多边形相交,通过得到的交点画线段,由此填充整个多边形。
具体通过交点画线段的方法是:
对存储交点的数组进行排序(从小到大)
.数组中数据两两一对,填充每对交点间的线段
于是我们所要做的只有两件事,一是求出扫描线与多边形边的交点,二是对交点数组进行排序。
对于求扫描线与多边形的交点,需要考虑到以下几个特殊情况:
扫描线与边重合
扫描线与边的交点为顶点
该顶点是局部极值,则需要被记录两次
该顶点不是局部极值的顶点,只需要被记录一次
v 判断一个顶点是否为局部极值,可以通过与顶点关联的两条边的另外两个顶点来判断,如果它们在顶点交点的同一侧,则说明是极值,否则不是极值。
1.3 图元编辑变换
1.3.1 寻找图元中点
图元中点在缩放和旋转中都体现了作用。对于直线、圆、椭圆来说,中点很好找。对于多边形和曲线,它们的中点被设为外接矩形的中点。
1.3.2 缩放
对于点(x,y),绕中点 mid 按比例 ratio 变化:
X’=xmid+(x-xmid)*ratio
Y’=ymid+(y-ymid)*ratio
如果直接把每个点进行旋转的话会产生不连续/圆滑的线条,所以应当把图元的关键点按中心缩放后,重新生成需要绘画的点集。
1.3.3 旋转
对于点(x,y)绕(xmid,ymid)旋转得到(x’,y’),基本方法是:
X’=xmid+(x-xmid)cosθ-(y-ymid)sinθ
Y’=ymid+(x-xmid)sinθ+(y-ymid)cosθ
同样地,对于每个图元,把它们的关键点绕中心旋转。然后重新生成点集。需要注意的是,椭圆每次只能旋转 90°,否则旋转后的椭圆将与之前的椭圆定义方式产生差别从而产生问题。
1.3.4 平移
平移较为简单,定义 Offset=(a,y),则:
X’=x+a;
Y’=y+b;
这里可以直接把点集加上 Offset,因为 Offset 的横纵偏移量都为整数。即使多次变换也不会积累误差。
1.3.5 裁剪
这里只实现了对于直线的裁剪。采用了梁友栋算法。
设待裁剪的线段为 AB,其中 A(x1,y1),B(x2,y2)
设变量 pi 表示第 i 侧 AB 向量从内到外/从外到内。i∈0~3,分别表示左、右、上、下边界。则:
p0=-Δx p1=Δx p2=-Δy p3=Δy
定义变量 qi 如下:
q0=x1-xwmin
q1=xwmax-x1
q2=y1-ywmin
q3=ywmax-y1
设 r=qi/pi,则 r 为直线与第 i 个边界交点对应的参数值。
设直线参数为 u,线段裁剪后的端点对应参数为 u1 与 u2,其中 u1 更小。
遍历四个方向的 p 和 q 的值
若 pi=0,说明线段与该边界平行。
若 qi<0,说明线段整个都在外部,可以直接 returfalse
否则不做处理,continue。
若 pi<0,说明 AB 从外到内穿过边界,u1 取 u1 和 r 中的较大值
若 pi>0,说明 AB 从内到外穿过边界,u2 取 u2 和 r 中的较小值
遍历结束后若 u1>u2,则说明整个线段都不在窗口内。可以直接舍弃。否则保留该区间之内的线段。
1.4 三维 off 模型载入
直接调用了 qt 的 QGLWidget 的相关库函数,重写了 initializeGL、ResizeGL 等函数。没有用到需要自己实现的算法。
2 系统设计
2.1 环境构建
项目的开发环境如下所示:
操作系统 | Windows 10 家庭中文版 |
编程语言 | C++ 11 |
外部库 | Qt 5.4,OpenG2.7 |
编译器 | MinGW 4.9.1 32bit |
IDE | Qt Creator 3.3.0 |
2.2 整体结构概述
系统主要分为两个版块,图形板块与操作板块。其中图形板块主要负责图元的定义与编辑/平移等功能的实现。操作板块则负责对图元进行显示、对一些操作进行触发等。
2.2.1 图形版块
图形版块定义了基本图形类 figure,其余各个图形都继承自 figure。
figure 存储了图元的形状、顶点集合、所有点集合、颜色、中心点、是否在编辑状态、是否填充等信息。
figure 里定义了平移、旋转、编辑等公共操作的虚函数,具体到每个图元会再由图元自身的类对这些功能进行实现。
2.2.2 操作版块
操作板块对应了一个继承自 QLWindow 的类:window。
window 里的主要成员变量如下,包括了所需的画布、画笔、绘画过程中的一些关键点、当前颜色、所有图形的集合、当前绘制图形、当前绘图模式等信息。
window 里主要的成员函数如下,分别用来画某个图形的点集、顶点集、中心点。
window 里的消息处理函数分为两类
菜单消息处理函数,每当点击菜单的某个按钮后,切换当前绘图模式,也就是改变 mode 的值。
鼠标事件处理函数
鼠标事件处理函数包括了按键的点击、移动释放等。每当发生相应事件后,根据当前的模式(mode 的值),进行相应操作。
3 性能测试
性能测试主要指的是各个功能是否顺利实现,而具体功能的测试已经在使用说明中给出。此处不再赘述。
4 结束语
经过本学期的学习,最终实现了一个完整的可执行的图形绘制系统。实践过程中对各种算法有了更深的理解,同时 qt 的 gui 编程也遇到了一些问题,最终解决问题后对 qt 的消息处理机制、三维绘制也有了了解。总的来说还是通过这个作业学到了很多知识。