Canvas DrawString Text Position (Justification)

[Brian_O_Brien]

I am trying to draw the numbers around the ticks of a 12 hour clock.
I can draw the ticks quite simply with r sin/cos from the center a canvas.
However when trying to put number beside each tick I have a small problem.
The text is positioned too far right at 3 O’clock, but are too far left at 9 O’clock.
There is a similar issue with the text at 12 O’clock and 6 O’clock. Too high at the top ‘and’ bottom.

This in my opinion is because the text position of the text is the bottom left of the character.

I need my text position to be the center of that text character(s).

Justification of the text fix this but I can’t seem to find a property for text justification in graphics or the canvas.

I might be able to fix this simply “IF” I knew how to get the size of the ‘rendered’ text in pixels.

g.TextUnit = FontUnits.Point
g.TextSize = 16

72 Points / Pixel?

[Sascha_S]

@Brian_O_Brien

I might be able to fix this simply “IF” I knew how to get the size of the ‘rendered’ text in pixels.

And TextWidth/TextHeight don’t do the job? I know these deliver Points, but…

[kevin_g]

You can measure the width of the string and divide by 2 to calculate the horizontal centre.

Unfortunately, there is no function to calculate the exact height of a string of characters. There are functions available (TextHeight / TextAscent etc…) but they don’t take into account the actual characters in the string. If you want a really accurate height you would have to draw the text into a picture and find the bounding box by testing the pixel values.

[Jeff_Tullin]

@kevin_g

you would have to draw the text into a picture and find the bounding box by testing the pixel values.

I have to do this for a specific project.
If you have MBS plugins, you can use the GMImage
eg

 p =  new  picture (100,100,32)
    p.graphics.forecolor = &c000000
    p.graphics.Textfont = "Arial"
    p.graphics.Textsize = 64
    p.graphics.drawstring "G",0,62
    
    gm = new GMImageMBS(p)
 //then examine gm.boundingbox  properties such as 
    
    //  gm.boundingBox.xOff 
  // gm.boundingBox.width
 // gm.boundingBox.yOff
 //gm.boundingBox.height

[Anthony_G_Cyphers]

I posted code that I use for vertically and horizontally centering text a couple of years ago. Should be trivial to modify it to suit your needs. Be sure to read all the way down for an improved Y positioning calculation.

Canvas1.DrawString vertically centered

You need to account for the baseline of the string using g.FontAscent. Try this in a Canvas’ Paint event: g.DrawingColor = &cff0000 g.DrawRectangle( 0, 0, g.Width, g.Height ) var textToDraw as String = "This is a test string." var textWidth as Double = g.TextWidth( textToDraw ) var textX as Double = (g.Width - textWidth) / 2 var textY as Double = ((g.height - g.TextHeight) / 2) + g.FontAscent g.DrawText( textToDraw, textX, textY, textWidth ) [image]

[MarkusR]

have you test TextShape?
https://documentation.xojo.com/api/graphics/textshape.html