Android Question How to make Curve Text in B4X ?

William Lancee

Well-Known Member
Licensed User
Longtime User
You can tweak the start of sweep angle (222 degrees instead of 225) and the tilt angle (for example startSweep + 95).

B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private cv As B4XCanvas
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Dim TimesRoman As B4XFont = xui.CreateFont(Typeface.SERIF, 23)
    Dim w As Float = 300dip
    Dim h As Float = 400dip
    Dim basePanel As B4XView = xui.CreatePanel("")
    basePanel.SetColorAndBorder(xui.Color_Transparent, 1dip, xui.Color_Black, 10dip)
    Root.AddView(basePanel, Root.Width / 2 - w /2, Root.Height / 2 - h / 2, w, h)
    cv.Initialize(basePanel)
    drawCurvedText("ALPHR GUIDES", basePanel.Width / 2, .67 * basePanel.Height, 100dip, 225, xui.Color_Blue, TimesRoman)
    cv.DrawCircle(basePanel.Width / 2, .67 * basePanel.Height, 97dip, xui.Color_LightGray, True, 0)
    cv.Invalidate
End Sub

Private Sub drawCurvedText(s As String, pivotX As Float, pivotY As Float, radius As Float, startSweep As Float, textColor As Int, textFont As B4XFont)
    Dim x, y As Float
    For i = 0 To s.Length - 1
        x = pivotX + radius * CosD(startSweep)
        y = pivotY + radius * SinD(startSweep)
        Dim letter As String = s.CharAt(i)
        cv.DrawTextRotated(letter, x, y, textFont, textColor, "LEFT", startSweep + 90)
        Dim letWid As Float = cv.MeasureText(letter, textFont).width
        startSweep = startSweep + (letWid + 3dip) * (360 / (2 * cPI * radius))
    Next
End Sub

 
Last edited:
Upvote 0

Dominik H

Member
Licensed User
Longtime User
Is there any way to rotate the text over a wider arc? Or does it only rotate around a perfect circle?
 
Upvote 0

William Lancee

Well-Known Member
Licensed User
Longtime User
For a larger circle, same algorithm. In the code below I have parameterized radius and starting angle.
The cv.DrawCircle statement can be commented out if you don't want to see the circle.
You can move the text up and down by changing ".67 * basepanel.Height".
Make small changes at a time, otherwise the text can easily move out of view.

B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
#if B4A
    Dim TimesRoman As B4XFont = xui.CreateFont(Typeface.SERIF, 23)
#Else if B4J
    Dim TimesRoman As B4XFont = xui.CreateFont2(fx.CreateFont("Serif", 23, False, False), 23)
#End If
    Dim w As Float = 300dip
    Dim h As Float = 400dip
    Dim radius As Float = 200dip
    Dim startAngle As Float = 240      'add or subtract a few degrees to move the text along the arc
    Dim basePanel As B4XView = xui.CreatePanel("")
    basePanel.SetColorAndBorder(xui.Color_Transparent, 1dip, xui.Color_Black, 10dip)
    Root.AddView(basePanel, Root.Width / 2 - w /2, Root.Height / 2 - h / 2, w, h)
    cv.Initialize(basePanel)
   
    drawCurvedText("ALPHR GUIDES", basePanel.Width / 2, .67 * basePanel.Height, radius, startAngle, xui.Color_Blue, TimesRoman)
    cv.DrawCircle(basePanel.Width / 2, .67 * basePanel.Height, radius - 3dip, xui.Color_LightGray, True, 0)
    cv.Invalidate
End Sub

B4X:
Private Sub drawCurvedText(s As String, pivotX As Float, pivotY As Float, radius As Float, startSweep As Float, textColor As Int, textFont As B4XFont)
    Dim abit As Float = 3            'this adjusts the tilt of the letters a bit
    Dim x, y As Float
    For i = 0 To s.Length - 1
        x = pivotX + radius * CosD(startSweep)
        y = pivotY + radius * SinD(startSweep)
        Dim letter As String = s.CharAt(i)
        cv.DrawTextRotated(letter, x, y, textFont, textColor, "LEFT", startSweep + 90 + abit)
        Dim letWid As Float = cv.MeasureText(letter, textFont).width
        startSweep = startSweep + (letWid + 3dip) * (360 / (2 * cPI * radius))
    Next
End Sub
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…