780 likes | 984 Views
第 10 章 处理图形. Visual Basic 程序设计教程. 本章主要介绍 绘图属性 绘图方法 图片框 影像框. 10.1 概述. 图形一般指图绘形象,描画出物体的轮廓、形状等。 由图元组成,图元可以是点、线、圆、字符、填充区等。 每个图元有它的数据定义和外貌特征。如线段端点、粗细等。 VB 提供了一些控件和方法,绘制图元,最终构成图形 容器是绘制图形或控件的场所 容器中的对象只能在容器内变动。 窗体、框架、图片框是容器 移动容器时,内部对象与容器的相对位置保持不变。. VB 容器的图层从前到后为:
E N D
第10章 处理图形 Visual Basic 程序设计教程
本章主要介绍 • 绘图属性 • 绘图方法 • 图片框 • 影像框 Visual Basic程序设计教程
10.1 概述 • 图形一般指图绘形象,描画出物体的轮廓、形状等。 • 由图元组成,图元可以是点、线、圆、字符、填充区等。 • 每个图元有它的数据定义和外貌特征。如线段端点、粗细等。 • VB提供了一些控件和方法,绘制图元,最终构成图形 • 容器是绘制图形或控件的场所 • 容器中的对象只能在容器内变动。 • 窗体、框架、图片框是容器 • 移动容器时,内部对象与容器的相对位置保持不变。 Visual Basic程序设计教程
VB容器的图层从前到后为: • 前层——非绘图控件所在层,如命令按钮、复选框等; • 中间层——绘图控件和标签所在层; • 底层——绘图方法显示结果的地方。 • 图层显示特性依靠:AutoRedraw和ClipControls属性的设置及绘图方法是否在Paint事件过程内。 • 图像一般是指绘制、摄制或印制的形象。 • 可将它们装载到图片框、影像框可窗体上 Visual Basic程序设计教程
10.2 模拟单摆 • 【例10-1】设计一个模拟单摆 • ·控件: • 图片框控件Picture1:作单摆容器 • 直线控件Line1:作绳索 • 形状控件Shape1:作球(设计界面中为矩形) • 定时器控件Timer1:控制摆动。 Visual Basic程序设计教程
·2个模块级变量A和D,表示摆动角度和方向。 • ·2个事件过程: Form_Load,初始化界面和控件属性 Timer1_Timer,控制单摆的运动。 Visual Basic程序设计教程
Option ExplicitDim A As Integer, D As Integer '模块级变量,A表示角度,D表示方向Const PI = 3.1415926Private Sub Form_Load() Form1.Width = 1.3 * Form1.Height '设置窗体的宽度和高度比例Picture1.Width = 1.5 * Picture1.Height '设置图片框的宽度和高度比例Picture1.Scale (-150, -5)-(150, 195) '更改坐标系统Shape1.FillStyle = 0 '使形状控件的填充模式为"实心" Shape1.FillColor = vbRed '使形状控件填充红色Shape1.BorderColor = vbRed '使形状控件的边界颜色为红色Shape1.Width = 15 '按坐标系,更改形状控件大小Shape1.Shape = 3 '使形状控件的形状为圆形Line1.BorderColor = vbRed '使绳索颜色为红色Line1.X1 = 0: Line1.Y1 = 0 '使绳索上端在原点(0,0)上Picture1.AutoRedraw = True '使图片框的重绘属性为True Picture1.Line (-10, 0)-(10, 0) '顶端画一条固定绳索的横线Timer1.Interval = 100 A = -20: D = -1 '设置初始角度和方向End Sub Visual Basic程序设计教程
Private Sub Timer1_Timer() Dim X As Single, Y As Single If D = -1 Then A = A + 2 Else A = A - 2 X = 170 * Sin(A * PI / 180) '确定圆心和直线下端的位置Y = 170 * Cos(A * PI / 180) Line1.X2 = X: Line1.Y2 = Y '更改直线下端位置Shape1.Left = X - Shape1.Width / 2 '使圆心位置在直线的下端Shape1.Top = Y - Shape1.Height / 2 If D = -1 And A = 20 Or D = 1 And A = -20 Then D = -D '±20°改方向End Sub • ·Scale方法使图片框左上角和右下角坐标分别为(-150,-5)和(150,195)。 • ·而170表示着绳索的长度,可以取其它值,但应使整个单摆可见。 Visual Basic程序设计教程
·坐标系是用于确定数与基本几何对象之间对应关系的参考系,是形和数结合的基础。·坐标系是用于确定数与基本几何对象之间对应关系的参考系,是形和数结合的基础。 • ·VB坐标系是确定对象和图形位置的参考系。 • ·VB中每一个容器采用(x,y)的二维坐标系统 • ·每个对象、图形操作,都要使用坐标系。 • ·VB坐标系统使用有以下规则: 移动或调整控件大小时,使用容器的坐标系统。 绘图方法和Print方法,使用容器的坐标系统。 10.3 什么是VB坐标系 Visual Basic程序设计教程
10.3.1 VB默认坐标系 • ·VB坐标系每个点用(x,y)表示 x是水平方向沿x轴的位置,默认最左端是0 y是垂直方向沿y轴的位置,默认最上端是0 • ·坐标单位又称为坐标刻度,默认缇(twips)。 还可以使用磅、像素和毫米等。 • ·屏幕的左上角的坐标总是(0,0) Visual Basic程序设计教程
·其它容器在缺省状态下,左上角是(0,0)。 • 窗体(0,0)点指窗体标题栏下边沿的左上角。 • ·使用对象的刻度属性和Scale方法,可重新设置容器的坐标系统。 Visual Basic程序设计教程
10.3.2 Scale方法 • ·使用Scale方法可以创建自定义刻度。 • ·Scale方法的使用格式为:[容器名.]Scale [(x1,y1)-(x2,y2)] • 1.容器名指窗体名或图片框控件名。 缺省指当前窗体 • 2.(x1, y1)和(x2, y2) 为新坐标系统左上角和右下角坐标 • 3.省略(x1,y1)-(x2,y2),恢复缺省刻度。 Visual Basic程序设计教程
· 例10-1中Picture1.Scale (-150, -5)-(150, • 195)更改图片框坐标系如上图。 • 这样求运动点(x,y)的位置比较方便 • 设绳索长为170,则当绳索与y轴的夹角为a时,则x=170sina,y=170cosa。 Visual Basic程序设计教程
10.3.3 坐标属性 • ·使用坐标属性可以更改容器的坐标刻度,也可以自定义坐标系。 ScaleMode:设置坐标刻度,缺省值为1(缇) ScaleLeft:表示或设置对象左边界水平坐标 ScaleTop:表示或设置对象上边界垂直坐标 ScaleWidth:表示或设置对象内水平度量单位数 ScaleHeight:表示或设置对象内垂直度量单位数 CurrentX:当前输出的水平坐标。程序中使用。 CurrentY:当前输出的垂直坐标。程序中使用。 Visual Basic程序设计教程
·属性说明: • ScaleWidth、ScaleHeight不同于Width、Height • ScaleMode属性可以取值0~7,表示刻度分别为自定义、缇、磅、像素、字符、英寸、毫米和厘米。 • 更改ScaleWidth、ScaleHeight、ScaleLeft、ScaleTop之 • 一时,VB自动将ScaleMode的值设为0。 • 如Scale (-150, -5)-(150, 195),也可以表示成: • ScaleWidth=300:ScalHeight=200: ScaleLeft=-150:ScaleTop=-5 • 若要改坐标轴方向,可将ScaleWidth或ScaleHeight设置成负值 Visual Basic程序设计教程
ScaleMode属性取值为1~7时的刻度,称为标准刻度 在设置了ScaleMode属性的值后,VB会重定义ScaleWidth和ScaleHeight,使它们与新刻度保持一致。 左上角坐标总是:(ScaleLeft,ScaleTop) 右下角坐标总是:(ScaleLeft+ScaleWidth,ScaleTop +ScaleHeight)。 Visual Basic程序设计教程
10.4 使用绘图方法 • 10.4.1 画点—PSet方法 • ·绘图方法可画点、画线、画矩形、画椭圆等。 • ·格式:[对象名.]PSet (x,y) [,颜色] • 1.(x,y)为所画点的坐标位置 • 2.颜色指点的颜色。缺省时由容器的ForeColor属性决定。 • 例如:PSet (1000, 1000), RGB(255, 0, 0) • 在(1000,1000)处画红点,大小由容器的DrawWidth属性决定。 • 3.擦除一个点,可采用以背景色重画点。 • 4. Cls方法可擦除绘图方法及Print方法的输出内容。 Visual Basic程序设计教程
【例10-2】绘制一条y=x2的抛物线。Private Sub Form_Click() Dim x As Single Scale (-10, 105)-(10, -2) For x = -9 To 9 Step 0.01 PSet (x, x * x) Next xEnd Sub Visual Basic程序设计教程
10.4.2 画直线和矩形——Line的方法 • ·使用Line方法可以画出直线或矩形。 • 1.画线格式:[对象名.]Line [(x1,y1)]-(x2,y2) [,颜色] • (x1,y1)和(x2,y2)分别为起点和终点坐标 • 如:Line (100, 150)-(1400, 1300), vbRed • ·缺省起点 (x1,y1),表示将当前输出位置作为 • 起点。 Visual Basic程序设计教程
坐标点的另一种表示形式为:Step(x,y) • 是相对位置的表示法,表示当前输出位置水平方向加上x,垂直方向加上y后得到的坐标点。 • 对象的当前位置由CurrentX和CurrentY决定 • Line (100, 200)-(150, 250)等价:Line (100, 200)-Step(50, 50) • VB画直线时,包括了起点,未包括终点。画终点可用: • PSet Step(0, 0)[, color] • 连续使用缺省起点的Line方法,可以绘制多点折线。 Visual Basic程序设计教程
【例10-3】在窗体上中间画出一个等腰三角形。【例10-3】在窗体上中间画出一个等腰三角形。 可根据窗体ScaleWidth和ScaleHeight属性确定三点位置 由于一条线的终点等价于另一条线的起点,因此除了第一条线以外,其它两条线均可用缺省起点的Line方法。 Visual Basic程序设计教程
Private Sub Command1_Click() Dim x1 As Integer, x2 As Integer, x3 As Integer Dim y1 As Integer, y2 As Integer, y3 As Integer x1 = ScaleWidth / 2: y1 = ScaleHeight / 5 x2 = ScaleWidth / 5: y2 = ScaleHeight / 5 * 4 x3 = ScaleWidth / 5 * 4: y3 = ScaleHeight / 5 * 4 Line (x1, y1)-(x2, y2) Line -(x3, y3) Line -(x1, y1)End Sub Visual Basic程序设计教程
2.画矩形采用格式:[对象名.]Line [(x1,y1)]-(x2,y2) ,[颜色],B[F] (x1,y1)和(x2,y2) 为矩形的两个对角顶点坐标 缺省(x1,y1),表示当前输出位置作(x2,y2)的对角顶点 参数B表示绘制矩形 参数F表示矩形填充,即为实心的矩形 如:Line (500, 200)-Step(200, 200), vbRed, B 如: Line (500, 200)-Step(200, 200), vbRed, BF 若颜色缺省,逗号也不能省 Visual Basic程序设计教程
【例10-4】编制简易黑板。功能是:用鼠标左键在窗体上拖动时,画出线条;用鼠标右键在窗体上拖动时,擦去线条。击“清除” 擦去所有痕迹。 • ·事件: • 窗体MouseDown:画出按下鼠标的第一点 • 窗体MouseMove:画出线条或删除线条 • 用背景色,画小矩形擦 • “清除”的Click:擦去所有痕迹 Visual Basic程序设计教程
Private Sub Command1_Click() '擦“黑板”Cls • End Sub • Private Sub Form_Load() '初始化 • Form1.Caption = "简易黑板" • Form1.BackColor = RGB(0, 0, 0) • Form1.ForeColor = RGB(255, 255, 255) • Command1.Caption = "擦除" • End Sub Visual Basic程序设计教程
Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) • If Button = 1 Then ' Button = 1表示按下左键, 画第一点 • Form1.PSet (X, Y) • End If • End Sub • Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) • If Button = 1 Then '左键拖动画线 • Form1.Line -(X, Y) • ElseIf Button = 2 Then '右键拖动以黑色画实心方块,起擦除作用 • Form1.Line (X - 200, Y - 200)-(X + 200, Y + 200), RGB(0, 0, 0), BF • End If • End Sub Visual Basic程序设计教程
10.4.3 画圆、弧和椭圆——Circle方法 • · Circle方法可画出圆、圆弧、扇形或椭圆。 • 1.画圆格式:[对象名.]Circle [Step](x,y), 半径 [,颜色] [Step](x,y)表示圆心的坐标。 半径的度量单位与容器坐标系的单位相同,不能为负。 画圆时,半径通常由水平单位指定。 Visual Basic程序设计教程
如下列代码绘制如图。Scale (-50, 20)-(50, -20)Line (-15, 15)-(15, -15), , BCircle (0, 0), 15 • 又如以窗体中心为圆心,以窗体ScaleWidth的1/4为半径画圆: • Circle (ScaleWidth / 2 + ScaleLeft, ScaleHeight / 2 + ScaleTop), _ • ScaleWidth / 4 Visual Basic程序设计教程
【例10-5】编程,在窗体中间画1000个同心多彩圆。【例10-5】编程,在窗体中间画1000个同心多彩圆。 • ·编写通用过程PaintCircle:绘制彩色圆 • Sub PaintCircle() Dim R As Integer, X As Integer, Y As Integer X = ScaleWidth / 2 '将x坐标设置在窗体内横向中间Y = ScaleHeight / 2 '将y坐标设置在窗体内纵向中间If X < Y Then R = X * 0.9 Else R = Y * 0.9 Circle (X, Y), R * Rnd, RGB(Rnd * 255, Rnd * 255, Rnd * 255) '画圆End Sub Visual Basic程序设计教程
Private Sub Command1_Click()Dim i As IntegerFor i = 1 To 1000 PaintCircleNextEnd Sub • 其中乘0.9是为了最大圆不会紧贴窗体边缘。 Visual Basic程序设计教程
2.画弧格式为:[对象名.]Circle [Step](x,y),半径,[颜色], Start, End[, Aspect] • 圆弧以弧度为单位,按逆时针方向画弧。 • Start和End表示弧线起始角和终止角的弧度数据 • 平行于X轴的正向为0弧度 • 如果Start参数或End参数是负数,则VB将画一条连接圆心到负端点的直线。 • 使用不为1的 Aspect参数,表示为椭圆弧线的一段。 • 如:Circle (800, 800), 500, , -3.14 / 2, -3.14 / 3Circle (1800, 800), 500, , 0, 3 * 3.14 / 4 Visual Basic程序设计教程
3.画椭圆格式: • [对象名.]Circle [Step](x,y),半径[,颜色, Start, End, Aspect] • 画圆还是画椭圆由圆的方位比Aspect决定。它指定了垂直长度和水平长度的比例 • VB在Circle方法中的半径参数对应椭圆的长轴。 • [,颜色, Start, End, Aspect]四项中任一项都是可选的,当前面的项缺省时,逗号仍不能省去。 • 省略Start, End中的任一项,表示该项为0,画弧。两项都省去,表示画圆或椭圆。 • 如以下代码,使用半径均为500,但使用不同的方位比,其效果如图。Circle (800, 800), 500, , , , 3Circle (800, 800), 500Circle (2000, 800), 500, , , , 1 / 3 Visual Basic程序设计教程
10.5 使用绘图属性 • 10.5.1 更改线条形式 • 1.DrawWidth属性 DrawWidth属性可以设置线条的粗细、点的大小 DrawWidth属性值以像素为单位,取值范围为1~32767 当数据取得很大时,可能一个点就能占满整个容器。 Visual Basic程序设计教程
下面代码根据DrawWidth取值,效果如图。Private Sub Form_Click()Dim i As Integer, t As Integert = ScaleWidth / 20For i = 1 To 20 Step 2 Form1.DrawWidth = i PSet (t * i, ScaleHeight / 4) Line (t * i, ScaleHeight / 2)-(t * i, ScaleHeight)Next iEnd Sub Visual Basic程序设计教程
2.DrawStyle属性 • DrawStyle属性用于指定绘制的图形线条形式。 • DrawStyle属性取值为0~6,形式如表。 • 6:内收实线,框线较粗时,才可见效果,如图 Visual Basic程序设计教程
10.5.2 填充图案 • 1.FillStyle属性 设置封闭图形的填充图案样式,取值0至7 缺省值为1 ,无论何种色彩,均表现为空心。 如希望窗体上显示各填充效果,可用代码:t = ScaleWidth / 9For I = 0 To 7 • FillStyle = I • Line (I * t + 100, 500)-((I + 0.8) * t + 100, 500 + 1000), , B • Next I Visual Basic程序设计教程
2.FillColor属性 FillColor属性表示填充颜色 只要FillStyle属性不为1,就可FillColor填色 VB填充矩形、圆、扇形等封闭图形 FillColor属性的设置方式和ForeColor相同 Visual Basic程序设计教程
注意FillColor和ForeColor的差别: • 前者用于填充颜色 • 后者为默认的边线颜色,或输出文字颜色。 • 若Line语句中使用了参数F,则所有的填充形式和填充颜色都无效。 Visual Basic程序设计教程
【例10-6】根据绘图属性,画扇形、画椭圆、画环。【例10-6】根据绘图属性,画扇形、画椭圆、画环。 ·对于圆环,没有单独语句,可用图形组合。Private Sub Command1_Click() '画扇形。FillStyle = 7 FillColor = RGB(255, 0, 0) Circle (800, 1000), 800, , -0.0001, -3.14 * 2 / 3End Sub Visual Basic程序设计教程
Private Sub Command2_Click() ‘画两个椭圆FillStyle = 1 ’画一个红色点线的空心椭圆DrawStyle = 2 : Circle (2300, 500), 400, vbRed, , , 2 DrawStyle = 0 ‘恢复默认的线条样式FillStyle = 0 ’画线宽3个像素,线条红色的 • 一个实心黄椭圆DrawWidth = 3 : FillColor = vbYellow Circle (2300, 1200), 400, vbRed, , , 0.5 DrawWidth = 1 '恢复默认线宽End SubPrivate Sub Command3_Click() '绘制圆环FillStyle = 4 '画一个有填充的大圆FillColor = vbBlue : Circle (3500, 1000), 600, vbRed FillStyle = 0 '画一个实心的以背景色填充的同心小圆FillColor = BackColor : Circle (3500, 1000), 300, vbRedEnd Sub 为了在0弧度上能画上横线,使用了-0.0001 Visual Basic程序设计教程
10.6.1 直线控件(Line) • ·直线控件可以在容器对象中绘制直线 • ·该直线不能被Cls方法清除, • ·程序中修改端点可以移动直线。 • 1.创建直线控件:工具箱内选取直线工具 10.6 使用绘图控件 Visual Basic程序设计教程
2.直线控件的主要属性 (名称)Name。直线控件名称。缺省值为Line1 BorderColor:设置线条颜色 BorderStyle:线条样式,取值为0~6,分别表示透明、实线、破折线、点线、点划线、双点划线和内收实线。 BorderWidth:设置线条粗细 X1和Y1:分别为起点的x坐标和y坐标 X2和Y2:分别为终点的x坐标和y坐标 • ·直线控件没有事件 Visual Basic程序设计教程
10.6.2形状控件(Shape) • ·形状控件可以直接在容器对象中绘制图形 • ·这些图形可是圆、椭圆、也可以是矩形等 • 1.创建形状控件:在工具箱内选取工具 • 2.形状控件的属性 同直线控件的BorderColor、BorderStyle、BorderWidth 常规属性Height、Width、Left、Top、Visible等 Name(名称),形状控件名称。缺省值为Shape1 Visual Basic程序设计教程
FillColor:设置填充颜色 FillStyle:填充样式,取值0~7,默认为1,即透明。 Shape:设置图形的形状,取值0~5,分别表示矩形、正方形、椭圆、圆、圆角矩形、圆角正方形。默认为0。 • ·控件为圆时,半径为Height/2和Width/2的最小值; • ·控件为正方形时,边长为Height和Width的最小值。 • ·Shape控件没有事件。 Visual Basic程序设计教程
【例10-7】用直线控件和形状控件制作钟。 • ·控件: • 7条直线控件 • Line1~Line4作为3、6、9、12点的位置 • Line5~Line7分别作为时、分、秒的指针。 • 1个形状控件:作为钟的圆盘 • ·用Time、Hour、Minute、Second函数获得时、分、秒 • ·为了计算方便,原点(0,0)改在窗体中心,并且轴方向与数学上的一致,但没有更改刻度。 • ·时和分采用实数型 • ·本题所有的属性设置在Form_Load中完成。 Visual Basic程序设计教程
Dim H1 As Integer, M1 As Integer, S1 As Integer '指针长度Const PI = 3.1415926Private Sub Form_Load() '初始化Dim R As Integer '钟的半径Scale (-ScaleWidth / 2, ScaleHeight / 2)-(ScaleWidth / 2, -ScaleHeight / 2) Shape1.FillStyle = 0: Shape1.Shape = 3: Shape1.FillColor = vbYellow Shape1.Left = -Shape1.Width / 2: Shape1.Top = Shape1.Height / 2 If Shape1.Width<Shape1.Height Then R=Shape1.Width/2 Else R=Shape1.Height/2 '确定半径Line5.X1 = 0: Line6.X1 = 0: Line7.X1 = 0 '时分秒针一端置于原点Line5.Y1 = 0: Line6.Y1 = 0: Line7.Y1 = 0H1 = R * 0.6: M1 = R * 0.7: S1 = R * 0.8 确定时分秒指针长度Line1.X1=0: Line1.X2=0: Line1.Y1 = R * 0.85: Line1.Y2 = R * 0.9 '4点位置Line2.X1 = R * 0.85: Line2.X2 = R * 0.9: Line2.Y1 = 0: Line2.Y2 = 0Line3.X1 = 0: Line3.X2 = 0: Line3.Y1 = -R * 0.85: Line3.Y2 = -R * 0.9Line4.X1 = -R * 0.85: Line4.X2 = -R * 0.9: Line4.Y1 = 0: Line4.Y2 = 0Line7.BorderColor = vbRed '将秒指针设为红色Timer1.Interval = 1000Timer1_Timer '调用Timer1_Timer事件过程End Sub Visual Basic程序设计教程
Private Sub Timer1_Timer()Dim H As Single, M As Single, S As Single '计算出时分秒S =Second(Time): M=Minute(Time)+S/60: H= Hour(Time) Mod 12 +M/60 '确定时分秒指针的另一端Line5.X2 = H1*Cos(PI/2-H*2*PI/12): Line5.Y2 = H1*Sin(PI/2-H*2*PI/12)Line6.X2 = M1*Cos(PI/2-M*2*PI/60): Line6.Y2=M1*Sin(PI/2-M*2*PI/60)Line7.X2 = S1*Cos(PI/2-S*2*PI/60): Line7.Y2 = S1*Sin(PI/2-S*2*PI/60)End Sub • ·通过S * 2 * PI / 60等计算出指针与x轴的夹角弧度 • ·指针是在90度开始逆向运动,所以用:PI / 2 - S * 2 * PI / 60。 • ·对于时针,转一圈为12小时,故除以12。 Visual Basic程序设计教程
10.7 VB图像和色彩 • 10.7.1图片框(PictureBox) • ·图片框控件属于容器控件 可以放置其它控件 可以显示图形、显示Print方法输出的文本 可以载入图片或图像。 • 1.创建图片框 在工具箱内选取图片框工具 Visual Basic程序设计教程
2.图片框的主要属性 坐标系:ScaleHeight、ScaleLeft、ScaleMode、ScaleWidth、ScaleTop 绘图:AutoRedraw、DrawStyle、DrawWidth、FillColor、FillStyle (名称)Name。图片框控件名称。缺省Picture1 AutoSize:控件是否会自动改变大小适合加载的图片。值为True时,自动调整大小与显示的图片相匹配。 Picture:设置控件内显示的图片文件 Visual Basic程序设计教程
3.图片框的事件 Click、DblClick、MouseDown、MouseMove、MouseUp、Paint、Resize等 • 4.图片框的方法 Move方法:移动或调整图片框大小 Circle、Line和Pset方法:画图 Print方法:输出文本或数据 Cls方法:清除输出的内容,但不能清除控件及图片。 还有PaintPicture和Point等方法(后面介绍) Visual Basic程序设计教程