Forum > Graphics

SOLVED: Unable to write text with BGRACanvas2d

(1/2) > >>

AL:
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  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} --- 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:
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  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---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:
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:
Ah I understand. Indeed it may be surprising but writing the text is "filling" its shape while "stroking" is for the outline.

Regards

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

Navigation

[0] Message Index

[#] Next page

Go to full version