Placing a filter on Image

Hi all, I am a beginner in C# but somehow it is required of me to use C# to create a presentable GUI that will place a movable filter on to an image. I did post a different topic previously however, I thought that someone might be able to help me better, if I describe the task at hand in more detail.

What I wish to do is load an image to a picturebox. Then place black plane with a circular hole of a specified radius. So the final picture will be only viewable via this little hole and everything else will be black. Now this hole needs to traverse line by line such that at the end the whole image would have been presented to the user. The time it takes to traverse to the end should be made variable.

I thought of doing the above task by drawing a circle with a pen that has a very large width. And then refreshing the picturebox before the next circle is drawn. However, this caused too much flickering and since I am truly a beginner in both GDI+ as well as C#, I thought there would a much better way of doing this task.

I also tried to pre-sample all the required images, however, as the radius gets smaller there were too many images to store in advance and the time for it process was extremely long. I also tried to create an array of pixels that will be ANDed with the image but I could not get too far with it, for I am currently lost in regards to where to start from.

Any kind of help will be greatly appreciated.

Thank you all for reading this, and also thanks in advance.


Answer this question

Placing a filter on Image

  • BDev13

    Ljung,
    to reduce flickering, you should make sure your controls use double buffering.

    As for your problem, you might get interesting results using regions. You don't need to preload small images as you only draw what you need. Try the following example:

    private Point CurrentCoords;
    private int Radius = 50;

    private void pictureBox1_Paint (object sender, PaintEventArgs e) {
    Graphics g = e.Graphics;
    Rectangle rect =
    new Rectangle (CurrentCoords.X - Radius, CurrentCoords.Y - Radius, Radius * 2, Radius * 2);
    g.DrawImage (pictureBox1.Image, rect, rect,
    GraphicsUnit.Pixel);
    GraphicsPath path =
    new GraphicsPath ();
    path.AddEllipse (rect);
    Region r =
    new Region (pictureBox1.ClientRectangle);
    r.Exclude (path);
    g.IntersectClip (r);
    g.FillRectangle (Brushes.Black, pictureBox1.ClientRectangle);
    }

    private void pictureBox1_MouseMove (object sender, MouseEventArgs e) {
    if (CurrentCoords != e.Location) {
    CurrentCoords = e.Location;
    pictureBox1.Invalidate ();
    }
    }

    To make it work, make sure you assign an image to pictureBox1.
    This will make a "searchlight effect" when you move your mouse on the picture box. To get what you wanted, you can use a timer instead and animate CurrentCoords.

    HTH
    --mc


  • Abhayc

    Hi Mario

    Thank you very much for your help, that is very very close to what I wanted. However, I have one problem that I can not seem to get around. When I load an image to a picturebox where the picturebox has been set to sizemode of stretchimage, and the image itself is quite small, I seem to get two different pictures under the black plane. A small one on top of the larger one. Is there any way of getting rid of this smaller one

    Also,( this is a different question that;s been bothering me for a while) when I try to sketch, say around 100 points by using FillEllipse method, I seem to get this wave as these points get plotted in sequence under a loop. Is there any way of plotting 100 points and then loading the image, so that it looks like that the points have been plotted simultaneously

    Again, thanks heaps for the previous post, I placed a timer on it such that the user can control the speed of movement and it works very well.



  • Vadimus

    Thank you very much Mario,

    I really appreciate it,. It was exactly what I wanted.

    Again, thank you very much.

    Regards,

    Louis



  • pmsc

    Hi,
    the line "g.DrawImage (..." in the code I wrote before is totally useless with a PictureBox, and creates the strange effect you mentioned when you use stretched bitmaps. Just remove it from the code and it should work as expected.

    As for the flickering, try to set the DoubleBuffered property of your form to true.

    HTH
    --mc


  • Placing a filter on Image