|
Name |
Description |
|
A brush style determines what pattern the canvas uses to fill shapes. It lets you specify various ways to combine the brush’s color with any colors already on the canvas. The predefined styles include solid color, no color, and various line and hatch patterns. To change the style of a brush, set its Style property to one of the predefined values: bsBDiagonal, bsClear, bsCross, bsDiagCross, bsFDiagonal, bsHorizontal, bsSolid, or bsVertical. Cross-platform applications include the predefined values of bsDense1 through bsDense7. This example sets brush styles by sharing a click-event handler for a set of eight brush-style buttons. All eight buttons... more | |
|
In VCL applications, the graphics components defined in the Graphics unit encapsulate the Windows Graphics Device Interface (GDI), making it easy to add graphics to your Windows applications. To draw graphics in an application, you draw on an object's canvas, rather than directly on the object. The canvas is a property of the object, and is itself an object. A main advantage of the canvas object is that it handles resources effectively and it manages the device context for you, so your programs can use the same methods regardless of whether you are drawing on the screen,... more | |
|
You can add multimedia components to your applications. To do this, you can use either the TAnimate component on the Win32 page or the TMediaPlayer component on the System category of the Tool palette. Use the animate component when you want to add silent video clips to your application. Use the media player component when you want to add audio and/or video clips to an application. This topic discusses: | |
|
With the media player component, you can add audio and/or video clips to your application. It opens a media device and plays, stops, pauses, records, etc., the audio and/or video clips used by the media device. The media device may be hardware or software. Note: Audio support is not available in cross-platform applications. | |
|
With the animation control, you can add silent video clips to your application: | |
|
This example runs an AVI video clip of a multimedia advertisement. | |
|
Suppose you want to display an animated logo as the first screen that appears when your application starts. After the logo finishes playing the screen disappears. | |
|
To track whether a mouse button was pressed, you must add an object field to the form object. When you add a component to a form, Delphi adds a field that represents that component to the form object, so that you can refer to the component by the name of its field. You can also add your own fields to forms by editing the type declaration in the form unit's header file. In the following example, the form needs to track whether the user has pressed a mouse button. To do that, it adds a Boolean field and sets its... more | |
|
An image control is a container component that allows you to display your bitmap objects. You use an image control to hold a bitmap that is not necessarily displayed all the time, or which an application needs to use to generate other pictures. Note: Adding Graphics to Controls shows how to use graphics in controls. | |
|
A brush's color determines what color the canvas uses to fill shapes. To change the fill color, assign a value to the brush's Color property. Brush is used for background color in text and line drawing so you typically set the background color property. You can set the brush color just as you do the pen color, in response to a click on a color grid on the brush's toolbar : | |
|
You can set the color of a pen as you would any other Color property at runtime. A pen's color determines the color of the lines the pen draws, including lines drawn as the boundaries of shapes, as well as other lines and polylines. To change the pen color, assign a value to the Color property of the pen. To let the user choose a new color for the pen, put a color grid on the pen's toolbar. A color grid can set both foreground and background colors. For a non-grid pen style, you must consider the background color, which... more | |
|
A pen's Mode property lets you specify various ways to combine the pen's color with the color on the canvas. For example, the pen could always be black, be an inverse of the canvas background color, inverse of the pen color, and so on. | |
|
A pen's Style property allows you to set solid lines, dashed lines, dotted lines, and so on. The task of setting the properties of pen is an ideal case for having different controls share same event handler to handle events. To determine which control actually got the event, you check the Sender parameter. | |
|
A pen's width determines the thickness, in pixels, of the lines it draws. Note: When the thickness is greater than 1, Windows always draws solid lines, regardless of the value of the pen's Style property. To change the pen width, assign a numeric value to the pen's Width property.Suppose you have a scroll bar on the pen's toolbar to set width values for the pen. And suppose you want to update the label next to the scroll bar to provide feedback to the user. Using the scroll bar's position to determine the pen width, you update the pen width... more | |
|
Each drawing tool needs an associated OnClick event handler. Suppose your application had a toolbar button for each of four drawing tools: line, rectangle, ellipse, and rounded rectangle. You would attach the following event handlers to the OnClick events of the four drawing-tool buttons, setting DrawingTool to the appropriate value for each: | |
|
The following table lists the commonly used properties of the Canvas object. Common properties of the Canvas object | |
|
You can copy any picture, including the contents of image controls, to the clipboard. Once on the clipboard, the picture is available to all applications. To copy a picture to the clipboard, assign the picture to the clipboard object using the Assign method. This code shows how to copy the picture from an image control named Image to the clipboard in response to a click on an Edit  Copy menu item: | |
|
Cutting a graphic to the clipboard is exactly like copying it, but you also erase the graphic from the source. To cut a graphic from a picture to the clipboard, first copy it to the clipboard, then erase the original. In most cases, the only issue with cutting is how to show that the original image is erased. Setting the area to white is a common solution, as shown in the following code that attaches an event handler to the OnClick event of the Edit Cut menu item: | |
|
To draw a straight line on a canvas, use the LineTo method of the canvas. LineTo draws a line from the current pen position to the point you specify and makes the endpoint of the line the current position. The canvas draws the line using its pen. For example, the following method draws crossed diagonal lines across a form whenever the form is painted: | |
|
A canvas can draw straight lines and polylines. A straight line is just a line of pixels connecting two points. A polyline is a series of straight lines, connected end-to-end. The canvas draws all lines using its pen. | |
|
You don't need any components to manipulate your application's graphic objects. You can construct, draw on, save, and destroy graphic objects without ever drawing anything on screen. In fact, your applications rarely draw directly on a form. More often, an application operates on graphics and then uses an image control component to display the graphic on a form. Once you move the application's drawing to the graphic in the image control, it is easy to add printing, clipboard, and loading and saving operations for any graphic objects. graphic objects can be bitmap files, drawings, icons or whatever other graphics classes... more | |
|
To draw on a bitmap, use the image control's canvas and attach the mouse-event handlers to the appropriate events in the image control. Typically, you would use region operations (fills, rectangles, polylines, and so on). These are fast and efficient methods of drawing. An efficient way to draw images when you need to access individual pixels is to use the bitmap ScanLine property. For general-purpose usage, you can set up the bitmap pixel format to 24 bits and then treat the pointer returned from ScanLine as an array of RGB. Otherwise, you will need to know the native format of... more | |
|
To draw a polygon with any number of sides on a canvas, call the Polygon method of the canvas. Polygon takes an array of points as its only parameter and connects the points with the pen, then connects the last point to the first to close the polygon. After drawing the lines, Polygon uses the brush to fill the area inside the polygon. | |
|
In addition to individual lines, the canvas can also draw polylines, which are groups of any number of connected line segments. To draw a polyline on a canvas, call the Polyline method of the canvas. The parameter passed to the Polyline method is an array of points. You can think of a polyline as performing a MoveTo on the first point and LineTo on each successive point. For drawing multiple lines, Polyline is faster than using the MoveTo method and the LineTo method because it eliminates a lot of call overhead. | |
|
To draw a rectangle or ellipse on a canvas, call the canvas's Rectangle method or Ellipse method, passing the coordinates of a bounding rectangle. The Rectangle method draws the bounding rectangle; Ellipse draws an ellipse that touches all sides of the rectangle. | |
|
To draw a rounded rectangle on a canvas, call the canvas's RoundRect method. The first four parameters passed to RoundRect are a bounding rectangle, just as for the Rectangle method or the Ellipse method. RoundRect takes two more parameters that indicate how to draw the rounded corners. | |
|
Canvases have methods for drawing different kinds of shapes. The canvas draws the outline of a shape with its pen, then fills the interior with its brush. The line that forms the border for the shape is controlled by the current Pen object. This topic describes: | |
|
Drawing shapes is just as easy as drawing lines. Each one takes a single statement; you just need the coordinates. Here's a rewrite of the OnMouseUp event handler that draws shapes for all four tools: | |
|
The current drawing position—the position from which the pen begins drawing its next line—is called the pen position. The canvas stores its pen position in its PenPos property. Pen position affects the drawing of lines only; for shapes and text, you specify all the coordinates you need. To set the pen position, call the MoveTo method of the canvas. For example, the following code moves the pen position to the upper left corner of the canvas: | |
|
Various drawing methods (rectangle, shape, line, and so on) are typically available on the toolbar and button panel. Applications can respond to clicks on speed buttons to set the desired drawing objects. This section describes how to:
| |
|
A graphics program needs to keep track of what kind of drawing tool (such as a line, rectangle, ellipse, or rounded rectangle) a user might want to use at any given time. You could assign numbers to each kind of tool, but then you would have to remember what each number stands for. You can do that more easily by assigning mnemonic constant names to each number, but your code won"t be able to distinguish which numbers are in the proper range and of the right type. Fortunately, Delphi provides a means to handle both of these shortcomings. You can... more | |
|
Your application should provide the ability to load a picture from a file if your application needs to modify the picture or if you want to store the picture outside the application so a person or another application can modify the picture. To load a graphics file into an image control, call the LoadFromFile method of the image control's Picture object. The following code gets a file name from an open picture file dialog box, and then loads that file into an image control named Image: | |
|
Graphic images that exist only for the duration of one running of an application are of very limited value. Often, you either want to use the same picture every time, or you want to save a created picture for later use. The image component makes it easy to load pictures from a file and save them again. The components you use to load, save, and replace graphic images support many graphic formats including bitmap files, metafiles, glyphs, and so on. They also support installable graphic classes. The way to load and save graphics files is the similar to any other... more | |
|
The graphic need not be the same size as the form: it can be either smaller or larger. By adding a scroll box control to the form and placing the graphic image inside it, you can display graphics that are much larger than the form or even larger than the screen. To add a scrollable graphic first you add a TScrollBox component and then you add the image control. | |
|
If the clipboard contains a bitmapped graphic, you can paste it into any image object, including image controls and the surface of a form. | |
|
You can place an image control anywhere on a form. If you take advantage of the image control's ability to size itself to its picture, you need to set the top left corner only. If the image control is a nonvisible holder for a bitmap, you can place it anywhere, just as you would a nonvisual component. If you drop the image control on a scroll box already aligned to the form's client area, this assures that the scroll box adds any scroll bars necessary to access offscreen portions of the image's picture. Then set the image control's properties. | |
|
You will notice that every canvas has an indexed Pixels property that represents the individual colored points that make up the image on the canvas. You rarely need to access Pixels directly, it is available only for convenience to perform small actions such as finding or setting a pixel's color. Note: Setting and getting individual pixels is thousands of times slower than performing graphics operations on regions. Do not use the Pixel array property to access the image pixels of a general array. For high-performance access to image pixels, see the TBitmap.ScanLine property | |
|
With fields in place to track various points, you can refine an application's line drawing. | |
|
At certain times, the operating system determines that objects onscreen need to refresh their appearance, so it generates WM_PAINT messages on Windows, which the VCL routes to OnPaint events. If you have written an OnPaint event handler for that object, it is called when you use the Refresh method. The default name generated for the OnPaint event handler in a form is FormPaint. You may want to use the Refresh method at times to refresh a component or form. For example, you might call Refresh in the form's OnResize event handler to redisplay any graphics or if using the... more | |
|
You can replace the picture in an image control at any time. If you assign a new graphic to a picture that already has a graphic, the new graphic replaces the existing one. To replace the picture in an image control, assign a new graphic to the image control's Picture object. Creating the new graphic is the same process you used to create the initial graphic , but you should also provide a way for the user to choose a size other than the default size used for the initial graphic. An easy way to provide that option is to... more | |
|
An OnMouseMove event occurs periodically when the user moves the mouse. The event goes to the object that was under the mouse pointer when the user pressed the button. This allows you to give the user some intermediate feedback by drawing temporary lines while the mouse moves. To respond to mouse movements, define an event handler for the OnMouseMove event. This example uses mouse-move events to draw intermediate shapes on a form while the user holds down the mouse button, thus providing some feedback to the user. The OnMouseMove event handler draws a line on a form to the location... more | |
|
Whenever the user presses a button on the mouse, an OnMouseDown event goes to the object the pointer is over. The object can then respond to the event. To respond to a mouse-down action, attach an event handler to the OnMouseDown event. The Code editor generates an empty handler for a mouse-down event on the form: | |
|
An OnMouseUp event occurs whenever the user releases a mouse button. The event usually goes to the object the mouse cursor is over when the user presses the button, which is not necessarily the same object the cursor is over when the button is released. This enables you, for example, to draw a line as if it extended beyond the border of the form. To respond to mouse-up actions, define a handler for the OnMouseUp event. | |
|
Your application can respond to the mouse actions: mouse-button down, mouse moved, and mouse-button up. It can also respond to a click (a complete press-and-release, all in one place) that can be generated by some kinds of keystrokes (such as pressing Enter in a modal dialog box). This topic describes: | |
|
This example describes the details of implementing the "rubber banding" effect in an graphics application that tracks mouse movements as the user draws a graphic at runtime. The example code covered in this topic is taken from a sample application located in the Demos\Doc\Graphexdirectory. The application draws lines and shapes on a window's canvas in response to clicks and drags: pressing a mouse button starts drawing, and releasing the button ends the drawing. To start with, the example code shows how to draw on the surface of the main form. Later examples demonstrate drawing on a bitmap. The following topics... more | |
|
The picture object can load and save graphics in several formats, and you can create and register your own graphic-file formats so that picture objects can load and store them as well. To save the contents of an image control in a file, call the SaveToFile method of the image control's Picture object. The SaveToFile method requires the name of a file in which to save. If the picture is newly created, it might not have a file name, or a user might want to save an existing picture in a different file. In either case, the application needs to... more | |
|
A brush's Bitmap property lets you specify a bitmap image for the brush to use as a pattern for filling shapes and other areas. The following example loads a bitmap from a file and assigns it to the Brush of the Canvas of Form1: | |
|
When you place an image control, it is simply a container. However, you can set the image control's Picture property at design time to contain a static graphic. The control can also load its picture from a file at runtime, as described in Loading And Saving Graphics Files. | |
|
Any time you find that many your event handlers use the same code, you can make your application more efficient by moving the repeated code into a routine that all event handlers can share. | |
|
The problem with this example as the OnMouseMove event handler is currently written is that it draws the line to the current mouse position from the last mouse position, not from the original position. You can correct this by moving the drawing position to the origin point, then drawing to the current point: | |
|
When drawing lines, track the point where the line starts with the Origin field. Origin must be set to the point where the mouse-down event occurs, so the mouse-up event handler can use Origin to place the beginning of the line, as in this code: | |
|
The component library provides the following graphic objects. These objects have methods to draw on the canvas, which are described in Using Canvas methods to draw graphic objects and to load and save to graphics files, as described in Loading and saving graphics files Graphic object types | |
|
The Brush property of a canvas controls the way you fill areas, including the interior of shapes. Filling an area with a brush is a way of changing a large number of adjacent pixels in a specified way. The brush has three properties you can manipulate:
You can use... more | |
|
This topic shows how to use some common methods to draw graphic objects. It covers:
| |
|
Now that you can tell what tool to use, you must indicate how to draw the different shapes. The only methods that perform any drawing are the mouse-move and mouse-up handlers, and the only drawing code draws lines, no matter what tool is selected. To use different drawing tools, your code needs to specify how to draw, based on the selected tool. You add this instruction to each tool's event handler. This topic describes: | |
|
The Pen property of a canvas controls the way lines appear, including lines drawn as the outlines of shapes. Drawing a straight line is really just changing a group of pixels that lie between two points. The pen itself has four properties you can change:
| |
|
You can use the Windows clipboard to copy and paste graphics within your applications or to exchange graphics with other applications. The VCL's clipboard object makes it easy to handle different kinds of information, including graphics. Before you can use the clipboard object in your application, you must add the Clipbrd unit to the uses clause of any unit that needs to access clipboard data. | |
|
With the Canvas object, you can set the properties of a pen for drawing lines, a brush for filling shapes, a font for writing text, and an array of pixels to represent the image. This topic describes: | |
|
A mouse event occurs when a user moves the mouse in the user interface of an application. The VCL has three mouse events. Mouse events | |
|
Graphics and multimedia elements can add polish to your applications. You can introduce these features into your application in a variety of ways. To add graphical elements, you can insert pre-drawn pictures at design time, create them using graphical controls at design time, or draw them dynamically at runtime. To add multimedia capabilities, you can use special components that can play audio and video clips. This following topics describe how to enhance your applications by introducing graphics or multimedia elements: |
|
Copyright(C) 2009 Embarcadero Technologies, Inc. All Rights Reserved.
|
|
What do you think about this topic? Send feedback!
|
Topics