dcsimg
Results 1 to 20 of 20

Thread: Merge 2 transparent images

  1. #1

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Merge 2 transparent images

    l have 2 transparent images img1 and img2 . What l have done so far with the help of @La Volpe is to be able to place img2 on top of img1 .
    What l would like to do is to "glue" img2 on img1 , so img1 can be treated as a new image and move around or whatever .
    Is this possibele ?

    Thanks in advance

  2. #2
    VB-aholic & Lovin' It LaVolpe's Avatar
    Join Date
    Oct 2007
    Location
    Beside Waldo
    Posts
    18,634

    Re: Merge 2 transparent images

    The easiest answer is simply to move both whenever the other one is moved. Though easy, probably will look jumpy?

    Following are some things to consider. But before we continue, can you be more specific to what you are doing and why you are doing it? Sometimes, questions like this seem simple at first to assume what you want only later to find out later that we were completely off base.

    Another option is to dynamically create a picturebox, then move the image controls into the picturebox, positioned inside as needed. If you disable the image controls after they are in the picturebox, then any attempts of dragging them passes the mouse events to the picturebox. You drag the picturebox & both images move with it. May not be preferred if the images have transparency, since the picturebox doesn't.

    Another option is to actually/physically merge the 2 images into a new image. But that is a more complex solution, depending on the image format contained in the controls. What image format is contained in your Image controls?
    Insomnia is just a byproduct of, "It can't be done"

    Classics Enthusiast? Here's my 1969 Mustang Mach I Fastback. Her sister '67 Coupe has been adopted

    Newbie? Novice? Bored? Spend a few minutes browsing the FAQ section of the forum.
    Read the HitchHiker's Guide to Getting Help on the Forums.
    Here is the list of TAGs you can use to format your posts
    Here are VB6 Help Files online


    {Alpha Image Control} {Memory Leak FAQ} {Unicode Open/Save Dialog} {Resource Image Viewer/Extractor}
    {VB and DPI Tutorial} {Manifest Creator} {UserControl Button Template} {stdPicture Render Usage}

  3. #3
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    I agree. Without a lot more information we could easily send you down the wrong road. Then when you hit a dead end, back out, and ask again we suggest another road... then another.

    This is why you need a detailed requirements document before you starting writing the first line of code.


    There are lots of ways to do this. One simple way is to render transparent GIFs on top of each other. This example accepts up to 2 GIFs.

    When you run this you can click and drag the composite-image control around:

    Name:  sshot.png
Views: 147
Size:  5.0 KB


    But that's merely one example. There are other ways to do this such as by using PNG images with an alpha-transparency channel. That requires more code though.
    Attached Files Attached Files

  4. #4

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    Thank you guys , you are right . l will try to be as specific as possible .
    Here is th scenario .
    l have an array of 90 empty image controls next to each other [ImgPos1(0) to ImgPos1(90)] . They form a square of 15 controls on each side
    with a cross in the middle at the center of which is the starting position .
    Looks something like Trivial Pursuit only square. There are 4 transparent round tokens (Tok1,Tok2,Tok3,Tok4)
    which move along the image controls their end position depending on a RND rolling dice result .
    If the transparent token happens to end at one of the corners , it will suppose to get a gift [a transparent small color circle ,( gift1,gift2,gift3,gift4)]
    which should be attached to the token . The idea is that whoever gets all 4 color circles on his/her token and ends up at the center of the cross is the winner .
    Maybe silly , but it's an idea .
    l have done everthing with very simple code except the last part . The merging of the transparent gifts on the transparent tokens .
    Is this possible ?

    ps The tokens format order is "send to back" and tokens and gifts are .gif

  5. #5

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    Sorry for late reply . Had to go out of town kast couple of days .
    l see there are no news and wonder . Did l say something or what l am trying is not possible .

    @ dilettante , l don't know how your example can be applied since the idea is that the moving transparent gif token once it hits a corner
    the gift must be attached to it .

    l apologize for not being able to be more specific . If this is a dead end , how about l make the token a picture box instead of image box
    but the the gift to remain a transparent .gif

  6. #6
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    The way my example works is that the GIF0 property is the "back" or only image and the GIF1 property is the optional "front" image.

    So you could have a UC1 with only GIF0 set and then when something happens you can assign another image to its .GIF1 and then both will be rendered.

    That seems like what you were asking for.


    But now you seem to want to "attach" some number of images to the first image instead of stacking them on top of each other. If so it seems like just a matter of resizing the UserControl and rendering each new image where it needs to go.

    Everything you need is already there, it is just a matter of using it to accomplish your goal.

  7. #7

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    Understood ... almost.
    This must be a great UC , but seems that l miss something . l am not an experienced VB programmer after all .
    Altough l managed to assign a GIF1 to GIF0 and move it as l wish , when l try to assign another , instead of stacking on top of each other
    the previous one disappears and the new one is present .
    What do l do wrong ?
    Attached Files Attached Files

  8. #8
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    If you look at the code you should see that it only supports two images, GIF0 and GIF1.

    Setting GIF0 sets the size of the UserControl. Whenever a Paint event is raised the UC renders GIF0 if set and then GIF1 if both were set. Both are rendered at coordinates (0, 0) of the UC. Either or both can be assigned at design time.


    If you want different behavior then you need to make changes. For example you might have a single background GIF and multiple "foreground" GIFs. Each foreground GIF could have coordinates where you want it rendered in the UC.

    If the foreground images don't need to be assigned at design time then there is no reason to load and store them in the PropertyBag.

    Why would you expect it to read your mind?

  9. #9

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    l thought something was missing somewhere . At least the two GIFS are rendered and can move around .
    Expecting to hear the not so good news , l tried to figure out how many "foreground" GIFS would be necessary and it wasn't very encouraging.
    You need about 36 of them for each token (player) and a heck of a lot of IFs in the code . Yet , there seems to be no other way .
    Either abandon the project , or take it slow .

    Thank you for your time and effort .

  10. #10
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    36? I thought I saw 6 slots.

    You can do rotations as you render using PlgBlt calls. See http://www.vbforums.com/showthread.p...=1#post5300117 for an example.

    If you just need to fill areas with solid colors or patterns you might consider FloodFill or ExtFloodFill calls.

  11. #11

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    Yes , 6 slots but they are not filled in sequence 1,2,3,4,5,6 As l have mentioned in post #4 above , the movement and endiing position of the token depends
    on the RND result of the rolled dice , which means that the token might make a full round without ending at the position where the gifts are .
    So all possibilities must be covered (1,2 - 1,3 - 1,4....... 2,3 - 2,4 - 2,5 ..... 3,4 - 3,5 ... 1,2,3 - 2,3,4 etc etc.
    l am not worried about making the 36 foreground GIFs , but about writing , not knowing as yet , how many IFs in the code .

  12. #12

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    Unfortunately , on trying to complete the "foreground" GIFs , l ended up with 62 combinations and not 36 as i was originlly thought .
    l hate to think of the number "conditions" , IFs , that l will have to deal with .

    l wish there was a UC that could render "foregroung" GIFs , one on top of another .
    Last edited by vbgeobas; Jul 11th, 2019 at 11:15 AM.

  13. #13
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    So nobody else came along to help out? Well we all get busy.

    Ok, you want to "merge 7 transparent images" now. And on top of that you want the positions of the ones on top to rotate around the center.

    Here's a quick demo based on stuff I have lying around from other demos. Please excuse the crudity of this model, I didn't have time to build it to scale or to paint it.

    Name:  sshot.png
Views: 98
Size:  2.5 KB

    If you really want to go further with this you might try posting in the Games and Graphics forum instead. I'm not really very deep into either topic myself.
    Attached Files Attached Files

  14. #14
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    5,740

    Re: Merge 2 transparent images

    Quote Originally Posted by vbgeobas View Post
    l thought something was missing somewhere . At least the two GIFS are rendered and can move around .
    Expecting to hear the not so good news , l tried to figure out how many "foreground" GIFS would be necessary and it wasn't very encouraging.
    You need about 36 of them for each token (player) and a heck of a lot of IFs in the code . Yet , there seems to be no other way .
    Either abandon the project , or take it slow .

    Thank you for your time and effort .
    dilettante already mentioned in his post that if you want more slices in your modified example, then you just need to add more images to the user control, i.e. the user control had this in the code
    Code:
    Private mGIF0 As StdPicture
    Private mGIF1 As StdPicture
    mGIF0 is your token and mGIF1 is your first slice.
    Your modified example is trying to add three slices, so you need to add two more StdPicture's for those two slices.
    Code:
    Private mGIF0 As StdPicture
    Private mGIF1 As StdPicture
    Private mGIF2 As StdPicture
    Private mGIF3 As StdPicture
    Then in your button clicks you would assign one slice image to mGIF1, the second to mGIF2, and the third to mGIF3.
    I assume you want six eventually, so you'll need to add 4,5 and 6.

    Then, you copy the property and drawing code for mGIF1, and paste it back in, and then modify it to address the appropriate piece.
    So, you end up with three sets of properties (in this example) for the three pieces and you draw the three pieces (if set) in the drawing code.

    I modified your example to do this for the three pieces you had designed.

    Now, I don't understand the requirement you say of having to have over 60 gifs, and a lot of if statements for the logic for all the combinations. You only need the six slice images, and you would reuse them for each token.
    When a piece reaches a corner, just check to see if the token has that slice already (check to see if it is nothing).

    To see multiple tokens in action, I modified your code a little. First I copied the User Control that was on the form and pasted it back and created a control array. I then pasted two more copies, so you have four tokens in the example now.

    I then changed the code in your button clicks to loop through the array, and the first token if finds that doesn't have that slice already present, it sets it and then exits the loop. This way, you see the given slice being added to each token one at a time when you press the button.

    Lastly, you don't need to load a copy of the gif in each of the tokens, i.e. don't load the yellow gif from resources for each token, otherwise you have four copies of the gif in memory. I changed the code to have an array of StdPicture, and just load the gifs once into that array.
    Then, when you click the button, it just sets the slice to the appropriate gif from that array. I believe that will have each token sharing the same gif.

    Check out the modifications against what you posted in post #7 and see if you understand what it is doing, and how to fit it into your game logic.
    Name:  LayeredGifs2.png
Views: 90
Size:  36.2 KB
    Attached Files Attached Files
    Last edited by passel; Jul 12th, 2019 at 01:18 AM.

  15. #15

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    As l was ready to give up , my last wish came true .

    Both suggestions that of @dilettente and the one which @passel modified @dilettante's code, work perfectly for my requirements .
    With a couple of additional lines of code in the UC and in the form achieved my goal in 15 minutes . All l have to do now is work on
    rest of the scenario of the project , after overcoming the hard part (for me) , with your help .

    Thank you very much both .

  16. #16
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    Ahh, I thought there was a requirement to add the colored "slices" to the "container" in arbitrary sequence. Like sometimes red first then yellow, etc. but other times perhaps green first... where "first" is some starting slot and then clockwise or counter-clockwise around.

    If each color can have a designated slot it gets much easier. No rotation of images around a center required at runtime.

  17. #17
    PowerPoster
    Join Date
    Feb 2006
    Posts
    20,922

    Re: Merge 2 transparent images

    Found a blunder in my post #13 demo that caused a bit of apparent "flattening" of the leading edge when dragging instances of UC (UC.ctl). Simple fix:

    Code:
    Private Sub UserControl_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)
        If Button = vbLeftButton Then
            With Extender
                .Move .Left + .Container.ScaleX(x - GrabX, ScaleMode, .Container.ScaleMode), _
                      .Top + .Container.ScaleY(y - GrabY, ScaleMode, .Container.ScaleMode)
            End With
            Refresh
        End If
    End Sub
    Adding the call to Refresh raises the necessary Paint events as the control is dragged.

  18. #18

    Thread Starter
    Member
    Join Date
    Oct 2018
    Location
    Athens
    Posts
    46

    Re: Merge 2 transparent images

    Although l tried it l did not notice anything , and of course that is because l used your version which was modified .

  19. #19
    PowerPoster
    Join Date
    Jun 2013
    Posts
    4,702

    Re: Merge 2 transparent images

    FWIW... I've used this scenario, to enhance the cGDIPlusCache-Helper a bit,
    so that this scenario can now be covered entirely with that antialiased working rendering-helper.

    The Demo is included as a separate Folder (5 Layered PNGs) in the most recent post of the GDIPlusCache-CodeBank-
    Thread here: http://www.vbforums.com/showthread.p...=1#post5402935

    Here a ScreenShot:


    HTH

    Olaf

  20. #20
    Frenzied Member wqweto's Avatar
    Join Date
    May 2011
    Posts
    1,801

    Re: Merge 2 transparent images

    JFYI: I just posted an AlphaBlendImage control in forum's CodeBank that supports alpha transparent PNGs and additionally has whole-image transparency and rotation.

    It's not as versatile as LaVolpe's AlphaImage but instead is aimed to be "Poor Man's Transparent Image Control" in a single file solution.

    cheers,
    </wqw>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width