Delphi: Non-rectangular shapes

Non-rectangular shapes - Part II

Copyright © 2001 Alirio A. Gavidia B.. To see more of my articles
visit Programación Orientada en Delphi (Site in Spanish)
Translated by Ernesto De Spirito with the author's permission

Introduction

This is the second part of an article oriented to the use of non- rectangular shapes with Delphi under Windows. In the first part we gave a non-rectangular shape to a form creating a hands watch as an example. In this part the intention is to be able to create forms whose shape are defined from some file external to the application. This behavior corresponds to the widely spread use of "Skins". For example "Windows Media Player".

Basic realization of "skins"

The first approach that we introduce here not only allows us to define the background, but also the shape of the form. In the market there is a VCL component that does this job and more. The referred component makes use of two BMP files, the first one with the figure in black and white and the second with the background in full color. In the present essay both characteristics are combined in one single file simply taking the color of the first pixel as the transparent color, actually like the color the that defines the limits of the shape (there is a little difference). The rest of the image, inside the shape, is taken as the background of the form.

Note: The use of a BMP has many cons. The major ones: size and scalability. For the first maybe the alternative would be a JPG, but the compression process alters the frontier of the shape generating intermediate colors, resulting in a blurred frontier. On the other hand we have the GIF format, but they have been banished from my routines, libraries and functions because certain company intends to get paid royalties for the use of the compression algorithms used in GIF files. Regarding scalability, one alternative is the use of a Metafile, better yet I suspect that the metafiles are definitions of regions completely analogous to those used here. However, I'll leave the study of Metafiles for another occasion.

A complete version of a "Skinner" requires to be able to define the background image of the form, its shape and also the one of each present control. We'll concentrate in the form leaving the controls aside.

The background

The problem of drawing the background is addressable in two ways as far as I know. One is intercepting some Windows message to draw on the canvas of the background (like some VCL controls do to place backgrounds in MDI and non-MDI forms) and the other is placing a TImage control as the last control in the form's client area. I'll choose the latter way because it'll make possible the use of some TImage events.

The shape

The problem of the shape basically resides in creating a region of a given shape. The determinant shape I have assumed is given thru a bitmap, so that for example a bitmap consisting of a blue circle over a white background must generate a form visible like a circle. The shape can be anything like the face of Mickey Mouse or the silhouette of a spider. For this purpose the bitmap has to be read to generate a polygonal shape out of it. This will give us freedom, but eliminates much the possibilities of scalability.

Step by step

In general terms, the algorithm goes like this:

We adjust the form to the dimensions of the BMP file. This is simple. For the purpose, the following two lines will do it:
```
// Ajustar el área / to Ajust the area
ClientWidth := Image1.Width;
ClientHeight:= Image1.Height;
```
We read the first pixel of the form and take it as "transparent".
We search for the first "non-transparent" pixel and from this point we generate a polygon with the silhouette of the "non-transparent" part (see GenRegion in the file ffigura.pas).
We get rid of the title bar (if it's still bothering us). To do it:
```
BorderStyle := bsNone; // Titulo estorba / no Title
```
We change the shape of the form according to the polygon. To do it we make use of the CreatePolygonRgn and SetWindowRgn API functions (see ActiveSkin in ffigura.pas). Unlike the example of the first part of this article, in this one we don't define an elliptical (circular) region.
We set from the TImage the necessary events for dragging the form like we did in the example of the first article.

Except for the third step, nothing seems too difficult. To generate the polygonal region we just look for the frontier of the figure, then we advance thru all the outline of the figure until we reach the starting point (or run out of memory, in this case 1024 points). This series of points define a polygon used to generate a region with the function CreatePolygonRgn. Then we use SetWindowRgn y we get the form with the given shape. It works but it has limitations: our figure must have only one frontier, therefore it can't be a figure with a hole in the middle (in any case the algorithm will ignore the hole in the middle).

As usual this article is accompanied with an example to illustrate the points referred here.

Note: The algorithm that scans the silhouette given in the bitmap is relatively slow and coarse, but is maintainable and performs a certain optimization with shapes that aren't very complex. There is a given limit since an array in memory is generated when we still don't know how many points will define the figure. It's up to the user to vary this limit to his/her convenience.

The controls

The example corresponding to this article also contains buttons with shapes. In design mode they are square because they are of TBitBtn type, but in the OnCreate event of the form each button is applied the shape of the graphics it contains in the same way as we did with the form in the ActiveSkin procedure:

procedure TForm1.FormCreate(Sender: TObject);
Var
  hRegion : Thandle;
  Par     : Array [0..1024] of TPoint; // Data -> region
  Cnt     : Integer;
begin
  Cnt := GenRegion(Par, BitBtn1.Glyph,
                  (BitBtn1.Width - BitBtn1.Glyph.Width+1) div 2,
                  (BitBtn1.Height - BitBtn1.Glyph.Height+1) div 2);
  hRegion := CreatePolygonRgn(Par, Cnt, ALTERNATE);
  SetWindowRgn(BitBtn1.handle, hRegion, true);
  ...

This shows the definition of regions for controls other than forms.

Going further

The problem of the BMP size remains latent, but we could pack the BMP and use it packed like Winamp does. There are two ways for this approach: we can use some almost-proprietary, semi-secret or little- common algorithm (inevitably I think of the Windows Media Player) or something like the zip. This last choice has the advantage that we are not limited regarding its use. You can find more information to know how to handle in the web site of Latium Software:

If the images are simple, like the ones I used in the example, you can save them using 16 colors and RLE 4 encoding (this can be done for example with the old but beloved Borland Resource Workshop that comes in the Delphi installation CD).

What others do

We should separate the areas of the form in client and non-client, and also considerer the captions. Eventually we could use semi- transparencies, what will become more common every day (thanks to Steve Jobs for the received favors, although not all of us use a Mac ;)

There's a library out there that considers shadows, animation, morphing and even a scripting language, but they go beyond the purpose of this article.

The full source code of the example is available for download.