第10章 图 形 基 础 10.1 坐标系 10.2 绘图属性 10.3 图形控件 10.4 图形方法 习题十.

Presentation on theme: "第10章 图 形 基 础 10.1 坐标系 10.2 绘图属性 10.3 图形控件 10.4 图形方法 习题十."— Presentation transcript:

1 第10章 图 形 基 础 10.1 坐标系 10.2 绘图属性 10.3 图形控件 10.4 图形方法 习题十

2 10.1 坐 标 系 坐标系统 在Visual Basic中，每个对象定位于存放它的容器内，对象定位都要使用容器的坐标系。例如，窗体处于屏幕(Screen)内，屏幕是窗体的容器。在窗体内绘制对象，窗体就是容器。如果在框架内绘制控件，该框架就是容器。Visual Basic为对象的定位提供了Left、Top、Width和Height 4项属性，对象的Left和Top属性决定了该对象左上角在容器内的坐标位置，改变对象的Left和Top属性值时，对象在容器内的位置也随之改变。Width和Height属性决定了该对象的大小，它们总是与容器的度量单位相同，如图10.1所示。

3 图10.1 对象在容器内的定位

4 每个容器都有一个坐标系。构成一个坐标系需要三个要素：坐标原点、坐标度量单位、坐标轴的长度与方向。容器坐标系的默认设置是：容器的左上角为坐标原点(0，0)，横向向右为X轴的正向，纵向向下为Y轴的正向。坐标度量单位由容器对象的ScaleMode属性决定。ScaleMode属性设置如表10.1所示。

5 表10.1 容器对象的ScaleMode属性

6 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。位于窗体之内的对象的坐标取决于窗体的坐标系。

7 自定义坐标系 对象的坐标系允许用户自行定义。通过对象的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所示。

8 2．重定义坐标轴方向和度量单位 属性ScaleWidth、ScaleHeight的值可确定对象坐标系X轴与Y轴的正向及最大坐标值。缺省时其值均大于0，此时X轴的正向向右，Y轴的正向向下。X轴的度量单位为对象当前宽度的1/ScaleWidth，Y轴的度量单位为对象当前高度的1/ScaleHeight，对象右下角坐标值为(ScaleLeft+ScaleWidth，ScaleTop+ScaleHeight)。

9 图10.2 几种重定义坐标原点的应用举例 坐标为（0,-n） ScaleLef=0 ScaleTop=n X Y 坐标原点下移 n 个单位
坐标原点下移 n 个单位 缺省坐标系 ScaleLeft=0 ScaleTop=0 ScaleTop= 杴 对象的左上角 坐标为 (0, n) ScaleLef=- ScaleTop=-m 坐标为(-n,-m) 坐标为（0,-n） ScaleLef=0 ScaleTop=n 图10.2 几种重定义坐标原点的应用举例

10 10.2 绘 图 属 性 1．当前坐标 窗体、图形框或打印机的CurrentX、CurrentY属性给出这些对象在绘图时的当前坐标。这两个属性在设计阶段不能使用。当坐标系确定后，坐标值(x,y)表示对象上的绝对坐标位置；如果坐标值前加上关键字Step，则坐标值(x,y)表示对象上的相对坐标位置，即在X轴与Y轴方向，从当前坐标分别平移(x,y)个单位，其绝对坐标值为(CurrentX+x，CurrentY+y)。

11 2．线宽 窗体、图形框或打印机的DrawWidth属性给出这些对象上所画线的宽度或点的大小。DrawWidth属性以像素(pixel)为单位来度量，最小值为1。 如果使用控件，则通过BorderWidth属性定义线的宽度或点的大小。

12 3．线型 窗体、图形框或打印机的DrawStyle属性给出这些对象上所画线的形状。此处的线型仅当DrawWidth属性值为1时才能产生。当DrawWidth的值大于1且DrawStyle属性值为1～4时，都只能产生实线效果。当DrawWidth的值大于1，而DrawStyle属性值为6时，所画的内实线仅当是封闭线时起作用。 4．填充 封闭图形的填充方式由FillStyle和FillColor这两个属性决定。FillStyle属性指定填充的图案，共有8种内部图案。FillColor指定填充图案的颜色，缺省的颜色与ForeColor相同。

13 5．色彩 Visual Basic默认采用对象的前景色(ForeColor属性)绘图，也可以通过颜色函数指定色彩。 (1) RGB函数。RGB函数通过红、绿、蓝三基色混合产生某种颜色，其语法格式为： RGB(红，绿，蓝) 括号中红、绿、蓝三基色的成份使用0～255之间的整数。例如，RGB(0，0，0)返回黑色：而RGB(255，255，255)返回白色。从理论上来说，用三基色混合可产生256×256×256种颜色，但是实际使用时受到显示硬件的限制，普通VGA显示卡只能显示16种颜色。

14 (2) QBColor函数。QBColor函数采用Quick Basic所使用的16种颜色，其语法格式为：
颜色码使用0～15之间的整数，每个颜色码代表一种颜色。 RGB函数与QBColor函数实际上都返回一个6位的十六进制的长整数。这个数从左到右，每两位一组代表一种基色，它们的顺序是红、绿、蓝。因而，我们也可以直接用6位的十六进制颜色代码表示颜色。在色彩的属性设置框中可以看到这些代码。常用色彩代码如表10.2所示。

15 表10.2 常用色彩代码

16 10.3 图 形 控 件 1．图形框(PictureBox)
10.3 图 形 控 件 1．图形框(PictureBox) 图形框(PictureBox)控件的主要作用是为用户显示图片，也可作为其它控件的容器。实际显示图片由Picture属性决定。Picture属性包括被显示的图片的文件名(及可选的路径名)。在程序运行时可以使用LoadPicture( )在图形框中装入图形。其格式为： 图形框对象.Picture=LoadPicture(图形文件) 为了在运行时从图形框中删除一个图形，可用LoadPicture("")将一个空白图形装入图形框的Picture属性。

17 缺省时，加载到图形框中的图形保持其原始尺寸。这意味着如果图形比控件大，则超过的部分将被剪裁掉。图形框控件不提供滚动条。图形框控件不能伸展图像以适应控件尺寸，但可以用图形框的Autosize属性调整图形框大小以适应图像。当Autosize属性设置为True时，图形框能自动调整大小与显示的图片匹配；如果将Autosize属性设置为False，则图形框不能自动改变大小来适应其中的图形。 图形框控件也可以用作其它控件的容器。像Frame控件一样，可以在图形框控件上面加上其它控件。这些控件随图形框的移动而移动，其Top和Left属性是相对于图形框而言的，与窗体无关。当图形框的大小改变时，这些控件在图形框的控件中的相对位置保持不变。

18 【例10-1】 使用PictureBox控件显示如图10.3所示的图片。

19 (2) 事件编程如下： ' 驱动器列表框的事件代码 Private Sub Drive1_Change( ) Dir1.Path=Drive1.Drive End Sub ' 文件列表的事件代码 Private Sub Dir1_Change( ) File1.Path=Dir1.Path ' 文件的事件代码 Private Sub File1_Click( ) ChDrive Drive1.Drive ChDir Dir1.Path Picture1.Picture=LoadPicture(File1.FileName)

20 图10.3 图形显示结果

21 SavePicture 对象名.属性，文件名
说明： (1) 对象名为选定的图形框(PictureBox)或图像框(Image)的控件名。 (2) 属性为图形框或图像框内的图形属性，如picture属性或Image属性。 (3)文件名为指定的带有扩展名 .BMP、.ICO、.GIF、.JPG、.DIB、.WMF、.EMF或 .ICO的文件。 SavePicture命令只支持BMP文件格式。此外，SavePicture命令保存控件中的整个图形，包括不显示部分。

22 【例10-2】 在用户界面上移动图片示例。 (1) 界面设计如图所10.4示。 图10.4 动画设计界面

23 (2) 界面控件属性设置如表10.3所示。 表10.3 属 性 设 置

24 (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 ' 表单初始化

25 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

26 ' 若图像控件到达窗体左边界，改变scx值，使之向右移动
If imgIcon.Left <= 0 Then scx = 50 ' 若图像控件到达窗体底边界，改变scy值，使之向上移动 If imgIcon.Top + imgIcon.Height >= ScaleHeight + ScaleTop Then scy = -75 ' 若图像控件到达窗体顶部边界，改变scy值，使之向下移动 If imgIcon.Top <= 0 Then scy = 75 ' 改变图像控件的大小 imgIcon.Height = imgIcon.Height + sdy imgIcon.Width = imgIcon.Width + sdx If imgIcon.Height >= 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

27 (4) 运行结果如图10.5和10.6所示。 图10.5 某一时刻的动画运行结果(1)

28 图10.6 某一时刻的动画运行结果(2)

29 3．画线工具 画线工具(Line)控件可以用来画线。画线操作的步骤如下： (1) 单击工具箱中的Line图标。 (2) 移动鼠标到要画线的起始位置。 (3) 按下鼠标左键并拖曳鼠标到要画线的结束处，放开鼠标左键。

30 4．形状 形状(Shape)控件可以用来画矩形、正方形、椭圆、圆、圆角矩形及圆角正方形。画某一形状的几何图形的步骤如下： (1) 单击工具箱中的Shape图标。 (2) 在窗体内将鼠标移到要画图形的左上角位置。 (3) 按下鼠标左键并拖曳鼠标到要画图形结束处的右下角。 (4) 放开鼠标左键，屏幕上显示一个矩形。 (5) 选择Properties窗口中的Shape属性，确定所需要的形状。

31 【例10-3】 编写程序显示Shape控件的6种形式，并设置不同的填充样式和填充颜色。
(1) 在窗体上建立Shape控件数组Shape1(0)～Shape1(5)

32 (2) 编写事件代码如下： Private Sub Form_Click( ) Dim i As Integer Print Shape1(0).Shape = ' 设置第一个控件的属性 Shape1(0).FillStyle = 2 For i = 1 To 5 Shape1(i).Left = Shape1(i - 1).Left ' 设置其余控件位置 Shape1(i).Shape = i ' 设置图形属性 Shape1(i).FillStyle = i ' 设置填充模式 Shape1(i).FillColor = QBColor(i + 3) ' 设置填充颜色 Next i End Sub

33 (3) 运行结果如图10.7所示。 图10.7 图形控件运行结果

34 10.4 图 形 方 法 1．Line方法 Line方法用于画直线或矩形，其语法格式如下：
10.4 图 形 方 法 1．Line方法 Line方法用于画直线或矩形，其语法格式如下： [对象.]Line[[Step](x1，y1)]-(x2, y2)[,颜色][,B[F]] 说明： (1) 对象指示Line在何处产生结果，它可以是窗体或图形框，缺省时为当前窗体。 (2) (x1，y1)为线段的起点坐标或矩形的左上角坐标，(x2，y2)为线段的终点坐标或矩形的右下角坐标。 (3) 关键字Step表示采用当前作图位置的相对值。 (4) 关键字B表示画矩形，关键字F表示用画矩形的颜色来填充矩形。缺省下则矩形的填充由FillColor和FillStyle属性决定。

35 【例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 参数省略时，逗号并不省略。

36 (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两种形式。

37 Circle方法用于画圆、椭圆、圆弧和扇形，其语法格式如下：
[对象.]Circle[[Step](x,y),半径[,颜色][,起始角][,终止角][,长短轴比率]] 说明： (1) 对象指示Circle在何处产生结果，它可以是窗体、图形框或打印机，缺省时为当前窗体。 (2) (x，y)为圆心坐标，关键字Step表示采用当前作图位置的相对值。 (3) 圆弧和扇形通过参数起始角、终止角控制，当起始角、终止角取值在0～2π时为圆弧：当起始角、终止角取值前加一负号时画出扇形，负号表示画圆心到圆弧的径向线。 (4) 画椭圆时可通过长短轴比率控制，默认值为1时即为画圆。

38 【例10-5】 Circle方法举例。以下程序语句的运行结果如图10.8所示。
(Private Sub Form_Activate( ) Circle (1000, 1000), 1000, , , Circle (2000, 1000), 500, , , End Sub

39 图10.8 Circle方法运行结果

40 【例10-6】 以下代码在窗体上画同心圆，并调用SavePicture方法将图形存入文件test.bmp。程序运行结果如图10.9所示。
表单单击事件： Private Sub Form_Click( ) Dim CX, CY, Limit, Radius ' 声明变量 ScaleMode = ' 设置像素点 AutoRedraw = ' 设置自动重画属性 Width = Height ' 使窗体width与height相同 CX = ScaleWidth / ' 设定当前坐标(x,y) CY = ScaleHeight / 2 Limit = CX ' 限定窗体上可画的最大圆

41 ' 以下循环用于画同心圆 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

42 图10.9 同心圆显示结果

43 3．Pset方法 Pset方法用于画点，其语法格式如下： [对象.]Pset [Step](x,y)[,颜色] 其中，参数(x,y)为所画点的坐标，关键字Step表示采用当前作图位置的相对值。采用背景颜色可清除某个位置上的点。利用Pset方法可画任意曲线。

44 【例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)

45 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所示。

46 图 阿基米德螺线显示结果

47 4．Point方法 Point方法用于返回指定点的RGB颜色，其语法格式如下： [对象,]Point(x,y) 其中，参数对象与(x,y)的意义与前述相同。

48 5．使用MSChart控件绘制图形 除了利用Line和Circle方法绘制各种几何图形外，也可直接利用Visual Basic中的MSChart控件绘制各种图表。MSchart控件支持真正的三维绘图方式，支持所有主要的图表类型，值和数据点可以条形图、折线图、标记图、填充区域图或饼图形式显示。这些数据点组成系列，用惟一的颜色或填充样式进行标识。在许多图表类型中，每个系列的数据点与沿坐标轴的分类组合在一起。图表还具有标题、背景、图例、图形和脚注。

49 【例10-8】 使用MSChart控件绘制图表示例。
(1) 操纵MSChart的数据网格。在窗体中绘制MSChart控件时，会创建数据网格，并以随机数据填充。可以使用该网格的下面一些属性和方法来操纵它。 ColumnCount和RowCount属性分别决定了数据的列数和行数。ColumnLabelCount和RowLabelCount属性分别设置列和行标签的层数。Colunm和Row属性用于标识数据网格中的特定点。ColumnLabelIndex和RowLabelIndex属性分别标识标签的特定行和列。ColumnLabel和RowLabel属性分别改变标识行或列的标签。

50 在用数据绘制图表时，可能需要用真实的数据集替代随机数据。Mschart控件提供了ChartData属性，以便直接将数组中的数据装入数据网格中。
ChartData是图表的“缺省”属性，所以代码MSChart1可用来代替MSChart1.ChartData。下面的代码给出了将数组中的数据装入数据网格的方法。

51 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

52 反过来，ChartData属性也可用于查询数据网格，并将数据装入数组。下面的代码给出了从表中查询数据的方法：
Dim data As Variant ' 声明变体型变量 data = MSChart1.ChartData ' 从图表中装入 返回的数组总是二维的Variant数组，数组每一维的下界都是1。当把该图表复制到剪贴板时，该数组实际上是用制表符(Tab)分隔的文本矩阵。

53 (2) 改变图表类型。MSChart控件刚放到窗体中时，显示的是缺省类型的图表。为更形象地显示数据，可能需要改变图表的类型。设计时改变图表类型的步骤是：
① 用鼠标右键单击MsChart控件，并单击“属性”以显示“MSChart属性页”。 ② 在“图表”选项卡的“图表类型”部分中，选择“2D／3D”，以显示出可用的图表类型，在下拉列表中选择一个有效的类型。 在程序代码中只要改变MsChart控件属性ChartType的值就可指定一个图表类型。

54 (3) 赋予和编辑背景。可以通过为图表本身或图表的某个元素加上背景来改进图表的外观。背景可以包括包围图表或图表元素的边框、图表元素后面的阴影或者图表元素颜色，以及背景边框的样式、宽度和颜色。
在“背景”选项卡的“属性名”列表框中选择“绘图”，可以改变用于二维图表的墙的颜色和填充样式，以及三维图表的底和墙，即用于绘制底和墙的线条的颜色、底的高度和墙的宽度。其中高度和宽度是以磅为单位的。

55 (4) 图形图例。通过“MsChart属性页”中的“图表选项”部分，可以选择一个或多个选项以隐藏或显示图例，隐藏或显示数据点标记、叠置系列，或者显示数据网格中行的(而不是列的)系列数据，或在条形图、折线图、面积图、阶梯图和组合图表中叠置系列的数据。叠置就是将同分类的数据点一个一个地互相叠放在一起，每一直条仍旧表示相同的值。下面的代码示例为图表的图例设置文本和背景参数。

56 Private Sub Form_Load( )
With MSChart1.Legend .Location.Visible = True ' 图例设置为可见 .Location.LocationType = VtChLocationTypeRight .TextLayout.HorzAlignment = VtHorizontalAlignmentRight ' 右对齐 .VtFont.VtColor.Set 255, 255, ' 使用黄色文本 .Backdrop.Fill.Style = VtFillStyleBrush .Backdrop.Fill.Brush.Style = VtBrushStyleSolid .Backdrop.Fill.Brush.FillColor.Set 255, 0, 255 End With

57 下面的代码示例设置图表的脚注位置、文本和颜色。脚注为"ChartFootnote"。
(5) 添加图表元素。除了图形以外，主要的图表元素是标题和脚注。通过“MsChart属性页”的“文本”选项卡，选择“脚注”或某个标题类型，在“文本”字段中键入标题或脚注并选择希望的文本对齐方式和文本方向。 下面的代码示例设置图表的脚注位置、文本和颜色。脚注为"ChartFootnote"。 With MSChart1.Footnote .Location.Visible = True ' 设置脚注可见 .Location.LocationType = VtChLocationTypeBottomLeft .Text = "Chart Footnote" ' 设置脚注文本 .VtFont.VtColor.Set 255, 0, ' 设置脚注颜色 End With

58 (6) 字体。在“字体”选项卡中，选择图表元素中使用的字体名称、大小、样式、效果和颜色。
(7) 运行结果如图10.11所示。

59 图 MS_Chart演示结果

60 习 题 十 10.1 描述图像中用到的较为重要的属性设置。 10.2 使用多种图形控件进行绘图。 10.3 练习图形方法的调用。