Android Question Canvas.DrawText Positioning issue/formula

Cableguy

Expert
Licensed User
Longtime User
Hi Guys

I'm trying to place a single character dead center on a label using canvas and drawtext.
The issue is, even thou I have set the padding to zero on all four sides, I still get my character a bit off-centre vertically. Horizontal Center is easy to get, as we just set the draw text alignment to "CENTER", but to center it vertically is proving challenging to say the least...
so any help would be very welcomed!!

what I got that "almost" works...

B4X:
Sub SetlabelText(v As Label, TFace As Typeface, txt As String)
    SetPadding(v, 0, 0, 0, 0) ' we set the padding
   
    Private vHeight As Int = v.Height ' the view's Height
    Private vWidth As Int = v.Width ' the view's Width
    Private tBase As Int ' the Text Base value
   
    If vHeight > vWidth Then 'if it's taller than it is wide
        tBase = vWidth ' the text size is calculated relatively to the view's Width
    Else 'if it's wider than it is tall
        tBase = vHeight ' the text size is calculated relatively to the view's Height
    End If
   
    'Now we get the max FontSize possible for tBase
    Private CV As Canvas
    CV.Initialize(v)
    Private x As Int = 0
    Do Until CV.MeasureStringHeight("+", TFace, x)>= tBase
        x=x+1
    Loop
   
    ' I want it to be about 70% of tBase
    x = Floor(x * 0.7)
   
    'Now I get the final sizes for text height with the calculated font size
    Private tHeight As Int = CV.MeasureStringHeight(txt, TFace, x)

    'and try to calculate the vertical origin point (x?) for the string
    Private yBase As Int = Floor (vHeight - ((vHeight-tHeight)/2)) ' wich clearly eludes me!!!!
    Private xBase As Int = Floor(vWidth/2)'this is horizontal origin point, center!

    CV.DrawText(txt,xBase, yBase, TFace, x, Colors.Black, "CENTER")     
End Sub

This should be as easy as subtracting the text height from the view's height, and divide that by two... then subtract that value from the views height, right???? apparently not, so... Please Help!!!
 

sorex

Expert
Licensed User
Longtime User
my guess is that the drawtext method is not 100% the same as adding normal text and vertical positioning differs a bit unless you have full sized chars in your string.

can't fiddle with it as my new desktop at work barely detects my phone.
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
From experience trying to do exactly what CableGuy is doing, he unable to use the normal method i.e. set the font size and then the gravity because he does not know what font size is required. Therefore he must use a method to determine the required size after which he can apply it using the 'normal' method.

The problem is in determining what is the largest possible text size that will fit a certain size of view.
Actually, that part is not the most dificult, I can compromise to a degree on that... The issue I'm fa ing is the centering it self... I think the Font symbols do have some extra uneven padding themselves?
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
yes, that's what I meant, I believe it's called vertical kerning which is some kind of padding.
 
Upvote 0

RandomCoder

Well-Known Member
Licensed User
Longtime User
Actually, that part is not the most dificult, I can compromise to a degree on that... The issue I'm fa ing is the centering it self... I think the Font symbols do have some extra uneven padding themselves?
Have you tried the solution I posted earlier? It works for me although it does'nt create the largest possible font however its pretty close. The alternative is to use the library I lnked to, don't know if this suffers the same fate with just + and - symbols as I've not tested it? It was created by Erel and so it's bound to work!!!! :D
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
yes, that's what I meant, I believe it's called vertical kerning which is some kind of padding.
that was why I wanted to use draw text as I hoped for it NOT to have those paddings... so I will be rethinking the symbol drawing...
 
Upvote 0
Top