erasing parts of an image loaded on a panel

Question

0.00/5 (No votes)

See more:

Hi,I have a panel and I have set the background image of my panel with myImage1.
Then I have loaded another image(named myImage2) on my panel.Here is the code:

panel1.BackgroundImage = myImage1;
private void drawP_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.DrawImage(myImage2, new Point(0, 0));
 }

Now I want to erase parts of the myImage2 by mouse(dragging on the panel) so that myImage1 can be seen after erasing.
How can I do that?
Thanks for your attention.
updated:I wrote the following code by using OriginalGriff's answer .This code does nothing and only shows the picture in a panel.I know I din't use his answer well but it's all I could do.Please correct it if possible.Thanks again

Image mySpareImage;
       Image myImage;


       private void Form1_Load(object sender, EventArgs e)
       {
           myPanel.BackgroundImage = Image.FromFile(@"E:\C#\for ore project\p\tt.jpg");
           mySpareImage = Image.FromFile(@"E:\C#\for ore project\p\1234.jpg");
           myClearBit.MakeEmpty();
           myImage = Image.FromFile(@"E:\C#\for ore project\p\tt.jpg");
           myPanel.Width = myImage.Width;
           myPanel.Height = myImage.Height;
       }
       private Region myClearBit = new Region();
       private void myPanel_Paint(object sender, PaintEventArgs e)
       {
           e.Graphics.ExcludeClip(myClearBit);
           e.Graphics.DrawImage(mySpareImage, new Point(0, 0));

           e.Graphics.SetClip(myClearBit, CombineMode.Replace);
           e.Graphics.DrawImage(myImage, new Point(0, 0));
       }
       private void myPanel_MouseDown(object sender, MouseEventArgs e)
       {
           myClearBit.Union(new Rectangle(e.X - 5, e.Y - 5, 10, 10));
           myPanel.Invalidate();
       }
       private void myPanel_MouseMove(object sender, MouseEventArgs e)
       {
           myClearBit.Union(new Rectangle(e.X - 5, e.Y - 5, 10, 10));
           myPanel.Invalidate();
       }
       private void button1_Click(object sender, EventArgs e)
       {
           if (openFileDialog1.ShowDialog() == DialogResult.OK)
           {
               Bitmap bm = new Bitmap(openFileDialog1.FileName);
               myImage = (Image)bm;
           }
       }

       public class MyPanel : Panel
       {
           protected override void OnPaintBackground(PaintEventArgs e)
           {
               // Prevent background clearing
           }
                       //    e.Graphics.ExcludeClip(myClearBit);
        }

Posted 13-Dec-11 1:14am

ready to learn

Updated 17-Dec-11 6:23am

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2011-12-17T23:28:00

I can't be here all the time, unfortunately, I do have other things to do...
I don't quite see why you are having a problem here, so I have started a new solution to explain it step by step.

What I did:

Create a new project from scratch: Winforms, C#.

Add a class to the project: MyPanel, which is derived from Panel.
The sole purpose of the class is to allow me to prevent the panel background from being erased.

C#

public class MyPanel : Panel
    {
    protected override void OnPaintBackground(PaintEventArgs e)
        {
        // Do not erase the background
        }
    }

Build the project, and MyPanel should appear my magic in your toolbox.
Add MyPanel to your Form in the designer, and also add your two buttons. Call the MyPanel "myPanel" and the buttons "butLoadBackImage" and "butLoadFrontImage".
Add a line to the using statements at the top of the file:

C#

using System.Drawing.Drawing2D;

Add three class level variables to the form:

C#

private Image myBackImage;
private Image myFrontImage;
private Region myClearBit = new Region();

Your form should handle the Load event (double click the form background in the desginer):

C#

private void Form1_Load(object sender, EventArgs e)
    {
    myBackImage = new Bitmap(10, 10);
    myFrontImage = new Bitmap(10,10);
    myClearBit.MakeEmpty();
    }

Double click each button in the designer, to add a handler:

C#

private void butLoadBackImage_Click(object sender, EventArgs e)
    {
    myBackImage = Image.FromFile(@"D:\Temp\MyPic.jpg");
    myClearBit.MakeEmpty();
    myPanel.Invalidate();
    }

private void butLoadFrontImage_Click(object sender, EventArgs e)
    {
    myFrontImage = Image.FromFile(@"D:\Temp\MyOtherPic.jpg");
    myClearBit.MakeEmpty();
    myPanel.Invalidate();
    }

Go back to the designer. single click the panel, and look at the Properties Pane. Click the Events button (it looks like a lightning bolt). Double click on the MouseDown event to add a handler, then do the same for the MouseMove and Paint events.

C#

private void myPanel_MouseDown(object sender, MouseEventArgs e)
    {
    myClearBit.Union(new Rectangle(e.X - 5, e.Y - 5, 10, 10));
    myPanel.Invalidate();
    }

private void myPanel_MouseMove(object sender, MouseEventArgs e)
    {
    myClearBit.Union(new Rectangle(e.X - 5, e.Y - 5, 10, 10));
    myPanel.Invalidate();
    }

private void myPanel_Paint(object sender, PaintEventArgs e)
    {
    e.Graphics.ExcludeClip(myClearBit);
    e.Graphics.DrawImage(myFrontImage, new Point(0, 0));
    e.Graphics.SetClip(myClearBit, CombineMode.Replace);
    e.Graphics.DrawImage(myBackImage, new Point(0, 0));
    }

Run the application.
You should find it works for you as well.

Derek Henderson · Answer 2 · 2011-12-13T01:28:00

Solution 1

Use the mousedown event to get start of area, (you can use mouse move to draw a selection rectangle, then on mouseup event gives the end of rectangle, then simply use the draw rectangle option to fill to the back colour ( or in your case use that rectangle to copy the section of image1 into image2 giving the illusion on revealing image 1).

Derek

Posted 13-Dec-11 1:28am

Derek Henderson

Updated 13-Dec-11 1:31am

v2

Comments

ready to learn 13-Dec-11 8:20am

can you explain by giving codes please?

OriginalGriff · Answer 3 · 2011-12-13T01:37:00

Probably the easiest way is to define a class level region, and add to it in your mouse down event. If you then use ExcludeClip in your paint routine, the new image will not be drawn in those areas.

C#

private void frmMain_Load(object sender, EventArgs e)
    {
    myPanel.BackgroundImage = Image.FromFile(@"D:\Temp\MyPic.jpg");
    mySpareImage = Image.FromFile(@"D:\Temp\MyOtherPic.jpg");
    myClearBit.MakeEmpty();
    }
private Region myClearBit = new Region();
private void myPanel_Paint(object sender, PaintEventArgs e)
    {
    e.Graphics.ExcludeClip(myClearBit);
    e.Graphics.DrawImage(mySpareImage, new Point(0, 0));
    }

private void myPanel_MouseDown(object sender, MouseEventArgs e)
    {
    myClearBit.Union(new Rectangle(e.X - 5, e.Y - 5, 10, 10));
    myPanel.Invalidate();
    }

private void myPanel_MouseMove(object sender, MouseEventArgs e)
    {
    myClearBit.Union(new Rectangle(e.X - 5, e.Y - 5, 10, 10));
    myPanel.Invalidate();
    }

You may have to play with this, as it will probably flash horribly!
I would be tempted to keep two regions, one "On" and one "Off" and exclude from one when you add to the other. Then instead of using the background, I would draw one picture in each region.

"It's obvious that I don't want my image to flash horrible.How can I have two regions? and how should I use them? please guide me as you alwase did."

Thinking about it, you don't need a second region.
Construct a MyPanel Class (you want to override the back ground paint, to stop it ever occurring)

C#

public class MyPanel : Panel
     {
     protected override void OnPaintBackground(PaintEventArgs e)
         {
         // Prevent background clearing
         }
     }

Replace your panel with a MyPanel.
Then, just draw as above, but with two lines added to the Paint event handler:

C#

private void myPanel_Paint(object sender, PaintEventArgs e)
    {
    e.Graphics.ExcludeClip(myClearBit);
    e.Graphics.DrawImage(mySpareImage, new Point(0, 0));
    e.Graphics.SetClip(myClearBit, CombineMode.Replace);
    e.Graphics.DrawImage(myImage, new Point(0, 0));
    }

All you have to do is load myImage with the image you used to use as the background, and you are off!

The ExcludeClip method removes all but the bits you have moved the mouse over, the SetClip only allows those bits to be drawn on.

erasing parts of an image loaded on a panel

3 solutions

Solution 3

Solution 1

Solution 2

Add your solution here

Preview 0