Android Question AnimatedCounter and Canvas, numbers are not in the middle

Alexander Stolte

Expert
Licensed User
Longtime User
Hello, i have a question about the canvas.drawtext function for this code:

B4X:
Private Sub CreateBitmap (lbl As B4XView) As B4XBitmap
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, DigitWidth, DigitHeight * 10)
    Dim cvs As B4XCanvas
    cvs.Initialize(p)
    Dim voffset As Float = 0.7
    For i = 0 To 9
        cvs.DrawText(i, DigitWidth / 2, (i + voffset) * DigitHeight, lbl.Font, lbl.TextColor, "CENTER")
    Next
    cvs.Invalidate
    Dim res As B4XBitmap = cvs.CreateBitmap
    cvs.Release
    Return res
End Sub

this code is from the original class, the "voffset" has the value 0.7, but if i change the heigh of my view, then the number is not in the middle and the offset should be change.

you see, if the view height = 80dip then the numbers ae in the middle:

and now if the height is 160dip:

how can i calulate the "voffset" by the height of the view?
The screenshoots from are from the original "AnimatedCounter" class.
 

Alexander Stolte

Expert
Licensed User
Longtime User
now i have this:
B4X:
For i = 0 To 9
    '    cvs.DrawText(i, DigitWidth / 2, (i + voffset) * DigitHeight, lbl.Font, lbl.TextColor, "CENTER")
       
        Dim r As B4XRect = cvs.MeasureText(i, lbl.Font)
        Dim BaseLine As Int = lbl.Height/2 - r.Height / 2 - r.Top
        cvs.DrawText(i, DigitWidth / 2, i * BaseLine, lbl.Font, lbl.TextColor, "CENTER")
       
       
    Next
and a "15" looks so:
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
You might have a look at the attached modified class.
It sets the font size according to the CustomView height and sets the digits in the middle of the view.



It's not perfect, but might give you an idea.
I tested it only with B4J.
 

Attachments

  • AnimatedCounterKC.zip
    3.8 KB · Views: 331
Last edited:
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…