How can i change color of line between two points in the running form when i click on the line

Question

i work in visual studio on dots & boxes game, i make an array of dots in 4 rows and 4 column, and i draw lines between each two points, now i want when player1 click on one line, specific line change color to red, player2 click on other line, it change color to black.

    private void panel1_Paint(object sender, PaintEventArgs e)
    {
        Pen mypen = new Pen(Color.Blue, 2);

        e.Graphics.FillRectangle(Brushes.Green, 0, 0, 250, 250);
        for (int i = 0; i < 4; i++)
        {
            for (int j = 0; j < 4; j++)
            {
                e.Graphics.FillEllipse(Brushes.Black, 32 + 48 * j, 32 + 48 * i, 10, 10);
            }
        }
        for (int i = 0; i <= 3; i++)
        {
            for (int j = 0; j <= 3; j++)
            {

                e.Graphics.DrawLine(mypen, 37 + 48 * j, 37 + 48 * i, 37 + 48 * j, 37 + 48 * (i + 1));
                e.Graphics.DrawLine(mypen, 37 + 48 * j, 37 + 48 * i, 37 + 48 * (j + 1), 37 + 48 * i);

            }
        }
    }

i expected when click on line change the color

kennyzx · Answer 1 · 2019-06-06T10:06:25.580

You have drawn the board, with dots and lines. But the panel does not react to user click - nothing happens when someone clicks the panel.

Now, you also need these pieces of code

You need to have some code to respond to the mouse click event, when one clicks on the panel, this piece of code is executed, and checks if the mouse click is on a specific line, or just on the blank area (in which case nothing should happen). You need some calculation to determine if a mouse click is on a line.
You need to remember which lines are red, and which lines are black, and which remain as blue. So you may need a two dimensional integer array to track this, with 0 represents blue, 1 represents red and 2 represents black, for example.
Whenever you detect a line is click, you need to repaint the board, call panel1.Invalidate() to force a repaint, so the panel1_Paint method is called again, in which you can draw the board, dots, and lines with correct colors (with the information you kept in the array in #2) from scratch again. Remember nothing is left from the previous paint, it is like you erase everything on a paper and draw all the stuff again.

It is very challenging for me to explain everything in detail in just one post. Start #1 by adding an event handler for panel1’s Click event, and think how you can determine which line the player is clicking on. — kennyzx, Jun 06 '19 at 12:32

score 0 · Answer 2 · answered Jun 06 '19 at 18:23

Drawn pixels are just colored pixels, not lines or any other shapes, even when you have used DrawLine or similar methods.

So you need to choose, whether to tackle the issue by geometry of by graphics.

Both options can be solved in various ways, depending on the needs.

Here is an example that lets you collect lines and recognize them when clicking them.
For a totally different approach you could change your code from simply painting onto the Panel to a two way drawing code: In addition to the Panel surface paint also into a Bitmap. Make it the ClientSize of the Panel and draw into it with the same command but using a Graphics object created from that Bitmap. Now you can test the color of each pixel using bitmap.GetPixel(x,y) and use the e.X and e.Y locations form a MouseClick event of the Panel.

For more on the difference of Draw onto control of into a bitmap

Make sure to keep the Paint code in synch! A simple way is to move the code to a function drawStuff(Graphics g) and call it n the Paint event twice: Once with e.Graphics and once with Graphics g = Graphics.FromImage(bitmap)..

Geometry is always an option but line algorithms are harder than oone may expect, especially when you need rounding and slack..

How can i change color of line between two points in the running form when i click on the line

2 Answers2