Forum > Beginners
Canvas and TextOut in center
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