Home
Search
 
What's New
Index
Books
Links
Q & A
Newsletter
Banners
 
Feedback
Tip Jar
 
C# Helper...
 
XML RSS Feed
Follow VBHelper on Twitter Follow VBHelper on Twitter
 
 
 
MSDN Visual Basic Community
 
 
 
 
 
TitleLet the user drag an image with transparent pixels over a background image in Visual Basic .NET
DescriptionThis example shows how to let the user drag an image with transparent pixels over a background image in Visual Basic .NET.
Keywordsgraphics, drag image, drag picture, image, picture, transparent, transparency, animation
CategoriesGraphics
 

This program contains a PictureBox with Image property set to the background image. The user can press the mouse down on any of the image's non-transparent pixels to drag the image.

The program stores the image's location in a Rectangle named SmileyLocation. When it starts, the program loads the image from a resource, uses its MakeTransparent method to make white pixels in the image transparent, and initializes the location.

 
' The smiley image.
Private Smiley As Bitmap

' The smiley image's location.
Private SmileyLocation As Rectangle

Private Sub Form1_Load(ByVal sender As System.Object, ByVal _
    e As System.EventArgs) Handles MyBase.Load
    ' Make the white pixels in the smiley transparent.
    Smiley = New Bitmap(My.Resources.smile)
    Smiley.MakeTransparent(Color.White)

    ' Set the smiley's initial location.
    SmileyLocation = New Rectangle(10, 10, Smiley.Width, _
        Smiley.Height)
End Sub
 
The PictureBox's Paint event handler simply draws the picture above the background.
 
' Draw the picture over the background.
Private Sub picCanvas_Paint(ByVal sender As Object, ByVal e _
    As System.Windows.Forms.PaintEventArgs) Handles _
    picBackground.Paint
    e.Graphics.DrawImage(Smiley, SmileyLocation)
End Sub
 
When the user presses mouse down over the PictureBox, the following MouseDown event executes.
 
' True when we are dragging.
Private Dragging As Boolean = False

' The offset from the mouse's down position
' and the picture's upper left corner.
Private OffsetX, OffsetY As Integer

' Start dragging the picture.
Private Sub picCanvas_MouseDown(ByVal sender As Object, _
    ByVal e As System.Windows.Forms.MouseEventArgs) Handles _
    picBackground.MouseDown
    ' See if we're over the picture.
    If (PointIsOverPicture(e.X, e.Y)) Then
        ' Start dragging.
        Dragging = True

        ' Record the offset from the mouse to the picture's
        ' origin.
        OffsetX = SmileyLocation.X - e.X
        OffsetY = SmileyLocation.Y - e.Y
    End If
End Sub
 
This code uses the PointIsOverPicture method described shortly to see if the mouse is over one of the image's non-transparent pixels. If it is, the code sets Dragging to true to indicate that a drag is started and saves the offset from the mouse's location to the image's location.

When the mouse moves, the following event handler executes.

 
' Continue dragging the picture.
Private Sub picCanvas_MouseMove(ByVal sender As Object, _
    ByVal e As System.Windows.Forms.MouseEventArgs) Handles _
    picBackground.MouseMove
    ' See if we're dragging.
    If (Dragging) Then
        ' We're dragging the image. Move it.
        SmileyLocation.X = e.X + OffsetX
        SmileyLocation.Y = e.Y + OffsetY

        ' Redraw.
        picBackground.Invalidate()
    Else
        ' We're not dragging the image. See if we're over
        ' it.
        Dim new_cursor As Cursor = Cursors.Default
        If (PointIsOverPicture(e.X, e.Y)) Then
            new_cursor = Cursors.Hand
        End If
        If (picBackground.Cursor <> new_cursor) Then
            picBackground.Cursor = new_cursor
        End If
    End If
End Sub
 
If a drag is in progress, the program uses the initial offset from the mouse to the image to update the image's current position. It then invalidates the PictureBox so its Paint event handler redraws it.

If no drag is in progress, the program uses PointIsOverPicture to see if the mouse is over a non-transparent pixel in the image. It then sets the PictureBox's cursor appropriately.

The PictureBox's MouseUp event handler simply stops the drag.

 
' Return true if the point is over the picture's current
' location.
Private Function PointIsOverPicture(ByVal x As Integer, _
    ByVal y As Integer) As Boolean
    ' See if it's over the picture's bounding rectangle.
    If ((x < SmileyLocation.Left) OrElse _
        (y < SmileyLocation.Top) OrElse _
        (x >= SmileyLocation.Right) _
        OrElse (y >= SmileyLocation.Bottom)) _
            Then Return False

    ' See if the point is above a non-transparent pixel.
    Dim i As Integer = x - SmileyLocation.X
    Dim j As Integer = y - SmileyLocation.Y
    Return (Smiley.GetPixel(i, j).A > 0)
End Function
 
 
Copyright © 1997-2010 Rocky Mountain Computer Consulting, Inc.   All rights reserved.
  Updated