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

Alexander Stolte

Well-Known Member
Licensed 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:
middle.PNG

and now if the height is 160dip:
not middle.PNG

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

Alexander Stolte

Well-Known Member
Licensed 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:
measuretext.PNG
 

klaus

Expert
Licensed 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.

upload_2018-10-7_19-19-37.png

upload_2018-10-7_19-20-2.png

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

Attachments

Last edited:

Alexander Stolte

Well-Known Member
Licensed User
I try this Formular this evening:
I * (heightOfTheView - middlePoint)

This sounds for the most logical

Thanks Klaus.
 
Top