SOLVED: Unable to write text with BGRACanvas2d
lazarus / 39-Graphics

----------------------------------------------------------------------
AL · 2024-04-03 01:57

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i  unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs,  BGRABitmap, BGRACanvas2d,
BGRABitmapTypes, BGRATextFX; type   { TForm1 }   TForm1 =
class(TForm)    procedure FormPaint(Sender: TObject);  private  
public   end; var  Form1: TForm1;  ctx:
TBGRACanvas2D;implementation {$R *.lfm} { TForm1 } procedure
TForm1.FormPaint(Sender: TObject);  var  bmp: TBGRABitmap;  renderer:
TBGRATextEffectFontRenderer;begin  bmp :=
TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace)); 
renderer := TBGRATextEffectFontRenderer.Create;  ctx := bmp.Canvas2D
;  bmp.FontRenderer := renderer;  renderer.ShadowVisible := True; 
renderer.OutlineVisible := True;  renderer.OutlineColor := BGRABlack; 
renderer.OuterOutlineOnly := True;  bmp.FontFullHeight := 50; 
bmp.TextOut(5,5,'Hello world',CSSRed);  ctx.strokeText('Hello
1',5,60);   // no output  ctx.text('Hello 2',5,60);            // no
output // bmp.TextOut(5,55,'Hello 3',clblack);   // this work fine 
ctx.stroke ;  bmp.Draw(Canvas,0,0);  bmp.Free;end; end.

----------------------------------------------------------------------
circular · 2024-04-03 16:02

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i uses
BGRABitmap, BGRABitmapTypes, BGRAVectorize; {$R *.lfm} { TForm1
} procedure TForm1.FormPaint(Sender: TObject);  var  bmp:
TBGRABitmap;  renderer: TBGRAVectorizedFontRenderer;  ctx:
TBGRACanvas2D;begin  bmp := TBGRABitmap.Create(ClientWidth,
ClientHeight, clBtnFace);  renderer :=
TBGRAVectorizedFontRenderer.Create;  ctx := bmp.Canvas2D; 
ctx.fontEmHeight:= 60;  ctx.fontRenderer := renderer; 
ctx.shadowOffset := PointF(5, 5);  ctx.shadowBlur:= 5; 
ctx.shadowColor(BGRA(0,0,0,128));  ctx.hasShadow;  ctx.text('Hello
World',5,60);  ctx.lineWidth:= 5;  ctx.strokeStyle(CSSGoldenrod); 
ctx.stroke;  ctx.fillStyle(BGRABlack);  ctx.fill; 
bmp.Draw(Canvas,0,0);  bmp.Free;end;
Happy drawing

----------------------------------------------------------------------
AL · 2024-04-03 20:15

Thank you Circular, in fact I was just looking for a simple black
text.
What I was missing was
 ctx.fillStyle(BGRABlack);
 ctx.fill;

----------------------------------------------------------------------
circular · 2024-04-03 20:27

Ah I understand. Indeed it may be surprising but writing the text is
"filling" its shape while "stroking" is for the outline.

Regards

----------------------------------------------------------------------
AL · 2024-04-03 20:44

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).

----------------------------------------------------------------------
circular · 2024-04-04 07:54

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
canvas2D.save;canvas2D.translate(100,
100);canvas2D.rotate(Pi);canvas2D.translate(-100,
-100);...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