VisualBasic实用教程薛亮第10章.ppt

第10章 图 形 基 础 第10章 图 形 基 础 10.1 坐标系 10.2 绘图属性 10.3 图形控件 10.4 图形方法 习题十 第10章 图 形 基 础 10.1 坐 标 系 10.1.1 坐标系统 在Visual Basic中，每个对象定位于存放它的容器内，对象 定位都要使用容器的坐标系。例如，窗体处于屏幕(Screen)内， 屏幕是窗体的容器。在窗体内绘制对象，窗体就是容器。如果 在框架内绘制控件，该框架就是容器。Visual Basic为对象的定 位提供了Left、Top、Width和Height 4项属性，对象的Left和Top 属性决定了该对象左上角在容器内的坐标位置，改变对象的 Left和Top属性值时，对象在容器内的位置也随之改变。Width 和Height属性决定了该对象的大小，它们总是与容器的度量单 位相同，如图10.1所示。 第10章 图 形 基 础 图10.1 对象在容器内的定位 第10章 图 形 基 础 每个容器都有一个坐标系。构成一个坐标系需要三个要素 ：坐标原点、坐标度量单位、坐标轴的长度与方向。容器坐标 系的默认设置是：容器的左上角为坐标原点(0，0)，横向向右 为X轴的正向，纵向向下为Y轴的正向。坐标度量单位由容器 对象的ScaleMode属性决定。ScaleMode属性设置如表10.1所示 。 第10章 图 形 基 础 表10.1 容器对象的ScaleMode属性 第10章 图 形 基 础 ScaleMode属性缺省时为twip。每英寸1440个twip，20个 twip为一磅(point)。这一度量单位规定的是对象打印时的大小 ，屏幕上的实际物理距离可因监视器尺寸而异。表中除了0和3 以外的所有模式都是指打印长度。例如，ScaleMode属性设置 为7时，长为2个单位的项目，打印时为2 cm长。 设置ScaleMode属性的值会使Visual Basic重新定义对象坐 标度量属性ScaleWidth和ScaleHeight，以便使它们与新刻度保 持一致。无论采用哪一种坐标单位，缺省的坐标原点为对象的 左上角，横向向右为X轴的正向，纵向向下为Y轴的正向。 例如，屏幕的左上角总是坐标原点(0，0)。屏幕坐标总是 以twip为度量单位，窗体的缺省坐标系与屏幕相同，因而窗体 的Top、Left、Width和Height 4 项属性的单位也是twip。位于窗 体之内的对象的坐标取决于窗体的坐标系。 第10章 图 形 基 础 10.1.2 自定义坐标系 对象的坐标系允许用户自行定义。通过对象的ScaleTop、 ScaleLeft、ScaleWidth和ScaleHeight 4 项属性可改变窗体对象的 坐标系。 1重定义坐标原点 属性ScaleTop、ScaleLeft的值用于控制对象左上角坐标，所 有对象的ScaleTop、ScaleLeft属性的缺省值为0，坐标原点在对 象的左上角。例如，窗体缺省坐标系的原点在窗体左上角。当 ScaleTop设置成正数n时，表示将坐标系的X轴向Y轴的负方向 平移n个单位；当ScaleTop设置成负数时(-n)，表示将坐标系的 X轴沿Y轴的正方向平移n个单位。同样的原则，ScaleLeft的设 置值可沿X轴向左或向右平移坐标系的Y轴，如图10.2所示。 第10章 图 形 基 础 2重定义坐标轴方向和度量单位 属性ScaleWidth、ScaleHeight的值可确定对象坐标系X轴与 Y轴的正向及最大坐标值。缺省时其值均大于0，此时X轴的正 向向右，Y轴的正向向下。X轴的度量单位为对象当前宽度的 1/ScaleWidth，Y轴的度量单位为对象当前高度的1/ScaleHeight ，对象右下角坐标值为(ScaleLeft+ScaleWidth， ScaleTop+ScaleHeight)。 第10章 图 形 基 础 图10.2 几种重定义坐标原点的应用举例 X Y 0 X 坐标原点下移 n 个单位 缺省坐标系 ScaleLeft=0 ScaleTop=0 ScaleLeft=0 ScaleTop=杴 n 对象的左上角 坐标为(0, 杴 n) ScaleLef=-n ScaleTop=-m 对象的左上角 坐标为(-n,-m) 对象的左上角 坐标为（0,-n） ScaleLef=0 ScaleTop=n X Y X Y 0 第10章 图 形 基 础 10.2 绘 图 属 性 1当前坐标 窗体、图形框或打印机的CurrentX、CurrentY属性给出这些 对象在绘图时的当前坐标。这两个属性在设计阶段不能使用。 当坐标系确定后，坐标值(x,y)表示对象上的绝对坐标位置；如 果坐标值前加上关键字Step，则坐标值(x,y)表示对象上的相对 坐标位置，即在X轴与Y轴方向，从当前坐标分别平移(x,y)个单 位，其绝对坐标值为(CurrentX+x，CurrentY+y)。 第10章 图 形 基 础 2线宽 窗体、图形框或打印机的DrawWidth属性给出这些对象上 所画线的宽度或点的大小。DrawWidth属性以像素(pixel)为单 位来度量，最小值为1。 如果使用控件，则通过BorderWidth属性定义线的宽度或 点的大小。 第10章 图 形 基 础 3线型 窗体、图形框或打印机的DrawStyle属性给出这些对象上 所画线的形状。此处的线型仅当DrawWidth属性值为1时才能 产生。当DrawWidth的值大于1且DrawStyle属性值为14时， 都只能产生实线效果。当DrawWidth的值大于1，而DrawStyle 属性值为6时，所画的内实线仅当是封闭线时起作用。 4填充 封闭图形的填充方式由FillStyle和FillColor这两个属性决 定。FillStyle属性指定填充的图案，共有8种内部图案。 FillColor指定填充图案的颜色，缺省的颜色与ForeColor相同。 第10章 图 形 基 础 5色彩 Visual Basic默认采用对象的前景色(ForeColor属性)绘图， 也可以通过颜色函数指定色彩。 (1) RGB函数。RGB函数通过红、绿、蓝三基色混合产生 某种颜色，其语法格式为： RGB(红，绿，蓝) 括号中红、绿、蓝三基色的成份使用0255之间的整数。例如 ，RGB(0，0，0)返回黑色：而RGB(255，255，255)返回白色 。从理论上来说，用三基色混合可产生256256256种颜色， 但是实际使用时受到显示硬件的限制，普通VGA显示卡只能显 示16种颜色。 第10章 图 形 基 础 (2) QBColor函数。QBColor函数采用Quick Basic所使用的 16种颜色，其语法格式为： QBColor(颜色码) 颜色码使用015之间的整数，每个颜色码代表一种颜色 。 RGB函数与QBColor函数实际上都返回一个6位的十六进 制的长整数。这个数从左到右，每两位一组代表一种基色， 它们的顺序是红、绿、蓝。因而，我们也可以直接用6位的十 六进制颜色代码表示颜色。在色彩的属性设置框中可以看到 这些代码。常用色彩代码如表10.2所示。 第10章 图 形 基 础 表10.2 常用色彩代码 第10章 图 形 基 础 10.3 图 形 控 件 1图形框(PictureBox) 图形框(PictureBox)控件的主要作用是为用户显示图片，也 可作为其它控件的容器。实际显示图片由Picture属性决定。 Picture属性包括被显示的图片的文件名(及可选的路径名)。在程 序运行时可以使用LoadPicture( )在图形框中装入图形。其格式 为： 图形框对象.Picture=LoadPicture(图形文件) 为了在运行时从图形框中删除一个图形，可用 LoadPicture(“)将一个空白图形装入图形框的Picture属性。 第10章 图 形 基 础 缺省时，加载到图形框中的图形保持其原始尺寸。这意味 着如果图形比控件大，则超过的部分将被剪裁掉。图形框控件 不提供滚动条。图形框控件不能伸展图像以适应控件尺寸，但 可以用图形框的Autosize属性调整图形框大小以适应图像。当 Autosize属性设置为True时，图形框能自动调整大小与显示的 图片匹配；如果将Autosize属性设置为False，则图形框不能自 动改变大小来适应其中的图形。 图形框控件也可以用作其它控件的容器。像Frame控件一 样，可以在图形框控件上面加上其它控件。这些控件随图形框 的移动而移动，其Top和Left属性是相对于图形框而言的，与窗 体无关。当图形框的大小改变时，这些控件在图形框的控件中 的相对位置保持不变。 第10章 图 形 基 础 【例10-1】 使用PictureBox控件显示如图10.3所示的图片 。 (1) 建立应用程序用户界面并设置对象属性。添加文件 系统的三个控件以及一个PictureBox控件。 第10章 图 形 基 础 (2) 事件编程如下： 驱动器列表框的事件代码 Private Sub Drive1_Change( ) Dir1.Path=Drive1.Drive End Sub 文件列表的事件代码 Private Sub Dir1_Change( ) File1.Path=Dir1.Path End Sub 文件的事件代码 Private Sub File1_Click( ) ChDrive Drive1.Drive ChDir Dir1.Path Picture1.Picture=LoadPicture(File1.FileName) End Sub 第10章 图 形 基 础 图10.3 图形显示结果 第10章 图 形 基 础 SavePicture 对象名.属性，文件名 说明： (1) 对象名为选定的图形框(PictureBox)或图像框(Image)的 控件名。 (2) 属性为图形框或图像框内的图形属性，如picture属性 或Image属性。 (3)文件名为指定的带有扩展名 .BMP、.ICO、.GIF、.JPG 、.DIB、.WMF、.EMF或 .ICO的文件。 SavePicture命令只支持BMP文件格式。此外， SavePicture命令保存控件中的整个图形，包括不显示部分。 第10章 图 形 基 础 【例10-2】 在用户界面上移动图片示例。 (1) 界面设计如图所10.4示。 图10.4 动画设计界面 第10章 图 形 基 础 (2) 界面控件属性设置如表10.3所示。 表10.3 属 性 设 置 第10章 图 形 基 础 (3) 程序编写如下： Option Explicit 声明变量 Dim scx As Single, scy As Single, sdx As Single, sdy As Single 单击按钮事件 Private Sub cmdBegin_Click( ) imgIcon.Visible = True 使图像框可见 tmrClock.Enabled = True 时钟控件开始工作 End Sub 表单初始化 第10章 图 形 基 础 Private Sub Form_Load( ) scx = 50: scy = 75 sdx = 50: sdy = 50 imgIcon.Visible = False 使图像框不可见 tmrClock.Enabled = False 时钟控件不起作用 End Sub 时钟的Timer事件 Private Sub tmrClock_Timer( ) imgIcon.Move imgIcon.Left + scx, imgIcon.Top + scy 若图像控件到达窗体右边界，改变scx值，使之向左移动 If imgIcon.Left + imgIcon.Width = ScaleWidth + ScaleLeft Then scx =-50 第10章 图 形 基 础 若图像控件到达窗体左边界，改变scx值，使之向右移动 If imgIcon.Left = ScaleHeight + ScaleTop Then scy = -75 若图像控件到达窗体顶部边界，改变scy值，使之向下移动 If imgIcon.Top = 1000 Then sdy = -50 If imgIcon.Width = 1000 Then sdx = -50 If imgIcon.Height = 200 Then sdy = 50 If imgIcon.Width = 200 Then sdx = 50 End Sub 第10章 图 形 基 础 (4) 运行结果如图10.5和10.6所示。 图10.5 某一时刻的动画运行结果(1) 第10章 图 形 基 础 图10.6 某一时刻的动画运行结果(2) 第10章 图 形 基 础 3画线工具 画线工具(Line)控件可以用来画线。画线操作的步骤如下： (1) 单击工具箱中的Line图标。 (2) 移动鼠标到要画线的起始位置。 (3) 按下鼠标左键并拖曳鼠标到要画线的结束处，放开鼠标左键。 第10章 图 形 基 础 4形状 形状(Shape)控件可以用来画矩形、正方形、椭圆、圆、圆 角矩形及圆角正方形。画某一形状的几何图形的步骤如下： (1) 单击工具箱中的Shape图标。 (2) 在窗体内将鼠标移到要画图形的左上角位置。 (3) 按下鼠标左键并拖曳鼠标到要画图形结束处的右下角。 (4) 放开鼠标左键，屏幕上显示一个矩形。 (5) 选择Properties窗口中的Shape属性，确定所需要的形状 。 第10章 图 形 基 础 【例10-3】 编写程序显示Shape控件的6种形式，并设置不 同的填充样式和填充颜色。 (1) 在窗体上建立Shape控件数组Shape1(0)Shape1(5) 第10章 图 形 基 础 (2) 编写事件代码如下： Private Sub Form_Click( ) Dim i As Integer Print Shape1(0).Shape = 0 设置第一个控件的属性 Shape1(0).FillStyle = 2 For i = 1 To 5 Shape1(i).Left = Shape1(i - 1).Left + 1000 设置其余控件位置 Shape1(i).Shape = i 设置图形属性 Shape1(i).FillStyle = i + 2 设置填充模式 Shape1(i).FillColor = QBColor(i + 3) 设置填充颜色 Next i End Sub 第10章 图 形 基 础 (3) 运行结果如图10.7所示。 图10.7 图形控件运行结果 第10章 图 形 基 础 10.4 图 形 方 法 1Line方法 Line方法用于画直线或矩形，其语法格式如下： 对象.LineStep(x1，y1)-(x2, y2),颜色,BF 说明： (1) 对象指示Line在何处产生结果，它可以是窗体或图形框 ，缺省时为当前窗体。 (2) (x1，y1)为线段的起点坐标或矩形的左上角坐标，(x2， y2)为线段的终点坐标或矩形的右下角坐标。 (3) 关键字Step表示采用当前作图位置的相对值。 (4) 关键字B表示画矩形，关键字F表示用画矩形的颜色来填 充矩形。缺省下则矩形的填充由FillColor和FillStyle属性决定。 第10章 图 形 基 础 【例10-4】 Line方法举例。 (1) Line (250,300) - (400,500)表示画一条从(250,300)到 (400,500)点的直线。 (2) Line - (400，500)表示从当前位置(由CurrentX， CurrentY决定)画到(400，500)的一条直线。 (3) Line (150, 250) - Step (150, 50)表示出发点是(150,250)， 终点是向X轴正向走150，向Y轴正向走50的直线。等同于： Line (150,250) - (300,300)。 (4) Line (20,40) - (150,200) , , B表示画一个左上角在(20,40) ，右下角在(150,200)的矩形，注意在color 参数省略时，逗号并 不省略。 第10章 图 形 基 础 (5) Line (20,40) - Step (50,70), RGB(255,0,0), BF表示用红 色从(20,40)到(70,110)画一个实心的矩形。 (6) Line - (30,50), RGB(0,255,255), ABC是错误的语句， 因为color 参数后面的参数只有B或BF两种形式。 第10章 图 形 基 础 2Circle方法 Circle方法用于画圆、椭圆、圆弧和扇形，其语法格式如下 ： 对象.CircleStep(x,y),半径,颜色,起始角,终止角,长短轴比率 说明： (1) 对象指示Circle在何处产生结果，它可以是窗体、图形框 或打印机，缺省时为当前窗体。 (2) (x，y)为圆心坐标，关键字Step表示采用当前作图位置的 相对值。 (3) 圆弧和扇形通过参数起始角、终止角控制，当起始角、 终止角取值在02时为圆弧：当起始角、终止角取值前加一负 号时画出扇形，负号表示画圆心到圆弧的径向线。 (4) 画椭圆时可通过长短轴比率控制，默认值为1时即为画圆 。 第10章 图 形 基 础 【例10-5】 Circle方法举例。以下程序语句的运行结果 如图10.8所示。 (Private Sub Form_Activate( ) Circle (1000, 1000), 1000, , -1.571, -2.543 Circle (2000, 1000), 500, , -2.543, -1.571 End Sub 第10章 图 形 基 础 图10.8 Circle方法运行结果 第10章 图 形 基 础 【例10-6】 以下代码在窗体上画同心圆，并调用 SavePicture方法将图形存入文件test.bmp。程序运行结果如图 10.9所示。 表单单击事件： Private Sub Form_Click( ) Dim CX, CY, Limit, Radius 声明变量 ScaleMode = 3 设置像素点 AutoRedraw = -1 设置自动重画属性 Width = Height 使窗体width与height相同 CX = ScaleWidth / 2 设定当前坐标(x,y) CY = ScaleHeight / 2 Limit = CX 限定窗体上可画的最大圆 第10章 图 形 基 础 以下循环用于画同心圆 For Radius = 0 To Limit Circle (CX, CY), Radius, RGB(Rnd * 255, Rnd * 255, Rnd * 255) Next Radius SavePicture Image, “Test.bmp“ 结果存入文件Test.bmp End Sub 第10章 图 形 基 础 图10.9 同心圆显示结果 第10章 图 形 基 础 3Pset方法 Pset方法用于画点，其语法格式如下： 对象.Pset Step(x,y),颜色 其中，参数(x,y)为所画点的坐标，关键字Step表示采用当 前作图位置的相对值。采用背景颜色可清除某个位置上的点。 利用Pset方法可画任意曲线。 第10章 图 形 基 础 【例10-7】 用Pset方法绘制阿基米德螺线。 通过Form_Click( )事件绘制阿基米德螺线。 Private Sub Form_Click( ) Dim x As Single, y As Single, I As Single Scale (-15, 15) -(15, -15) 自定义坐标系 Line (0, 14) -(0, -14) Line (14.5, 0) -(-14.5, 0) 第10章 图 形 基 础 For I = 0 To 12 Step 0.01 y = I * Sin(I) 阿基米德螺线参数方程 x = I * Cos(I) 阿基米德螺线参数方程 PSet (x, y) Next I End Sub 运行结果如图10.10所示。 第10章 图 形 基 础 图10.10 阿基米德螺线显示结果 第10章 图 形 基 础 4Point方法 Point方法用于返回指定点的RGB颜色，其语法格式如下： 对象,Point(x,y) 其中，参数对象与(x,y)的意义与前述相同。 第10章 图 形 基 础 5使用MSChart控件绘制图形 除了利用Line和Circle方法绘制各种几何图形外，也可直 接利用Visual Basic中的MSChart控件绘制各种图表。MSchart 控件支持真正的三维绘图方式，支持所有主要的图表类型， 值和数据点可以条形图、折线图、标记图、填充区域图或饼 图形式显示。这些数据点组成系列，用惟一的颜色或填充样 式进行标识。在许多图表类型中，每个系列的数据点与沿坐 标轴的分类组合在一起。图表还具有标题、背景、图例、图 形和脚注。 第10章 图 形 基 础 【例10-8】 使用MSChart控件绘制图表示例。 使用MSChart控件绘制图表的过程如下： (1) 操纵MSChart的数据网格。在窗体中绘制MSChart控件 时，会创建数据网格，并以随机数据填充。可以使用该网格的 下面一些属性和方法来操纵它。 ColumnCount和RowCount属性分别决定了数据的列数和行 数。ColumnLabelCount和RowLabelCount属性分别设置列和行 标签的层数。Colunm和Row属性用于标识数据网格中的特定点 。ColumnLabelIndex和RowLabelIndex属性分别标识标签的特定 行和列。ColumnLabel和RowLabel属性分别改变标识行或列的 标签。 第10章 图 形 基 础 在用数据绘制图表时，可能需要用真实的数据集替代随机 数据。Mschart控件提供了ChartData属性，以便直接将数组中的 数据装入数据网格中。 ChartData是图表的“缺省”属性，所以代码MSChart1可用来 代替MSChart1.ChartData。下面的代码给出了将数组中的数据 装入数据网格的方法。 第10章 图 形 基 础 Private Sub Form_Click( ) Dim i%, j%, Data Dim X(1 To 3, 1 To 3) As Variant For i = 1 To 3 For j = 1 To 3 X(i, j) = i * j * Rnd 设置数据 Next j Next i MSChart1 = X 设置图表数据 End Sub 第10章 图 形 基 础 反过来，ChartData属性也可用于查询数据网格，并将数 据装入数组。下面的代码给出了从表中查询数据的方法： Dim data As Variant 声明变体型变量 data = MSChart1.ChartData 从图表中装入 返回的数组总是二维的Variant数组，数组每一维的下界 都是1。当把该图表复制到剪贴板时，该数组实际上是用制表 符(Tab)分隔的文本矩阵。 第10章 图 形 基 础 (2) 改变图表类型。MSChart控件刚放到窗体中时，显示的 是缺省类型的图表。为更形象地显示数据，可能需要改变图表 的类型。设计时改变图表类型的步骤是： 用鼠标右键单击MsChart控件，并单击“属性”以显示 “MSChart属性页”。 在“图表”选项卡的“图表类型”部分中，选择“2D3D”， 以显示出可用的图表类型，在下拉列表中选择一个有效的类型 。 在程序代码中只要改变MsChart控件属性ChartType的值就 可指定一个图表类型。 第10章 图 形 基 础 (3) 赋予和编辑背景。可以通过为图表本身或图表的某个 元素加上背景来改进图表的外观。背景可以包括包围图表或 图表元素的边框、图表元素后面的阴影或者图表元素颜色， 以及背景边框的样式、宽度和颜色。 在“背景”选项卡的“属性名”列表框中选择“绘图”，可以改 变用于二维图表的墙的颜色和填充样式，以及三维图表的底 和墙，即用于绘制底和墙的线条的颜色、底的高度和墙的宽 度。其中高度和宽度是以磅为