Android Question Dashed stroke on outline drawn with B4XPath?

Dave O

Well-Known Member
Licensed User
Longtime User
I'd like to draw a rounded rect using B4XCanvas and B4XPath and such, but I'd prefer the stroke (with no fill) to be a dashed line. I don't see any parameters for line style, and haven't found anything in the forums.

Here's my current code using a non-dashed line:
B4X:
Dim roundedPath As B4XPath
roundedPath.InitializeRoundedRect(faceRect, CORNER_RADIUS)
cvs.DrawPath(roundedPath, tempFaceColor, True, 0dip)   'draw the filled dice face
cvs.DrawPath(roundedPath, mPipColor, False, OUTLINE_WIDTH)   'draw the outline, ideally dashed
cvs.Invalidate

Any tips appreciated!
 

zed

Well-Known Member
Licensed User
Try this code.
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
  
    Private cvs As B4XCanvas 
  
End Sub

Public Sub Initialize
'    B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.


Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    cvs.Initialize(Root)

    Dim r As B4XRect
    r.Initialize(50dip, 50dip, 300dip, 300dip)

    DrawDashedRoundedRect(cvs, r, 30dip, xui.Color_Black, 3dip, 12dip, 8dip)

    cvs.Invalidate
End Sub


Sub DrawDashedRoundedRect(mcvs As B4XCanvas, r As B4XRect, radius As Float, clr As Int, stroke As Float, dash As Float, gap As Float)
    ' Draw the 4 right sides
    DrawDashedLine(mcvs, r.Left + radius, r.Top, r.Right - radius, r.Top, clr, stroke, dash, gap)
    DrawDashedLine(mcvs, r.Right, r.Top + radius, r.Right, r.Bottom - radius, clr, stroke, dash, gap)
    DrawDashedLine(mcvs, r.Left + radius, r.Bottom, r.Right - radius, r.Bottom, clr, stroke, dash, gap)
    DrawDashedLine(mcvs, r.Left, r.Top + radius, r.Left, r.Bottom - radius, clr, stroke, dash, gap)

    ' Draw the 4 rounded arcs
    DrawDashedArc(mcvs, r.Left + radius, r.Top + radius, radius, 180, 270, clr, stroke, dash, gap)
    DrawDashedArc(mcvs, r.Right - radius, r.Top + radius, radius, 270, 360, clr, stroke, dash, gap)
    DrawDashedArc(mcvs, r.Right - radius, r.Bottom - radius, radius, 0, 90, clr, stroke, dash, gap)
    DrawDashedArc(mcvs, r.Left + radius, r.Bottom - radius, radius, 90, 180, clr, stroke, dash, gap)
End Sub

Sub DrawDashedLine(mcvs As B4XCanvas, x1 As Float, y1 As Float, x2 As Float, y2 As Float, clr As Int, stroke As Float, dash As Float, gap As Float)
    Dim dx As Float = x2 - x1
    Dim dy As Float = y2 - y1
    Dim dist As Float = Sqrt(dx * dx + dy * dy)
    Dim ux As Float = dx / dist
    Dim uy As Float = dy / dist

    Dim pos As Float = 0
    Do While pos < dist
        Dim sx As Float = x1 + ux * pos
        Dim sy As Float = y1 + uy * pos
        Dim ex As Float = x1 + ux * Min(pos + dash, dist)
        Dim ey As Float = y1 + uy * Min(pos + dash, dist)

        mcvs.DrawLine(sx, sy, ex, ey, clr, stroke)
        pos = pos + dash + gap
    Loop
End Sub

Sub DrawDashedArc(mcvs As B4XCanvas, cx As Float, cy As Float, radius As Float, startAngle As Float, endAngle As Float, clr As Int, stroke As Float, dash As Float, gap As Float)
    Dim angle As Float = startAngle
    Do While angle < endAngle
        Dim a1 As Float = angle
        Dim a2 As Float = Min(angle + (dash / radius) * 57.2958, endAngle) ' conversion rad to deg

        Dim x1 As Float = cx + CosD(a1) * radius
        Dim y1 As Float = cy + SinD(a1) * radius
        Dim x2 As Float = cx + CosD(a2) * radius
        Dim y2 As Float = cy + SinD(a2) * radius

        mcvs.DrawLine(x1, y1, x2, y2, clr, stroke)

        angle = angle + ((dash + gap) / radius) * 57.2958
    Loop
End Sub
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…