Drawing to a new "layer" in C#

Question

Building a little paint program and am trying to incorporate the concept of layers.

I'm using a PictureBox control to display the image, and getting the Graphics object from the image being displayed by the PictureBox and drawing to that.

My problem is I'm trying to figure out how to draw to a new Graphics object that is overlayed on top of the picture box, and be able to get the newly drawn image without the original image absorbed into the graphic.

If I do something like:

Graphics gr = Graphics.FromImage(myPictureBox.image);
gr.DrawRectangle(blah blah)

...I am editing the original image in the picture box. I want a way to only capture the new stuff being drawn as a separate image, but still have it displayed as an overlay over top of what was already there.

Anyone able to point me in the right direction? Thanks!

Answer 1

example code which working fine - take dummy image and layered the original image with custom text

public void LayerImage(System.Drawing.Image Current, int LayerOpacity)
{
    Bitmap bitmap = new Bitmap(Current);        
    int h = bitmap.Height;
    int w = bitmap.Width;
    Bitmap backg = new Bitmap(w, h + 20);
    Graphics g = null;
    try
    {
        g = Graphics.FromImage(backg);
        g.Clear(Color.White);
        Font font = new Font("Arial", 12, FontStyle.Bold, GraphicsUnit.Pixel);
        RectangleF rectf = new RectangleF(70, 90, 90, 50);
        Color color = Color.FromArgb(255, 128, 128, 128);
        Point atpoint = new Point(backg.Width / 2, backg.Height - 10);
        SolidBrush brush = new SolidBrush(color);
        StringFormat sf = new StringFormat();
        sf.Alignment = StringAlignment.Center;
        sf.LineAlignment = StringAlignment.Center;
        g.DrawString("BRAND AMBASSADOR", font, brush, atpoint, sf);
        g.Dispose();
        MemoryStream m = new MemoryStream();
        backg.Save(m, System.Drawing.Imaging.ImageFormat.Jpeg);
    }
    catch { }

    Color pixel = new Color();

    for (int x = 0; x < bitmap.Width; x++)
    {
        for (int y = 0; y < bitmap.Height; y++)
        {
            pixel = bitmap.GetPixel(x, y);
            backg.SetPixel(x, y, Color.FromArgb(LayerOpacity, pixel));
        }
    }
    MemoryStream m1 = new MemoryStream();
    backg.Save(m1, System.Drawing.Imaging.ImageFormat.Jpeg);
    m1.WriteTo(Response.OutputStream);
    m1.Dispose();
    base.Dispose();
}

Answer 2

Got it working, perhaps I wasn't clear enough in my original question.

Essentially what I ended up doing was storing each layer as a separate Image object, then just hooking into the OnPaint method of my control and manually drawing the graphics in order, instead of just drawing to PictureBox.Image. Works like a charm!

Answer 3

I would reckon to use the transparent control and do some modification so it can be used as image layers:

http://www.codeproject.com/Articles/26878/Making-Transparent-Controls-No-Flickering

Probably something like this (make any modification as necessary).

class LayerControl : UserControl
{
    private Image image;
    private Graphics graphics;

    public LayerControl(int width, int height)
    {
        this.Width = width;
        this.Height = height;

        image = new Bitmap(width, height);

        graphics = Graphics.FromImage(image);

        // Set style for control
        SetStyle(ControlStyles.OptimizedDoubleBuffer |
                ControlStyles.AllPaintingInWmPaint |
                ControlStyles.UserPaint, true);
    }

    // this function will draw your image
    protected override void OnPaint(PaintEventArgs e)
    {
        var bitMap = new Bitmap(image);
        // by default the background color for bitmap is white
        // you can modify this to follow your image background 
        // or create a new Property so it can dynamically assigned
        bitMap.MakeTransparent(Color.White);

        image = bitMap;

        Graphics g = e.Graphics;
        g.SmoothingMode = SmoothingMode.AntiAlias;
        g.PixelOffsetMode = PixelOffsetMode.HighQuality;
        g.CompositingQuality = CompositingQuality.GammaCorrected;

        float[][] mtxItens = {
            new float[] {1,0,0,0,0},
            new float[] {0,1,0,0,0},
            new float[] {0,0,1,0,0},
            new float[] {0,0,0,1,0},
            new float[] {0,0,0,0,1}};

        ColorMatrix colorMatrix = new ColorMatrix(mtxItens);

        ImageAttributes imgAtb = new ImageAttributes();
        imgAtb.SetColorMatrix(
            colorMatrix,
            ColorMatrixFlag.Default,
            ColorAdjustType.Bitmap);

        g.DrawImage(image,
                    ClientRectangle,
                    0.0f,
                    0.0f,
                    image.Width,
                    image.Height,
                    GraphicsUnit.Pixel,
                    imgAtb);
    }

    // this function will grab the background image to the control it self
    protected override void OnPaintBackground(PaintEventArgs e)
    {
        base.OnPaintBackground(e);
        Graphics g = e.Graphics;

        if (Parent != null)
        {
            BackColor = Color.Transparent;
            int index = Parent.Controls.GetChildIndex(this);

            for (int i = Parent.Controls.Count - 1; i > index; i--)
            {
                Control c = Parent.Controls[i];
                if (c.Bounds.IntersectsWith(Bounds) && c.Visible)
                {
                    Bitmap bmp = new Bitmap(c.Width, c.Height, g);
                    c.DrawToBitmap(bmp, c.ClientRectangle);

                    g.TranslateTransform(c.Left - Left, c.Top - Top);
                    g.DrawImageUnscaled(bmp, Point.Empty);
                    g.TranslateTransform(Left - c.Left, Top - c.Top);
                    bmp.Dispose();
                }
            }
        }
        else
        {
            g.Clear(Parent.BackColor);
            g.FillRectangle(new SolidBrush(Color.FromArgb(255, Color.Transparent)), this.ClientRectangle);
        }
    }

    // simple drawing circle function
    public void DrawCircles()
    {
        using (Brush b = new SolidBrush(Color.Red))
        {
            using (Pen p = new Pen(Color.Green, 3))
            {
                this.graphics.DrawEllipse(p, 25, 25, 20, 20);
            }
        }
    }

    // simple drawing rectable function
    public void DrawRectangle()
    {
        using (Brush b = new SolidBrush(Color.Red))
        {
            using (Pen p = new Pen(Color.Red, 3))
            {
                this.graphics.DrawRectangle(p, 50, 50, 40, 40);
            }
        }
    }

    // Layer control image property
    public Image Image
    {
        get
        {
            return image;
        }
        set
        {
            image = value;
            // this will make the control to be redrawn
            this.Invalidate();
        }
    }
}

Example how to use it:

LayerControl lc = new LayerControl(100, 100);
lc.Location = new Point(0, 0);
lc.DrawRectangle();

LayerControl lc2 = new LayerControl(100, 100);
lc2.Location = new Point(0, 0);
lc2.DrawCircles();

LayerControl lc3 = new LayerControl(100, 100);
lc3.Location = new Point(0, 0);
lc3.Image = new Bitmap(@"<Image Path>");

// adding control
this.Controls.Add(dc);
this.Controls.Add(dc2);
this.Controls.Add(dc3);

With this method you can have multiple layers that can put overlapping each other (due to the transparency feature it has).

If you want to add it in top of your PictureBox make sure to re-order the control. The Layer Control should be added before your PictureBox control.

// adding control
this.Controls.Clear();
this.Controls.Add(dc);
this.Controls.Add(dc2);
this.Controls.Add(dc3);
this.Controls.Add(PictureBox1);

Hopefully it help.

Answer 4

The graphics capabilities of .NET drawing libraries are simple. Their main purpose is direct drawing of GUI. If you want to have layering, alpha transparency or advanced filters, then you should either use 3rd party library or roll your own drawing code.