Results 1 to 12 of 12

Thread: How can I use a clipping mask image over another image?

  1. #1

    Thread Starter
    Member
    Join Date
    Dec 2014
    Posts
    57

    Question How can I use a clipping mask image over another image?

    I have a picturebox over a picturebox. pb1 is a png file. I filled the image with a solid color and cut out a square for the transparent region. pb2 is under pb1 and I load an image into pb2. The object is to move the pb2 around under pb1. The problem is that when I set pb1's parent to = pb2, they seem to fuse together, so if I move pb2, pb1 moves. Can this be done?

    Code:
    Public Class Form1
    
        Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Label1.Parent = PictureBoxClipper
            Me.KeyPreview = True
        End Sub
    
        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
            'Clear the default name
            OpenFileDialog1.FileName = ""
            'Set the Filter.
            OpenFileDialog1.Filter = "All Image Types|*.bmp;*.gif;*.jpg;*.jpeg;*.png;*.tif;*.tiff|BMP|*.bmp|GIF|*.gif|JPG|*.jpg;*.jpeg|PNG|*.png|TIFF|*.tif;*.tiff"
            Me.OpenFileDialog1.ShowDialog()
            Me.PictureBoxZoom.ImageLocation = Me.OpenFileDialog1.FileName()
            PictureBoxClipper.Parent = PictureBoxZoom
            Me.PictureBoxZoom.Show()
    
        End Sub
    
    
        Private Sub Form1_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown
            Select Case e.KeyCode
                Case Keys.Left
                    Me.PictureBoxZoom.Left -= 1
                Case Keys.Up
                    Me.PictureBoxZoom.Top -= 1
                Case Keys.Right
                    Me.PictureBoxZoom.Left += 1
                Case Keys.Down
                    Me.PictureBoxZoom.Top += 1
            End Select
        End Sub
    
        
        Private Sub Button1_PreviewKeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PreviewKeyDownEventArgs) Handles Button1.PreviewKeyDown
            Select Case e.KeyCode
                Case Keys.Left, Keys.Up, Keys.Right, Keys.Down
                    e.IsInputKey = True
            End Select
        End Sub
    End Class

  2. #2
    Still learning kebo's Avatar
    Join Date
    Apr 2004
    Location
    Gardnerville,nv
    Posts
    3,757

    Re: How can I use a clipping mask image over another image?

    They "fuse" together because you have established a child/parent relationship. It's like the little joey jumping into mama's pouch; where ever mama goes, joey goes too.

    You need to have both picture boxes parented to the form, then set the Z-order (i.e BringToFront) so that pb1 is on top.
    Process control doesn't give you good quality, it gives you consistent quality.
    Good quality comes from consistently doing the right things.

    Vague general questions have vague general answers.
    A $100 donation is required for me to help you if you PM me asking for help. Instructions for donating to one of our local charities will be provided.

    ______________________________
    Last edited by kebo : Now. Reason: superfluous typo's

  3. #3

    Thread Starter
    Member
    Join Date
    Dec 2014
    Posts
    57

    Re: How can I use a clipping mask image over another image?

    That doesn't work. As soon as I change the parent from pb1 to form, I lose transparency. I can only see the form behind the transparency, not pb2.

  4. #4
    Still learning kebo's Avatar
    Join Date
    Apr 2004
    Location
    Gardnerville,nv
    Posts
    3,757

    Re: How can I use a clipping mask image over another image?

    Quote Originally Posted by teamster View Post
    That doesn't work. As soon as I change the parent from pb1 to form, I lose transparency. I can only see the form behind the transparency, not pb2.
    O yea... the whole transparency thing.

    One approach would be to keep the child/parent relationship and when you move the parent picture box one way, move the child the opposite way by the same amount.
    Process control doesn't give you good quality, it gives you consistent quality.
    Good quality comes from consistently doing the right things.

    Vague general questions have vague general answers.
    A $100 donation is required for me to help you if you PM me asking for help. Instructions for donating to one of our local charities will be provided.

    ______________________________
    Last edited by kebo : Now. Reason: superfluous typo's

  5. #5

    Thread Starter
    Member
    Join Date
    Dec 2014
    Posts
    57

    Re: How can I use a clipping mask image over another image?

    That could work. I'll try that.

  6. #6

    Thread Starter
    Member
    Join Date
    Dec 2014
    Posts
    57

    Re: How can I use a clipping mask image over another image?

    Nope, what ever I do to the parent, the child stays in tow. I could tell it to move the child off the page and it won't move. I am beginning to think I am asking the impossible out of VB again.

  7. #7
    Still learning kebo's Avatar
    Join Date
    Apr 2004
    Location
    Gardnerville,nv
    Posts
    3,757

    Re: How can I use a clipping mask image over another image?

    drop 2 picture boxes on an empty form and try this code. It does what you are asking... at least it does what I think you are asking (I've gotten my thinking off before)

    vb.net Code:
    1. Public Class Form1
    2.     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    3.  
    4.         Me.KeyPreview = True
    5.         PictureBox1.BackColor = Color.Black
    6.         PictureBox2.BackColor = Color.White
    7.         PictureBox2.Parent = PictureBox1
    8.  
    9.     End Sub
    10.  
    11.  
    12.  
    13.         Private Sub Form1_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown
    14.             Select Case e.KeyCode
    15.                 Case Keys.Left
    16.                 Me.PictureBox1.Left -= 1
    17.                 Me.PictureBox2.Left += 1
    18.  
    19.                 Case Keys.Up
    20.                 Me.PictureBox1.Top -= 1
    21.                 Me.PictureBox2.Top += 1
    22.             Case Keys.Right
    23.                 Me.PictureBox1.Left += 1
    24.                 Me.PictureBox2.Left -= 1
    25.                 Case Keys.Down
    26.                 Me.PictureBox1.Top += 1
    27.                 Me.PictureBox2.Top -= 1
    28.             End Select
    29.         End Sub
    30.  
    31.     End Class
    btw, there are only a few thing that I have ever needed to do in software that I couldn't get vb to do with a big enough crowbar.
    Last edited by kebo; Jul 13th, 2015 at 09:27 AM.
    Process control doesn't give you good quality, it gives you consistent quality.
    Good quality comes from consistently doing the right things.

    Vague general questions have vague general answers.
    A $100 donation is required for me to help you if you PM me asking for help. Instructions for donating to one of our local charities will be provided.

    ______________________________
    Last edited by kebo : Now. Reason: superfluous typo's

  8. #8

    Thread Starter
    Member
    Join Date
    Dec 2014
    Posts
    57

    Re: How can I use a clipping mask image over another image?

    With the exception of changing color I did that and it would not move. Here is my source code

  9. #9
    Still learning kebo's Avatar
    Join Date
    Apr 2004
    Location
    Gardnerville,nv
    Posts
    3,757

    Re: How can I use a clipping mask image over another image?

    It's better to post the code rather than link to it. Most people won't follow the link.
    Process control doesn't give you good quality, it gives you consistent quality.
    Good quality comes from consistently doing the right things.

    Vague general questions have vague general answers.
    A $100 donation is required for me to help you if you PM me asking for help. Instructions for donating to one of our local charities will be provided.

    ______________________________
    Last edited by kebo : Now. Reason: superfluous typo's

  10. #10
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: How can I use a clipping mask image over another image?

    Sounds like you want a border around the moving image.
    The simplest thing is to put a panel on the form and set its background color to what you want for your border.
    Put another panel in the first panel to be your square cutout.
    Put a picturebox in the inner panel.
    Move the picturebox around.
    Last edited by passel; Jul 13th, 2015 at 12:59 PM.

  11. #11
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: How can I use a clipping mask image over another image?

    Quote Originally Posted by kebo View Post
    It's better to post the code rather than link to it. Most people won't follow the link.
    ... particularly since the zip contains executables (.exe file etc.). Unfortunately there is a history of malware being spread that way, so the Forum rules ban posting executables. You should at least exclude the Bin and Obj folders from the zip file, but it's usually better to post just the code that matters and not expect people to download and unpack a zip file just to see if they might want to help you.

    A few comments on the code:

    1. Teamster was correct to put KeyPreview=True in the Load sub, since otherwise the Form won't raise mouse events when the pointer is over the PictureBoxes.

    2. Since the PictureBoxes have apparently been added in the designer, it's probably necessary to change PictureBox2's location in the Load sub so that it is relative to PictureBox1.

    3. The BackColor of PictureBox2 must be Color.Transparent if the parent is to show through the "hole" in the mask image. Alternatively, set the Region property of PictureBox2 to exclude the clip rectangle.

    4. I just saw Passel's idea, which should work. But the original method and Kebo's version have the advantage that the frame could be semi-transparent, which makes cropping easier since the user can see what is being excluded.

    BB

  12. #12
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: How can I use a clipping mask image over another image?

    Yes, its not really clear to me what the purpose or desired look is. I couldn't look at the link to the source from work anyway.
    I didn't get the impression from the clipping that the purpose was to designate a cropping rectangle, although it could very well be.
    I guess what caught my eye was the pictureboxzoom, and made the assumption this was like a magnifier type situation.
    In either case, I wouldn't have gone the multi-picturebox route.

    That being said, kebo's code could be slightly modified to use the second picturebox as a source to draw the image from and its location as where to draw, and its size as how much to draw. Add the clipping region as you said, and filling the first picturebox with a translucent color, and you have the translucent border.
    In "real life", you wouldn't use the second picturebox, just use a bitmap and location to draw into the one picturebox.
    The moving of picturebox1 over picturebox2 seems like the odd part to me. You would usually leave Picturebox1 as your viewport and move picturebox2 underneath, which is what my suggestion would do, which is not what the OP has describe.

    The modification of kebo's code (you should load an image in Picturebox2).
    Code:
    Public Class Form1
    
      Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    
        Me.KeyPreview = True
        PictureBox1.BackColor = Color.Black
        PictureBox2.BackColor = Color.White
        PictureBox2.Parent = PictureBox1
        PictureBox2.Visible = False
      End Sub
    
      Private Sub Form1_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown
        Select Case e.KeyCode
          Case Keys.Left
            Me.PictureBox1.Left -= 1
            Me.PictureBox2.Left += 1
    
          Case Keys.Up
            Me.PictureBox1.Top -= 1
            Me.PictureBox2.Top += 1
          Case Keys.Right
            Me.PictureBox1.Left += 1
            Me.PictureBox2.Left -= 1
          Case Keys.Down
            Me.PictureBox1.Top += 1
            Me.PictureBox2.Top -= 1
        End Select
        PictureBox1.Invalidate()
      End Sub
    
      Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Dim pb As PictureBox = PictureBox1
        Dim clipRect As New Rectangle(CInt(pb.ClientSize.Width * 0.1), CInt(pb.ClientSize.Height * 0.1),
                                      CInt(pb.ClientSize.Width * 0.8), CInt(pb.ClientSize.Height * 0.8))
        With PictureBox2
          e.Graphics.DrawImage(PictureBox2.Image, .Left, .Top, .Width, .Height)
        End With
        e.Graphics.SetClip(clipRect, Drawing2D.CombineMode.Exclude)
        Using aBrush As New SolidBrush(Color.FromArgb(64, Color.Black))
          e.Graphics.FillRectangle(aBrush, pb.ClientRectangle)
        End Using
      End Sub
    End Class
    p.s. I also like to move a little faster, so add the following sub so you can drag the window around quickly. You can always use the keys to fine tune the position.
    Code:
      Private Sub PictureBox1_MouseMove(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        Static lPos As Point
        If e.Button = Windows.Forms.MouseButtons.Left Then
          Dim delta As New Size(e.X - lPos.X, e.Y - lPos.Y)
          PictureBox1.Location += delta
          PictureBox2.Location -= delta
          PictureBox1.Invalidate()
        Else
          lPos = e.Location
        End If
      End Sub
    Last edited by passel; Jul 13th, 2015 at 04:41 PM.

Tags for this Thread

Posting Permissions

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



Click Here to Expand Forum to Full Width