VB第10章-图形和简单动画

1、第第10章章 图形和简单动画图形和简单动画VisualBasic程序设计10.1 使用图形控件使用图形控件10.2 绘图方法绘图方法10.3 使用使用PaintPicture 方法方法10.4 窗体和控件的图形属性窗体和控件的图形属性10.5 设计简单动画设计简单动画10.1 使用图形控件使用图形控件VisualBasic程序设计10.1.1用直线控件画线画直线工具-直线控件（Line）是基本控件，使用时，可以从工具箱中选择和使用直线控件，其图标为 。10.1.1用直线控件画线直线控件常用的属性:（1 1）BorderStyleBorderStyle：指定直线的类型。有7种类型：0 Trans

2、parent 透明的，即不显示出线来1 Solid 实线2 Dash 虚线3 Dot 点线4 Dash-Dot 点划线 5 Dash-Dot-Dot 双点划线6 Inside Solid 内实线说明：当BorderWidth为1时可以用以上7种类型，若其值不为1，则只有0和6有效）VisualBasic程序设计10.1.1用直线控件画线（2）BorderWidthBorderWidth：用于设置直线的宽度。（3）BorderColorBorderColor：用于设置直线的颜色。（4）x1x1、x2x2、y1y1、y2y2：指定直线起点和终点的x坐标及y坐标。通过改变x1、x2、y1、y2的值，

3、能够改变直线的位置。VisualBasic程序设计10.1.1用直线控件画线【例10-1】绘制不同线型和颜色的直线。在窗体上使用直线控件画7条实心直线，编写一个事件过程改变这些直线的颜色及类型。VisualBasic程序设计本例中的7条直线构成一个直线控件数组10.1.1用直线控件画线建立直线控件数组：（1）使用直线控件在窗体上画出一条直线，将其“名称”属性定为LLine。（2）再画第二条直线，其“名称”属性也定为Lline，弹出一个消息框，提示“你已有一个名为LLine的控件，你是否想建立一个控件数组”，回答“是”，则系统会将其作为控件数组的一个元素LLine(1)，而将第一条直线定为数组元

4、素LLine(0)。（3）继续完成其他几条直线的设置VisualBasic程序设计10.1.1用直线控件画线“画直线”命令按钮的事件过程-画出不同颜色、不同类型的7条线。VisualBasic程序设计Private Sub cmdLine_Click() For i = 0 To 6 LLine(i).BorderColor = QBColor(i) LLine(i).BorderStyle = i Next iEnd Sub改变直线的颜色，将QBColor的函数值赋给BorderColor属性，改变直线的线型10.1.2用形状控件画几何图形形状控件（Shape）能够画出矩形、正方形、圆、椭圆

5、等简单的几何图形。Shape控件的Shape属性值能够确定该控件的实际形状，Shape属性值及其含义如下：0 Rectangle 矩形1 Square 正方形2 Oval 椭圆形3 Circle 圆形4 Rounded Rectangle 圆角矩形5 Rounded Square 圆角正方形VisualBasic程序设计10.1.2用形状控件画几何图形【例10-2】使用Shape控件画不同形状的几何图形。窗体上有6个Shape控件、6个标签以及“设置形状”、“设置颜色”、“填充线条”和“退出”等命令按钮。VisualBasic程序设计运行时按“设置形状”命令钮，为“形状控件”设置Shape属性

6、；按“设置颜色”按钮，用不同的颜色填充各形状控件；按“填充线条”按钮，以不同的线条填充图形。6个Shape控件构成一个控件数组10.1.2 用形状控件画几何图形按下“设置形状”按钮，执行cmdShape_Click事件过程。Private Sub cmdShape_Click() For i = 0 To 5 Shape1(i).Shape = i Label1(i).Caption = i= & Str(i) NextEnd SubVisualBasic程序设计 为各Shape 控件设置Shape属性值10.1.2用形状控件画几何图形几何图形内部原来没有颜色且透明（可以看到窗体的背景

7、颜色）。为能显示出背景颜色，要设置BackStyle（背景风格）属性的值。在属性表中，BackStyle属性有两个值：0Transparent(透明)，1Opaque（不透明）。默认值为0。如果着色，要将BackStyle属性定为“不透明”。VisualBasic程序设计10.1.2用形状控件画几何图形按“设置颜色”键，通过BackColor属性设置颜色，将整个图形内填上颜色。即用颜色充满图形VisualBasic程序设计Private Sub cmdColor_Click() For i = 0 To 5 Shape1(i).FillStyle = 1 设置填充风格为透明 Shape1(i)

8、.BackStyle = 1 设置背景为不透明 Shape1(i).BackColor = QBColor(i) 设置背景颜色 Label1(i).Caption = i= & Str(i) Next iEnd Sub10.1.2用形状控件画几何图形（3）在背景上画不同形式的线条图案。按下“填充线条”按钮，执行cmdFill_Click()事件过程。改变FillStyle属性值，能够改变形状的填充风格VisualBasic程序设计Private Sub cmdFill_Click() 用不同的线形填充图形 For i = 0 To 5 Shape1(i).FillStyle = i+2

9、 Label1(i).Caption = i= & Str(i + 2) NextEnd Sub10.1.2用形状控件画几何图形FillStyle属性的取值和含义如下：0 Solid 实心1 Transprent 透明2 Horizontal Line 水平线3 Vertical Line 垂直线4 Upward Diagonal 向上对角线5 DownWard Diag 向下对角线6 Cross 交叉线7 Diagonal Cross 对角交叉线如果FillStyle是不透明的（即值不为1），就需要用FillColor属性确定所填充线条的颜色，默认值为0（黑色）。VisualBasi

10、c程序设计10.1.2用形状控件画几何图形执行改变形状、改变填充线条的操作之后，窗体外观如下：VisualBasic程序设计10.1.2用形状控件画几何图形形状控件的其它属性：（1）BorderColor属性：指定图形边界颜色。（2）BorderWidth属性：指定图形边界宽度。（3）BorderStyle属性：指定边界线的类型。使用图形控件需要注意以下几个问题：(1)图形控件不能在运行时获得焦点(2)不能作为其他控件的容器(3)不能出现在其他控件之上，除非是容器控件，如图片框。VisualBasic程序设计10.2 绘图方法绘图方法VisualBasic程序设计在窗体上画线、圆、矩形等图形的

11、方法：使用形状、直线控件使用窗体的绘图方法10.2.1用PSet方法画点颜色的表示：颜色的表示：使用使用QBColorQBColor函数函数使用使用RGB函数10.2.1用PSet方法画点QBColor（i）函数用颜色号015代表16种颜色。不同i值所对应的颜色见表VisualBasic程序设计i i值值颜色颜色i i值值颜色颜色0黑色8灰色1蓝色9亮蓝色2绿色10亮绿色3青色11亮青色4红色12亮红色5粉红色13亮粉红色6黄色14亮黄色7白色15亮白色10.2.1用PSet方法画点RGB函数有3个参数，分别代表红、绿、蓝三者的比例，每个参数值的范围为0255。VisualBasic程序设计R

12、GB函数返回值颜色RGB(0,0,0)&H0黑色RGB(255,0,0)&HFF0红色RGB(0,255,0)&HFF00绿色RGB(0,0,255)&HFF0000蓝色RGB(0,255,255)&HFFFF00青蓝色RGB(255,0,255)&HFF00FF紫红色RGB(255,255,0)&HFFFF黄色RGB(255,255,255)&HFFFFFF白色部分颜色示意10.2.1用PSet方法画点【例10-3】使用窗体的PSet方法在窗体中随机地显示若干彩色的点。“画点”命令按钮的事件过程为cmdPoint，代码如下Vis

13、ualBasic程序设计Private Sub cmdPoint_Click() For i = 1 To 3000 r = Int(256 * Rnd) g = Int(256 * Rnd) b = Int(256 * Rnd) x = Rnd * Width y = Rnd * Height PSet (x, y), RGB(r, g, b) NextEnd Sub窗体的画点方法Pset：一般格式：对象名.Pset（x，y），颜色“对象名”指窗体或图片框，默认为窗体10.2.1用PSet方法画点单击“画点”命令按钮，执行事件过程，在窗体上显示出3000个各种颜色的点。Rnd是随机函数，其函

14、数值在（0，1）区间内，Int是取整函数，因此r、g和b的值在0，255区间内。这些点的位置是随机的，范围都在窗体内。VisualBasic程序设计10.2.1用PSet方法画点【例10-4】要求按“开始”按钮后，使用PSet方法在窗体上先画出一个圆，再将此圆抹去，再画出一个半径稍大的同心圆，如此一共画出16个圆。分析：如何擦去一个已经显示出彩色点？实际是用Pset方法，在同一点处用背景色再画一个点，显然其作用相当于使这个点“消失”。VisualBasic程序设计VisualBasic程序设计 Private Sub cmdStart_Click() c = 1 r = 100 y0 = He

15、ight / 2 x0 = Width / 2 Do For i = 0 To 2 * 3.141596 Step 0.01 y = Sin(i) * r + y0 x = Cos(i) * r + x0 PSet (x, y), QBColor(c) For j = 1 To 2000 Next j Next i For i = 0 To 2 * 3.141596 Step 0.01 y = Sin(i) * r + y0 x = Cos(i) * r + x0 PSet (x, y), QBColor(15) For j = 1 To 2000 Next j Next i c = c +

16、1 r = r + 100 Loop Until c = 16 End Sub“PSet(x,y)，QBcolor(c)”语句的作用是：用指定的蓝颜色（QBColor(1)为蓝色）显示出一个点，执行完此For循环后，蓝色点组成一个半径为r的圆。 “PSet(x,y)，QBcolor(15)”在原来轨迹上显示出一圈白色的点。因窗体背景色为白色，所以感觉是“擦去”原来的圆10.2.2用Line方法画线和矩形 在窗体上两点之间绘制一条直线的方式：使用直线控件使用窗体的Line方法使用Line方法绘图的例： Line (1000,1000)-(2200,2200) Line -(3000,3000)

17、Picture1.Line(100,500)-Step(1000,350) Form1.Line Step(200,200)-Step(800,1000)VisualBasic程序设计在起点(1000,1000)与终点(2200,2200)之间绘制一条直线若没有指定起始坐标，则以“当前点”作为直线的起始坐在图片框Picture1上的(100,500)与(1100,850)之间画一条直线。在Form1上画直线。坐标前面的Step参数，表示其后的坐标是相对于当前坐标的偏移量。10.2.2用Line方法画线和矩形Line方法的一般格式为： 对象对象.LineStep(x1,y1)-Step(x2,y

18、2),.LineStep(x1,y1)-Step(x2,y2),颜颜色色 其中：对象是指窗体、图片框等，默认的对象是窗体。第1个Step表示它后面的一对坐标是相对于当前坐标的偏移量第2个Step表示它后面的一对坐标是相对于第一对坐标的偏移量。如果不指定颜色则使用该控件的前景色作为直线的颜色。VisualBasic程序设计10.2.2用Line方法画线和矩形【例10-5】画线程序。设计一个程序，当单击窗体时，用Line 方法画一个如下的图形。VisualBasic程序设计分析：这些直线具有相同的终点坐标，起点坐标在水平方向是相同的。根据这个特点，使用循环改变直线起点的x坐标，画出以上图形。10.

19、2.2用Line方法画线和矩形VisualBasic程序设计Private Sub Form_Click() Dim i As Integer DrawWidth = 2 ForeColor = QBColor(4) For i = 0 To 6000 Step 500 Line (i, 400)-(2700, 2800) Next iEnd SubDrawWidth设置线条宽度ForeColor设置前景色循环变量i对应于各直线起点坐标的x值，每次循环增加500起点的y坐标保持不变(400)10.2.2用Line方法画线和矩形用Line方法绘制矩形：在Line方法中加一个“B”参数即可（“B”

20、的含义是Box）。例如： Line (400, 400)-(3000, 2000),B用上述方法画矩形时，两点坐标(400,400)和(3000,2000) 分别指定矩形的左上角和右下角坐标在参数B前面有两个逗号，这是因为省略了Color（颜色）参数。VisualBasic程序设计10.2.2用Line方法画线和矩形用Line方法画矩形的一般语法格式： 对象对象.LineStep(x1,y1)-Step(x2,y2),.LineStep(x1,y1)-Step(x2,y2),颜颜色色,BF,BF(x1,y1)与(x2,y2)是矩形的左上角和右下角的坐标参数B表示要画一个矩形参数F指定画一个实心

21、的矩形。注意：F与B两个参数之间没有逗号。使用Line方法时，可以省略某些参数。但是，与参数有关的分隔符（逗号）不能省略，即用于分隔参数的逗号不能省略。VisualBasic程序设计10.2.2用Line方法画线和矩形【例10-6】为矩形填充不同的图案。分析：每个矩形较前一个增大，且填充的方式不同，即改变FillStyle的值VisualBasic程序设计初始界面运行效果10.2.2用Line方法画线和矩形VisualBasic程序设计 Private Sub Picture1_Click() Picture1.BackColor = QBColor(0) For i = 0 To 7 Pic

22、ture1.FillStyle = i Picture1.FillColor = QBColor(i + 7) i 1 = i + 1 Picture1.Line (300 * i1, 400 * i1)-(110 * i1, 220 * i1), QBColor(12), B Next iEnd Sub将图片框的背景色设置为黑色For循环，共执行8次循环体，分别画出8个大小不同、填充图案不同的矩形。设置图片框的FillStyle属性值设置FillColor属性值再画一个矩形10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧窗体的Circle方法能够绘制出圆、椭圆、圆弧及扇

23、形。 知画圆Circle方法的一般格式为： 对象对象.Circle Step (x,y),.Circle Step (x,y),半径半径,颜色颜色 其中：对象：可以是窗体，也可以是图片框等。Step后面的一对数字表示相对于当前坐标的位置偏移量。x，y：是圆心坐标颜色：所画圆的颜色VisualBasic程序设计10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧【例10-7】用Circle方法画圆使用Circle方法在窗体上画圆,可以选择圆的颜色及填充的样式。对象属性设置属性值窗体CaptionCircle方法的使用标签1（名称）Lable1Caption选择填充风格(07)标

24、签2（名称）Lable2Caption选择图形颜色(015)文本框1（名称）txtStyleText置空文本框2（名称）txtColorText置空命令按钮1（名称）cmdCircleCaption画圆命令按钮2（名称）cmdClsCaption清除命令按钮3（名称）cmdEndCaption结束10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧单击 “画圆”命令按钮时，执行事件过程cmdCircle_Click，按文本框中输入的数据画圆VisualBasic程序设计Private Sub cmdCircle_Click() Form1.FillStyle = Val(tx

25、tStyle.Text) col = Val(txtColor.Text) x = Width Y = Height For i = 1 To 10 r = (x * 0.1) * Rnd Circle (Rnd * x, Rnd * Y), r, QBColor(col) Next iEnd Sub圆心的位置随机填充的风格和颜色由文本框的数据确定10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧按下“清除”命令按钮，将窗体上所显示的图形清除掉。“清除”按钮的事件过程如下：VisualBasic程序设计Private Sub cmdCls_Click() Cls txtSt

26、yle.Text = txtColor.Text = End Sub清除窗体上显示内容的方法： 对象对象.Cls对象可以是窗体、图片框等容器10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧【例10-8】使用Circle方法画椭圆。Circle方法不仅能够绘制圆形，通过设置参数能够绘制出椭圆或圆弧等： 对象对象. Circle Step (x,y),. Circle Step (x,y),颜色颜色,纵横比纵横比纵横比是椭圆纵横两个轴长之比。它的值决定了椭圆的形状。如果纵横比的值大于1，绘制出的椭圆为细而高的形状如果纵横比的值小于1，绘制出的椭圆是扁平状如果纵横比等于1，就绘

27、制出一个圆。VisualBasic程序设计10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧【例10-8】使用Circle方法画椭圆。在窗体上画有一个名称Picture1的图片框。当单击窗体时，在图片框中画出若干个形状和颜色不同的椭圆。VisualBasic程序设计Private Sub Form_Click() x = Picture1.Width y = Picture1.Height Picture1.FillStyle = 0 Picture1.FillColor = QBColor(12) For i = 1 To 10 r = (x * 0.1) * Rnd b

28、 = i * 0.3 Picture1.Circle (x * Rnd, y * Rnd), r, QBColor(i), , , b Next iEnd Sub10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆和圆弧用Circle方法画圆弧、扇形。一般格式为： 对象对象.Circle Step (x,y),.Circle Step (x,y),半径半径,颜色颜色,起始角起始角,终止角终止角 当指定起始角和终止角时，当纵横比为1时，画出来的是一段圆弧，当纵横比不等于1时，画出一段椭圆弧。VisualBasic程序设计10.2.3 用用Circle方法画圆、椭圆和圆弧方法画圆、椭圆

29、和圆弧【例10-9】单击窗体时，在窗体上显示若干圆弧。圆弧是圆的一部分，可以很容易的使用画圆的Circle方法画圆弧，只要加上起始角和终止角即可。VisualBasic程序设计纵横比为1纵横比为2设变量angle1为起始角，c是颜色号，DrawWidth是圆弧线的宽度。angle2为终止角。VisualBasic程序设计Private Sub Form_Click() pi = 3.1415926 angle1 = 0 c = 1 DrawWidth = 1 For r = 500 To 1500 Step 200 angle2 = (angle2 + (pi / 2) Mod (2 * pi

30、) Circle (1800, 1300), r, QBColor(c), angle1, angle2 angle1 = angle1 + (pi / 4) c = c + 1 DrawWidth = DrawWidth + 1 Next rEnd Sub10.3 使用使用PaintPicture 方法方法VisualBasic程序设计PaintPicture 方法能够从一个窗体或图片框中向另一个窗体或图片框复制指定矩形区域内的像素。【例10-10】将图片框中的图形复制到窗体上。分析：窗体上有名称为picSource的图片框，加载一个图片文件。然后将该图片复制到窗体上。10.3 使用使用Pa

31、intPicture 方法方法PaintPicture 方法语法格式： .PaintPicture .PaintPicture ,dx,dy,dw,dh,sx,sy,sw, sh,dx,dy,dw,dh,sx,sy,sw, sh各参数的含义是：dx,dy：目标区域左上角的坐标，可以是目标对象中的任意位置。dw,dh：目标区域的宽和高。sx,sy：要传送图形的矩形区域的左上角坐标。sw,sh：要传送图形的矩形区域的宽和高。VisualBasic程序设计10.3 使用使用PaintPicture 方法方法上面过程中，指定为图片框picSource，目标区域即是将要复制的位置，指定为窗体左上角，其坐

32、标为（0,0）。目标区域的宽和高定义为窗体的宽和高，也就是ScaleWidth,、ScaleHeight。执行PaintPicture方法之后，相当于把图片框中的小图片复制、放大为充满整个窗体。VisualBasic程序设计Private Sub Form_Click() Form1.PaintPicture picSource.Picture, 0, 0, ScaleWidth, ScaleHeightEnd Sub10.4 窗体和控件的图形属性窗体和控件的图形属性VisualBasic程序设计1.AutoRedraw1.AutoRedraw属性属性每个窗体和图片框都有AutoRedraw属

33、性。AutoRedraw属性的功能是重新绘制窗体或图片框中的图形。【例10-11】AutoRedraw属性的作用及使用方法。建立一个工程文件，包括两个窗体Form1和Form2。当单击Form1时，在窗体上画一个实心圆，同时显示Form2。10.4 窗体和控件的图形属性窗体和控件的图形属性VisualBasic程序设计按照题目的要求在Form1的Form_Load事件过程中添加如下代码：运行Form1的Form_Load事件过程将Form2移至Form1将Form2移开Private Sub Form_Click() FillStyle = 0 实心 Circle (800, 800), 50

34、0 画圆 Form2.Show 显示Form2End Sub10.4 窗体和控件的图形属性窗体和控件的图形属性若希望Form2 移走后，仍能恢复原来的图形，要将窗体的AutoRedraw属性设为True，其含义是能够自动重新绘制图片或窗体。在Form1事件过程中增加一条语句： Form1.AutoRedraw = True说明：AutoRedraw属性的值只对由窗体或图片框控件的Circle、Cls、 Line、Point、Print和Pset方法产生的图形及文字起作用。即窗体上由图形控件生成的图形不受AutoRedraw属性值的影响。VisualBasic程序设计10.4 窗体和控件的图形属

35、性窗体和控件的图形属性VisualBasic程序设计2.CurrentX2.CurrentX、CurrentYCurrentYCurrentX和CurrentY属性：设置图形的当前坐标，也可以自动获得图形的当前坐标。例：在窗体上绘制10个半径相等、圆心不同的圆Private Sub Form_Click() CurrentX = 800 CurrentY = 800 For i = 1 To 10 Circle (CurrentX + 100, CurrentY + 100), 500 NextEnd Sub10.4 窗体和控件的图形属性窗体和控件的图形属性VisualBasic程序设计3Bo

36、rderWidthBorderWidth及及BorderStyleBorderStyle属性属性BorderWidth及BorderStyle属性指明使用图形对象绘图时，边框线的宽度和边框风格。4FillColorFillColor及及FillStyleFillStyle属性属性FillColor及FillStyle属性用于确定窗体和图片框中填充图形的外观风格和填充颜色。在图形中可以画出(即填充)斜线、网格线等。FillStyle属性是设定在图形中填充的样式10.4 窗体和控件的图形属性窗体和控件的图形属性VisualBasic程序设计5.BackColor5.BackColor、ForeCo

37、lorForeColor、BorderColorBorderColor及及FillColorFillColor属性属性与颜色有关、较常用的属性：BackColor属性用来设置窗体或控件的背景颜色ForeColor属性用来设置窗体或控件的前景颜色BorderColor 属性用来设置Shape 控件边框的颜色FillColor属性用来指定填充的图形的颜色。注意：只能用于填充由Circle 方法或Line方法绘制的封闭区域，不能用于不封闭的“开口”区域10.5 设计简单动画设计简单动画VisualBasic程序设计在VB中实现动画的几种方法：（1）使用Move方法移动控件或图片；（2）改变图象的位置

38、和尺寸，达到动画的效果；（3）在不同的位置显示不同的图片。用计时器控件定时触发有关动画的事件过程，用计时器的Interval属性控制定时触发事件，控制图象移动或变换的速度。用Move方法移动对象的一般形式为： 对象名对象名.Move Left.Move Left，TopTop，WidthWidth，LengthLength其中：Left表示对象的左边界与窗体左边框的距离，Top表示对象的顶部与窗体顶部之间的距离，Width和Length代表对象的新宽度和新高度。10.5 设计简单动画设计简单动画VisualBasic程序设计【例10-12】以蓝天白云为背景，显示地球围绕太阳旋转的动画面。设计思

39、路：建立一个图片框，大小与窗体相同，加载蓝天白云图形作为背景。2个图象框，分别装入太阳和地球的图形。用计时器的Timer事件来控制地球作圆周运动。对象属性设置计时器(名称)Timer1Interval100图片框(名称)picSkyPictureE:yuanVBclouds.bmp图象框1(名称)imgEarthStretchTruePictureE:yuanVBearth.ico图象框2(名称)imgSunStretchTruePictureE:yuanVBsun1.ico10.5 设计简单动画设计简单动画VisualBasic程序设计初始装载程序Form_Load()Private Sub

40、 Form_Load() imgSun.Top = Height / 2 imgSun.Height / 2 imgSun.Left = Width / 2 - imgSun.Width / 2End Sub10.5 设计简单动画设计简单动画VisualBasic程序设计计时器的事件过程Timer1_Timer要把图象框imgSun放到窗体的中心位置。使图象框imgSun位于背景图片框的中间位置：（imgSun.Top）=（窗体高度/2） - （图象框imgSun的高度/2）Private Static Sub Timer1_Timer() r = 1000 x = Cos(i) * r + Width / 2 y = Sin(i) * r + Height / 2 ImgEarth.Move x, y i = i + 0.1End Sub10.5 设计简单动