Recent

Author Topic: Text on path  (Read 806 times)

silvestre

  • Jr. Member
  • **
  • Posts: 62
Text on path
« on: February 09, 2020, 09:55:09 am »
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

  • Hero Member
  • *****
  • Posts: 3440
    • Personal webpage
Re: Text on path
« Reply #1 on: February 09, 2020, 11:56:27 am »
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
Conscience is the debugger of the mind

winni

  • Hero Member
  • *****
  • Posts: 1782
Re: Text on path
« Reply #2 on: February 09, 2020, 12:44:58 pm »
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

  • Hero Member
  • *****
  • Posts: 3440
    • Personal webpage
Re: Text on path
« Reply #3 on: February 09, 2020, 03:58:02 pm »
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.
Conscience is the debugger of the mind

winni

  • Hero Member
  • *****
  • Posts: 1782
Re: Text on path
« Reply #4 on: February 09, 2020, 05:06:15 pm »
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

  • Jr. Member
  • **
  • Posts: 62
Re: Text on path
« Reply #5 on: February 09, 2020, 05:37:39 pm »
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
« Last Edit: February 09, 2020, 05:41:18 pm by silvestre »

winni

  • Hero Member
  • *****
  • Posts: 1782
Re: Text on path
« Reply #6 on: February 09, 2020, 09:28:55 pm »
@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

  • Jr. Member
  • **
  • Posts: 62
Re: Text on path
« Reply #7 on: February 10, 2020, 11:09:13 am »
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

  • Hero Member
  • *****
  • Posts: 3440
    • Personal webpage
Re: Text on path
« Reply #8 on: February 15, 2020, 07:28:00 pm »
Complex unicode handling fixed on dev branch
Conscience is the debugger of the mind

 

TinyPortal © 2005-2018