Android Question Clip Path ... I need Help on this one...

Cableguy

Expert
Licensed User
Longtime User
Hi Guys,

I'm posting in the B4A forum, but I could as well post it in any other as this is not an Android specific problem...
I'm trying to achieve the following result:
1707852713818.png
1707852779418.png
1707852943051.png

so, from left to rignt...
In black is my target rectangle, in blue is the clip path I want to achieve... from any image (it will always be a vertical rectangle) so that I can achieve the image to the right!

I know this can be achieve by using path.InitializeArc but.... alone it would result in an image like this...

1707853234071.png

Wich is not what I need.... but Geometry has never been my thing... So I ask for help!!!
 

Daestrum

Expert
Licensed User
Longtime User
If you were doing it in B4J
1, draw the mask you want in paint etc with transparent background where you dont want the image to show and black where it is to show.
2, load your real pic into an imageview
3, load the mask into another imageview
4, set the clip of the 1st imageview to the 2nd imageview ( ImageView1.As(JavaObject).RunMethod("setClip",Array(ImageView2))
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
Well.... I ended up by cheating a bit...
I placed my arc center 2 times the drawer width (or imageView or panel ) off to the left, resulting in a negative value, and the drawer height/2 (or imageView or panel), and for the raidus I setted it at 3 Times the drawers width...
and it kinda works...
 
Last edited:
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
I was disappointed that my first reply didn't even get a "Like" so I am trying again. This time I hope to get a "Solution".

Here is the code . . .
B4X:
Private Sub drawMask
    Dim cnv As B4XCanvas
    cnv.Initialize(pnlTarget)
    cnv.DrawPath(makeMask(pnlTarget), xui.Color_Red, True, 0)
End Sub

Private Sub makeMask(target As Pane) As B4XPath
    Dim a As Float = target.Height / 2
    Dim b As Float = target.Width / 3
    Dim r As Float = (a * a + b * b) / (b + b)
    Dim angle As Float = ASin(a / r)
    Dim d As Float = angle / 20
    Dim p As B4XPath
    p.Initialize(b + b, 0)
    For i = 1 To 40
        angle = angle - d
        p.LineTo(3 * b - r + r * Cos(angle), a - r * Sin(angle))
    Next
    p.LineTo(0, a + a)
    p.LineTo(0, 0)
    Return p   
End Sub

Here are some examples . . .

masks.png
 
Upvote 1

TILogistic

Expert
Licensed User
Longtime User
I just add the shape of the image. (B4XBitmapCreatorEffects)
1708009227595.png

B4X:
Public Sub drawMask
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, B4XImageView1.mBase.Width, B4XImageView1.mBase.Height)
    Dim cnv As B4XCanvas
    cnv.Initialize(p)
    cnv.DrawPath(makeMask(p), xui.Color_Red, True, 0)
    Dim MaskBmp As B4XBitmap = cnv.CreateBitmap
    cnv.Invalidate
    cnv.Release

    B4XImageView1.mBackgroundColor = xui.Color_Transparent
    B4XImageView1.ResizeMode = "FILL"
    B4XImageView1.Update

    Dim ImageBmp As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, "1.png", MaskBmp.Width, MaskBmp.Height, False)
    Dim BitmapCreatorEffects1 As BitmapCreatorEffects
    BitmapCreatorEffects1.Initialize
    B4XImageView1.Bitmap = BitmapCreatorEffects1.DrawThroughMask(ImageBmp, MaskBmp)
 
End Sub
Private Sub makeMask(target As B4XView) As B4XPath
    Dim a As Float = target.Height / 2
    Dim b As Float = target.Width / 3
    Dim r As Float = (a * a + b * b) / (b + b)
    Dim angle As Float = ASin(a / r)
    Dim d As Float = angle / 20
    Dim p As B4XPath
    p.Initialize(b + b, 0)
    For i = 1 To 40
        angle = angle - d
        p.LineTo(3 * b - r + r * Cos(angle), a - r * Sin(angle))
    Next
    p.LineTo(0, a + a)
    p.LineTo(0, 0)
    Return p
End Sub
 

Attachments

  • 1.png
    1.png
    254.5 KB · Views: 33
Last edited:
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
I was disappointed that my first reply didn't even get a "Like" so I am trying again. This time I hope to get a "Solution".
I am not a developer by trade, and although browse the forum as much as I can, I only code on my spare hours, and I haven't had many of them.
As for a solution...
I had found my workaround, and I haven't had the ti.e to test your code... also, I was hoping for a more educational answer, as to explain why you did as you did, as not just a "here, take it, it works" thing
 
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
That's fine, @Cableguy, I wasn't really serious. The formula to determine the radius of the arc is mostly Pythagoras theorem, although I wasted a bit of time looking for a more complicated answer.
 
Upvote 0
Top