Raster and Vector Graphics

Raster and vector graphics are two ways of representing an image of some sort using the native language of 1s and 0s employed by computers. A raster image is simpler to understand, but takes up much more memory to work with. A raster image is a rectangular grid of pixels, and a specific color is encoded for each pixel (it gets a little more complicated than this when considering compressed images, but the basic facts are the same).

On the other hand, a vector image is composed of geometric primitives such as circles, lines, rectangles, and so on that can be described using mathematical formulas. Whereas a line represented in a raster image would have to identify individual pixels that make up the line, a vector image would need to define only the starting point and the end point to define the same line.

There are some file formats that are designed to support the inclusion of both vector and raster graphics; these are collectively known as metafiles. Windows has two metafile formats called Windows Metafile (WMF) and Enhanced Metafile (EMF). WMF is a 16-bit format, whereas EMF is a new, 32-bit version. Traditionally, PICT was the native metafile format for Macintosh computers (OS X now uses PDF as the native metafile format). REALbasic does not provide any direct support for PDF at the moment, so it often relies on PICT images on the Macintosh platform.

There are several other common raster file formats that you will likely encounter. On Windows, many files (such as icons) are stored in BMP (for bitmapped) files. You will also see GIF, PNG, and JPG. Later on in the chapter you will see that REALbasic automates much of the handling of graphic file formats and will save them in the format appropriate for the platform on which the application is running.

At the center of REALbasic's graphics classes is the Graphics class. In addition, there is the Picture class, which is used to render raster graphics; the Graphics2D class, which is used to render vector graphics (it includes support for raster graphics as well); and the Graphics3D class, which is used for three-dimensional graphics of the sort often used in games. Because 2D graphics are most commonly used, that is where I will focus most of my energies in this chapter.

The Graphics Class

Many classes have reference to a Graphics object, including Windows and ListBoxes. This provides you with ample opportunity to customize the look and feel of some of REALbasic's existing controls as well.

REALbasic's graphics-related classes have evolved over time, and much like all evolutionary systems, there are some vestigial organsclass members of one sort or another that still exist but that are no longer really necessary. Much of what can be done in the Graphics class using members of the Graphics class can now be done with more control and flexibility with the Object2D class and subclasses. At the same time, there are some things you can do from within the Graphics class that you cannot do in the Object2D classes, despite the substantial overlap in functionality.

The Graphics class itself is used to output raster graphics to the screen as well as to the printer (it displays and prints text, too, which is technically a vector graphic). These two roles coexist in the Graphics class, but not every instance of the Graphics class is able to print. As such, I think it would have been clearer (and more object-oriented) if the Graphics class were two distinct classes, with a subclass of Graphics to be used for printing. But that's just wishful thinking on my part. Here's what you need to know:

• To print, you need to instantiate a Graphics object from the StyledTextPrinter class (an instance of which is a property of an EditField, which is how you use it).

• All other instances of Graphics objects can use all the properties and methods of the Graphics class, with the exception of the ones that are responsible for managing printing.

In the next section, I will review the properties associated with the Graphics class.

Properties

The following properties determine the height and width of the graphic itself. Because Graphic instances are often associated with particular controls, there are many times when these values will be the same as the height and width of the parent control.

Graphics.Height as Integer Graphics.Width as Integer

The next group of properties handles text. You set these values prior to drawing strings using the DrawString method of a Graphics object, and they apply to any strings that are drawn after they are set. The ForeColor property applies both to the color of text, but also to the color of any other kind of drawing that is done with the Graphics object. You can set the value of a property, draw a string, and then change the value of the original property and draw another string. In each case, the value of the property applies only to the next string being drawn.

Graphics.ForeColor as Color Graphics.Bold as Boolean Graphics.Italic as Boolean Graphics.Underline as Boolean Graphics.TextAscent as Integer Graphics.TextFont as String Graphics.TextHeight as Integer Graphics.TextSize as Integer

The Pen referred to in the following properties is known as the stroke in graphics applications:

Graphics.PenHeight as Integer Graphics.PenWidth as Integer

For example, if you set the height and width at four and then draw a line, the line will be four pixels wide.

The following property allows you to set the color value of an individual pixel. If you are going to be manipulating a lot of pixels individually, it is best to use an RGBSurface object associated with a Picture object.

Graphics.Pixel(X as Integer, Y as Integer) as Color

Macintosh has two means of drawing and rendering graphics: The old way is called QuickDraw and the new way is called Quartz. Quartz looks much better, especially when rendering text, but it is also a little slower at times than QuickDraw. There are also some cases where applications are being developed to work with both "Classic" Macs and OS X Macs. If you want the performance of your graphics to improve, or if you want to ensure that the graphics created by your program look the same on either version of Macintosh, you can tell REALbasic to use the older QuickDraw renderer by setting the following property to true:

Graphics.UseOldrenderer as Boolean

The next three properties are applicable only when printing pages and will be discussed later on in the chapter.

Graphics.Copies as Integer Graphics.FirstPage as Integer Graphics.LastPage as Integer

Graphics Methods

REALbasic provides three methods that draw icons on the Graphics object. As with all of the following methods, the position is passed as two integers. X is the horizontal axis and Y is the vertical axis.

Graphics.DrawCautionIcon(X as Integer, Y as Integer) Graphics.DrawNoteIcon(X as Integer, Y as Integer) Graphics.DrawStopIcon(X as Integer, Y as Integer)

The next group of methods are used to draw shapes, such as lines, rectangles, round rectangles, ovals, and polygons. The first group draws only the outlines, using the current ForeColor value.

[View full width]
Graphics.DrawLine(X1 as Integer, Y1 as Integer, X2 as Integer, Y2 as Integer) Graphics.DrawRect(X as Integer,Y as Integer, Width as Integer, Height as Integer) Graphics.ClearRect(X as Integer, Y as Integer, Width as Integer, Height as Integer) Graphics.DrawRoundRect(x as Integer,y as Integer, width as Integer, height as Integer,  arcWidth as Integer, arcHeight as Integer) Graphics.DrawOval(X as Integer, Y as Integer, Width as Integer, Height as Integer) Graphics.DrawPolygon(Points() as Integer)

This group of methods draws shapes whose bodies are filled with the currently selected ForeGround color:

[View full width]
Graphics.FillRect(X as Integer, Y as Integer, Width as Integer, Height as Integer) as Color Graphics.FillRoundRect(X as Integer, Y as Integer, Width as Integer, Height as Integer,  arcWidth as Integer, arcHeight as Integer) Graphics.FillOval(X as Integer, Y as Integer, Width as Integer, Height as Integer) as Color Graphics.FillPolygon(points()) as Color Graphics.DrawString(X as Integer, Y as Integer, Width as Integer, Condense as Boolean)

The Graphics class has two methods for handling strings that are very helpful and that are not replicated in the StringShape class (a subclass of Object2D). The following methods will tell you how wide a given String is, or how tall a block of text is, given a particular width. This information is essential when drawing text because you will need it to know how to position it in the image. Although there is a StringShape class that will print strings for you, it cannot tell you how wide or deep the text is, so you will need to use the following methods:

Graphics.StringWidth(Text as String) as Integer Graphics.StringHeight(Text as String, WrapWidth as Integer) as Integer

The following method returns the height of the string that is passed to it, based on the current TextFont and TextSize properties:

Graphics.TextAscent(Text as String) as Integer

When you are creating an application that will be used with different languages, one thing you need to keep in mind is the direction in which the text will flow. Some languages, such as English, go from right to left, whereas others go from left to right. You use the following method to determine which direction the String should go:

Graphics.StringDirection(Text as String) as Integer

The previous method returns the following:

Const Graphics.TextRightToLeft as Integer = 0 Const Graphics.TextLeftToRight as Integer = 1 Const Graphics.TextDirectionUnknown as Integer = -1

The following two methods are the ones I will be using most in the examples I will share with you. Rather than using the drawing methods directly in the Graphics class itself, I will be drawing the image in a separate Picture object, or in an Object2D object, and then passing the object to either the DrawPicture or DrawObject method.

[View full width]
Graphics.DrawPicture(Image as Picture, X as Integer, Y as Integer, [ DestWidth as Integer] , [DestHeight as Integer, SourceX as Integer, SourceY as Integer, SourceWidth as Integer,  Source Height as Integer]) Graphics.DrawObject(Object as Object2D [x as integer, y as integer])

The following method is used when printing and will be explained more fully later in the chapter.

Graphics.NextPage