Android Question Heart Shaped Image Effect

[cambopad]

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!

 

[Troberg]

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]

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

 

[Erel]

A simple solution is to create an image with a heart shaped transparent region and then draw it over the other image.

 

[Troberg]

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.

 

[Erel]

You are correct. It should be possible to do it with a non-standard porter duff mode: http://ssp.impulsetrain.com/porterduff.html

Check ABExtDrawing library. I think that it allows you to change the mode.

 

[cambopad]

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!

 

[cambopad]

You are correct. It should be possible to do it with a non-standard porter duff mode: http://ssp.impulsetrain.com/porterduff.html

Check ABExtDrawing library. I think that it allows you to change the mode.

Thanks you @Erel, could you provide me some small example code? I would really appreciate your help

 

[Troberg]

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]

A Picture (or two) says more than 1000 words!


Original

The Picture after:

 

[DonManfred]

These "Mask" i already have.

 

[DonManfred]

Want sample code?

Here it is

      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

 

[RandomCoder]

@DonManfred you're on a roll! What's going to be next???

 

[DonManfred]

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

 

[Troberg]

A Picture (or two) says more than 1000 words!

Nice! That will most likely solve this problem for me as well: https://www.b4x.com/android/forum/threads/shuffling-channels-in-bitmap.51148/#post-320206

 

[DonManfred]

You can leave a like (or two) if you like it
It will be released in the next days (i´m not finished yet)

 

[DonManfred]

That will most likely solve

i saw that thread and thinked by myself that the MaskedImageView could be an alternative... Yesterday i got it running so it was a good reason to post some screens

 

[Troberg]

You can leave a like (or two) if you like it
It will be released in the next days (i´m not finished yet)

You've already got three likes for it, you like-slut.

 

[cambopad]

These "Mask" i already have.

OMG! This is just what I am looking for! You are really awesome! I also found your MaskedImageView lib! Many many thanks for your awesome libs and hardwork!