Lesson 2.1: Graphics Window
In this lesson, you will learn about:
- Statements that use the GraphicsWindow object.
- Properties of the GraphicsWindow object.
- Operations of the GraphicsWindow object.
Properties of the Graphics Window
You can display the graphics window by typing the statement GraphicsWindow.Show() in the editor window. Similarly, you can hide the graphics window by using the GraphicsWindow.Hide() statement. You can also modify the look and feel of the graphics window by specifying a range of properties. For example, you can set its title by using the Title property of the GraphicsWindow object. Similarly, you can modify the height, width, and background color of the graphics window by specifying the Height, Width, and BackgroundColor properties, respectively. 以下結合Graphics Window並用For迴圈畫一組大小逐漸遞增的矩形:
Operations on the Graphics Window
You can create colorful shapes in your program by using operations and their properties. This list shows some of the operations that you can use for the GraphicsWindow object:
Exploring the Graphics Window
Let’s look at an example that explores more properties and operations of the GraphicsWindow object.
This example displays a message box, which contains text and an OK button, and a graphics window, which contains a design like a barcode with random colors.
Lines by using a For loop. You also randomize the colors of the lines by using the GetRandomColor operation. You can display a message box in your program by using the ShowMessage operation of the GraphicsWindow object. For this operation, you must provide only two parameters—the message that appears in the box and the title that appears at the top of the message box.
You can display images by using the DrawImage and DrawResizedImage operations of the GraphicsWindow object. Let’s look at an example.
GraphicsWindow.DrawImage(imageName, x, y)
- imageName : 需要移動的圖像的名稱
- x : 繪製圖像所在點的X 座標
- y : 繪製圖像所在點的Y 座標
GraphicsWindow.DrawResizedImage(imageName, x, y, width, height)
- imageName : 繪製圖像的名稱
- x : 繪製圖像所在點的X 座標
- y : 繪製圖像所在點的Y 座標
- width : 繪製圖像的寬度
- height : 繪製圖像的高度
For both the DrawImage and DrawResizedImage operations, you must specify not only the file name of the image that you want to display but also its path. If the file is stored on your computer, you can specify the local path. If the file is stored on a website or network server, you can specify the URL or absolute path.
You must also specify the location where the image or resized image will appear on the screen, and you specify that location by including the x-coordinate and the y-coordinate of the upper-left corner of the image. For the DrawResizedImage operation only, you specify how big you want the image to appear by including the new width and height of the image.
You can also use the SetPixel operation to draw apixel in the graphics window at the location that you specify by including its x-coordinate and its y-coordinate.
Using Colors in the Graphics Window
You can use a range of colors in the graphics window to create colorful shapes. Let’s look at a few of the colors that Small Basic supports.
You can also choose from a variety of other colors that include pink, orange, yellow, purple, brown, white, and gray.
You can choose from a variety of colorsthat Small Basic supports. In this slide, the colors are categorized by their base hue. In your code, you can specify the color by either its name or its color code, which is a hexadecimal (base 12) number.
Congratulations! Now you know how to:
- Show and hide the GraphicsWindow object.
- Draw shapes and lines in the GraphicsWindow object.
- Display images in the GraphicsWindow object.
Show What You Know
Explore your creativity by writing a program that displays a graphics window and performs the following steps:
- Displays a graphics window that is 640 pixels tall and 800 pixels wide.
- Shows two shapes that are of different colors and that partially overlap each other.
- Shows multiple rectangles in random colors.
- Shows a resized image at a suitable location on the screen.
- Shows a message box that contains the message “Have a nice day!"
To see the answers to these questions, go to the Answer Key page.