2.1 graphics window

12
Microsoft® Small Basic Graphics Window Estimated time to complete this lesson: 1 hour

Transcript of 2.1 graphics window

Page 1: 2.1   graphics window

Microsoft® Small Basic

Graphics Window

Estimated time to complete this lesson: 1 hour

Page 2: 2.1   graphics window

In this lesson, you will learn about:

Statements using the GraphicsWindow object.

Properties of the GraphicsWindow object.

Operations of the GraphicsWindow object.

Graphics Window

Page 3: 2.1   graphics window

So far, you have used the text window to understand the fundamentals of programming using Small Basic.

Introducing the Graphics Window

This lesson exposes you to some exciting graphic capabilities offered by Small Basic.

You start with a graphics window that you can display by using the GraphicsWindow object.

Page 4: 2.1   graphics window

Properties of the Graphics Window

You use the GraphicsWindow object to display a graphics window and draw colorful shapes in it. To display the graphics window on your screen, you use the Show operation.

OUTPUT

Let’s see how to use different properties of the GraphicsWindow object in a program…

You can also define the properties of the graphics window, such as its title, height, width, and background color.

Page 5: 2.1   graphics window

Properties of the Graphics Window

PenColor—You can use this property to change the color with which shapes are drawn on the graphics window.

PenWidth—You can use this property to change the width of the pen used to draw shapes on the graphics window.

BrushColor—You can use this property to change the color used to fill shapes drawn on the graphics window.

Certain properties of the GraphicsWindow object help you enhance the shapes your create. Some of these properties are:

MouseX—You can use this property to find the x-position of the mouse relative to the graphics window.

MouseY—You can use this property to find the y-position of the mouse relative to the graphics window.

Page 6: 2.1   graphics window

Operations on the Graphics Window

You can use operations along with properties to create colorful shapes in your program.

Some of the operations available for the GraphicsWindow object are:

DrawRectangle

DrawEllipse

DrawLine

FillRectangle

GetRandomColor

SetPixel

ShowMessage

DrawResizedImage

Page 7: 2.1   graphics window

Exploring the Graphics Window

Let’s explore the different properties and operations of the GraphicsWindow object by writing a program to create shapes.

OUTPUT

Page 8: 2.1   graphics window

Using Colors in the Graphics Window

You can use a range of colors in the graphics window to create colorful shapes. Let’s take a look at a few colors supported by Small Basic.

You can also choose from a variety of other colors such as pink, orange, yellow, purple, brown, white, and gray.

Page 9: 2.1   graphics window

Exploring the Graphics Window

Let’s take a look at another example that explores some more properties and operations of the GraphicsWindow object.

The output in this example displays a graphics window with a random-colored barcode-like design, accompanied by a secondary window—a message box.

Page 10: 2.1   graphics window

Exploring the Graphics Window

Other operations used by the GraphicsWindow object include DrawImage and DrawResizedImage. Let’s look at an example…

The DrawResizedImage operation draws the specified image onto the screen, in the size specified.

The DrawImage operation draws the specified image onto the screen.

Page 11: 2.1   graphics window

Let’s Summarize…

Congratulations! Now you know how to:

Write statements relevant to the GraphicsWindow object.

Use various properties of the GraphicsWindow object.

Perform different operations using the GraphicsWindow object.

Page 12: 2.1   graphics window

It’s Time to Apply Your Learning…

Write a program to display a graphics window and perform the following steps to explore your creativity:

Set the height and width of the graphics window to 640 and 800 pixels, respectively.

Insert two differently colored shapes partially overlapping each other.

Draw multiple rectangles in random colors.

Insert a resized image at a suitable location on the screen.

Display a message box with the message "Have a nice day!"