Android Question CSS to B4X Path

GJREDITOR · Jul 31, 2023

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)

klaus · Jul 31, 2023

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 · Jul 31, 2023

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

GJREDITOR · Jul 31, 2023

Here you are.

I do not know any routine doing it automatically.

Thank you very much Klaus

GJREDITOR · Jul 31, 2023

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

Android Question CSS to B4X Path

GJREDITOR

Member

klaus

klaus

Expert

Attachments

GJREDITOR

Member

GJREDITOR

Member

Similar Threads

Android Question CSS to B4X Path

GJREDITOR

Member

klaus

Expert

Attachments

GJREDITOR

Member

GJREDITOR

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency