How to operate on drawn graphics

c# drawing shapes
c# graphics example
how to draw graphics on computer
c# graphics tutorial pdf
draw graphics online
javascript graphics examples
javascript drawing tool
c# drawing application

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

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

How to: Create Graphics Objects for Drawing, You don't have to be an artist to create and use hand-drawn images. It just takes some practice. Articulate Rapid E-Learning Blog - create hand-  Images are drawn onto canvas using the drawImage () method. The simplest version takes three parameters — a reference to the image you want to render, and the X and Y coordinates of the image's top left corner. Let's start by getting an image source to embed in our canvas. Add the following lines to the bottom of your JavaScript:

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

How to Create Your Own Hand-Drawn Graphics, Draw graphics. Use the Map Viewer to create point, line, and polygon graphics. Creating a Street Art style illustration for editorial use, using Corel PHOTO-PAINT & CorelDRAW. In this month's tutorial, CorelDRAW Master Stefan Lindblad walks us step-by-step through the process of converting hand-drawn artwork to vector graphics in CorelDRAW and shows how to prepare this artwork before exporting to Corel PHOTO-PAINT, by re-arranging the objects in layers.

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

1 How to draw simple graphics, In this tutorial, you will use the Sketch widget to draw and edit point, line, and polygon graphics. Click a tool in the widget and then the map below to create  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)

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

Draw graphics, Work with the image at a reduced size so that the medium no matter how controllable, captures essential mass shapes as bluntly and directly as possible. Use a  Most objects are basic shapes, so you need to learn to see the basic shapes in the objects. Then practice drawing them. The more you practice, the better you get. Once you recognize the basic shapes you’ll get better at streamlining your drawings. I find that the less detail, the better.

Drawing for Graphic Design: 6 Exercises to Sharpen Your Skills, A given drawing function such as draw-line will work essentially the same no matter which type of object it is drawn on. 1.1 Drawing on windows  There are two steps in working with graphics: Creating a Graphics object. Using the Graphics object to draw lines and shapes, render text, or display and manipulate images.

About drawing graphics in Common Graphics, You can use the Copy and Paste commands to duplicate vector graphics between Creative Cloud components. In this tutorial, I'm going to show you how to turn your hand-drawn doodles into vectors using Illustrator. I will also show you how I sketch my images, how I capture and clean them using

How to get started with drawing in Illustrator, For example, to draw a line, an application calls the following: java.awt.Graphics.drawLine(int x1, int y1, int x2, int y2) In this code (x1, y1) is the start point of the line, and (x2, y2) is the end point of the line. So the code to draw a horizontal line is as follows: Graphics.drawLine(20, 100, 120, 100);

Comments
  • 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.
  • How can I treat the circle as a control after drawing it? - Moving and selecting shapes
  • How to drag and move shapes in C#
  • 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..
  • I initially forgot to add the starting points to the e.Location.X and ...Y max distance but fixed it.