Creating Drawing Grids
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums
Results 1 to 3 of 3

Thread: Creating Drawing Grids

  1. #1
    Join Date
    Apr 2012
    Ontario, Canada

    Exclamation Creating Drawing Grids

    Hi all

    I'm using Visual Studio 2005 C# and was wondering how to make a grid that can be turned visible and invisible. I have no problem creating the grid using graphics and buffers and all that, that's all done. I'm having a hard time being able to remove the grid afterwards. Essentially what I am doing is trying to create a grid that the user can activate and deactivate to help guide their drawing.

    So far what I am doing right now is I have two buffers. The one that is continuously updated with mouseclick drawing is placed into the griddrawing buffer. This grid buffer then takes the image and the drawings on it and creates a grid. However while the grid is showing you can't see any drawing changes on the image because I've switched buffers.

    I'm wondering if there is an easier way to create a toggleable grid or if I'm headed in the right direction, or if I'm completely off base.


     private void Form1_Load(object sender, EventArgs e)
                //buffer = new Bitmap(background,this.Width, this.Height);
                tileBuffer = new Bitmap(background, this.Width, this.Height);
                tileLayer = Graphics.FromImage(tileBuffer);
     this.BackgroundImage = tileBuffer ;
                this.BackgroundImageLayout = ImageLayout.Stretch;
                Origin = new Point(0, 0);
                GridCellSize = new Size(10, 10);
                HorizontalCells = 10;
                VerticalCells = 10;
            private void DrawGrid()
                Point startP = new Point();
                Pen pencil = new Pen(Color.Blue, 3.0f);
                Point endP = new Point();
                buffer = new Bitmap(tileBuffer , this.Width, this.Height);
                gridLayer = Graphics.FromImage(buffer);
                // Draw horizontals
                startP.X = Origin.X;
                endP.X = Origin.X + VerticalCells * GridCellSize.Width;
                for (int i = 0; i <= HorizontalCells; i++)
                    startP.Y = Origin.Y + i * GridCellSize.Height;
                    endP.Y = startP.Y;
                    gridLayer.DrawLine(pencil, startP, endP);
                // Draw verticals
                startP.Y = Origin.Y;
                endP.Y = Origin.Y + HorizontalCells * GridCellSize.Height;
                for (int i = 0; i <= VerticalCells; i++)
                    startP.X = Origin.X + i * GridCellSize.Width;
                    endP.X = startP.X;
                    gridLayer.DrawLine(pencil, startP, endP);
            private void Form1_Paint(object sender, PaintEventArgs e)
              //  DrawGrid();
            private void button1_Click(object sender, EventArgs e)
                if (vis == false)
                    this.BackgroundImage = buffer;
                    vis = true;
                    this.BackgroundImage = tileBuffer  ;
                    vis = false;
            private void Form1_MouseClick(object sender, MouseEventArgs e)
               Pen pen = new Pen(Color.Red);
                Point loc = new Point (e.X +30, e.Y);
               tileLayer.DrawLine(pen, e.Location,loc );

  2. #2
    Join Date
    Jan 2010

    Re: Creating Drawing Grids

    Don't switch the buffers - always use the same buffer for drawing, and before finally displaying it, simply add a conditional step to check a bool indicating if the grid should be displayed or not. If it should, draw the grid and then display, if not, then just do nothing.

    You should do all the drawing (or at least the final display) from within the OnPaint(...) method (by overriding it), or from the Paint event handler.
    See this post of mine, from a different thread - it was meant as an example for the OP, and it contains some basic line drawing code, with comments that explain it, and I attached the VS project as well.

  3. #3
    Join Date
    Apr 2012
    Ontario, Canada

    Smile Re: Creating Drawing Grids

    Thank you for the response. I'm about to try out your suggestion now but will the lines actually disappear with the bool value being switched to false? Because my original attempt had used one buffer but I couldn't find a way to ''erase'' the lines, and in my research on google before posting I found the common answer that an ''undo'' image needs to be saved and then loaded to replace it, and that this was essentially the only way to ''erase'' lines.

    Another way I read was to replace each drawn pixel with the background colour, but with an image with many pixel colours this seems like an awful lot of work. I debated the idea of replacing the lines with a transparent colour as well but the best way for the grid to function in my project would be to be a type of layer essentially that won't be drawn with final image when saved (granted I could just shut off the grid visibility when saving, but the main point is that I don't want the lines permanently drawn on the image).

    Also, my first attempt was using paint method and invalidation but this isn't the actual project that I want to use this function on. this is just a test project to see if I can make it work. So I was just trying different things and the code on the thread above is just the latest attempt, because the grid will be activated and deactivated from a Checked Menu Strip item. The grid will change based on the image size and the client-inputted tile size, but only upon initialization.

    Hope I'm explaining and also understanding clearly enough.

    Thank you

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Azure Activities Information Page

Windows Mobile Development Center

Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


HTML5 Development Center