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);
}

Answer 1

@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.

Answer 2

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;
    }

Answer 3

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);
        }
    }
}

Answer 4

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;
    }