毕业论文：基于net的二维图形绘制处理系统设计与实现定稿

毕业论文：基于net的二维图形绘制处理系统设计与实现定稿内容摘要：

(3) 椭圆 标准椭 圆是关于长轴和短轴都对称的， 因此 ，可以将椭圆 理解 是 由四个曲线片段组成的。 在本系统里 ， 定义了一个 CurveTo( )函数来实现椭圆曲线片段的绘制。 椭圆的绘制起点为其外接矩形左中点。 (4) 三角形 在 本系统里 ， 实现的是等边三角形的绘制。 等边三角形可以理解成 由三个直线段围成的封闭图形， 三个 内角角度都为 60176。 在本绘图系统里，绘制三角形时，鼠标按下的位置便是起点，鼠标弹起的位置便 是终点。 (5) 多边形 在本绘图系统里，主要实现的是五角星和等五边形这两个多边形工具，它们的绘制原理和三角形 是一样的，同 样也可以以任意的角度绘制。 (7) 钢笔工具 钢笔工具可以画直线、曲线 、任意多边形 和 其他任意自由图形。 图形处理功能模块 对图形进行一些必要得 处理可以使图形更符合实际需 要 ， 并且 更加美观、实用。 在本系统里 ，图形处理功能主要 有 ：平移、旋转、缩放。 一张二维图形可以由许多直线连接而成，或者看成由很 多小直线段逼近而成。 而一条直线段则可以由始末端点相连产生。 所以，可以把一幅二维图形看成是一个点集。 如果在 XY 平面内，一个点的坐标用行向量 [x y]表示，那么一个图形的点集则可以用m 2 的矩阵表示。 这样，对图形的几何变换就可以归结为对点的变换。 江苏技术师范学院毕业设计说明书 (论文 ) 第 10 页 共 34页 在二维平面内， 设 变换前的点坐标为 (x ， y)，变换后的坐标为 (x’ ， y’ )， 这个变换过程可以写成如下矩阵形式： [x’ y’ ] = [x y] T ,T 为线型变换矩阵。 二维几何变换的一般形式也可以写成如下代数形式： x’ = a1 x + b1 y + c1 y ’ = a2x + b2y + c2 在本系统 里 ，图形的 几何变换都要用到两个 Matrix 类的方法函数： 一个是RotateAt( )， 表示通过预先计算旋转，沿指定点顺时针旋转该 Matrix；另外一个是 Translate( )， 表示 通过预先计算转换向量，将指定的转换向量应用到此 Matrix。 下面介绍一下本系统中的二维图形几何变换： (1) 平移变换 本系统中， 往任意 方向平移，都可以实现二维图形的平移变换。 (2) 旋转变换 在本系统中，每个图形都有一个矩形控制框，矩形控制框上 都 有八个控制点，分别是矩形的四个顶点和四条边的中点。 图形的旋转 变换中心点为图形的中心点。 (3) 缩放变换 在 该系统 中， 缩放变换可以只缩放 X 轴方向的大小，或者只缩放 Y 轴方向的大小，或者两者同时缩放 图形线条 线条的属性设置一般都有线条的宽度、类型、 颜色。 在本系统中， 还添加了一项功能 —— 设置线条颜色透明度，本系统的线条属性设置对话框设计如 图 42 所示 ： 图 42 线条属性设置界面 线条宽度的默认值为 1， 线宽 可以通过在编辑框中手动输入数字调整。 线条颜色江苏技术师范学院毕业设计说明书 (论文 ) 第 11 页 共 34页 的设置调用了 MFC 中自带的 CColorDialog，该对话框可以显示可 用的颜色以及用户自定义颜色 ， 这样的话既美观又实用，操作方便。 颜色透明度的值在 0%~100%之间，通过 SilderCtrl 控件 来改变颜色透明度。 线条样式 使用了 LineStyle 中的五种类型的线条样式： PS_SOLID、 PS_DASH、 PS_DOT、 PS_DASHDOT、 PS_DASHDOTDOT。 图形填充 本系统中的图形填充方式有无色填充方式、单色填充、 纹理填充 和渐变填充。 除了无 色 填充方式外，其他三种 填充 方式 的 颜色框同线条颜色框一样，调用 了CColorDialog，同时，三种填充方式都能设置颜 色 的 透明度。 纹理填充的颜色 有 前景色和背景色两种，前景色 是 线条的颜色，背景色 是 线条之间 的 间隙颜色，在本系统中， 直接 使 用 HatchBrush 类 ， 提供 53 种纹理填充样式。 渐变填充方式中，渐变颜色至少为两个，最多不能超过十个，可以通过添加颜色和删除颜色两个按钮来删减颜色。 图 43 图形填充界面 文件的存储与读取 使用 Visual C++的 AppWizar 创建应用程序时，应用程序是从 CWinApp、CFrameWnd、 CDoument、 CView，其中 CDoument 类是应用程序的文档类，负责装载和维护文档。 本系统的文档类为 CDrawDoc，图形文件的存储与读取功能就是在 CDrawDoc江苏技术师范学院毕业设计说明书 (论文 ) 第 12 页 共 34页 类中实现的。 文件的存储 本系统中图形文件的存储格式采用了 .XML 格式。 保存图形实际上就是保存图形线条属性、填充属性和 图形的大小，绘制角度以及在绘图区域的位置。 文件的读取 由于本系统中图形文件的存储格式为 .XML，所以在读取图形文件 的时候 ，需要先调用 XML 解析器解析文件并创建树， 通过重载 OnOpenDocument()函数打开文件。 系统界面设计 综合上述功能，该系统的整体界面如图 44 所示： 图 44 系统界面 江苏技术师范学院毕业设计说明书 (论文 ) 第 13 页 共 34页 菜单栏 本系统的菜单栏如图 53 所示： 图 45 菜单栏 本系统中的菜单栏是 AppWizard 自动生成的，最主要的菜单项是文件菜单和视图菜单两项。 其中文件菜单的功能主要有：新建一个空白文档，打开文档，保存文档，打印，退出系统；视图菜单的功能主要是显示和隐藏工具栏和状态栏。 工具栏 在 MFC 中，工具栏的功能由类 CToolBar 实现。 工具栏资源和工具栏类 CToolBar是工具栏的两个要素。 当创建一个文档类时， AppWizard 会自动创建一个工具栏，这个工具栏包含一些常用按钮， 如打开文件、保存 、打印等等。 本系统的工具栏如 图 46 所示： 图 46 工具栏 创建一个新的文档， 打开 文件， 保存当前文档， 图形剪切， 这两个工具依次为复制和粘贴， 选择工具， 钢笔工具 这六个工具依 次为矩形，椭圆，三角形，五角星，五边形，直线， 这三个工具是依次 为 图形填充 、 线条填充和插入图片。 状态栏 在 MFC 中，状态栏的功能由 CStatusBar 类实现。 状态栏实际上是一个小窗口，位于应用程序主窗口的底部，一般分为几个窗格，每个窗格显示不同的信息，主要用来反应软件当前操作功能和操作状态。 考虑到的实际需求，本系统的状态栏只有一个窗格，用来显示当前的操作状态。 状态栏如下图所示： 江苏技术师范学院毕业设计说明书 (论文 ) 第 14 页 共 34页 图 47 状态栏 江苏技术师范学院毕业设计说明书 (论文 ) 第 15 页 共 34页 第五章 系统详细设计 类关系图 根据各功能模块之间的联 系，可 以把本系统中的类划分为如 下几个类，类之间的关系图如下图所示： 图 51 类关系 Segment 类是 图形的 路径片段类，该类中定义了 图形的 路径片段和路径片段的连接方式，路径片段有直线路径片段和曲线路径片段两种，连接方式有直角和半平滑两种。 SegmentCollection 类是路径片段的集合 Handler 类就是操作手柄类，包括 对图形进行变换时的 8 个控制点小方块 控制点的位置 Tool 类是绘图工具类，本系统中所有图形的绘制算法都在此类中，包括有直线、矩形、椭圆 、三角形 等 基本 图形。 ShapeStyle 类 是图形 线条 属性 和填充属性 类， 线条属性有线条宽度、 线型 (包括 实线、虚线、点线、点虚线 )和 颜色；填充属性有填充方式 填充颜色透明度等。 Selection 类是图形处理类， 主要是 图形的 选中 、 平移、旋转、缩放。 Shape 类是图形的属性类，图形的属性包括图形的大小，在 Doc 上的位置，绘制角度等。 Shape ShapeStyle Segment Handler Selection SegmentCollection Tool 江苏技术师范学院毕业设计说明书 (论文 ) 第 16 页 共 34页 基本图形绘制 基本图形绘制的函数基础 本系统 里 ，在绘制 各种图 形的时候用到了三个函数，分别 是 ： (1) 这个 函数的功能是移动移动到指定点。 (2) 这个 函数的功能是 绘制 一个直线的路径片断。 (3) 这个 函数的功能是 绘制 一个曲线的路径片断。 直线 (1) 绘制直线首先 先 确定一个起点 (, )xy ，如下图所 示： 图 52 直线绘制算法示例图 当鼠标移动 到绘图区域 左击时，调用 MoveTo()函数 确定了起点，拖动鼠标至任意位置，弹起 鼠标左键 确定终点，在起点和终点之间调用了 LineTo()函数 连接。 (1)本系统中绘制直线的函数为： DrawLine(PointF ptfStart, PointF ptfEnd) 其中参数 1 是绘制直线的起点，参数 2 是绘制直线的终点。 (2) 函数的调用关系 : O y MoveTo（ x， y） LineTo（ x1， y1） X X 江苏技术师范学院毕业设计说明书 (论文 ) 第 17 页 共 34页 图 53 矩形 矩形可以看成是 由 四条直线段组成的封闭图形，所以矩形的绘制算法本质上是和直线相同的。 如下图所示： 首先确定绘制起点 p(x ,y)，然后调用 函数 LineTo( )进行绘制。 图 54 矩形绘制算法示例图 (1) 本系统中绘制 矩形 的函数为： DrawRectangle(RectF rcfSize) 其中 ，定义了一个矩形类 参数 ，该 参数 包含了矩形的左上角顶点坐标以及矩形的长和宽。 (2) 函数的调用关系： 图 55 GetTopLeftPoint( )函数 实现了 获得矩形的左上顶点 的功能 ， 该点 作为绘制矩形的起始点。 O X p(x ,y) LineTo（ x1， y1） LineTo（ x2， y2） LineTo（ x3， y3） DrawLine( ) MoveTo( ) LineTo( ) DrawRectangle( ) GetTopLeftPoint( ) MoveTo( ) LineTo( ) Close( ) y 江苏技术师范学院毕业设计说明书 (论文 ) 第 18 页 共 34页 Close()函数的功能是闭合路径。 本系统中的矩形的前三条边是通过 LineTo()函数绘制的，然后调用 Close()函数封闭路径形成矩形。 椭圆 椭圆是关于长轴和短轴 都对称的， 可以将椭圆看成是有四段贝 塞尔曲线片段组成的， 椭圆的标准方程如下： (x xc)2 / a2 +(x yc)2 / b2 = 1 （ 51） 根据 贝赛尔曲线算法。