How to operate on drawn graphics

Question

I created two Rectangles. I want to add events on them. For example when mouse hover on one, the hovered one will change color, can do resize or drag them(rectangles) to other place...

I was just wondering if I could control the drawn graphic, or it will like Microsoft Paint that after you painted, the object can not be operate unless you clear canvas and do redraw.

Is it possible to control a drawn graphic, thanks for any suggestion.

Simple code of my drawn graphics

private void Form1_Paint(object sender, PaintEventArgs e)
{
    // Create pen.
    Pen blackPen = new Pen(Color.Black, 3);

    // Create rectangle.
    Rectangle rect1 = new Rectangle(20, 20, 250, 250);
    Rectangle rect2 = new Rectangle(70, 70, 150, 150);

    // Draw rectangle to screen.
    e.Graphics.FillRectangle(Brushes.DeepSkyBlue, rect1);
    e.Graphics.FillRectangle(Brushes.LightBlue, rect2);
}

There's no event handler for rectangles to capture cursor hovers. I'm sure you could use another form control that has that event .. just depends what you want to use it for I suppose. — Nathan Champion, Dec 14 '18 at 04:09
[How can I treat the circle as a control after drawing it? - Moving and selecting shapes](https://stackoverflow.com/q/38345828/3110834) — Reza Aghaei, Dec 14 '18 at 04:36
[How to drag and move shapes in C#](https://stackoverflow.com/q/38747027/3110834) — Reza Aghaei, Dec 14 '18 at 04:38
There are no rectanlges, just colored pixels. If you want to operate on the rectanlges you need to store them and test with those data, e.g. in the mousemove event etc.. If you find you have a hit you could change theit data and invalidate to paint again.. Best start with a list of tools like draw, move, select, fill, freehand etc.. — TaW, Dec 14 '18 at 09:10

score 1 · Answer 1 · answered Dec 14 '18 at 05:03

Also, you can create your own control like:

  class RectangleControl : Control
{
    public void FillRectangle(Color color)
    {
        this.BackColor = color;
    }
}

Then :

  private void Form1_Paint(object sender, PaintEventArgs e)
    {
        RectangleControl rect1 = new RectangleControl() { Parent = this, Left = 20, Top = 20, Width = 250, Height = 250 };
        rect1.FillRectangle(Color.DeepSkyBlue);
        RectangleControl rect2 = new RectangleControl() { Parent = rect1, Left = 50, Top = 50, Width = 150, Height = 150 };
        rect2.FillRectangle(Color.LightBlue);
        rect1.MouseHover += Rect1_MouseHover;
        rect2.MouseLeave += Rect2_MouseLeave;
    }

    private void Rect2_MouseLeave(object sender, EventArgs e)
    {
        (sender as RectangleControl).BackColor = Color.Yellow;
    }

    private void Rect1_MouseHover(object sender, EventArgs e)
    {
        (sender as RectangleControl).BackColor = Color.LightBlue;
    }

score 0 · Answer 2 · answered Dec 14 '18 at 04:28

You can use Panel control instead. Just add 2 panel controls as you would like them to be arranged and add 2 event handlers:

private void panel1_MouseHover(object sender, EventArgs e)
    {
        panel1.BackColor = Color.Yellow;
    }

    private void panel1_MouseLeave(object sender, EventArgs e)
    {
        panel1.BackColor = Color.LightBlue;
    }

score 0 · Answer 3 · answered Dec 14 '18 at 04:39

You can monitor the MouseMove.

Here's code using MouseMove and some brush values used by the rectangles.

using System.Drawing;
using System.Windows.Forms;

namespace Question_Answer_WinForms_App
{
    public partial class Form1 : Form
    {
        public Brush outerRectangleBrush = Brushes.DeepSkyBlue;
        public Brush innerRectangleBrush = Brushes.LightBlue;

        public Form1()
        {
            InitializeComponent();
            Paint += Form1_Paint;
            MouseMove += Form1_MouseMove;
        }

        private void Form1_MouseMove(object sender, MouseEventArgs e)
        {
            var isWithinOuterRectangle = e.Location.X >= 20
                                      && e.Location.X <= 250 + 20
                                      && e.Location.Y >= 20
                                      && e.Location.Y <= 250 + 20;

            var isWithinInnerRectangle = e.Location.X >= 70
                                      && e.Location.X <= 150 + 70
                                      && e.Location.Y >= 70
                                      && e.Location.Y <= 150 + 70;

            if (isWithinOuterRectangle)
            {
                if (isWithinInnerRectangle)
                {
                    outerRectangleBrush = Brushes.DeepSkyBlue;
                    innerRectangleBrush = Brushes.Red;
                    Refresh();
                }
                else
                {
                    outerRectangleBrush = Brushes.Red;
                    innerRectangleBrush = Brushes.LightBlue;
                    Refresh();
                }
            }
            else
            {
                outerRectangleBrush = Brushes.DeepSkyBlue;
                innerRectangleBrush = Brushes.LightBlue;
                Refresh();
            }
        }

        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            // Create pen.
            Pen blackPen = new Pen(Color.Black, 3);

            // Create rectangle.
            Rectangle rect1 = new Rectangle(20, 20, 250, 250);
            Rectangle rect2 = new Rectangle(70, 70, 150, 150);

            // Draw rectangle to screen.
            e.Graphics.FillRectangle(outerRectangleBrush, rect1);
            e.Graphics.FillRectangle(innerRectangleBrush, rect2);
        }
    }
}

I initially forgot to add the starting points to the ```e.Location.X``` and ```...Y``` max distance but fixed it. — Michael Puckett II, Dec 14 '18 at 04:45

RezaNoei · Answer 4 · 2018-12-14T05:19:14.630

@FJF, writing a ms-paint like application is not a complicated task. Windows Forms applications are using GDI+ to render graphics. so you can write a simple paint application using WindowsForms.

@nexolini uses a panel to do some draws. actually Ms-Paint does the same somehow. Ms-Paint is a Single-Layer Editor. So you can't resize all objects anytime you wanted (but as I said before you can assume that you have a panel for each newly drawn Shapes; Something like what Ms-Paint does).

So what is the problem?

Ms-Paint doesn't tracks your mouse movements and it doesn't needed (as it's a single layer). You can do all of it's tasks using these Answers.

e.g: for adding a Fill Color tool you can use a getpixel and putpixel to do a recursive algorithm on you image. and you are not needed to know which shape you are working on.

all the other tasks could be implemented easy.

for multi-layer Editors I will prefer to use a more powerful framework (but it's also could be implemented in Windows forms in a bad way), Like WPF. WPF uses DirectX to render your graphics and you are able to write an smooth Editor. WPF is designed to handle your graphical request so it does better on graphics.

@Reza_Aghaei 's comments are useful for Windows Forms.

How to operate on drawn graphics

4 Answers4