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

Discussion in 'Android Questions' started by Alexander Stolte, Oct 7, 2018.

Tags:
  1. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

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

    Code:
    Private Sub CreateBitmap (lbl As B4XView) As B4XBitmap
        
    Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(
    000, 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.
     
  2. Erel

    Erel Administrator Staff Member Licensed User

  3. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    now i have this:
    Code:
    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
     
  4. klaus

    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.
     

    Attached Files:

    Last edited: Oct 7, 2018
    asales and Alexander Stolte like this.
  5. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    I try this Formular this evening:
    I * (heightOfTheView - middlePoint)

    This sounds for the most logical

    Thanks Klaus.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice