Recent

Author Topic: SOLVED: Unable to write text with BGRACanvas2d  (Read 13592 times)

AL

  • Sr. Member
  • ****
  • Posts: 264
SOLVED: Unable to write text with BGRACanvas2d
« on: April 03, 2024, 03:57:21 am »
I am trying to write text with Canvas2d but every thing I tried so far was unsuccessfull.
I can write text with the Bitmap but not with canvas2D.
I can trace lines , arcs, circle fine, but no text is coming out on the canvas.  There is surely something I am not doing right!
Can someone point me in the right direction.
I have modified the font rendering tutorial example to add a context with no result.
Code: Pascal  [Select][+][-]
  1.  
  2. unit Unit1;
  3.  
  4. {$mode objfpc}{$H+}
  5.  
  6. interface
  7.  
  8. uses
  9.   Classes, SysUtils, Forms, Controls, Graphics, Dialogs,
  10.   BGRABitmap, BGRACanvas2d, BGRABitmapTypes, BGRATextFX;
  11.  
  12. type
  13.  
  14.   { TForm1 }
  15.  
  16.   TForm1 = class(TForm)
  17.     procedure FormPaint(Sender: TObject);
  18.   private
  19.  
  20.   public
  21.  
  22.   end;
  23.  
  24. var
  25.   Form1: TForm1;
  26.   ctx: TBGRACanvas2D;
  27. implementation
  28.  
  29. {$R *.lfm}
  30.  
  31. { TForm1 }
  32.  
  33. procedure TForm1.FormPaint(Sender: TObject);
  34.   var
  35.   bmp: TBGRABitmap;
  36.   renderer: TBGRATextEffectFontRenderer;
  37. begin
  38.   bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
  39.   renderer := TBGRATextEffectFontRenderer.Create;
  40.   ctx := bmp.Canvas2D ;
  41.   bmp.FontRenderer := renderer;
  42.   renderer.ShadowVisible := True;
  43.   renderer.OutlineVisible := True;
  44.   renderer.OutlineColor := BGRABlack;
  45.   renderer.OuterOutlineOnly := True;
  46.   bmp.FontFullHeight := 50;
  47.   bmp.TextOut(5,5,'Hello world',CSSRed);
  48.   ctx.strokeText('Hello 1',5,60);   // no output
  49.   ctx.text('Hello 2',5,60);            // no output
  50.  // bmp.TextOut(5,55,'Hello 3',clblack);   // this work fine
  51.   ctx.stroke ;
  52.   bmp.Draw(Canvas,0,0);
  53.   bmp.Free;
  54. end;
  55.  
  56. end.                        
  57.  
« Last Edit: April 06, 2024, 09:55:06 pm by AL »
Laz 3.1, fpc 3.2.2, Win10
Laz 3.1  fpc 3.2.2, MacOS Monterey running on VMWare/Win 10
Laz 3.1  fpc 3.2.2 Ubuntu 20.04

circular

  • Hero Member
  • *****
  • Posts: 4220
    • Personal webpage
Re: Unable to write text with BGRACanvas2d
« Reply #1 on: April 03, 2024, 06:02:18 pm »
Hello AL,

You were almost there!

There are two things to consider:
  • for now, only TBGRAVectorizedTextRenderer presents itself as supporting text path, so this is what you would like to use here. You were not really mistaken with TBGRATextEffectFontRenderer as it can implicitly instantiate TBGRAVectorizedTextRenderer, but that would be unnecessary here.
  • the font renderer need to be given to Canvas2D specifically. The outline and shadow parameters are handled by Canvas2D.

So here is the fixed code:
Code: Pascal  [Select][+][-]
  1. uses BGRABitmap, BGRABitmapTypes, BGRAVectorize;
  2.  
  3. {$R *.lfm}
  4.  
  5. { TForm1 }
  6.  
  7. procedure TForm1.FormPaint(Sender: TObject);
  8.   var
  9.   bmp: TBGRABitmap;
  10.   renderer: TBGRAVectorizedFontRenderer;
  11.   ctx: TBGRACanvas2D;
  12. begin
  13.   bmp := TBGRABitmap.Create(ClientWidth, ClientHeight, clBtnFace);
  14.   renderer := TBGRAVectorizedFontRenderer.Create;
  15.   ctx := bmp.Canvas2D;
  16.   ctx.fontEmHeight:= 60;
  17.   ctx.fontRenderer := renderer;
  18.   ctx.shadowOffset := PointF(5, 5);
  19.   ctx.shadowBlur:= 5;
  20.   ctx.shadowColor(BGRA(0,0,0,128));
  21.   ctx.hasShadow;
  22.   ctx.text('Hello World',5,60);
  23.   ctx.lineWidth:= 5;
  24.   ctx.strokeStyle(CSSGoldenrod);
  25.   ctx.stroke;
  26.   ctx.fillStyle(BGRABlack);
  27.   ctx.fill;
  28.   bmp.Draw(Canvas,0,0);
  29.   bmp.Free;
  30. end;

Happy drawing  :)
Conscience is the debugger of the mind

AL

  • Sr. Member
  • ****
  • Posts: 264
Re: Unable to write text with BGRACanvas2d
« Reply #2 on: April 03, 2024, 10:15:40 pm »
Thank you Circular, in fact I was just looking for a simple black text.
What I was missing was
 ctx.fillStyle(BGRABlack);
 ctx.fill;                   
Laz 3.1, fpc 3.2.2, Win10
Laz 3.1  fpc 3.2.2, MacOS Monterey running on VMWare/Win 10
Laz 3.1  fpc 3.2.2 Ubuntu 20.04

circular

  • Hero Member
  • *****
  • Posts: 4220
    • Personal webpage
Re: Unable to write text with BGRACanvas2d
« Reply #3 on: April 03, 2024, 10:27:28 pm »
Ah I understand. Indeed it may be surprising but writing the text is "filling" its shape while "stroking" is for the outline.

Regards
Conscience is the debugger of the mind

AL

  • Sr. Member
  • ****
  • Posts: 264
Re: Unable to write text with BGRACanvas2d
« Reply #4 on: April 03, 2024, 10:44:53 pm »
Thank you, I have much to learn in graphics.
Is there a way to write the text at an angle like in BGRABitmap?
I am trying to write numbers that will follow an arc ( like in an analog gauge).
   
Laz 3.1, fpc 3.2.2, Win10
Laz 3.1  fpc 3.2.2, MacOS Monterey running on VMWare/Win 10
Laz 3.1  fpc 3.2.2 Ubuntu 20.04

circular

  • Hero Member
  • *****
  • Posts: 4220
    • Personal webpage
Re: Unable to write text with BGRACanvas2d
« Reply #5 on: April 04, 2024, 09:54:34 am »
You're welcome, it is my pleasure.

Regarding rotating text, it is indeed possible. Anything you draw with Canvas2d can be transformed using scale, translate, rotate and skew. Before you change the transform, you can save the current one by calling save and after that call restore.

Note that rotate rotates around the origin (0, 0). If you woud like to rotate around a point (100, 100) for example, you would do:
Code: Pascal  [Select][+][-]
  1. canvas2D.save;
  2. canvas2D.translate(100, 100);
  3. canvas2D.rotate(Pi);
  4. canvas2D.translate(-100, -100);
  5. ...
  6. canvas2D.restore;
To visualize it, imagine the transformations are applied in reverse order. The rotation center (100, 100) is first translated to the top-left corner by (-100, -100) and becomes (0, 0). Then it is rotated. Finally it is translated back to its starting position.

You will find the list of the functions and properties here: https://bgrabitmap.github.io/doc/BGRACanvas2D.TBGRACanvas2D.html

Some examples using Canvas2d:
https://github.com/bgrabitmap/bgrabitmap/tree/master/test/testcanvas2d

Regards
Conscience is the debugger of the mind

 

TinyPortal © 2005-2018