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

---

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.

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.

Quote:

---

Originally Posted by teamster

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.

That could work. I'll try that.

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.

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:

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
 
    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
        End Sub
 
    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.

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

It's better to post the code rather than link to it. Most people won't follow the link.

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.

Quote:

---

Originally Posted by kebo

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

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

---