Android Question Heart Shaped Image Effect

Discussion in 'Android Questions' started by cambopad, Feb 13, 2015.

  1. cambopad

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

    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.
     
    cambopad likes this.
  3. Cableguy

    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
     
    cambopad likes this.
  4. Erel

    Erel Administrator Staff Member Licensed User

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

    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: Feb 13, 2015
    cambopad likes this.
  6. Erel

    Erel Administrator Staff Member Licensed User

    cambopad likes this.
  7. cambopad

    cambopad Active Member Licensed User

    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!
     
  8. cambopad

    cambopad Active Member Licensed User

    Thanks you @Erel, could you provide me some small example code? I would really appreciate your help :)
     
  9. Troberg

    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!
     
  10. DonManfred

    DonManfred Expert Licensed User

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


    Original
    charly.jpg




    The Picture after:
    [​IMG]
     
  11. DonManfred

    DonManfred Expert Licensed User

    These "Mask" i already have.

    [​IMG]
     
    cambopad and Troberg like this.
  12. DonManfred

    DonManfred Expert Licensed User

    Want sample code?

    Here it is :D

    Code:
    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
     

    Attached Files:

    cambopad and Troberg like this.
  13. RandomCoder

    RandomCoder Well-Known Member Licensed User

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

    DonManfred Expert Licensed User

    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: Feb 26, 2015
    cambopad, RandomCoder and Troberg like this.
  15. Troberg

    Troberg Well-Known Member Licensed User

  16. DonManfred

    DonManfred Expert Licensed User

    You can leave a like (or two) if you like it ;)
    It will be released in the next days (i´m not finished yet)
     
    cambopad likes this.
  17. DonManfred

    DonManfred Expert Licensed User

    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 :)
     
    cambopad likes this.
  18. Troberg

    Troberg Well-Known Member Licensed User

    You've already got three likes for it, you like-slut. ;)
     
    RandomCoder, mangojack and DonManfred like this.
  19. cambopad

    cambopad Active Member Licensed User

    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! :)
     
    Kwame Twum likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice