[RESOLVED] PNG Transparency, Cannot Overlay

[Jeffulot]

Hello,

I've been wrestling with this for a few days now, and I'm not finding any solutions as of yet. I see a few people struggling with the same thing though, so I don't feel so bad.

-----------------------------------------
Overlay Texture Image (PNG)
OverlayTexture = "\shading.png"
Dim img As Graphics = CreateGraphics()
img.DrawImage(Image.FromFile(OverlayTexture), New Point(25, 160))
-----------------------------------------

This code throws the PNG up there fine with teh transparency portion looking good, as long as it's out away from my Picturebox contained inside a Panel.

When it intersects with the very image I'm trying to overlay, it just goes behind the panel/picturebox.

If I include it within the Picturebox at design time, I get the gray, and not transparent, background, so I'm attacking it at run-time. I saw some hints in other forums that this would be the approach to try.

Anyway, if anyone has any input on something to try, I would be very appreciative.

Humbly,

J

[kleinma]

Have you tried drawing both images you want to show via code? Draw the bottom one first, then draw the overlay one on top of it?

[jmcilhinney]

When it intersects with the very image I'm trying to overlay, it just goes behind the panel/picturebox.

Of course it does. You're drawing it on the form and the PictureBox is on top of the form, ergo your image is underneath the PictureBox. You should be drawing your overlay in the PictureBox's Paint event handler. You should NOT be creating a Graphics object yourself. The Paint event handler provides one for you.

[Jeffulot]

Hello, thank you for your replies.

I am happy to revert back to using a picturebox for my overlay/png. I tried that, and it was a solid image, ignoring the transparency.

Is there something I need to do at run-time after the fact once the picturebox is in place over the other?

J

[jmcilhinney]

You don't put one PictureBox on top of another. You use GDI+ to draw the overlay in the Paint event handler of whatever control you're drawing it on. Which control that is is up to you. It might be a PictureBox that displays the main image or it might be the form with GDI+ used to draw the main image too.

[Jeffulot]

Would you mind providing me with an example or the steps to achieve this?

J

[jmcilhinney]

Create an event handler for your control's Paint event. In that event handler call e.Graphics.DrawImage.

[Jeffulot]

I have put the drawing of the texture/png in the picturebox handle, I think.

Private Sub PictureBox2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox2.Click
OverlayTexture = "\shading.png"
Dim img As Graphics = CreateGraphics()
img.DrawImage(Image.FromFile(OverlayTexture), New Point(0, 0))
End Sub

If this is not how to achieve this, can someone outline for me the steps that need to be taken?

ADDITIONAL NOTE:
I need the original picturebox to move and be clipped by a panel, so that my field of view is limited to the panel area. I am trying to place a shading PNG texture with transparency on top of it.

Thank you in advance for any help.

J

[jmcilhinney]

Um, I've said a few times now that you need to handle the Paint event of the control, not the Click event. As I have also said, in the Paint event handler a Graphics object is provided for you. You do NOT create one yourself.

Double-clicking a control in the design window will only create a handler for that control's default event. That's of no use if you want to handle an event other than the default, which you do. To create an event handler you can either open the Properties window and click the Events button, then double-click the desired event, or else use the drop-down lists at the top of the code window.

[Jeffulot]

Thank you... I'll give that a go...

J

[jmcilhinney]

You should also not that you DEFINITELY do NOT want to be calling Image.FromFile in the Paint event handler. The Paint event is raised quite regularly and often, so you'd be creating Image objects over and over again for the same file. VERY inefficient! You would call Image.FromFile once and once only, assigning the Image object to a member variable. You'd then pass that member variable to the DrawImage method inside the Paint event handler.

[Jeffulot]

Thanks, that placed the texture/PNG on top nicely.

Is there a way to make it not move with the picturebox movement, and instead, just stay there as a mask/overlay while the picturebox moves within the panel?

Thanks again,

J

[kleinma]

you are doing the custom drawing of these images, so you are also specifying WHERE they are being drawn. You either specified an X/Y coordinate when you called DrawImage, or you specified a bounds rectangle to draw the image in. Adjusting that will offset your image when its drawn.

[Jeffulot]

I changed the image to be stored in OverlayTexture as per your advice, thanks.

e.Graphics.DrawImage(OverlayTexture, New Point(0, 0))

I placing the image out there with the above command. Could you more of what you've said above? I am not understanding it.

Is there a way to paint the image there and not have it move with the picturebox?

[kleinma]

if the image is being painted INSIDE the picturebox, then no, you can't move the picturebox without moving the image, that just doesn't make sense. It is like having a picture in a pictureframe, and saying you want to move the frame but not the picture.

Now, you can offset where the image is drawn inside the picturebox, to maybe offset the 2 images, so that it looks as though the 1 image is not moving.

When you draw your image with New Point(0,0) you are telling GDI+ to draw this image starting in the top left corner of the picturebox (coordinate 0/0)

If you were to say use New Point(100,100) it would draw be offset in the picturebox by 100 on both the x (left right) and y (up down) coordinate

You could keep track of the movement of the picturebox so you know how much you would need to offset the image drawing.

Of course I don't really know what you are trying to do here, so this all may be overkill.

[Jeffulot]

I need the transparent properties of the PNG to be on top of the imagery that is moving in the background. I need the texture to not move with the imagery contained in the picturebox.

This does seem like a crazy amount of effort for a simple concept, but I'm willing

Is there a way to place the PNG above the picturebox without having it be part of the picturebox?

J

[kleinma]

how are you moving the "imagery" in the background? via a timer/refresh of the form?

[Jeffulot]

yes, with a timer.

[kleinma]

so this timer is moving the actual picturebox location on the form, or just moving the image that is inside the picturebox? I am trying to understand the actual end result you are looking for here.

[Jeffulot]

Thank you.

The picturebox is inside a panel, thus clipping the field of view.

I'm moving the location of the picturebox, using picturebox.top, to achieve the movement. That part seems to be working fine.

J

[kleinma]

i don't suppose you can post a screenshot of your UI can you?

[Jeffulot]

There's nothing special about it. It's all just framework I'm using to get things working before going on to the design phase.

It's a form, with a small panel in the middle. The picture box is the same side and is inside of the panel.

I have the overlay starting at the top corner, but then the picturebox moves, the overlay moves with it.

If there is a way I can redraw the overlay inside the timer as well, I'm happy to try that.

[Jeffulot]

I'm sorry, I mispoke about the size of the picturebox. It's bigger than the panel, but only displays the field of view that the panel has.

[kleinma]

Of course you can...

You can draw as many images you want with the e.graphics.drawimage call. You just call it x number of times for x number of images you want to draw.

Just keep in mind that the images are drawn in the order you call them. So you would want to draw the background image first, then draw the foreground image on top.

[kleinma]

I'm sorry, I mispoke about the size of the picturebox. It's bigger than the panel, but only displays the field of view that the panel has.

that makes sense since a control can't be visibly bigger than its container.

[Jeffulot]

It's yelling at me:

In the timer, I put:
e.Graphics.DrawImage(OverlayTexture, New Point(0, 0))

It's saying: Graphics is not a member of System.EventArgs.

[dbasnett]

In the timer,...

timer events have timer event args, not graphics

[kleinma]

thats right it isn't.

The timer should be making a call to refresh the picturebox. That will make the picturebox's paint event fire, and that event has e.graphics as an event arg.

[Jeffulot]

It's not updating it from in the paint event. I only get one paint when it first loads.

When the picturebox moves, it's gone.

Is there another way I can MOVE the overlay image right after I mvoe the picturebox within the timer code?

J

[kleinma]

do you have any code in the paint event?

[Jeffulot]

yes, just the:
e.Graphics.DrawImage(OverlayTexture, New Point(x, y)) ' where x,y are my offset coords trying to put the image back after picturebox has moved

[kleinma]

So draw your background in that event too, add another call to e.graphics.drawimage and draw the background image however you want. Make sure you call it BEFORE calling DrawImage for your OverlayTexture.

[Jeffulot]

ok, I'll try that.... I have to step away, but I'll back on it later today.

Thank you very much for your help and patience.

J

[Jeffulot]

This will probably be a bad approach anyway though.

If the background has to redraw and the overlay has to redraw, there's going to be a flicker, I'd guess.

I really need the texture/PNG/overlay to be on top, and not move or change, and to just appear to be like glass with a texture.

[Jeffulot]

Would you mind giving me an example of how to move an image in a picture box while I'm also moving the picturebox?

' this is the stripped down code. it works and moves the picturebox, but I'm not getting the format right for the other image.
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
PictureBox2.Top = PictureBox2.Top - 5
'e.Graphics.DrawImage(OverlayTexture, New Point(0, 0))
End Sub

If I could get this code working, at least I'd be able to see if it would suffice to have the overlay/PNG draw on top of the pictrebox each time it moved.

J

[jmcilhinney]

The following code will draw an Image on a PictureBox in the same spot relative to the containing Panel regardless of the location of the PictureBox:

Private Sub PictureBox1_Paint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) Handles PictureBox1.Paint
    Dim imageLocation As New Point(10, 10)
 
    'Translate the image location from Panel coordinates to PictureBox coordinates.
    imageLocation = Me.PictureBox1.PointToClient(Me.Panel1.PointToScreen(imageLocation))
 
    'Draw the image.
    e.Graphics.DrawImage(My.Resources.OverlayImage, imageLocation)
End Sub

So, we first create a Point relative to the Panel. We then call the Panel's PointToScreen method, which returns the same Point relative to the entire screen. We then pass that result to the PictureBox's PointToClient method, which returns the same Point relative to the PictureBox. You then use that Point to draw the Image on the PictureBox and it will appear at (10, 10) relative to the Panel.

[Jeffulot]

Thank you...

That actually gave me some interesting results, and it hopefully is getting me closer

The overlay/PNG did start out looking good, but as soon as my picturebox moves, I think the overlay/PNG moved too, and it stamped another one on it.

Can you suggest a way to remove the old one before the new one get displayed? THat might give the appearance of the overlay/PNG being a window that's not moving.

Many thanks.

J

[jmcilhinney]

Here's how GDI+ plus works. As changes occur to a control it remembers what parts of its display have changed. When it needs to be repainted it raises its Paint event and the code in its OnPaint method and all its Paint event handlers will create a picture of the control. That all happens quite quickly. The next parts is to actually draw that picture to the screen. That's the slow part. To make things more efficient, the control will only draw the parts of that picture to the screen that cover the areas that it knows have changed. In that way it draws as few pixels to the screen as possible and repainting occurs faster.

Now, what's happening in your case is that the PictureBox is only redrawing the area of itself that it knows has changed. Your overlay will get drawn anew on that portion of the control. The part that hasn't changed will remain as it was, thereby retaining the previously drawn image.

What you need to do is tell the PictureBox that the area that contains the old image has changed, so that it will repaint that area. To do that you call its Invalidate method. If you don't pass an argument then the control will repaint its entire display. That may not be an issue but it may also cause flicker if the area is large and it happens often. The preferred way is to create the smallest Rectangle or Region that contains the entire image and pass that. That shouldn't be too hard because you know the location you drew the image at and you also know its size. Creating a Rectangle from that should not be too hard.

[Jeffulot]

Ah, I think I get it...

Would I need to call the invalidate from within the paint action or within the timer?

I will keep in mind the rectangle issue and address that if it's too much for it.

J

[Jeffulot]

ok, that worked very nicely. I'm on my way to applying it, and it's behaving just right.

I'm starting to understand this a bit better...

Thanks so much.

J