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

[Cableguy]

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:

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...

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

 

[Daestrum]

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))

 

[Cableguy]

If you were doing it in B4J...

Yeah, but It's to be incorporated into a B4A drawer, so It's really not possible... and would be just cheating! ( ;-) )

 

[Cableguy]

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...

 

[Brian Dean]

If your rectangular area has a height of 2*a and a width of 3*b then the radius of your arc is

    r = (a * a + b * b) / (b + b)

 

[Brian Dean]

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 . . .

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 . . .

 

[TILogistic]

I just add the shape of the image. (B4XBitmapCreatorEffects)

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

 

[Cableguy]

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

 

[Brian Dean]

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.