Android Question Draw squares with a rounded corner b4xcanvas

Lucas Siqueira

Active Member
Licensed User
Longtime User
What is the simplest way using b4xcanvas
to draw each of these squares?
I wish it was b4x (b4a+b4j+b4i)

1655339752426.png
 
Solution
Result

I used that link too, thank you all




1655494417620.png



B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private Pane1 As B4XView
    Private Pane2 As B4XView
    Private Pane3 As B4XView
    Private Pane4 As B4XView
    Type Point (XCoord As Double, YCoord As Double)
End Sub

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

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    SetColorAndBorder2(Pane1, 0xFFD33B61, 2dip, 0xFF000000, Array As Double(20dip, 0dip, 0dip, 0dip))...

mangojack

Well-Known Member
Licensed User
Longtime User
You might want to view this thread... It's a simple method using ColorDrawable to achieve your desired result.

The solution from @Mahares was using a Button.. but it should work for a Panel.



Edit. Just noticed for B4X..... I don't believe this solution will work with B4i.
 
Last edited:
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
Samples:

etc..
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
etc.

search:
 
Upvote 0

Lucas Siqueira

Active Member
Licensed User
Longtime User
Result

I used that link too, thank you all




1655494417620.png



B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private Pane1 As B4XView
    Private Pane2 As B4XView
    Private Pane3 As B4XView
    Private Pane4 As B4XView
    Type Point (XCoord As Double, YCoord As Double)
End Sub

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

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    SetColorAndBorder2(Pane1, 0xFFD33B61, 2dip, 0xFF000000, Array As Double(20dip, 0dip, 0dip, 0dip))
    SetColorAndBorder2(Pane2, 0xFFFAA65D, 2dip, 0xFF000000, Array As Double(20dip, 20dip, 0dip, 0dip))
    SetColorAndBorder2(Pane3, 0xFF016BA7, 2dip, 0xFF000000, Array As Double(20dip, 0dip, 0dip, 20dip))
    SetColorAndBorder2(Pane4, 0xFF70B55A, 2dip, 0xFF000000, Array As Double(20dip, 0dip, 20dip, 0dip))
End Sub

Private Sub SetColorAndBorder2(pnl As B4XView, BackgroundColor As Int, BorderWidth As Double, BorderColor As Int, BorderCornerRadius() As Double)
    
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, pnl.Width, pnl.Height)
    
    Dim RadiusTopLeft As Double = BorderCornerRadius(0)
    Dim RadiusTopRight As Double = BorderCornerRadius(1)
    Dim RadiusBottomRight As Double = BorderCornerRadius(2)
    Dim RadiusBottomLeft As Double = BorderCornerRadius(3)
    
    Dim cvs As B4XCanvas
    cvs.Initialize(p)

    'TopLeft
    If RadiusTopLeft>0 Then
        cvs.DrawCircle(RadiusTopLeft, RadiusTopLeft, RadiusTopLeft, BorderColor, True, 0)
        cvs.DrawCircle(RadiusTopLeft, RadiusTopLeft, RadiusTopLeft-BorderWidth, BackgroundColor, True, 0)
    End If
    
    'TopRight
    If RadiusTopRight>0 Then
        cvs.DrawCircle(pnl.Width-RadiusTopRight, RadiusTopRight, RadiusTopRight, BorderColor, True, 0)
        cvs.DrawCircle(pnl.Width-RadiusTopRight, RadiusTopRight, RadiusTopRight-BorderWidth, BackgroundColor, True, 0)
    End If
    
    'BottomRight
    If RadiusBottomRight>0 Then
        cvs.DrawCircle(pnl.Width-RadiusBottomRight, pnl.Height-RadiusBottomRight, RadiusBottomRight, BorderColor, True, 0)
        cvs.DrawCircle(pnl.Width-RadiusBottomRight, pnl.Height-RadiusBottomRight, RadiusBottomRight-BorderWidth, BackgroundColor, True, 0)
    End If
    
    'BottomLeft
    If RadiusBottomLeft>0 Then
        cvs.DrawCircle(RadiusBottomLeft, pnl.Height-RadiusBottomLeft, RadiusBottomLeft, BorderColor, True, 0)
        cvs.DrawCircle(RadiusBottomLeft, pnl.Height-RadiusBottomLeft, RadiusBottomLeft-BorderWidth, BackgroundColor, True, 0)
    End If
    
    
    
    Dim Points,Points2 As List
    Points.Initialize
    Points2.Initialize
    
    'painel externo
    If RadiusTopLeft>0 Then
        Points.Add( CreatePoint(0, RadiusTopLeft) )
        Points.Add( CreatePoint(RadiusTopLeft, RadiusTopLeft) )
        Points.Add( CreatePoint(RadiusTopLeft, 0) )
    Else
        Points.Add( CreatePoint(0, 0) )
    End If
    
    If RadiusTopRight>0 Then
        Points.Add( CreatePoint(pnl.Width-RadiusTopRight, 0) )
        Points.Add( CreatePoint(pnl.Width-RadiusTopRight, RadiusTopRight) )
        Points.Add( CreatePoint(pnl.Width, RadiusTopRight) )
    Else
        Points.Add( CreatePoint(pnl.Width, 0) )
    End If
    
    If RadiusBottomRight>0 Then
        Points.Add( CreatePoint(pnl.Width, pnl.Height-RadiusBottomRight) )
        Points.Add( CreatePoint(pnl.Width-RadiusBottomRight, pnl.Height-RadiusBottomRight) )
        Points.Add( CreatePoint(pnl.Width-RadiusBottomRight, pnl.Height) )
    Else
        Points.Add( CreatePoint(pnl.Width, pnl.Height) )
    End If
    
    If RadiusBottomLeft>0 Then
        Points.Add( CreatePoint(RadiusBottomLeft, pnl.Height) )
        Points.Add( CreatePoint(RadiusBottomLeft, pnl.Height-RadiusBottomLeft) )
        Points.Add( CreatePoint(0, pnl.Height-RadiusBottomLeft) )
    Else
        Points.Add( CreatePoint(0, pnl.Height) )
    End If
    
    
    'painel interno
    If RadiusTopLeft>0 Then
        Points2.Add( CreatePoint(0+BorderWidth, RadiusTopLeft) )
        Points2.Add( CreatePoint(RadiusTopLeft, RadiusTopLeft) )
        Points2.Add( CreatePoint(RadiusTopLeft, 0+BorderWidth) )
    Else
        Points2.Add( CreatePoint(0+BorderWidth, 0+BorderWidth) )
    End If
    
    If RadiusTopRight>0 Then
        Points2.Add( CreatePoint(pnl.Width-RadiusTopRight, 0+BorderWidth) )
        Points2.Add( CreatePoint(pnl.Width-RadiusTopRight, RadiusTopRight) )
        Points2.Add( CreatePoint(pnl.Width-BorderWidth, RadiusTopRight) )
    Else
        Points2.Add( CreatePoint(pnl.Width-BorderWidth, 0+BorderWidth) )
    End If
    
    If RadiusBottomRight>0 Then
        Points2.Add( CreatePoint(pnl.Width-BorderWidth, pnl.Height-RadiusBottomRight) )
        Points2.Add( CreatePoint(pnl.Width-RadiusBottomRight, pnl.Height-RadiusBottomRight) )
        Points2.Add( CreatePoint(pnl.Width-RadiusBottomRight, pnl.Height-BorderWidth) )
    Else
        Points2.Add( CreatePoint(pnl.Width-BorderWidth, pnl.Height-BorderWidth) )
    End If
    
    If RadiusBottomLeft>0 Then
        Points2.Add( CreatePoint(RadiusBottomLeft, pnl.Height-BorderWidth) )
        Points2.Add( CreatePoint(RadiusBottomLeft, pnl.Height-RadiusBottomLeft) )
        Points2.Add( CreatePoint(0+BorderWidth, pnl.Height-RadiusBottomLeft) )
    Else
        Points2.Add( CreatePoint(0+BorderWidth, pnl.Height-BorderWidth) )
    End If
    
    DrawFilledPath(cvs, Points, BorderColor, 0)
    DrawFilledPath(cvs, Points2, BackgroundColor, 0)

    Dim iv As B4XImageView = XUIViewsUtils.CreateB4XImageView
    pnl.AddView(iv.mBase, 0, 0, pnl.Width, pnl.Height)
    iv.mBackgroundColor = xui.Color_Transparent
    iv.Bitmap = cvs.CreateBitmap
    iv.mbase.SendToBack
    pnl.Color = xui.Color_Transparent
    cvs.Release
End Sub

Sub CreatePoint(XCoord As Double, YCoord As Double) As Point
    Dim Point1 As Point
    Point1.Initialize
    Point1.XCoord = XCoord
    Point1.YCoord = YCoord
    Return Point1
End Sub

Sub DrawFilledPath(TargetCanvas As B4XCanvas,Pts As List,Color As Int,StrokeWidth As Float)
    Dim Path As B4XPath
    Dim P As Point = Pts.Get(0)
    Path.Initialize(P.XCoord,P.YCoord)
    For I = 1 To Pts.Size - 1
        Dim P As Point = Pts.Get(I)
        Path.LineTo(P.XCoord,P.YCoord)
    Next
    TargetCanvas.DrawPath(Path,Color,True,StrokeWidth)
End Sub
 
Upvote 0
Solution

Similar Threads

Top