Difference between revisions of "BGRABitmap tutorial 6"

From Lazarus wiki
Jump to navigationJump to search
m (Text replace - "delphi>" to "syntaxhighlight>")
Line 12: Line 12:
  
 
With the object inspector, add an OnPaint handler and write :
 
With the object inspector, add an OnPaint handler and write :
<delphi>procedure TForm1.FormPaint(Sender: TObject);
+
<syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject);
 
var image: TBGRABitmap;
 
var image: TBGRABitmap;
 
     c: TBGRAPixel;
 
     c: TBGRAPixel;
Line 23: Line 23:
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
   image.free;
 
   image.free;
end;</delphi>
+
end;</syntaxhighlight>
  
 
=== Run the program ===
 
=== Run the program ===
Line 34: Line 34:
  
 
If you want round corners, you can specify :
 
If you want round corners, you can specify :
<delphi>    image.JoinStyle := pjsRound;</delphi>
+
<syntaxhighlight>    image.JoinStyle := pjsRound;</syntaxhighlight>
  
 
=== Run the program ===
 
=== Run the program ===
Line 45: Line 45:
  
 
You can mix join styles for a rectangle like this:
 
You can mix join styles for a rectangle like this:
<delphi>    image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);   
+
<syntaxhighlight>    image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);   
</delphi>
+
</syntaxhighlight>
  
 
This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image.
 
This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image.
Line 55: Line 55:
  
 
You can draw a dotted line like this :
 
You can draw a dotted line like this :
<delphi>    image.JoinStyle := pjsBevel;
+
<syntaxhighlight>    image.JoinStyle := pjsBevel;
 
     image.PenStyle := psDot;
 
     image.PenStyle := psDot;
 
     image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
 
     image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
</delphi>
+
</syntaxhighlight>
  
 
You should obtain the following image. Notice that line begins with a round cap.
 
You should obtain the following image. Notice that line begins with a round cap.
Line 67: Line 67:
  
 
You can draw a polyline with a square cap like this :
 
You can draw a polyline with a square cap like this :
<delphi>    image.JoinStyle := pjsBevel;
+
<syntaxhighlight>    image.JoinStyle := pjsBevel;
 
     image.LineCap := pecSquare;
 
     image.LineCap := pecSquare;
 
     image.PenStyle := psSolid;
 
     image.PenStyle := psSolid;
 
     image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
 
     image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
</delphi>
+
</syntaxhighlight>
  
 
[[Image:BGRATutorial6d.png]]
 
[[Image:BGRATutorial6d.png]]
Line 79: Line 79:
 
You can draw a line which is opened, i.e. the end of the line is rounded inside.
 
You can draw a line which is opened, i.e. the end of the line is rounded inside.
  
<delphi>    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);</delphi>
+
<syntaxhighlight>    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);</syntaxhighlight>
 
[[Image:BGRATutorial6f.png]]
 
[[Image:BGRATutorial6f.png]]
  
 
This way you can connect lines one after another without drawing the junction twice, which is useful with semi-transparent drawing. You can compare it like this:
 
This way you can connect lines one after another without drawing the junction twice, which is useful with semi-transparent drawing. You can compare it like this:
<delphi>    c := BGRA(0,0,0,128);
+
<syntaxhighlight>    c := BGRA(0,0,0,128);
  
 
     image.DrawLineAntialias(40,150, 120,50, c, 10);
 
     image.DrawLineAntialias(40,150, 120,50, c, 10);
Line 91: Line 91:
 
     image.DrawLineAntialias(40,250, 120,150, c, 10, False);
 
     image.DrawLineAntialias(40,250, 120,150, c, 10, False);
 
     image.DrawLineAntialias(120,150, 170,190, c, 10, False);
 
     image.DrawLineAntialias(120,150, 170,190, c, 10, False);
     image.DrawLineAntialias(170,190, 250,110, c, 10, True);</delphi>
+
     image.DrawLineAntialias(170,190, 250,110, c, 10, True);</syntaxhighlight>
 
[[Image:Tutorial6g.png]]
 
[[Image:Tutorial6g.png]]
  

Revision as of 13:55, 24 March 2012

Deutsch (de) English (en) español (es) français (fr)


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

This tutorial shows you how to use different line styles and shapes.

Create a new project

Create a new project and add a reference to BGRABitmap, the same way as in the first tutorial.

Add a painting handler

With the object inspector, add an OnPaint handler and write :

procedure TForm1.FormPaint(Sender: TObject);
var image: TBGRABitmap;
    c: TBGRAPixel;
begin
  image := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToBGRA(ColorToRGB(clBtnFace)));
  c := ColorToBGRA(ColorToRGB(clWindowText)); 

  image.RectangleAntialias(80,80,300,200,c,50);

  image.Draw(Canvas,0,0,True);
  image.free;
end;

Run the program

This should draw a rectangle with a wide black pen.

BGRATutorial6a.png

Change join style

If you want round corners, you can specify :

    image.JoinStyle := pjsRound;

Run the program

This should draw a rectangle with a wide black pen with rounded corners.

BGRATutorial6b.png

Mix join styles

You can mix join styles for a rectangle like this:

    image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);

This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image.

BGRATutorial6e.png

Change pen style

You can draw a dotted line like this :

    image.JoinStyle := pjsBevel;
    image.PenStyle := psDot;
    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);

You should obtain the following image. Notice that line begins with a round cap.

Tutorial6c.png

Change line cap

You can draw a polyline with a square cap like this :

    image.JoinStyle := pjsBevel;
    image.LineCap := pecSquare;
    image.PenStyle := psSolid;
    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);

BGRATutorial6d.png

Opened line drawing

You can draw a line which is opened, i.e. the end of the line is rounded inside.

    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);

BGRATutorial6f.png

This way you can connect lines one after another without drawing the junction twice, which is useful with semi-transparent drawing. You can compare it like this:

    c := BGRA(0,0,0,128);

    image.DrawLineAntialias(40,150, 120,50, c, 10);
    image.DrawLineAntialias(120,50, 170,90, c, 10);
    image.DrawLineAntialias(170,90, 250,10, c, 10);

    image.DrawLineAntialias(40,250, 120,150, c, 10, False);
    image.DrawLineAntialias(120,150, 170,190, c, 10, False);
    image.DrawLineAntialias(170,190, 250,110, c, 10, True);

Tutorial6g.png

Previous tutorial (layers and masks) Next tutorial (splines)