GDI+图形编程.ppt

GDI 图形编程 姓名 杨建枝TEL Mail jzhyang GDI 图形编程 1GDI 编程基础 2画刷和画笔 3文本与字体 4路径和区域 1GDI 编程基础 GDI 体系结构GDI 新特色GDI与GDI GDI 程序的开发一个简单的GDI 程序 GDI 体系结构 二维几何图形的处理 矢量图元 显示图像 位图 JPGE等图形的显示 排版 字体 风格 颜色 文本的反锯齿 GDI 新特色 渐变画刷线性渐变画刷 可以是双色渐变 也可以是多色渐变 默认情况下 双色渐变由起始颜色沿着水平方向平均过渡到终止颜色 其渐变过程是可以控制的 路径渐变画刷 用于定义路径内部的渐变色画刷 渐变色从路径内部的中心点逐渐过渡到路径的边框 GDI 中使用GraphicsPath 图形路径 来定义路径 应用程序使用路径来绘制形体的轮廓 填充形体内部及创建剪切区域 独立的路径对象 PathObjects 路径是可以被填充 被画出轮廓或同时画出轮廓并填充的一个或多个图形 在GDI中 路径是设备环境的一个对象 在BeginPath函数和EndPath函数之间进行绘图时 绘图的住处自动存入路径信息 下次使用BeginPath后便被新的路径信息覆盖 即GDI中的路径信息是唯一的且不断改变的 在GDI 中 绘图是由图形对象来完成 可以创建多个图形对象进行绘图 多个图形对象产生的路径信息是相对独立的 而且不会被新的绘图操作所覆盖 矩阵对象 MatrixObject GDI 提供了矩阵对象来使图形在变形 旋转及平移 时做到简单且效果平滑 通过矩阵运算 可以完成包含投射变换在内的所有伪射变换 例如坐标变换 色彩变换 Alpha通道合成运算 AlphaBlending 多格式图片支持 BMP GIF JPEG EXIF PNG TIFF ICON WMF EMF GDI与GDI GDI是一个状态模型编程 将画刷等对象选入设备环境之后才能进行绘图输出的编程方式 而GDI 中使用的是非状态模型编程 GDI是过程化的编程模式 需要关心设备环境 DC 所有的输出都是由设备环境来完成的 GDI 是对GDI的高级封装 只需要关心Graphics对象 而无需关心设备环境和句柄 MFC的CDC只是对GDI的一个简单封装 并不是一个完全的面向对象的思想 关于坐标 GDI 没有坐标映射的概念 GDI 程序的开发 GDI 相关的SDKWindows2000及之前的版本 要用Gdi 需要下载GDI 的动态链接库 GdiPlus dll WidnowsXP及之后的则勿需 开发GDI 应用程序 VisualStudio6 0及其之前的版本均需要下载SDK包 可在 一个简单的GDI 程序 创建一个简单的Windows窗口应用 也可以是MFC应用程序 我们采用了MFC单文档视图应用程序 工程名称为 GdiplusExam01 引入Gdi 库 在stdafx h文件中加入三行代码 include pragmacomment lib GdiPlus lib usingnamespaceGdiplus 使用名字空间 也可以只在需要使用GDI 的代码文件中引入名字空间 如在本例中则为在GdiplusExam01View cpp 可以考虑不用名字空间 而在声明GDI 对象前加入名字空间 添加GDI 记号 在CGdiplusExam01App类中加入一个私有成元变量 变量类型为ULONG PTR 变量名m ulGdiToken 此变量用于在初始化GDI 库时记录GDI 初始化后的标志 并用于卸载GDI 库 初始化GDI 库 在使用GDI 对象前 必须先初始化GDI 库 在CGdiplusExam01App类中的InitInstance函数CWinApp InitInstance 后加入以下代码 初始化GDI 库GdiplusStartupInputiGsi if GdiplusStartup 卸载GDI 库 在CGdiplusExam01App类中添加方法ExitInstance 并加入以下代码 卸载GDI 库if m ulGdiToken NULL GdiplusShutdown m ulGdiToken m ulGdiToken NULL 画图 在CGdiplusExam01View OnDraw加入 构造Graphics对象Graphicsg pDC GetSafeHdc 设定文本输出使用的画刷 字体SolidBrushbrush Color 255 0 0 255 Fontfont L 楷体 GB2312 24 FontStyleRegular UnitPixel 设定文本输出坐标CRectrtClient GetClientRect 练习 考虑用传统的GDI方式实现上述代码 要求在上述例子 将打印的字体格式设为视图居中 提示 Graphics MeasureString 采用渐变画刷 渐变颜色从左到右 字的最左边颜色为Color 128 255 0 255 最右边为Color 255 0 0 255 提示 渐变画刷类为LinearGradientBrush 2画刷和画笔 画刷 Brush 单色画刷 SolidBrush 影线画刷 HatchBrush 纹理画刷 TextureBrush 线性渐变画刷 LinearGradientBrush 路径渐变画刷 PathGradientBrush 画笔 Pen 画笔的线型画笔的对齐方式画笔的缩放与旋转画笔的线帽属性直线的连接点属性 画刷 Brush GDI 提供了五种画刷 画刷的使用Graphics FillClosedCurve 填充闭合曲线Graphics FillEllipse 填充椭圆Graphics FillPath 填充路径Graphics FillPie 填充扇形Graphics FillPolygon 填充多边形Graphics FillRectangle 填充矩形Graphics FillRectangles 填充矩形集Graphics FillRegion 填充区域Graphics DrawString 画字符串 单色画刷 SolidBrush 创建SolidBrush constColor示例创建一个单文档视图的MFC应用程序 工程名称 GdiplusExam02 视图名称定义为CSolidView 导入GDI 库 并完成相应的初始化及卸载代码 在CSolidView OnDraw中加入以下代码 画一个半圆Graphicsg pDC GetSafeHdc SolidBrushsbr Color 255 255 255 0 g FillPie 影线画刷 HatchBrush 创建HatchBrush HatchStylehatchStyle constColor示例 原上述例子上 添加一个视图 CHatchView 并在CHatchView OnDraw中完成 创建一个影线画刷 并画一个矩形HatchBrushhbr1 HatchStyleLargeCheckerBoard Color 128 128 128 128 Color 0 0 0 0 g FillRectangle 练习在上述例子中 比较加入绘制原点与没有加入的区别 另外创建一个工程 绘制出所有类型的影线画刷图形 每个类型都用一个100 100的矩形画图 每行10个类型 学生成绩统计 学生成绩有平时成绩 期中成绩 期末成绩 学期成绩 平时成绩 0 3 期中成绩 0 3 期末成绩 0 4 要求用影线画刷画出统计柱形统计图 纹理画刷 TextureBrush 创建TextureBrush TextureBrush Image WrapMode TextureBrush TextureBrush Image WrapMode Rect 纹理画刷使用的基本图案 指定在画刷中如何排列基本图案 指定图案中用于画刷中的矩形区域 它的大小不能超过基本图案的范围 否则画刷不能够完成正常的填充效果 指定基本图案的附加特征参数 画刷排列方式WrapModeTile 简单的平铺基本图像方式 WrapModeTileFlipX 水平方向翻转并平铺基本图像方式 WrapModeTileFlipY 垂直方向翻转并平铺基本图像方式 WrapModeTileFlipXY 水平和垂直方向同时翻转基本图片 WrapModeClamp 对图像不进行平铺 并只能在客户区域的最左上角显示 纹理画刷的变换旋转变换 RotateTransformStatusRotateTransform REALangle MatrixOrderorder MatrixOrderPrepend 缩放变换 ScaleTransformStatusScaleTransform REALsx REALsy MatrixOrderorder MatrixOrderPrepend 矩阵变换 SetTransformStatusSetTransform constMatrix matrix 示例 创建一个纹理画刷 并画一个矩形Imageimg L Texture jpg TextureBrushtbr 线性渐变画刷 LinearGradientBrush 创建LinearGradientBrush consPointF 起点和终点的坐标 起点和终点的颜色 渐变的旋转角度 是否需要旋转 为真是 angle参数方有效 渐变的填充方向 线性渐变画刷的填充方式 SetWrapMode线性渐变画刷的渐变模式 在创建线性渐变画刷时有指定LinearGradientMode LinearGradientModeHorizontal 水平渐变 左边为起点色 右边为终点色 LinearGradientModeVertical 垂直渐变 上边为起点色 下边为终点色 LinearGradientModeForwardDiagonal 从左上角到右下角 左上角为起点色 右下角为终点色 LinearGradientModeBackwardDiagonal 从右上角到左下角 右上角为起点色 左下角为终点色 线性渐变画刷的渐变线渐变线是一条虚构的线 实际上就是渐变的旋转角度线 在创建线性渐变画刷时 可以输入旋转角度来改变渐变线 多色线性渐变画刷StatusSetInterpolationColors constColor presetColors constREAL blendPositions INTcount 包含多个预定义过渡色的数组 第一个为起始色 最后一个为终止色 包含色彩合成位置的数组 合成位置为百分比 首尾必须为0 和100 参与渐变的色彩总数 实际上为数组presetColors和数组blendPositions的大小 定制线性渐变画刷的色彩渐变行为StatusSetBlend constREAL blendFactors constREAL blendPositions INTcount 线性渐变画刷的变换旋转变换 RotateTransformStatusRotateTransform REALangle MatrixOrderorder MatrixOrderPrepend 缩放变换 ScaleTransformStatusScaleTransform REALsx REALsy MatrixOrderorder MatrixOrderPrepend 矩阵变换 SetTransformStatusSetTransform constMatrix matrix 包含了合成因子的数组 每个数的大小为0 1 包含合成位置的数组 合成位置为百分比 首尾必须为0 和100 合成点位置数 实际上为数组blendColors和数组blendPositions的大小 定制线性渐变画刷的色彩渐变与多色渐变结合时 需要预先处理定制线性渐变画刷的色彩渐变再设置多色渐变过程 示例 创建线性渐变画刷 并画一个圆形LinearGradientBrushlbr Point 0 0 Point 100 100 Color 255 255 0 0 Color 255 255 255 0 g FillEllipse 创建一个线性渐变画刷 并指定多色渐变过程 画一个矩形ColoraClr Color 255 255 0 0 Color 128 255 0 0 Color 128 255 255 0 Color 255 255 255 0 Color 128 0 255 0 Color 255 0 255 0 REALaPosition 0 0f 0 1f 0 3f 0 6f 0 9f 1 0f LinearGradientBrushlbrInter Rect 0 120 200 100 Color 255 255 0 0 Color 255 255 255 0 0 FALSE lbrInter SetInterpolationColors 练习完成线性渐变画刷的四种填充方式 并观察之间的差别 自定义画刷的色彩渐变过程 共为10个点 依次为0 0 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 要求自定义过程结果与默认一致 在上题的基础上 更改自定义结果 并结合色彩自定义过程 观察变化 用线性渐变画刷完成一个光谱图 可见光波长由长到短分为红 橙 黄 绿 青 兰 紫光 路径渐变画刷 PathGradientBrush 路径路径 表明了一定的区间 应用程序使用路径来绘制形体的轮廓 填充形体内部以及创建剪切区域 路径可以由一个或多个图形组成 而第一个图形以可以由一系列直线或曲线组成 还可以是基本的几何体 例如矩形 圆形 扇形 在GDI 中用GraphicsPath表示 创建路径GraphicsPath FillModefillMode GraphicsPath constPoint points constBYTE types INTcount FillModefillMode GraphicsPath constPointF points constBYTE types INTcount FillModefillMode 填充模式 定义子路径的坐标点 Points数组成员的类型描述 这些点的类型有PathPointType枚举列出的点 直线的端点 曲线的端点或控制点3种 Points数组的大小 同样为types数组的大小 创建路径渐变画刷PathGradientBrush constGraphicsPath path PathGradientBrush constPoint points INTcount WrapModewrapMode PathGradientBrush constPointF points INTcount WrapModewrapMode 路径渐变画刷排列方式 SetWrapMode路径渐变画刷的中心点 SetCenterPoint 默认情况下 路径的中心点是定义路径的各个点坐标的平均值 路径渐变画刷色彩渐变过程是由中心点到边缘的一个过渡 由GraphicsPath类定义的路径对象 用数组形式表示的组成路径的各个端点的坐标 构造路径的端点总数 即为数组points的大小 渐变画刷在目标区域中的排列方式 路径渐变画刷端点颜色StatusSetSurroundColors constColor colors 端点颜色数组INT count 端点数 路径渐变画刷的多色渐变默认情况下 路径渐变画刷的色彩只有两种 中心点色彩与边缘色彩 SetInterpolationColors 路径渐变画刷的焦点缩放比例GDI 中的路径是由若干个点定义而形成的一个封闭区域 如果在封闭区域的内部再选一个与整个路径的形状一致 但面积小一些的区域 这个区域就称为原始区域的焦点缩放 更改焦点比例的目的在于让路径中心点的色彩按照不同的缩放比例在中心区域内部的每一处都显示 而不是仅仅在中心点显示 指定端点颜色时无效 StatusSetFocusScales REALxScale 水平方向上的缩放比例REALyScale 垂直方向上的缩放比例 路径渐变画刷的变换旋转变换 RotateTransformStatusRotateTransform REALangle MatrixOrderorder MatrixOrderPrepend 缩放变换 ScaleTransformStatusScaleTransform REALsx REALsy MatrixOrderorder MatrixOrderPrepend 矩阵变换 SetTransformStatusSetTransform constMatrix matrix 路径渐变画刷的Gamma 伽玛 校正Gamma校正是GDI 支持的新功能 用于保证同一数字图片在没的计算机上达到同样的显示效果 默认情况下是不支持Gamma校正的 StatusSetGammaCorrection BOOLuseGammaCorrection 示例 创建路径对象Pointpoints Point 75 0 Point 100 50 Point 150 50 Point 112 75 Point 150 150 Point 75 100 Point 0 150 Point 37 75 Point 0 50 Point 50 50 GraphicsPathpath path AddLines points sizeof points sizeof points 0 创建路径画刷 并设置中心点颜色PathGradientBrushpthGrBrush 练习创建一个正三角形路径渐变画刷 路径渐变画刷的多色渐变 边 255 255 0 0 中心 255 255 255 0 完成焦点缩放比例 0 0 0 0 0 1 0 6 0 5 0 5 1 0 1 0 1 5 1 8 并比较 指定上述画刷的端点颜色 观察效果 指定端点颜色后 启动Gamma校正 观察效果 画笔 Pen 画笔用于描绘图形的轮廓 其属性有 色彩 宽度 对齐方式 线帽 变换方式 创建 Pen Color 画刷是没有宽度的 画笔可以通过GetWidth来获取画笔宽度 画笔的线型 画笔类型值 typedefenum DashStyleSolid 0 实线DashStyleDash 1 虚线DashStyleDot 2 点线DashStyleDashDot 3 点划线DashStyleDashDotDot 4 双点划线DashStyleCustom 5 自定义 DashStyle 获取和改变画笔线型DashStyleGetDashStyle VOID StatusSetDashStyle DashStyledashStyle 自定义画笔线型 设定自定义线型StatusSetDashPattern constREAL dashArray 自定义点线长度数组INTcount 数组大小 获取自定义点线数组大小INTGetDashPatternCount VOID 获取自定义点线长度数据StatusGetDashPattern REAL dashArray INTcount 自定义格式 画线部分长度 间隔部分长度 画线部分长度 画笔的对齐方式 对齐方式类型值 typedefenum PenAlignmentCenter 0 居中PenAlignmentInset 1 嵌入 PenAlignment 设置和获取对齐方式StatusSetAlignment PenAlignmentpenAlignment PenAlignmentGetAlignment VOID 画笔的缩放与旋转 旋转变换 RotateTransformStatusRotateTransform REALangle MatrixOrderorder MatrixOrderPrepend 缩放变换 ScaleTransformStatusScaleTransform REALsx REALsy MatrixOrderorder MatrixOrderPrepend 矩阵变换 SetTransformStatusSetTransform constMatrix matrix 画笔的线帽属性 线帽枚举类型值typedefenum LineCapFlat 0 LineCapSquare 1 LineCapRound 2 LineCapTriangle 3 LineCapNoAnchor 0 x10 LineCapSquareAnchor 0 x11 LineCapRoundAnchor 0 x12 LineCapDiamondAnchor 0 x13 LineCapArrowAnchor 0 x14 LineCapCustom 0 xff LineCap 自定义线帽类型CustomLineCap类型CustomLineCap constGraphicsPath fillPath 填充路径constGraphicsPath strokePath 画线路径LineCapbaseCap LineCapFlat 基于线帽类型REALbaseInset 0 嵌入长度 设置与获取SetCustomStartCap 设置自定义起点线帽SetCustomEndCap 设置自定义终点线帽 示例 创建自定义开始路径GraphicsPathpthStart pthStart AddEllipse 5 5 10 10 创建自定义结束路径GraphicsPathpthEnd pthEnd AddLine 0 20 10 0 pthEnd AddLine 0 20 10 0 pthEnd AddLine 0 10 10 0 pthEnd AddLine 0 10 10 0 创建自定义线帽CustomLineCapclcStart 直线的连接点属性 连接点枚举类型typedefenum LineJoinMiter 0 斜联接 产生一个锐角或切除角 具体取决于斜联接的长度是否超过斜联接限制 LineJoinBevel 1 斜角的联接 产生一个斜角LineJoinRound 2 圆形联接 在两条线之间产生平滑的圆弧LineJoinMiterClipped 3 斜联接 产生一个锐角或斜角 具体取决于斜联接的长度是否超过斜联接限制 LineJoin 3文本与字体 在GDI 中使用文字GDI 字体列举出系统目前安装的字体信息字体轮廊的平滑处理创建私有字体集合在GDI 中输出文本 在GDI 中使用文字 创建字体Font HDChdc Font HDChdc constLOGFONTA logfont Font HDChdc constLOGFONTW logfont Font HDChdc constHFONThfont Font constFontFamily family REALemSize INTstyle Unitunit Font constWCHAR familyName REALemSize INTstyle Unitunit constFontCollection fontCollection FontFamilyFontFamily FontFamily constWCHAR name constFontCollection fontCollection 设备环境句柄 字体信息结构体指针 GDI逻辑字体句柄 字体系列对象指针 字体高度 字体风格 由FontStyle指定 字体高度的单位 默认为UnitPoint 字体集 默认为NULL 表示与系统一致 字体名 GDI 字体 字体信息描述结构体typedefstructtagLOGFONT LONGlfHeight LONGlfWidth LONGlfEscapement LONGlfOrientation LONGlfWeight BYTElfItalic BYTElfUnderline BYTElfStrikeOut BYTElfCharSet BYTElfOutPrecision BYTElfClipPrecision BYTElfQuality BYTElfPitchAndFamily TCHARlfFaceName LF FACESIZE LOGFONT 字体的大小单位枚举typedefenum UnitWorld 0 UnitDisplay 1 UnitPixel 2 UnitPoint 3 UnitInch 4 UnitDocument 5 UnitMillimeter 6 Unit 字体风格枚举typedefenum FontStyleRegular 0 FontStyleBold 1 FontStyleItalic 2 FontStyleBoldItalic 3 FontStyleUnderline 4 FontStyleStrikeout 8 FontStyle 列举出系统目前安装的字体信息 InstalledFontCollection类GetFamilyCountStatusGetFamilies INTnumSought FontFamily gpfamilies INT numFound const InstalledFontCollection派生自FontCollection 练习 增强型字体对话框 字体轮廊的平滑处理 SetTextRenderingHintStatusSetTextRenderingHint TextRenderingHintnewMode TextRenderingHinttypedefenum 使用系统默认TextRenderingHintSystemDefault 0 不消除锯齿 使用网格匹配TextRenderingHintSingleBitPerPixelGridFit 1 不消除锯齿 不使用网格匹配TextRenderingHintSingleBitPerPixel 2 消除锯齿 使用网格匹配TextRenderingHintAntiAliasGridFit 3 消除锯齿 不使用网格匹配TextRenderingHintAntiAlias 4 在液晶显示上 使用ClearType技术TextRenderingHintClearTypeGridFit