Difference between revisions of "BGRABitmap tutorial"

From Lazarus wiki
Jump to navigationJump to search
 
(16 intermediate revisions by 8 users not shown)
Line 1: Line 1:
This first tutorial shows you how to use [[BGRABitmap]] library.
+
{{BGRABitmap_tutorial}}
  
=== Create a new project ===
+
{{BGRABitmap_tutorial_index}}
  
Create an windowed application with menu '''Project > New project'''.
+
Welcome to the index of the tutorials for the [[BGRABitmap|BGRABitmap]] library. You can browse tutorials by number with the bar on the top, or by the following categories:
  
The main form unit should look like this :
+
=== Install BGRABitmap and draw basic shapes ===
<delphi>unit UMain;
 
  
{$mode objfpc}{$H+}
+
TBGRABitmap images have drawing functions using floating point coordinates or integer coordinates.
  
interface
+
* [[BGRABitmap tutorial 1|Installing BGRABitmap (No. 1)]]
 +
* [[BGRABitmap tutorial 2|Loading and displaying an image (No. 2)]]
 +
* [[BGRABitmap tutorial 3|Drawing with the mouse (No. 3)]]
 +
* [[BGRABitmap tutorial 6|Line styles (No. 6)]]
 +
* [[BGRABitmap tutorial 7|Splines and Bézier curves (No. 7)]]
 +
* [[BGRABitmap tutorial 12|Text functions (No. 12)]]
 +
* [[BGRABitmap tutorial 13|Integer coordinates and floating point coordinates (No. 13)]]
  
uses
+
=== Textures and scanners ===
  Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs;
 
  
type
+
Pixels are a table in memory containing values in the TBGRAPixel format. At this level, we can do various operations:
  
  { TForm1 }
+
* [[BGRABitmap tutorial 4|Direct pixel access with Scanline (No. 4)]]
 +
* [[BGRABitmap tutorial 5|Combining layers of pixels (No. 5)]]
 +
* [[BGRABitmap tutorial 8|Generating textures (No. 8)]]
 +
* [[BGRABitmap tutorial 9|Phong shading using textures (No. 9)]]
 +
* [[BGRABitmap tutorial 10|Texture mapping (No. 10)]]
 +
* [[BGRABitmap tutorial 11|Using scanners to combine transformations (No. 11)]]
  
  TForm1 = class(TForm)
+
=== Other drawing contexts ===
  private
 
    { private declarations }
 
  public
 
    { public declarations }
 
  end;
 
  
var
+
It is possible to have other contexts, that provide/allow other basic drawing functions:
  Form1: TForm1;
 
  
implementation
+
* Standard Canvas (Canvas and CanvasOpacity properties) : avoid using it because of the slowness of conversions of bitmap data
 +
* Canvas with features brought by BGRABitmap (CanvasBGRA property, Brush and Pen have an Opacity property)
 +
** [http://www.youtube.com/watch?v=HGYSLgtYx-U How to convert your application from TCanvas to CanvasBGRA (video)]
 +
* [[BGRABitmap tutorial 14|Drawing with a 2D canvas with affine transformations (No. 14)]]
 +
* [[BGRABitmap tutorial 15|Real 3D rendering (No. 15)]]
 +
* [[BGRABitmap tutorial 16|Using textures with 3D rendering (No. 16)]]
  
initialization
+
=== More ===
  {$I UMain.lrs}
 
  
end.</delphi>
+
You can use BGRABitmap to [[BGRABitmap_tutorial_TAChart|improve TAChart rendering]].
  
If you do not find it, use '''Ctrl-F12''' to show file list.
+
You can use it as well to display icons with the [[SVG_Image_List|SVG Image List]].
  
Save your project next to BGRABitmap library with menu '''File > Save all'''.
+
More classes are available (you need to create them when you need them):
  
=== Add reference to BGRABitmap ===
+
* TBGRATextEffect, in unit BGRATextFX, allows to prepare the drawing of text line, to add effects like contour and shadow.
 +
* TBGRALayeredBitmap, in unit BGRALayers, allow to create a multi-layered bitmap. Units BGRAPaintNet and BGRAOpenRaster contain implementations to read and write in Paint.NET format (read only) and OpenRaster format (read and write).
 +
* Units BGRAGradientScanner and BGRATransform contain scanners to do various effects.
 +
* Unit BGRAGradients contain procedures to generate gradients and TPhongShading class for Phong shading.
 +
* TBGRACompressableBitmap, in unit BGRACompressableBitmap, allow to store and compress images.
  
In the unit clause, add a reference to BGRABitmap and BGRABitmapTypes after Dialogs.
+
Other units contient low level functions, and you should not need to use them for a normal usage.
  
<delphi>uses
+
[[Category:Graphics]]
  Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
+
[[Category:Tutorials]]
  BGRABitmap, BGRABitmapTypes;</delphi>
+
[[Category:BGRABitmap]]
 
+
[[Category:Lazarus]]
And go to compiler options with menu '''Project > Compiler options'''. In other unit files path, add the relative path to BGRABitmap. For example, if BGRABitmap is in a folder next to your project, the relative path could be "..\BGRABitmap".
 
 
 
If you copy BGRABitmap files in the same folder as your project, then you do not need to add such search path. However, it is not recommended because if you have multiple projects using the library, it could become a repetitive task to update to a new version of the library.
 
 
 
If you are lost with relative path, you can also add the relative path by adding the BGRABitmap unit to your project. To do so, open within your project the file bgrabitmap.pas. Then use menu '''Project > Add file to project'''. Lazarus will ask if you want to add the file and the new directory to the project.
 
 
 
=== Add some drawing ===
 
 
 
Add a painting event. To do this, click on the form, then go to the object inspector, in the event tab, and double click on the OnPaint line. Lazarus will add automatically a FormPaint handler to the main form unit. Add for example the following code inside it :
 
<delphi>procedure TForm1.FormPaint(Sender: TObject);
 
var bmp: TBGRABitmap;
 
begin
 
  bmp := TBGRABitmap.Create(ClientWidth, ClientHeight, BGRABlack);
 
  bmp.FillRect(20, 20, 100, 40, BGRA(255,192,0), dmSet);  //fill an orange rectangle
 
  bmp.Draw(Canvas, 0, 0, True);                          //render BGRABitmap on the form
 
  bmp.Free;                                              //free memory
 
end;</delphi>
 
 
 
As you can see, you need to define a TBGRABitmap variable and create it. There are several constructors for TBGRABitmap. The one used here creates a bitmap of size ClientWidth x ClientHeight and filled with black. ClientWidth and ClientHeight are form properties that return the available space for drawing inside the form.
 
 
 
The FillRect procedure takes usual parameters for drawing a rectangle, that is the upper-left corner followed by the lower-right corner plus 1. It means that the pixel at (100,40) is excluded from the rectangle.
 
 
 
After that, there is a color parameter with red/green/blue components, and a drawing mode. dmSet means to simply replace the pixels.
 
 
 
Do not forget to free the object after using it, to avoid a memory leak.
 
 
 
=== Resulting code ===
 
 
 
You should obtain the following code:
 
<delphi>unit UMain;
 
 
 
{$mode objfpc}{$H+}
 
 
 
interface
 
 
 
uses
 
  Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
 
  BGRABitmap, BGRABitmapTypes;
 
 
 
type
 
 
 
  { TForm1 }
 
 
 
  TForm1 = class(TForm)
 
    procedure FormPaint(Sender: TObject);
 
  private
 
    { private declarations }
 
  public
 
    { public declarations }
 
  end;
 
 
 
var
 
  Form1: TForm1;
 
 
 
implementation
 
 
 
{ TForm1 }
 
 
 
procedure TForm1.FormPaint(Sender: TObject);
 
var bmp: TBGRABitmap;
 
begin
 
  bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRABlack);
 
  bmp.FillRect(20,20,100,40,BGRA(255,192,0),dmSet);
 
  bmp.Draw(Canvas,0,0,True);
 
  bmp.Free;
 
end;
 
 
 
initialization
 
  {$I UMain.lrs}
 
 
 
end.</delphi>
 
 
 
=== Run the program ===
 
 
 
You should obtain a window filled in black with an orange rectangle in it.
 
 
 
[[BGRABitmap tutorial 2|Go to next tutorial (image loading)]]
 

Latest revision as of 16:50, 13 December 2020

Deutsch (de) English (en) español (es) français (fr) русский (ru)

Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Tutorial 13 | Tutorial 14 | Tutorial 15 | Tutorial 16 | Edit

Welcome to the index of the tutorials for the BGRABitmap library. You can browse tutorials by number with the bar on the top, or by the following categories:

Install BGRABitmap and draw basic shapes

TBGRABitmap images have drawing functions using floating point coordinates or integer coordinates.

Textures and scanners

Pixels are a table in memory containing values in the TBGRAPixel format. At this level, we can do various operations:

Other drawing contexts

It is possible to have other contexts, that provide/allow other basic drawing functions:

More

You can use BGRABitmap to improve TAChart rendering.

You can use it as well to display icons with the SVG Image List.

More classes are available (you need to create them when you need them):

  • TBGRATextEffect, in unit BGRATextFX, allows to prepare the drawing of text line, to add effects like contour and shadow.
  • TBGRALayeredBitmap, in unit BGRALayers, allow to create a multi-layered bitmap. Units BGRAPaintNet and BGRAOpenRaster contain implementations to read and write in Paint.NET format (read only) and OpenRaster format (read and write).
  • Units BGRAGradientScanner and BGRATransform contain scanners to do various effects.
  • Unit BGRAGradients contain procedures to generate gradients and TPhongShading class for Phong shading.
  • TBGRACompressableBitmap, in unit BGRACompressableBitmap, allow to store and compress images.

Other units contient low level functions, and you should not need to use them for a normal usage.