Android Question Heart Shaped Image Effect

cambopad

Active Member
Licensed User
Hi all B4A Dev,

Is it possible to clip any image to any shape we want with B4A? For example, I want to make an image to look like a heart shape with TRANSPARENT BACKGROUND . I had no idea about how to achieve this with B4A at all.
I also attached the image with my post to let you see what I want to do, so please check the image!

Any solution would be more than helpful :)

Thanks you!
image_editor.png
 

Troberg

Well-Known Member
Licensed User
There probably is some smarter way of doing it, but one way is to go pixel by pixel and, based on the mask shape, set the alpha in the image.
 

Cableguy

Expert
Licensed User
Erel has in the forum an example on how to make a diamond shape gradient... with a bit of math should be possible to create a mask
 

Troberg

Well-Known Member
Licensed User
I don't think that'll work, as it will not make the outside of the heart transparent, which he asked for. I guess that, in the next step, he's going to put that heart shape on top of some other image.

Your solution creates a white image with a heart shaped image on it. He wants a transparent image with a heart shaped image on it.

At least, that's the way I understood it.

Edit: Though, Erels method would work if you had an inverse heart shaped mask, ie the outside of the heart transparent. That would leave the heart, and show the surroundings.
 
Last edited:

cambopad

Active Member
Licensed User
I don't think that'll work, as it will not make the outside of the heart transparent, which he asked for. I guess that, in the next step, he's going to put that heart shape on top of some other image.

Your solution creates a white image with a heart shaped image on it. He wants a transparent image with a heart shaped image on it.

At least, that's the way I understood it.

Edit: Though, Erels method would work if you had an inverse heart shaped mask, ie the outside of the heart transparent. That would leave the heart, and show the surroundings.
Thanks you @Troberg !
Yes, you understood correctly! That's what I asked for!
I am not an expert in B4A, but I will try to do it based on your and Erel's suggestions.
However, if you could provide me with any code sample, it would help me very much :) because I don't know where to start!
 

Troberg

Well-Known Member
Licensed User
Actually, there is a very simple way of doing this, one just have to think a bit backwards.

I assume you have an heart shaped alpha map (where the heart is transparent).

Now, it's just a matter of stacking things in the right order. Put the image with the sunset in the bottom. Then, put the background image on top of it, and use the heart shaped alpha map to "punch a hole" in it.

It will look like the heart sunset is on top, but actually, it's at the bottom, and there is a transparent hole in the image that looks like the background.

Nice sunset photo, by the way!
 

DonManfred

Expert
Licensed User
Want sample code?

Here it is :D

B4X:
      Dim miv1, miv2, miv3, miv4, miv5, miv6, miv7 As MaskedImageView
    Dim bmp As Bitmap
    bmp.Initialize(File.DirAssets,"charly.jpg")

    miv1.Initialize(Application.PackageName,"miv","shape_5")
    miv1.AddToParent(Activity,0dip,0dip,100dip,100dip)
    miv1.ImageBitmap = bmp

    miv2.Initialize(Application.PackageName,"miv","shape_circle_2")
    miv2.AddToParent(Activity,150dip,0dip,100dip,100dip)
    miv2.ImageBitmap = bmp

    miv3.Initialize(Application.PackageName,"miv","shape_flower")
    miv3.AddToParent(Activity,0dip,125dip,100dip,100dip)
    miv3.ImageBitmap = bmp

    miv4.Initialize(Application.PackageName,"miv","shape_heart")
    miv4.AddToParent(Activity,125dip,125dip,100dip,100dip)
    miv4.ImageBitmap = bmp

    miv5.Initialize(Application.PackageName,"miv","shape_star")
    miv5.AddToParent(Activity,0dip,250dip,100dip,100dip)
    miv5.ImageBitmap = bmp

    miv6.Initialize(Application.PackageName,"miv","shape_star_2")
    miv6.AddToParent(Activity,150dip,250dip,100dip,100dip)
    miv6.ImageBitmap = bmp

    miv7.Initialize(Application.PackageName,"miv","shape_star_3")
    miv7.AddToParent(Activity,0dip,400dip,100dip,100dip)
    miv7.ImageBitmap = bmp
 

Attachments

DonManfred

Expert
Licensed User
What's going to be next???
I´m actually have some libs on the line which i am facing problems. Or which i´m not finished with yet

Finished but i dont know whther it works:
- Direct connection to MS Sql Database (lib MSSQL). I´m waiting for an Access to an MS Database to test this library. It is working like my other two MySQL-Libs. I cannot say anything about the speed (need access to a database)

Working but not finished:
- MaskedImageView (see this thread)
- Universal image loader (see thread in chit chat (loading 1000 imageviews))

In development (not working actually)
- ImageCropper
- SystemBarTint
- ProcessButton
- pdfRenderer2
- FancyButton
- DashedCircularProgress
[..]
 
Last edited:
Top