Small Basic 编程入门 06 - 图形入门

Small Basic 还有一组强大的图形功能。

目前为止,在所有例子中,我们都用TextWindow 解释Small Basic 语言的基础知识。然而,Small Basic 还有一组强大的图形功能。我们将在这章中学习。

GraphicsWindow 引言

就如TextWindow 使我们可以处理 Text (文本)和 Numbers(数字), Small Basic 提供了GraphicsWindow,我们可以用它来画图。让我们从显示GraphicsWindow开始。

GraphicsWindow.Show()

当你运行这个程序的时候,你会发现你得到的是一个下图所示的白色Window(窗体),而不是一个通常情况下的空的文本窗体。这个窗体本身没什么用,但这章你所有的工作都将基于它。你可以通过右上角的‘X’来关闭这个窗口。

Small Basic 编程入门 06 - 图形入门

图 23 – 一个空的 Graphics Window

设置Graphics Window

这个图形窗口允许你根据自己的需要调整它的外观。你可以改变它的标题、背景和大小。让我们继续对它进行一些修改。这将帮助我们熟悉窗体。

GraphicsWindow.BackgroundColor = "SteelBlue" 
GraphicsWindow.Title = "My Graphics Window" 
GraphicsWindow.Width = 320 
GraphicsWindow.Height = 200 
GraphicsWindow.Show()

下面是一个个性化的图形窗口的样子。你可以把它的背景颜色改变成附录B 中列出的任意一种颜色。试试这些属性看看窗体的外观是如何改变的。

Small Basic 编程入门 06 - 图形入门

图 – 一个 Custom Graphics Window (个性化图形窗体)

画线

一旦你有了 GraphicsWindow,我们可以在它上面画图形、文本甚至是图片。让我们先画一些简单的图形。下面是在Graphics Window 上画两条线的程序。

GraphicsWindow.Width = 200 
GraphicsWindow.Height = 200 
GraphicsWindow.DrawLine(10, 10, 100, 100) 
GraphicsWindow.DrawLine(10, 100, 100, 10)
Small Basic 编程入门 06 - 图形入门

图 25 – 交叉线

这两行程序设置了窗体并且画了两条交叉线。DrawLine 后面紧跟的前两个数字指定了线开始端的x,y坐标;另外两个数字指定了线结束端的x,y坐标。计算机图形中有趣的一件事是(0,0)坐标代表了窗体的左上角。实际上,窗体被认为是在坐标系的第二象限。


Small Basic 编程入门 06 - 图形入门

图 26 – 坐标图

如果我们回到画线的程序,有趣的是Small Basic 允许你修改线的属性。比如颜色和它的宽度。首先,我们用下面的程序改变线的颜色。

GraphicsWindow.Width = 200 
GraphicsWindow.Height = 200 
GraphicsWindow.PenColor = "Green" 
GraphicsWindow.DrawLine(10, 10, 100, 100) 
GraphicsWindow.PenColor = "Gold" 
GraphicsWindow.DrawLine(10, 100, 100, 10)
Small Basic 编程入门 06 - 图形入门

图 27 – 改变线的颜色

现在,我们改变大小。在下面的程序中,我们把线的宽度从默认的1改为10。

GraphicsWindow.Width = 200 
GraphicsWindow.Height = 200 
GraphicsWindow.PenWidth = 10 
GraphicsWindow.PenColor = "Green" 
GraphicsWindow.DrawLine(10, 10, 100, 100) 
GraphicsWindow.PenColor = "Gold" 
GraphicsWindow.DrawLine(10, 100, 100, 10)
Small Basic 编程入门 06 - 图形入门

图 28 – 粗的彩色线

PenWidthPenColor 改变画线的笔。它们不仅影响线,还会影响属性改变后画的所有图形。

使用上一章我们学的循环语句,我们可以轻松的写一个程序。这个程序可以画很多条线。画线用的笔会越来越粗。

GraphicsWindow.BackgroundColor = "Black" 
GraphicsWindow.Width = 200 
GraphicsWindow.Height = 160 
GraphicsWindow.PenColor = "Blue" 
For i = 1 To 10
  GraphicsWindow.PenWidth = i
  GraphicsWindow.DrawLine(20, i * 15, 180, i * 15) 
endfor
Small Basic 编程入门 06 - 图形入门

图 29 – 不同的笔的宽度

这个程序有趣的部分是循环语句。每循环一次,我们加大笔的宽度,然后在原来的线下面画一条新线。

画图和填充图形

说到画图形,对于每一个图形通常都有两类操作。它们分别是画操作和填充操作。画操作用笔画出图形的轮廓;填充操作用刷子为图形上色。例如在下面的程序中,有两个矩形。一个是用红笔画出来的,另一个是用绿色的刷子填充的。

GraphicsWindow.Width = 400 
GraphicsWindow.Height = 300 
GraphicsWindow.PenColor = "Red" 
GraphicsWindow.DrawRectangle(20, 20, 300, 60) 
GraphicsWindow.BrushColor = "Green" 
GraphicsWindow.FillRectangle(60, 100, 300, 60)
Small Basic 编程入门 06 - 图形入门

图 30 画图和填充

要画和填充一个矩形,你需要四个数字。前两个代表矩形左上角的X和Y坐标。第三个数字代表矩形的宽度,第四个代表它的高度。 实际上,画和填充椭圆也一样。看下面的程序。

GraphicsWindow.Width = 400 
GraphicsWindow.Height = 300 
GraphicsWindow.PenColor = "Red" 
GraphicsWindow.DrawEllipse(20, 20, 300, 60) 
GraphicsWindow.BrushColor = "Green" 
GraphicsWindow.FillEllipse(60, 100, 300, 60)
Small Basic 编程入门 06 - 图形入门

图 31 – 画和填充椭圆

椭圆形是广义上的圆形。如果你像画圆形,你要定义相同的宽度和高度

GraphicsWindow.Width = 400 
GraphicsWindow.Height = 300 
GraphicsWindow.PenColor = "Red" 
GraphicsWindow.DrawEllipse(20, 20, 100, 100) 
GraphicsWindow.BrushColor = "Green" 
GraphicsWindow.FillEllipse(100, 100, 100, 100)
Small Basic 编程入门 06 - 图形入门

图 32 – 圆形


- 本文来自网络,如有侵权,请联系本站处理。

2022-05   阅读(2)   评论(0)
 标签: program Basic

涨知识
麦克纳姆轮

麦克纳姆轮的移动方式是基于一个有许多位于机轮周边的轮轴的中心轮的原理上,这些成角度的周边轮轴把一部分的机轮转向力转化到一个机轮法向力上面。

评论:
相关文章
Small Basic 编程入门 11 - 事件(Events)和交互(Interactivity)

事件就像被触发的信号,例如,为了应对类似移动或点击鼠标的用户操作。某种程度上说,事件同操作是相对的。对于操作,您作为一个程序员调用操作让计算机做一些事情;然后对于事件,计算机通知您一些有意思的事情发生了。



Small Basic 编程入门 09 - 子例程(Subroutines)

在编程时我们经常遇到需要重复执行相同一组步骤的情况。这种情况下,多次重写相同的语句是不合理的。这时我们需要借助子例程。


Small Basic 编程入门 08 - Turtle Graphics (海龟绘图法)

Small Basic 语言中也引入了 Turtle (龟标)对象,编程人员可以通过Small Basic 自带的很多命令调用这个对象。


Small Basic 编程入门 07 - 绘制图形

在这一章节中,我们将运用前面学到的知识来做一些有趣的事。