Text on path

[silvestre]

Dear friends,

First, congratulations on BGRABitmap, a multi-platform graphics library that looks really interesting and complete.

I would like to ask if there is any function that allows to draw text following a coordinate path, to draw text in angle, circular,...?

Thank you.

[circular]

Hello silvestre,

Glad you like the library. 

There is a function TextOutCurved to draw text on a path. It is a TBGRAPath object (unit BGRAPath). You can also specify a cursor to specify a position within the path.

Example 32 of TestBGRAFunc:
https://github.com/bgrabitmap/bgrabitmap/blob/master/test/testbgrafunc/utest32.pas

Note that each individual letter is drawn along the path, but in itself the letter is not bent. That would be a possible improvement.

Also I noticed that it does not handle complex Unicode character combinations. I am adding a new issue for this:
https://github.com/bgrabitmap/bgrabitmap/issues/87

[winni]

Hi!

Just made a little demlo for text on path in BGRA:

Code: Pascal  [Select][+][-]

1. function SinusLine: TBGRABitmap;
2. const hell = 'Hello World';
3.       hell2 = hell+' • '+hell;
4.       amplitude = 15; // of sinus line
5.       clMellowYellow = $aaffff;
6. var x : integer;
7.     y: Single;
8.     Poly : ArrayOfTPointF;
9.     tmp : TBGRABitmap;
10.     path : TBGRAPath;
11. begin
12.   tmp :=  TBGRABitmap.create(300, 80, clMellowYellow);
13.   tmp.FontStyle := [fsBold];
14.   tmp.FontHeight := 25;
15.   tmp.FontName := 'Times New Roman';
16.   tmp.FontQuality:= fqFineAntialiasing;
17.   SetLength(Poly,300);
18.     for x := 0 to 300-1 do
19.        begin
20.         y := -sin(x/(300-1) * pi*2)*amplitude+25;
21.         Poly[x]:= PointF (x,y);
22.        end;
23.     path := TBGRAPath.Create;
24.     Path.polyline(poly);
25.     tmp.TextOutCurved(path,hell2,cssBlue,taCenter,0);
26.     Path.Destroy;
27.     result := tmp;
28. end;
29.  

Perhaps it helps

Winni

[circular]

Thanks.

Note that you can use FontVerticalAnchor property to set how the text is placed relative to the path. For example the value fvaBaseline will put the text baseline on the path.

[winni]

Hi!

Enhanced the demo due to circular notes:

Code: Pascal  [Select][+][-]

1.    path := TBGRAPath.Create;
2.     Path.polyline(poly);
3.     // tmp.FontVerticalAnchor := fvaTop -- this is default
4.     tmp.TextOutCurved(path,hell2,cssBlue,taCenter,0);
5.     tmp.FontVerticalAnchor := fvaBottom;
6.     tmp.TextOutCurved(path,hell2,cssRed,taCenter,0);
7.     Path.Destroy;                    

And don't forget to set the FontVerticalAnchor back to fvaTop - otherwise you might get crazy to search your text, because it is drawn outside the bitmap. Like it happened to me.

Winni

[silvestre]

Dear Circular and Winni,

Great!  It's just what I was looking for.

The task of drawing the text in curved strokes is greatly facilitated by this function, and therefore the creativity in the design of all types of logos.

Thank you very much.

Hello silvestre,

Glad you like the library. 

There is a function TextOutCurved to draw text on a path. It is a TBGRAPath object (unit BGRAPath). You can also specify a cursor to specify a position within the path.

Example 32 of TestBGRAFunc:
https://github.com/bgrabitmap/bgrabitmap/blob/master/test/testbgrafunc/utest32.pas

Note that each individual letter is drawn along the path, but in itself the letter is not bent. That would be a possible improvement.

Also I noticed that it does not handle complex Unicode character combinations. I am adding a new issue for this:
https://github.com/bgrabitmap/bgrabitmap/issues/87

[winni]

@silvestre

The simplest polygon I know: A triangle.

Set 3 points to the arrayOfTPointF

Use Path.polygon (instead of Path.polyline)

See example.

Winni

[silvestre]

Thanks winni,
very kind and also didactic the example provided.

@silvestre

The simplest polygon I know: A triangle.

Set 3 points to the arrayOfTPointF

Use Path.polygon (instead of Path.polyline)

See example.

Winni

[circular]

Complex unicode handling fixed on dev branch