Recent

Author Topic: Canvas and TextOut in center  (Read 1491 times)

seghele0

  • Jr. Member
  • **
  • Posts: 84
Canvas and TextOut in center
« on: October 19, 2021, 05:33:32 pm »
Windows 11 + Lazarus + CodeTyphon:

Would like the 'canvas-circle' in the middle of the form.
The text 'Hello' in the centre of the circle.
Thanks already.

Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. begin
  3.   With Form1 do
  4.   begin
  5.     canvas.brush.color := clYellow;   // is the fillcolor for the circle
  6.     canvas.Ellipse(100,100,300,300);
  7.     canvas.MoveTo(100,100);
  8.     Canvas.Font.Size:=22;
  9.     Canvas.Font.Color:=clRed;
  10.     Canvas.TextOut(160,170,'Hello'); // (Hor. , Ver, 'Hello')
  11.   end;        
:-[

wp

  • Hero Member
  • *****
  • Posts: 9017
Re: Canvas and TextOut in center
« Reply #1 on: October 19, 2021, 05:49:25 pm »
Rather than Canvas.TextOut, use Canvas.TextRect which supports the TextStyle parameter which can be set up for easy centered painting (otherwise you'd have to measure text width and text height and calculate the text start point).
Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. var
  3.   ts: TTextStyle;
  4. begin
  5. //  With Form1 do   // NEVER USE THE FORM INSTANCE IN THE FORM CLASS CODE !!!
  6.   begin
  7.     canvas.brush.color := clYellow;  
  8.     canvas.Ellipse(100,100,300,300);
  9.     // canvas.MoveTo(100,100);    // NOT NEEDED
  10.     Canvas.Font.Size:=22;
  11.     Canvas.Font.Color:=clRed;
  12.     ts := Canvas.TextStyle;
  13.     ts.Alignment := taCenter;
  14.     ts.Layout := tlCenter;
  15.     Canvas.TextRect(Rect(100, 100, 300, 300), 0, 0, 'Hello', ts);  // Rect within text is centered, dummy x, dummy y, text, text style
  16.   end;
  17. end;

Be warned: You are painting outside the drawing cycle. When after your button click the user drags another window over your form, your form will be erased! and in some operating systems this code will even raise a runtime error.

Always use the OnPaint event for custom drawing:
Code: Pascal  [Select][+][-]
  1. var
  2.   ButtonClicked: Boolean = false;
  3.  
  4. procedure TForm1.Button1Click(Sender: TObject);
  5. begin
  6.   ButtonClicked := true;
  7.   Invalidate;
  8. end;
  9.  
  10. procedure TForm1.FormPaint(Sender: TObject);
  11. var
  12.   ts: TTextStyle;
  13. begin
  14.   if not ButtonClicked then
  15.     exit;
  16.   Canvas.brush.color := clYellow;   // is the fillcolor for the circle
  17.   Ccanvas.Ellipse(100,100,300,300);
  18.   Canvas.Font.Size:=22;
  19.   Canvas.Font.Color:=clRed;
  20.   ts := Canvas.TextStyle;
  21.   ts.Alignment := taCenter;
  22.   ts.Layout := tlCenter;
  23.   Canvas.TextRect(Rect(100, 100, 300, 300), 0, 0, 'Hello', ts);
  24. end;

« Last Edit: October 19, 2021, 05:51:11 pm by wp »
Mainly Lazarus trunk / fpc 3.2.0 / all 32-bit on Win-10, but many more...

seghele0

  • Jr. Member
  • **
  • Posts: 84
Re: Canvas and TextOut in center
« Reply #2 on: October 20, 2021, 03:28:48 pm »
Thanks for the code.
 :)
The text is now in the center, but the "circle" is not centricized on the form.
 :(

wp

  • Hero Member
  • *****
  • Posts: 9017
Re: Canvas and TextOut in center
« Reply #3 on: October 20, 2021, 03:38:29 pm »
Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormPaint(Sender: TObject);
  2. var
  3.   centerX, centerY, radius: Integer;
  4.   R: TRect;
  5.   ts: TTextStyle;
  6. begin
  7.   if not ButtonClicked then
  8.     exit;
  9.   centerX := Width div 2;
  10.   centerY := Height div 2;
  11.   if Width < Height then
  12.     radius := Width * 4 div 10
  13.   else
  14.     radius := Height * 4 div 10;
  15.   R := Rect(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
  16.  
  17.   Canvas.brush.color := clYellow;   // is the fillcolor for the circle
  18.   Canvas.Ellipse(R);
  19.   Canvas.Font.Size:=22;
  20.   Canvas.Font.Color:=clRed;
  21.   ts := Canvas.TextStyle;
  22.   ts.Alignment := taCenter;
  23.   ts.Layout := tlCenter;
  24.   Canvas.TextRect(R, 0, 0, 'Hello', ts);
  25. end;
Mainly Lazarus trunk / fpc 3.2.0 / all 32-bit on Win-10, but many more...

seghele0

  • Jr. Member
  • **
  • Posts: 84
Re: Canvas and TextOut in center
« Reply #4 on: October 20, 2021, 04:37:45 pm »
Thank you very much for the code.
Sorry, but I forgot how to use multiple lines of text.
Can you help me again?

howardpc

  • Hero Member
  • *****
  • Posts: 3831
Re: Canvas and TextOut in center
« Reply #5 on: October 20, 2021, 04:54:53 pm »
Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormPaint(Sender: TObject);
  2. var
  3.   radius: Integer;
  4.   R: TRect;
  5.   ts: TTextStyle;
  6. begin
  7.   if not ButtonClicked then
  8.     exit;
  9.   if Width < Height then
  10.     radius := Width * 4 div 10
  11.   else
  12.     radius := Height * 4 div 10;
  13.   R.Create(ClientRect.CenterPoint, radius, radius);
  14.   Canvas.Brush.Color := clYellow;   // is the fillcolor for the circle
  15.   Canvas.Ellipse(R);
  16.   Canvas.Font.Size:=22;
  17.   Canvas.Font.Color:=clRed;
  18.   ts := Canvas.TextStyle;
  19.   ts.Alignment := taCenter;
  20.   ts.Layout := tlCenter;
  21.   ts.SingleLine := False;
  22.   ts.Wordbreak := True;
  23.   Canvas.TextRect(R, 0, 0, 'Hello'+LineEnding+'World', ts);
  24. end;

seghele0

  • Jr. Member
  • **
  • Posts: 84
Re: Canvas and TextOut in center
« Reply #6 on: October 20, 2021, 05:16:47 pm »
 :)
Wonderful!.


 

TinyPortal © 2005-2018