计算机图形学课程设计--图形绘制变换教案资料

1、计算机图形学实验报告课程名称：计算机图形学实验名称:图形绘制与变换学院：电子信息工程学院专业：计算机科学与技术班级：11计科本01班学号：姓名：张慧指导教师：王征风二零一四年目录一、引言3二、设计需求3设计目标3设计环境3VC+3MFC4设计题目及要求4总体流程图4三、课程设计原理4实现的算法4Bresenham算法画直线5中心点算法画圆和椭圆5图形变换的基本原理7平移变换7旋转变换7比例变换7四、总体设计与功能实现8主要界面设计8设置颜色界面8界面设置代码8运行结果9二维线画图元实现9画多边形功能的实现13画Bezier曲线功能的实现15二维图形变换的实现18三维图形的变换20五、实验心得体

2、会、引言计算机图形学(ComputerGraphics,简称CG)是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学。简单地说，计算机图形学的主要研究内容就是研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示的相关原理与算法。是计算机科学的一个分支领域，主要关注数字合成与操作视觉的图形内容。计算机图形学研究的是应用计算机产生图像的所有工作，不管图像是静态的还是动态的，可交互的还是固定的，等等。图形API是允许程序员开发包含交互式计算机图形操作的应用而不需要关注图形操作细节或任务系统细节的工具集。计算机图形学有着广泛的应用领域，包括物理、航天、电影、电视、游戏

3、、艺术、广告、通信、天气预报等几乎所有领域都用到了计算机图形学的知识，这些领域通过计算机图形学将几何模型生成图像，将问题可视化从而为各领域更好的服务。计算机图形学利用计算机产生让人赏心悦目的视觉效果，必须建立描述图形的几何模型还有光照模型，再加上视角、颜色、纹理等属性，再经过模型变换、视图变换、投影操作等，这些步骤从而实现一个完整的OpenGL程序效果。OpenGL是一个开放的三维图形软件包，它独立于窗口系统和操作系统，以它为基础开发的应用程序可以十分方便地在各种平台间移植。计算机图形学通过应用OpenGL的功能，使得生成的图形效果具有高度真实感。学习计算机图形学的重点是掌握OpenGL在图形

4、学程序中的使用方法。事实上，图形学也把可以表示几何场景的曲线曲面造型技术和实体造型技术作为其主要的研究内容。同时，真实感图形计算的结果是以数字图像的方式提供的，计算机图形学也就和图像处理有着密切的关系。通过21世纪是信息的时代，在日新月异的科技更新中相信计算机会发挥越来越重要的作用，计算机图形学也会在更多的领域所应用，虽然我国在这方面还比较薄弱，但相信会有越来越好的时候的。设计需求设计目标以图形学算法为目标，深入研究。继而策划、设计并实现一个能够表现计算机图形学算法原理的或完整过程的演示系统，并能从某些方面作出评价和改进意见。通过完成一个完整程序，经历策划、设计、开发、测试、总结和验收各阶段，

5、达到：巩固和实践计算机图形学课程中的理论和算法；学习表现计算机图形学算法的技巧；培养认真学习、积极探索的精神。设计环境VC+VC+是Microsoft公司推出的一个基于Windows系统平台、可视化的集成开发环境，它的源程序按C+语言的要求编写，并加入了微软提供的功能强大的MFC(MicrosoftFoundationClass)类库。MFC中圭寸装了大部分WindowsAPI函数和Windows控件，它包含的功能涉及到整个Windows操作系统。MFC不仅给用户提供了Windows图形环境下应用程序的框架，而且还提供了创建应用程序的组件，这样，开发人员不必从头设计创建和管理一个标准Windo

6、ws应用程序所需的程序，而是从一个比较高的起点编程，故节省了大量的时间。另夕卜，它提供了大量的代码，指导用户编程时实现某些技术和功能。因此，使用VC+提供的高度可视化的应用程序开发工具和MFC类库，可使应用程序开发变得简单。MFCMFC(MicrosoftFoundationClasses)，是一个微软公司提供的类库(classlibraries)以C+类的形式封装了Windows的API，它包含了窗口等许多类的定义。各种类的集合构成了一个应运程序的框架结构，以减少应用程序开发人员的工作量。其中包含的类包含大量Windows句柄封装类和很多Windows的内建控件和组件的封装类。MFC版本封装

7、了大约200个类，其中的一些可以被用户直接使用。例如CWnd类封装了窗口的功能，包括打印文本、绘制图形及跟踪鼠标指针的移动等；CsplitterWnd类是从CWnd类派生出来的，继承了基类或称父类CWnd类的所有特性，但增加了自己的功能，实现拆分窗口，使窗口至少可被拆分成两个窗口，用户可以移动两个窗口之间的边框来改变窗口的大小；CtoolBar类可以定义工具栏等。MFC命名的惯例是类的名字通常是由“C”打头；成员变量使用前缀“m_”，接着使用一个字母来指明数据类型，然后是变量的名称；所有的单词用大写字母开头。设计题目及要求(1) 题目：实现多边形和曲线的绘制和变换(2) 要求：学会使用VC+编

8、写实现图形的绘制变换，需包括直线、曲线、多边形的绘制和变换，及三维立体图形的相应变换总体流程图三、课程设计原理实现的算法DDA算法画直线DDA是数字微分分析式(DigitalDifferentialAnalyzer)的缩写。已知直线两端点(x1,y1)、(x2,y2)则斜率m为：m=(y2-y1)/(x2-x1)=Dx/Dy;直线中的每一点坐标都可以由前一点坐标变化一个增量(Dx,Dy)而得到，即表示为递归式：xi+1=xi+Dxyi+1=yi+Dy。递归式的初值为直线的起点（x1,y1），这样，就可以用加法来生成一条直线。具体算法是：该算法适合所有象限，其中用了用了两个函数如：Integer

9、=-9;Integer=8;Sign(i),根据i的正负，分别得到-1，0,+1；相应代码：1画起点（x1,y1）.2.准备画下个点。x坐标增1,判断如果达到终点，则完成。否则，由图中可知,下个要画的点要么为当前点的右邻接点，要么是当前点的右上邻接点如果线段ax+by+c=O与x=x1+1的交点的y坐标大于M点的y坐标的话，下个点为U（x1+1,y1+1）,否则，下个点为B（x1+1,y1）,3.画点（U或者B）.4.跳回第2步.5结束中心点算法画圆和椭圆（1）中心点算法画圆在一个方向上取单位间隔，在另一个方向的取值由两种可能取值的中点离圆的远近而定。实际处理中，用决策变量的符号来确定象素点的

10、选择，因此算法效率较高。生成圆弧的中点算法和上面讲到的生成直线段的中点算法类似。考虑第一象限内x0,R/、2的八分之一圆弧段。经过计算，得出判别式的递推公式为:di2x3di2(xyj5这两个递推公式的初值条件为:(x0,y,r)(0,R)d05/4R编写成员函数如下：voidCMy2_9View:MidPointEllipse(CDC*pDC,doublea,doubleb,intcolor)doublex,y,d,xP,yP,squarea,squareb;squarea=a*a;squareb=b*b;xP=(int)+(double)squarea/sqrt(double)(squar

11、ea+squareb);yP=(int)+(double)squareb/sqrt(double)(squarea+squareb);x=0;y=b;d=4*(squareb-squarea*b)+squarea;pDC-SetPixel(x,y,color);while(x=xP)if(dSetPixel(x,y,color);x=a;y=o；d=4*(squarea-a*squareb)+squareb;pDC-SetPixel(x,y,color);while(yvyP)if(dSetPixel(x,y,color);编写OnDraw函数如下：voidCMy2_9View:OnDraw(

12、CDC*pDC)CMy2_9Doc*pDoc=GetDocument();ASSERT_VALID(pDoc);MidPointEllipse(pDC,500,300,RGB(0,0,0);(2)中心点算法画椭圆我们先考虑圆心在原点的椭圆的生成，对于中心不是原点的椭圆，可以通过坐标的平移变换获得相应位置的椭圆。中心在原点。焦点在坐标轴上的标准椭圆具有X轴对称、Y轴对称和原点对称特性，已知椭圆上第一象限的P点坐标是(x,y)，则椭圆在另外三个象限的对称点分别是(x,-y)、(-x,y)和(-x,-y)。因此，只要画出第一象限的四分之一椭圆，就可以利用这三个对称性得到整个椭圆。相应代码：voidM

13、P_Ellipse(intxc,intyc,inta,intb)doublesqa=a*a;doublesqb=b*b;doubled=sqb+sqa*(-b+;intx=0;inty=b;EllipsePlot(xc,yc,x,y);while(sqb*(x+1)sqa*(y-)if(d0)if(d0)d+=sqb*(2*x+2)+sqa*(-2*y+3);x+;elsed+=sqa*(-2*y+3);y-;EllipsePlot(xc,yc,x,y);图形变换的基本原理平移变换平移变换函数如下：voidglTranslatefd(TYPEx,TYPEy,TYPEz)；三个函数参数就是目标分

14、别沿三个轴向平移的偏移量。这个函数表示用于这三个偏移量生成的矩阵乘以当前矩阵。当参数是,时，表示对函数glTranslate*()的操作是单位矩阵，也就是对物体没有影响。旋转变换旋转变换函数如下：VoidglRotafdTYPEangle,TYPEx,TYPEy,TYPEz)；函数中第一个参数是表示目标沿从点(x,y,z)到原点方向逆时针旋转的角度，后三个参数是旋转的方向点坐标。这个函数表示用这四个参数生成的矩阵乘以当前矩阵。当角度参数是时，表示对物体没有影响。比例变换比例变换函数如下：VoidglScalefd(TYPEx,TYPEy,TYPEz)；单个函数参数值就是目标分别沿三个轴方向缩放

15、的比例因子。这个函数表示用这三个比例因子生成的矩阵乘以当前矩阵。这个函数能完成沿相应的轴对目标进行拉伸、压缩和反射三项功能。以参数x为例，若当x大于时，表示沿x方向拉伸目标；若x小于，表示沿x轴方向收缩目标；若x=表示沿x轴反射目标。其中参数为负值时表示对目标进行相应轴的反射变换。四、总体设计与功能实现主要界面设计设置颜色界面界面设置代码：voidCGraphicsView:OnClock()WHAT_TO_DO=ID_CLOCK;clean();intxx=450,yy=300,r=150,d=5;inti,white=RGB(255,255,255);mile(xx,yy,r,COLOR)

16、;Matrixm(xx,240),s(xx,200);Matrixt1(xx,yy,true),t2(-xx,-yy,true),mr(PI/1800),sr(PI/30);mile(),(),d+1,COLOR);mile(),(),d,COLOR);dne(),(),xx,yy,COLOR);dne(),(),xx,yy,COLOR);for(i=0;i120;i+):Sleep(80);mile(),(),d+1,white);mile(),(),d,white);dne(),(),xx,yy,white);dne(),(),xx,yy,white);m=t1*mr*t2*m;s=t1*

17、sr*t2*s;mile(),(),d+1,COLOR);mile(),(),d,COLOR);dne(),(),xx,yy,COLOR);dne(),(),xx,yy,COLOR);点击“设置-颜色”后，运行结果如下：二维线画图元实现实现代码：voidCGraphicsView:MidCir(CDC*pdc,intx0,inty0,intx1,inty1,intcolor)intr,x,y,deltax,deltay,d;r=sqrt(double)x1-(double)x0)*(double)x1-(double)x0)+(double)y1-(double)y0)*(double)y1-

18、(double)y0);x=0;y=r;deltax=3;deltay=2-r-r;d=1-r;while(xSetPixel(x+x0,y+y0,color);:Sleep(time);pdc-SetPixel(-x+x0,y+y0,color);:Sleep(time);pdc-SetPixel(x+x0,-y+y0,color);:Sleep(time);pdc-SetPixel(-x+x0,-y+y0,color);:Sleep(time);pdc-SetPixel(y+x0,x+y0,color);:Sleep(time);pdc-SetPixel(-y+x0,x+y0,color)

19、;:Sleep(time);pdc-SetPixel(y+x0,-x+y0,color);:Sleep(time);pdc-SetPixel(-y+x0,-x+y0,color);if(dSetPixelV(x+x0,y+y0,color);pdc-SetPixelV(x+x0,-y+y0,color);while(bb*(x+1)aa*)yy=y;if(d1SetPixelV(x+x0,y+y0,color);:Sleep(time);pdc-SetPixelV(-x+x0,y+y0,color);:Sleep(time);pdc-SetPixelV(x+x0,-y+y0,color);:S

20、leep(time);pdc-SetPixelV(-x+x0,-y+y0,color);d2=bb*(x+*(x+aa*(y-1)*(y-1)-aa*bb;deltax-=bb;deltay+=aa;while(y0)if(d2SetPixelV(x+x0,y+y0,color);:Sleep(time);pdc-SetPixelV(-x+x0,y+y0,color);:Sleep(time);pdc-SetPixelV(x+x0,-y+y0,color);:Sleep(time);pdc-SetPixelV(-x+x0,-y+y0,color);voidCGraphicsView:DDALi

21、ne(CDC*pdc,intx0,inty0,intx1,inty1,intcolor)intxx,yy,s,s1,s2,di;floatdx,dy,k,x,y;dx=x1-x0;if(dx=0)s1=1;elses1=-1;dy=y1-y0;if(dy=0)s2=1;elses2=-1;dx=abs(dx);dy=abs(dy);if(dx=dy)s=0;di=(int)dx;k=dy/dx*s2;elses=1;di=(int)dy;k=dx/dy*s1;x=x0;y=y0;for(inti=0;iSetPixel(xx,yy,color);x+=s1;y+=k;elsexx=(int)(

22、x+;yy=(int)y;:Sleep(time);pdc-SetPixel(xx,yy,color);y+=s2;x+=k;点击二维线画图元，课相应画出直线、圆和椭圆，结果如下：画多边形功能的实现部分实现代码：voidCGraphicsView:OnDrawDuoBX()Vertex_Countdlg;if()=IDOK)ifMAX)MessageBox(输入顶点数过大);return;VertexTotal=;CDC*pDC=GetDC();CPenpen(PS_SOLID,2,RGB(255,255,255);CPen*pOldpen=pDC-SelectObject(&pen);pDC

23、-MoveTo(int)(inVertexArray0.x+,(int)(inVertexArray0.y+);inti;for(i=1;iLineTo(int)(inVertexArrayi.x+,(int)(inVertexArrayi.y+);pDC-LineTo(int)(inVertexArray0.x+,(int)(inVertexArray0.y+);pDC-SelectObject(pOldpen);ReleaseDC(pDC);inLength=0;outLength=0;WHAT_TO_DO=ID_DrawDuoBX;点击多边形，输入定点个数，可绘制出相应的多边形，结果如下

24、：画Bezier曲线功能的实现部分实现代码：voidCGraphicsView:OnBezier()JReleaseDC(p);voidCGraphicsView:OnBezierClear()n=-1;RedrawWindow();voidCGraphicsView:DrawBezier(DPOINT*p)if(n=0)return;if(pn.xp0.x-1)&(pn.yp0.y-1)pDC-SetPixel(p0.x,p0.y,COLOR);return;DPOINT*p1;p1=newDPOINTn+1;inti,j;p10=p0;for(i=1;i=n;i+)for(j=0;j=0)

25、pointscurrent.x=;pointscurrent.y=;RedrawWindow();if(current2=0)pointscurrent2.x=;pointscurrent2.y=;RedrawWindow();break;default:break;CView:OnMouseMove(nFlags,point);点击曲线-Beizer曲线，可实现Beizer曲线的绘制功能，绘制结果如下图：图1图2点击曲线-Beizer曲线，可实现Beizer曲线的移动，鼠标点击其中的任一点，可实现曲线的移动，绘制结果如下图：图1移动后的曲线上图2移动后的曲线二维图形变换的实现可以实现一椭圆在

26、界面上的随机移动，一圆在界面上饶某一点的旋转和一正方形由大变小在变大的变化，部分实现代码如下：voidCGraphicsView:OnXuanzhuan()WHAT_TO_DO=ID_XUANZHUAN;time=0;OnClear();CClientDCdc(this);CDC*pDC=&dc;inti,white=RGB(255,255,255),point22=300,200,300,250;Matrixa(point00,point01),b(point10,point11);intmidx=(point00+point10)/2,midy=(point01+point11)/2;Ma

27、trixt1(midx,midy,true),t2(-midx,-midy,true);Matrixr(PI/50);Matrixtemp(midx,midy,true);temp=t1*r*t2;for(i=0;i200;i+):Sleep(50);MidCir(pDC,(),(),(),(),white);a=temp*a;b=temp*b;MidCir(pDC,(),(),(),(),COLOR);for(i=0;iSetCheck(WHAT_TO_DO=ID_XUANZHUAN);voidCGraphicsView:OnScale()WHAT_TO_DO=ID_SCALE;OnClea

28、r();CClientDCdc(this);CDC*pDC=&dc;time=0;inti,white=RGB(255,255,255),point42=300,250,400,250,300,300,400,300;floatsx=,sy=;intmidx=(point00+point30)/2,midy=(point01+point31)/2;Matrixs1(sx,sy),s2(1/sx,1/sy);Matrixt1(midx,midy,true),t2(-midx,-midy,true);Matrixa(point00,point01),b(point10,point11);Matri

29、xc(point20,point21),d(point30,point31);Matrixtemp(midx,midy,true);temp=t1*s1*t2;DDALine(pDC,(),(),(),(),COLOR);DDALine(pDC,(),(),(),(),COLOR);DDALine(pDC,(),(),(),(),COLOR);DDALine(pDC,(),(),(),(),COLOR);for(i=0;i20;i+):Sleep(30);DDALine(pDC,(),(),(),(),white);DDALine(pDC,(),(),(),(),white);DDALine(

30、pDC,(),(),(),(),white);DDALine(pDC,(),(),(),(),white);a=temp*a;b=temp*b;c=temp*c;d=temp*d;DDALine(pDC,(),(),(),(),COLOR);DDALine(pDC,(),(),(),(),COLOR);DDALine(pDC,(),(),(),(),COLOR);DDALine(pDC,(),(),(),(),COLOR);temp=t1*s2*t2;for(i=0;iSetCheck(WHAT_TO_DO=ID_SCALE);三维图形的变换主要实现三维图形的上下左右平移，分别绕X轴Y轴Z轴的

31、旋转，放大和缩小，以及正方体六个面的颜色变换，除此之外，还可以选择背景颜色的改变部分代码如下：voidCGraphicsView:OnAoduomianti()WHAT_TO_DO=ID_AODUOMIANTI;CDrawDLGdlg1;();voidCGraphicsView:OnUpdateAoduomianti(CCmdUI*pCmdUI)pCmdUI-SetCheck(WHAT_TO_DO=ID_AODUOMIANTI);voidCDrawDLG:OnPaint()CPaintDCdc(this);=vi.x;di.y=(int)(vi.y*cos(a*DU)-vi.z*sin(a*D

32、U);di.z=(int)(vi.y*sin(a*DU)+vi.z*cos(a*DU);vi.x=(int)(di.x*cos(b*DU)+di.z*sin(b*DU);vi.y=di.y;vi.z=(int)(di.z*cos(b*DU)-di.x*sin(b*DU);di.x=(int)(vi.x*cos(c*DU)-vi.y*sin(c*DU);di.y=(int)(vi.x*sin(c*DU)+vi.y*cos(c*DU);di.z=vi.z;wi.x=di.x+cx;wi.y=di.y+cy;zi=di.z;p00=w0;p01=w1;p02=w2;p03=w3;p10=w4;p11

33、=w5;p12=w6;p13=w7;p20=w0;p21=w1;p22=w5;p23=w4;p30=w1;p31=w2;p32=w6;p33=w5;p40=w2;p41=w3;p42=w7;p43=w6;p50=w0;p51=w3;p52=w7;p53=w4;switch(Maxnum(z,7)case0:fill(p0,p2,p5,0,2,5);break;case1:fill(p0,p2,p3,0,2,3);break;case2:fill(p0,p3,p4,0,3,4);break;case3:fill(p0,p4,p5,0,4,5);break;case4:fill(p1,p2,p5,

34、1,2,5);break;case5:fill(p1,p2,p3,1,2,3);break;case6:fill(p1,p3,p4,1,3,4);break;case7:fill(p1,p4,p5,1,4,5);break;BOOLCDrawDLG:OnInitDialog()CDialog:OnInitDialog();(-180,180);(0);(-180,180);(0);(-180,180);(0);(0,350);(200);(0,300);(115);a=b=c=0;fs=;SetTimer(1,100,NULL);Ctrl=0;cx=200;cy=115;COLOR1=RGB(123,234,43);COLOR2=RGB(123,123,0);COLOR3=RGB(123,24,235);COLOR4=RGB(0,123,95);COLOR5=RGB(23,234,34);COLOR6=RGB(234,124,0);COL