Solved

How can I make the picture or text I am dragging on top of a larger picture semi transparent

Posted on 2009-06-29
9
187 Views
Last Modified: 2012-05-07
In the last question you showed me how to drag 1 image on top of a larger image is it possible to make the draggable image semi transparent so you can see the bottom image through it some what?
0
Comment
Question by:Dov_B
  • 4
  • 3
  • 2
9 Comments
 
LVL 15

Expert Comment

by:mohan_sekar
ID: 24739548
Use
filter: alpha(opacity = 100); - for Internet Explorer
    -moz-opacity: 1.0; - for Firefox
0
 
LVL 15

Expert Comment

by:mohan_sekar
ID: 24739563
Sorry, I thought the question was posted in asp.net zone!
0
 
LVL 85

Expert Comment

by:Mike Tomlinson
ID: 24739614
The crux of the question:

    "...is it possible to make the draggable image semi transparent so you can see the bottom image through it some what?"

My answer:

   Yes...and No.

Transparency in .Net is a funny beast.   =\

(a) If you want to keep each overlaid image in its own container (picturebox) then you have to place it into its OWN window (borderless form) and literally "float" the image OVER the original form.  This allows you to set the Opacity() property of the floating window to less than 1 thus making it semi-transparent.  So you would create the new form, set the image and opacity, and then calculate the necessary location to make it appear in the correct position relative to the original form.  This obviously brings up a slew of other issues that you must now deal with such as "syncing" the movement of all the overlay windows with the main form when it is moved/resized by the user.  The overlay form must be limited to move "within" the confines of the original image as well.  You must also setup communication between the forms so that you can make things happen in the main form in response to the overlay forms.  The advantage to this approach is that it is relatively easy to MOVE the smaller image around by simply moving the overlay form itself.

(b) Another option is to build ONE composite image consisting of the original image and then the smaller images drawn on top.  With Graphics.DrawImage() it is possible to specify an alpha channel which would blend the smaller image on top of the underlying image.  The disadvantage here is that it now becomes difficult to seamlessly move the image around in response to user interaction since now the entire image has to be REDRAWN everytime you want to move just one image.  This can be a processor intensive operation and may cause some "sluggishness" if you wanted to let a user drag an image around in real time.  This could be alleviated by not dragging the actual image around but instead making the user drag around just a rectangle border (think rubberbanding!).

Which approach do you want to explore?...
0
 

Author Comment

by:Dov_B
ID: 24739792
gee...I am not sure
I guess either option a or
option b but moving just the rectangle bordere
either way thank you
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 85

Expert Comment

by:Mike Tomlinson
ID: 24740151
Basically there isn't an "easy" solution here and integrating either concept into an existing project will probably require a lot of code changes.

So let's take baby steps shall we?  I'll post up a simplified example showing how to draw a smaller image with semi-transparency on top of a larger image and then we'll go from there...
0
 

Author Comment

by:Dov_B
ID: 24740587
thank you
0
 
LVL 85

Accepted Solution

by:
Mike Tomlinson earned 500 total points
ID: 24741199
Try this out with a BLANK form...

Select a Background Image when the form opens then Double Click somewhere on the image and select a smaller image to "overlay" on it:
Imports System.Drawing.Imaging

Public Class Form1
 

    Private WithEvents PB As New PictureBox
 

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        PB.SizeMode = PictureBoxSizeMode.Normal

        PB.Dock = DockStyle.Fill

        Me.Controls.Add(PB)

    End Sub
 

    Private Sub Form1_Shown(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Shown

        SelectBackgroundImage()

    End Sub
 

    Private Sub SelectBackgroundImage()

        Using ofd As New OpenFileDialog

            With ofd

                .Title = "Select a BACKGROUND Image"

                .Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"

                If .ShowDialog = Windows.Forms.DialogResult.OK Then

                    Try

                        Using fs As New System.IO.FileStream(.FileName, IO.FileMode.Open)

                            PB.Image = Image.FromStream(fs)

                        End Using

                    Catch ex As Exception

                        MessageBox.Show("Image File" & .FileName, "Error Opening Image File", MessageBoxButtons.OK, MessageBoxIcon.Error)

                    End Try

                End If

            End With

        End Using

    End Sub
 

    Private Sub PB_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles PB.DoubleClick

        If Not IsNothing(PB.Image) Then

            Dim pt As Point = PB.PointToClient(Cursor.Position)

            Using ofd As New OpenFileDialog

                With ofd

                    .Title = "Select a smaller OVERLAY Image"

                    .Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"

                    If .ShowDialog = Windows.Forms.DialogResult.OK Then

                        Dim cm As New ColorMatrix

                        cm.Matrix33 = 0.5 ' values range from 0 --> 1

                        Dim IA As New ImageAttributes

                        IA.SetColorMatrix(cm)
 

                        Try

                            Dim overlay As New Bitmap(.FileName)

                            Dim bmp As New Bitmap(PB.Image)

                            Using G As Graphics = Graphics.FromImage(bmp)

                                G.DrawImage(overlay, New Rectangle(pt, overlay.Size), 0, 0, overlay.Width, overlay.Height, GraphicsUnit.Pixel, IA)

                            End Using

                            PB.Image = bmp

                        Catch ex As Exception

                            MessageBox.Show(ex.ToString, "Error Adding Overlay")

                        End Try

                    End If

                End With

            End Using

        Else

            MessageBox.Show("Please select a background image first...")

            SelectBackgroundImage()

        End If

    End Sub
 

End Class

Open in new window

0
 

Author Comment

by:Dov_B
ID: 24741273
very cool
thanks
I will be gone for about an hour
0
 

Author Closing Comment

by:Dov_B
ID: 31599602
Sorry away so long
I am asking a related question if you get a chance to look at it
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Well, all of us have seen the multiple EXCEL.EXE's in task manager that won't die even if you call the .close, .dispose methods. Try this method to kill any excels in memory. You can copy the kill function to create a check function and replace the …
Since .Net 2.0, Visual Basic has made it easy to create a splash screen and set it via the "Splash Screen" drop down in the Project Properties.  A splash screen set in this manner is automatically created, displayed and closed by the framework itsel…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Internet Business Fax to Email Made Easy - With  eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, f…

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

29 Experts available now in Live!

Get 1:1 Help Now