Sign in Join
Wiki copytemporary

BGRABitmap tutorial 2: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 2

OldNewLine
1+This tutorial shows you how to load an image and draw it on a form.
2+
3+### Create a new project
4+
5+Create a new project and add a reference to [[BGRABitmap]], the same way as in [[BGRABitmap tutorial|the first tutorial]].
6+
7+### Load the bitmap
8+
9+Copy an image into your project directory. Let's suppose it's name is *image.png*.
10+
11+Add a private variable to the main form to store the image:
12+
13+``` pascal
14+TForm1 = class(TForm)
15+ private
16+ { private declarations }
17+ image: TBGRABitmap;
18+ public
19+ { public declarations }
20+ end;
21+```
22+
23+Load the image when the form is created. To do this, double-click on the form, a procedure should appear in the code editor. Add the following [[TBGRACustomBitmap and IBGRAScanner|loading instruction]] (and don't forget to destroy the image at the end):
24+
25+``` pascal
26+procedure TForm1.FormCreate(Sender: TObject);
27+begin
28+ image := TBGRABitmap.Create('image.png');
29+end;
30+
31+procedure TForm1.FormDestroy(Sender: TObject);
32+begin
33+ image.Free;
34+end;
35+```
36+
37+### Draw the bitmap
38+
39+Add an OnPaint handler. To do this, select the main form, then go to the object inspector, in the event tab, and double-click on the OnPaint line. Then, add the drawing code:
40+
41+``` pascal
42+procedure TForm1.FormPaint(Sender: TObject);
43+begin
44+ image.Draw(Canvas,0,0,True);
45+end;
46+```
47+
48+Notice that the last parameter is set to True, which means opaque. If you want to take transparent pixels into account, encoded in the alpha channel, you must use False instead. But it can be slow to use transparent drawing on standard canvas, so if it is not necessary, use opaque drawing only.
49+
50+### Code
51+
52+Finally you should have something like:
53+
54+``` pascal
55+unit UMain;
56+
57+{$mode objfpc}{$H+}
58+
59+interface
60+
61+uses
62+ Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
63+ BGRABitmap, BGRABitmapTypes;
64+
65+type
66+ { TForm1 }
67+
68+ TForm1 = class(TForm)
69+ procedure FormCreate(Sender: TObject);
70+ procedure FormDestroy(Sender: TObject);
71+ procedure FormPaint(Sender: TObject);
72+ private
73+ { private declarations }
74+ image: TBGRABitmap;
75+ public
76+ { public declarations }
77+ end;
78+
79+var
80+ Form1: TForm1;
81+
82+implementation
83+
84+{ TForm1 }
85+
86+procedure TForm1.FormCreate(Sender: TObject);
87+begin
88+ image := TBGRABitmap.Create('image.png');
89+end;
90+
91+procedure TForm1.FormDestroy(Sender: TObject);
92+begin
93+ image.free;
94+end;
95+
96+procedure TForm1.FormPaint(Sender: TObject);
97+begin
98+ image.Draw(Canvas,0,0,True);
99+end;
100+
101+initialization
102+ {$I UMain.lrs}
103+
104+end.
105+```
106+
107+### Run the program
108+
109+You should see a form with an image drawn in it at the upper-left corner.
110+
111+<figure>
112+<img src="BGRATutorial2.png" title="BGRATutorial2.png" />
113+<figcaption>BGRATutorial2.png</figcaption>
114+</figure>
115+
116+### Center the image
117+
118+You may want to center the image on the form. To do this, modify the FormPaint procedure:
119+
120+``` pascal
121+procedure TForm1.FormPaint(Sender: TObject);
122+var ImagePos: TPoint;
123+begin
124+ ImagePos := Point( (ClientWidth - Image.Width) div 2,
125+ (ClientHeight - Image.Height) div 2 );
126+
127+ // test for negative position
128+ if ImagePos.X < 0 then ImagePos.X := 0;
129+ if ImagePos.Y < 0 then ImagePos.Y := 0;
130+
131+ image.Draw(Canvas,ImagePos.X,ImagePos.Y,True);
132+end;
133+```
134+
135+To compute the position, we need to calculate the space between the image and the left border (X coordinate) and the space between the image and the top border (Y coordinate). The expression ClientWidth - Image.Width returns the available horizontal space, and we divide it by 2 to obtain the left margin.
136+
137+The result can be negative if the image is bigger than the client width. In this case, the margin is just set to zero.
138+
139+You can run the program and see if it works. Notice what happens if we remove the test for negative position.
140+
141+### Stretch the image
142+
143+To stretch the image, we need to create a temporary stretched image:
144+
145+``` pascal
146+procedure TForm1.FormPaint(Sender: TObject);
147+var stretched: TBGRABitmap;
148+begin
149+ stretched := image.Resample(ClientWidth, ClientHeight) as TBGRABitmap;
150+ stretched.Draw(Canvas,0,0,True);
151+ stretched.Free;
152+end;
153+```
154+
155+By default, it uses fine resample, but you can precise if you want to use simple stretch instead (faster):
156+
157+``` pascal
158+stretched := image.Resample(ClientWidth, ClientHeight, rmSimpleStretch) as TBGRABitmap;
159+```
160+
161+You can also specify the interpolation filter with the [[TBGRACustomBitmap and IBGRAScanner|ResampleFilter]] property:
162+
163+``` pascal
164+image.ResampleFilter := rfMitchell;
165+stretched := image.Resample(ClientWidth, ClientHeight) as TBGRABitmap;
166+```
167+
168+[[BGRABitmap tutorial 1|First tutorial]] \| [[BGRABitmap tutorial 3|Next tutorial (drawing with the mouse)]]
169+
170+---
171+*From the Free Pascal wiki, page "BGRABitmap tutorial 2", as it stood on 2023-02-13 after a change by Wp, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
172+Category: BGRABitmap
173+Category: Graphics

Back to history