Meanwhile Embedded Wizard supports vector graphics - so it is possible to draw circles, arcs or complex shapes by a few graphics instruction. Nevertheless, the following steps will show, how to draw rounded rectangles based on a simple bitmap - with the following advantages:
- perfect graphical appearance with anti-aliasing around the edges
- size and color can be defined during runtime
- very fast drawing speed on target (accelerated by hardware)
The idea is to create a rounded rectangle based on a single bitmap. The entire rectangle is composed by drawing the single segments from a quadratic image that is split in 9 tiles:
First of all, you need to create some images that contains the rounded corners and the borders of your desired rectangles. Ideally, the width and height of that image should be dividable by 3.
The following images contain white rounded rectangles on a black background (two sizes, each with a filled and a non-filled version).
Within Embedded Wizard you create for each image a bitmap resource within your project.
In order to colorize these image resources during runtime, it is necessary to use the attribute 'AlphaName' instead of 'FileName'
In this case, the image is used as a alpha bitmap. This means, that the image is considered as transparency information (black means fully transparent, white means fully opaque).
In order to draw a rounded rectangle, the class Views::Frame can be used ('Bitmap Frame' from the Gallery folder 'Views'): Just define the attribute ‚Bitmap‘ and ‚Color‘ and the you can position and resize the rounded rectangle within the Composer:
Download the source code of the 'RoundRect' sample.
I hope this helps…
