Android Question CSS to B4X Path

GJREDITOR

Member
Can some one convert this css clippath to b4xpath? I got this from https://bennettfeely.com/clippy/ Thanks:
clip-path (css):
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
Better yet, is there a routine to convert css clip-path to b4x path (for clipping)
 
Solution
Here you are.

I do not know any routine doing it automatically.

B4X:
Sub Process_Globals
    Private xui As XUI
End Sub

Sub Globals
    Private pnlClip As B4XView
    Private cvsClip As B4XCanvas
    Private pthClip As B4XPath
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
   
    cvsClip.Initialize(pnlClip)
    DrawImage
End Sub

Private Sub DrawImage
'    20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%
    pthClip.Initialize(20%x, 0%y)
    pthClip.LineTo(0%x, 20%y)
    pthClip.LineTo(30%x, 50%y)
    pthClip.LineTo(0%x, 80%y)
    pthClip.LineTo(20%x, 100%y)
    pthClip.LineTo(50%x, 70%y)
    pthClip.LineTo(80%x, 100%y)...

klaus

Expert
Licensed User
Longtime User
Here you are.

I do not know any routine doing it automatically.

B4X:
Sub Process_Globals
    Private xui As XUI
End Sub

Sub Globals
    Private pnlClip As B4XView
    Private cvsClip As B4XCanvas
    Private pthClip As B4XPath
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
   
    cvsClip.Initialize(pnlClip)
    DrawImage
End Sub

Private Sub DrawImage
'    20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%
    pthClip.Initialize(20%x, 0%y)
    pthClip.LineTo(0%x, 20%y)
    pthClip.LineTo(30%x, 50%y)
    pthClip.LineTo(0%x, 80%y)
    pthClip.LineTo(20%x, 100%y)
    pthClip.LineTo(50%x, 70%y)
    pthClip.LineTo(80%x, 100%y)
    pthClip.LineTo(100%x, 80%y)
    pthClip.LineTo(70%x, 50%y)
    pthClip.LineTo(100%x, 20%y)
    pthClip.LineTo(80%x, 0%y)
    pthClip.LineTo(50%x, 30%y)
    pthClip.LineTo(20%x, 0%y)
   
    cvsClip.ClipPath(pthClip)
    cvsClip.DrawBitmap(LoadBitmap(File.DirAssets, "rose.jpg"), cvsClip.TargetRect)
    cvsClip.Invalidate
End Sub

1690787221957.png
 

Attachments

  • ClipPath.zip
    37.6 KB · Views: 58
Last edited:
Upvote 2
Solution

GJREDITOR

Member
Just wrote code in b4j to output above b4x code to copy and paste. Thank you
Klaus code output:
Private Sub btnConvert_Click
    Dim b4xCode As String=ConvertInputToOutput("20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%")
    'Log(b4xCode)
    txtB4acode.Text=b4xCode
End Sub

Sub ConvertInputToOutput(input As String) As String
    Dim points() As String = Regex.Split(", ", input)
    Dim codeBuilder As StringBuilder
    codeBuilder.Initialize
    codeBuilder.Append("pthClip.Initialize(")
    For i = 0 To points.Length - 1
        Dim point As String = points(i)
        Dim coords() As String = Regex.Split(" ", point)
        Dim x As String = coords(0)
        Dim y As String = coords(1)
        codeBuilder.Append(x).Append("x, ").Append(y).Append("y)")
        If i < points.Length - 1 Then
            codeBuilder.Append(CRLF).Append("    pthClip.LineTo(")
        End If
    Next
    codeBuilder.Append(CRLF).Append("   cvsClip.ClipPath(pthClip)")
    Return codeBuilder.ToString
End Sub
 
Upvote 0
Top