Overlay an Image

A common, yet powerful use of ImgX is to overlay one image on top of another. This can be done behind the scenes with no user interaction, or with user interaction allowing the top image to dragged over the bottom image, then when complete, actually merging the images. This topic discusses both. If you do not need user interaction, skip to Overlaying the Image.

Float the Top Image Over the Bottom Image

The simplest and most effective way to float one image on top of another is to use two ImgX Controls, one for the bottom image, and another for the top image. You will interact with the Mouse events on the top image to actually move the image based on the mouse position. The following example demonstrates how this task is accomplished. Simply drop two ImgX Controls onto your form, one for the bottom image, and another for the top image. In the Form_Load event, load the image files from a file.

Option Explicit
' ImgXCtrl1 is the bottom image.
' ImgXCtrl2 is the top image to move.

Dim m_XPos As Long
Dim m_YPos As Long
Dim m_LastX As Long
Dim m_LastY As Long
Dim m_bDragging As Boolean

Private Sub Form_Load()
    ImgXCtrl1.Import.FromFile "c:\bottomimage.jpg"
    ImgXCtrl2.Import.FromFile "c:\topimage.jpg"
End Sub

Private Sub ImgXCtrl2_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    m_LastX = ImgXCtrl2.Left
    m_LastY = ImgXCtrl2.Top
    m_XPos = X
    m_YPos = Y
    m_bDragging = True
End Sub

Private Sub ImgXCtrl2_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If m_bDragging Then
        ImgXCtrl2.Move m_LastX + X - m_XPos, m_LastY + Y - m_YPos
        m_LastX = ImgXCtrl2.Left
        m_LastY = ImgXCtrl2.Top
    End If
End Sub

Private Sub ImgXCtrl2_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    m_bDragging = False
End Sub

This method of floating an image does not take into account alpha in the image, and does not blend it with the background. You can do this but it is a bit more difficult. Instead of using a second ImgX Control, you should use an ImgX DLL and render the image onto the bottom control's device context in the controls PaintAfter event and set the MergeAlpha parameter to true. You will notice some flashing with this method or blending the image.

Overlay Top Image Onto the Bottom Image

Once the position of the top image has been defined relative to the bottom image, either through user interaction as in the above example or from background processing, the top image can be merged with the bottom image. ImgX has three methods for overlaying images:

Draw.Image for overlaying optionally setting a transparent color or overall transparency.
Draw.ImageWithAlpha for alpha blending the top image onto the bottom image using the alpha channel in the top image. Make sure the top image is either 32-bit RGBA or 8-bit with alpha in the palette.
Draw.ImageWithMergeOptions for merging the top image onto the bottom image, specifying special merging options for each pixel. For instance, AND will logically AND the top and bottom pixels. Difference will subtract the bottom pixel value from the top pixel value. Some interesting effects can be obtained using this overlay method.