Adding an image control

An image control is a kind of placeholder component. It allows you to specify an area on a form that will contain a picture object, such as a bitmap or a metafile. You can either set the size of the image manually or allow the image control to adjust to the size of its picture at run time.

You can use an image control to hold a bitmap that isn't necessarily displayed all the time, or which an application needs to use to generate other pictures. The example in Chapter 13 uses image controls to hold bitmaps used to generate the items in an owner-draw control.

Placing the control

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, your only concern is setting the top left corner. If the image control is a nonvisible holder for a bitmap, you can place it anywhere, just as you would a nonvisual component.

► Add an image control to the graphics example's form, making sure to drop it on the scroll box already aligned to the form's client area. This assures that the scroll box will add any scroll bars necessary to access offscreen portions of the image's picture. Set the image control's properties as shown in Table 12.3:

Table 12.3 Image control properties for GRAPHEX

Property Value

Name Image

AutoSize True

Left Top

Setting the initial bitmap size

When you place an image control, it has no picture. You've created the placeholder, but haven't given it anything to display. If the control will always hold a particular picture, you can set the image control's Picture property at design time. The control can also load its picture from a file at run time, as described later in this chapter. If you just need a blank bitmap for drawing, however, you should create it at run time.

  • To create a blank bitmap when the application starts, attach a handler to the OnCreate event for the form that contains the image, create a bitmap object, and assign it to the image control's Picture.Graphic property.
  • For the graphics example, the image is in the application's main form, Forml, so attach a handler to Forml's OnCreate event:

procedure TForm1.FormCreate(Sender: TObject);

Assigning the bitmap to the picture's Graphic property gives ownership of the bitmap to the picture object. It will therefore destroy the bitmap when it finishes with it, so you should not destroy the bitmap object. You can assign a different bitmap to the picture, as you'll see later in this chapter on page 353, at which point the picture disposes of the old bitmap and assumes control of the new one.

If you run the application now, you see that client area of the form has a white region, representing the bitmap. If you size the window so that the client area cannot display the entire image, you'll see that the scroll box automatically shows scroll bars to allow display of the rest of the image. But if you try to draw on the image, you don't get any graphics, because the application is still drawing on the form, which is now behind the image and the scroll box.

Drawing on the bitmap

► There are two things you need to do to make the drawing code you already wrote apply to the bitmap instead of the form:

Bitmap: TBitmap;

{ temporary variable to hold the bitmap }


Bitmap := TBitmap.Create; Bitmap.Width := 200; Bitmap.Height := 200; Image.Picture.Graphic := Bitmap;

{ construct the bitmap object } { assign the initial width... } { ...and the initial height } { assign the bitmap to the image control }


1 Use the image control's canvas instead of the form's canvas.

The easiest way to make that change is to use the editor's search-and-replace dialog box to change every instance of "Canvas" to "Image. Canvas".

2 Attach the mouse-event handlers to the appropriate events in the image control.

In the Object Inspector, drop down the handler list next to OnMouseDown for the image control, and choose FormMouseDown, then do the same for OnMouseMove and OnMouseUp. If you want, you can also detach the methods from the form's events, but it's not necessary. Since there are now controls on all parts of the form, the form will never receive any mouse clicks or drags.

Now when you run the application, you can draw as before, but only on the image control. Note also that if you hide and show the pen and brush tool bars, the scroll box moves the bitmap so that you can still draw on the upper part of the image.

Was this article helpful?

+1 0
Project Management Made Easy

Project Management Made Easy

What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.

Get My Free Ebook

Post a comment