Forum > Beginners

Canvas and TextOut in center

(1/2) > >>

seghele0:
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  [+][-]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";}};} ---procedure TForm1.Button1Click(Sender: TObject);begin  With Form1 do  begin    canvas.brush.color := clYellow;   // is the fillcolor for the circle    canvas.Ellipse(100,100,300,300);    canvas.MoveTo(100,100);    Canvas.Font.Size:=22;    Canvas.Font.Color:=clRed;    Canvas.TextOut(160,170,'Hello'); // (Hor. , Ver, 'Hello')  end;         :-[

wp:
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  [+][-]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";}};} ---procedure TForm1.Button1Click(Sender: TObject);var  ts: TTextStyle;begin//  With Form1 do   // NEVER USE THE FORM INSTANCE IN THE FORM CLASS CODE !!!  begin    canvas.brush.color := clYellow;      canvas.Ellipse(100,100,300,300);    // canvas.MoveTo(100,100);    // NOT NEEDED    Canvas.Font.Size:=22;    Canvas.Font.Color:=clRed;    ts := Canvas.TextStyle;    ts.Alignment := taCenter;    ts.Layout := tlCenter;    Canvas.TextRect(Rect(100, 100, 300, 300), 0, 0, 'Hello', ts);  // Rect within text is centered, dummy x, dummy y, text, text style  end;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  [+][-]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";}};} ---var  ButtonClicked: Boolean = false; procedure TForm1.Button1Click(Sender: TObject);begin  ButtonClicked := true;  Invalidate;end; procedure TForm1.FormPaint(Sender: TObject);var  ts: TTextStyle;begin  if not ButtonClicked then    exit;  Canvas.brush.color := clYellow;   // is the fillcolor for the circle  Ccanvas.Ellipse(100,100,300,300);  Canvas.Font.Size:=22;  Canvas.Font.Color:=clRed;  ts := Canvas.TextStyle;  ts.Alignment := taCenter;  ts.Layout := tlCenter;  Canvas.TextRect(Rect(100, 100, 300, 300), 0, 0, 'Hello', ts); end;

seghele0:
Thanks for the code.
 :)
The text is now in the center, but the "circle" is not centricized on the form.
 :(

wp:

--- 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";}};} ---procedure TForm1.FormPaint(Sender: TObject);var  centerX, centerY, radius: Integer;  R: TRect;  ts: TTextStyle;begin  if not ButtonClicked then    exit;  centerX := Width div 2;  centerY := Height div 2;  if Width < Height then    radius := Width * 4 div 10  else    radius := Height * 4 div 10;  R := Rect(centerX - radius, centerY - radius, centerX + radius, centerY + radius);    Canvas.brush.color := clYellow;   // is the fillcolor for the circle  Canvas.Ellipse(R);  Canvas.Font.Size:=22;  Canvas.Font.Color:=clRed;  ts := Canvas.TextStyle;  ts.Alignment := taCenter;  ts.Layout := tlCenter;  Canvas.TextRect(R, 0, 0, 'Hello', ts);end;

seghele0:
Thank you very much for the code.
Sorry, but I forgot how to use multiple lines of text.
Can you help me again?

Navigation

[0] Message Index

[#] Next page

Go to full version