I am trying to create a small paint application in Visual Studio 2015. My project falls into the category of Windows Form Applications. I have the following problem:
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (a == 1)
{
if (r == 1 || el == 1)
{
int x = Math.Min(inX, e.X);
int y = Math.Min(inY, e.Y);
int width = Math.Max(inX, e.X) - Math.Min(inX, e.X);
int height = Math.Max(inY, e.Y) - Math.Min(inY, e.Y);
rect = new Rectangle(x, y, width, height);
Refresh();
}
else if (l == 1)
{
ep = e.Location;
Refresh();
}
else
{
ep = e.Location;
g = this.CreateGraphics();
g.DrawLine(p, sp, ep);
sp = ep;
}
}
}
This part of my codes creates a Rectangular (2nd if), a line segment(3rd if) and just a line. It works pretty much the same as MS Paint; the rectangular or the line segment isn not completed until the user releases the left mouse click (Mouse up). But when a rectangular is finally made when I try again to create another one, the form refreshes ( Refresh(); ) and I lose all the previous drawn rectangulars or lines. I tried replacing Refresh(); with Invalidate(rect); and Update();, but I do not get the result I want.
Instead, I get this:
You should do all your drawing to a separate Bitmap "buffer" that you keep around. Draw your shapes to that bitmap, then when the screen actually needs to be updated, draw the buffer to the screen.
Also, anytime you call Graphics.FromImage you need to remember to Dispose, or it will leak resources like crazy.
Incredibly simple example
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;
namespace DrawExample
{
public partial class Form1 : Form
{
private Bitmap _canvas; //This is the offscreen drawing buffer
private Point _anchor; //The start point for click-drag operations
private Rectangle? _ghost;
private Brush _ghostBrush;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
_ghostBrush = new SolidBrush(Color.FromArgb(200, 200, 200, 255)); //This creates a slightly blue, transparent brush for the ghost preview
ResizeCanvas();
}
private void Form1_Resize(object sender, EventArgs e)
{
ResizeCanvas();
}
/// <summary>
/// Resizes the offscreen bitmap to match the current size of the window, it preserves what is currently in the bitmap.
/// </summary>
private void ResizeCanvas()
{
Bitmap tmp = new Bitmap(this.Width, this.Height, PixelFormat.Format32bppRgb);
using (Graphics g = Graphics.FromImage(tmp))
{
g.Clear(Color.White);
if (_canvas != null)
{
g.DrawImage(_canvas, 0, 0);
_canvas.Dispose();
}
}
_canvas = tmp;
}
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
_anchor = new Point(e.X, e.Y);
}
}
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
_ghost = new Rectangle(_anchor.X, _anchor.Y, e.X - _anchor.X, e.Y - _anchor.Y);
this.Invalidate();
}
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
//Create a Graphics for the offscreen bitmap
using (Graphics g = Graphics.FromImage(_canvas))
{
Rectangle rect = new Rectangle(_anchor.X, _anchor.Y, e.X - _anchor.X, e.Y - _anchor.Y);
g.FillRectangle(Brushes.White, rect);
g.DrawRectangle(Pens.Black, rect);
}
_ghost = null;
//This queues up a redraw call for the form
this.Invalidate();
}
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
if (_ghost.HasValue)
{
using (Bitmap tmp = new Bitmap(_canvas))
{
using (Graphics g = Graphics.FromImage(tmp))
{
g.FillRectangle(_ghostBrush, _ghost.Value);
g.DrawRectangle(Pens.Black, _ghost.Value);
e.Graphics.DrawImage(tmp, 0, 0);
}
}
}
else
{
e.Graphics.DrawImage(_canvas, 0, 0);
}
}
//This stops the flickering
protected override void OnPaintBackground(PaintEventArgs e)
{
//Do nothing
}
}
}
You are drawing directly onto the form's drawing surface. That surface is not persistent. It lasts until the next paint cycle.
Instead you should:
Draw to an offscreen bitmap.
Draw that bitmap onto, for instance, a picture box control. Or paint it directly onto the form's drawing surface in its Paint event.
Related
(New to this and playing around with a basic paint application) Ive found detailed instructions to code a flood-fill but as i am new it is very hard to understand every bits of it, and instead of copying, i would like to try to make my own simple(small scale) flood-fill.
Would it be possible to use fillpath as a flood-fill? i would draw paths and use my mouse to determine my x,y, on screen and have the graphicspath find out if it has borders(points from the drawn paths) and if so, fill these paths with a color?
this is what ive come up with but obviously it doesnt work, so how would i go about to make this working?
namespace WindowsFormsApplication3
{
public partial class Form1 : Form
{
Graphics g;
readonly Pen pen = new Pen(Color.Navy, 2);
Point oldCoords;
GraphicsPath graphicsPaths = new GraphicsPath();
bool spaceFound = false;
public Form1()
{
InitializeComponent();
g = panel1.CreateGraphics();
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
Point mousePt = new Point(e.X, e.Y);
if (e.Button == MouseButtons.Right &&
graphicsPaths.IsVisible(mousePt))
{
spaceFound = true;
}
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
if (oldCoords.IsEmpty)
graphicsPaths.StartFigure();
else
{
graphicsPaths.AddLine(oldCoords, new Point(e.X, e.Y));
g.DrawPath(pen, graphicsPaths);
}
oldCoords = new Point(e.X, e.Y);
}
else
oldCoords = Point.Empty;
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
g.DrawPath(pen, graphicsPaths);
if(spaceFound == true)
{
g.FillPath(Brushes.AliceBlue, graphicsPaths);
}
}
}
}
Yes, this is quite possible; of course you would want to store the path in a List<GraphicsPath> in the MouseUp event to allow for more filled shapes..
You need to correct a few issues in your code:
Set the path.FillMode to Winding
Never cache a Graphics object
Never use control.CreateGraphics()
Don't cache Pens or Brushes
Only draw in the Paint event, unless you do not want the drawing to persist
The last point might actually apply here: Maybe you don't want the currently drawing outline to stay visible? In that, and only that case you can stick with drawing it in the MouseMove with a Graphics object created there on the fly.
Here is a corrected version:
Point oldCoords;
GraphicsPath graphicsPaths = new GraphicsPath() { FillMode = FillMode.Winding };
bool spaceFound = false;
private void drawPanel1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Right && graphicsPaths.IsVisible(e.Location))
{
spaceFound = true;
drawPanel1.Invalidate();
}
}
private void drawPanel1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
if (oldCoords.IsEmpty) graphicsPaths.StartFigure();
else
{
graphicsPaths.AddLine(oldCoords, new Point(e.X, e.Y));
drawPanel1.Invalidate();
}
oldCoords = new Point(e.X, e.Y);
}
else oldCoords = Point.Empty;
}
private void drawPanel1_Paint(object sender, PaintEventArgs e)
{
using (Pen pen = new Pen(Color.Black, 2f))
e.Graphics.DrawPath(pen, graphicsPaths);
if (spaceFound == true)
{
e.Graphics.FillPath(Brushes.AliceBlue, graphicsPaths);
}
}
Note that it will fill your path but not in the way of a true floodfill, i.e. it will always fill the whole path, not just the innermost segment you have clicked in. For a true floodfill much more involved code is needed that actually goes over all neighbouring pixels starting at the click location..
Examples of a true floodfill are here and here
I'm trying to code a draggable rectangle zoombox that's transparent, once the mouse is up again, it zooms into that area and deletes the drawn rectangle.
I've got the zoom working and drawing the rectangle, however I can't 1) Figure out how to make it transparent, and 2) Figure out how to delete the rectangle after it's zoomed in. It gets deleted again once the mouse is clicked down to draw another zoombox on the zoomed in image (I'm drawing a fractal) but I can't figure out what to write to get it to delete after zooming in.
Paint
private void Form1_Paint(object sender, PaintEventArgs e)
{
Graphics windowG = e.Graphics;
windowG.DrawImageUnscaled(picture, 0, 0);
if (rectangle == true)
{
e.Graphics.FillRectangle(Brushes.Aquamarine, rec);
}
if (rectangle == false)
{
Invalidate();
}
}
Mouse Down
rectangle = true;
if (e.Button == MouseButtons.Left)
{
rec = new Rectangle(e.X, e.Y, 0, 0);
Invalidate();
}
Mouse up
{
rectangle = false;
}
Mouse Move
if (e.Button == MouseButtons.Left)
{
rec.Width = e.X - rec.X;
rec.Height = e.Y - rec.Y;
Invalidate();
}
At first I thought you need this:
This is one of the very rare cases where your drawing should not be done in the Paint event but in the MouseMove using a Graphics object created with CreateGraphics.
The reason why this is the right way here is that for this kind of interactive rubberband drawing you do not want the drawing to persist. Other examples would be a line preview or a cursor cross.
To make the Rectangle transparent you can either
Use DrawRectangle
or use a semi-transparent color and FillRectangle
or use both as in the example below:
Here is the code you need:
Point mDown = Point.Empty;
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
mDown = e.Location; // note the first corner
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
Invalidate(); // clear the rectangle
}
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
using (Graphics G = this.CreateGraphics() ) // !!! usually wrong !!!
{
G.Clear(BackColor); // Invalidate();
Rectangle rect = rectangle(mDown, e.Location);
// either
using (SolidBrush brush = new SolidBrush(Color.FromArgb(32, 255, 0, 0)))
G.FillRectangle(brush, rect);
// or
G.DrawRectangle(Pens.Red, rect);
}
}
This is a function that lets you start drawing any any corner, not just top left:
Rectangle rectangle (Point p1, Point p2)
{
int x = Math.Min(p1.X, p2.X);
int y = Math.Min(p1.Y, p2.Y);
int w = Math.Abs(p1.X - p2.X);
int h = Math.Abs(p1.Y - p2.Y);
return new Rectangle(x, y, w, h);
}
Note that if you have a BackgroundImage this above code won't work so well.
But now I think this is closer to your situation:
In this case we go back to the normal way and draw things in the Paint but only as long as the mouse button is pressed. As we don't have the mouse parameters here we need another class level Point and also use the Control.MouseButtons property:
Point mCurrent = Point.Empty;
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
mCurrent = e.Location;
Invalidate();
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
mDown = Point.Empty;
mCurrent = Point.Empty;
Invalidate();
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
if (Control.MouseButtons == System.Windows.Forms.MouseButtons.Left)
{
Rectangle rect = rectangle(mDown, mCurrent);
// either one..
using (SolidBrush brush = new SolidBrush(Color.FromArgb(32, 255, 0, 0)))
e.Graphics.FillRectangle(brush, rect);
// ..or both of these
e.Graphics.DrawRectangle(Pens.Red, rect);
}
}
So to sum it up: Besides quite a few details your main problem is missing the check for the mouse button in the paint event..
I designed an application that will draw shapes in certain coordinate than convert it as an Image and display it on a panel, which it works perfectly. Also I added feature to zoom in or out and pan the image.
I'm trying now to show the coordinate of each shape while hovering the mouse on top of it, I can use the mouse event and grab the coordinate which is not a problem if the image was at it original position with scale of 1. What I need an idea to how to manage to locate this original coordinate after image being panned, zoomed or both, because the mouse event can only show the coordinate of panel and not the shapes.
Any Ideas how can be done in words or in simple coding.
Thanks
Update
Here snapshot of my code
protected override void OnPaint(PaintEventArgs pe)
{
base.OnPaint(pe);
SolidBrush brushBackground = new SolidBrush(Color.White);
try
{
pe.Graphics.Clip = new Region(new Rectangle(0, 0, this.Width, this.Height));
pe.Graphics.FillRegion(brushBackground, pe.Graphics.Clip);
if (Image == null) return;
Graphics g = pe.Graphics;
g.ScaleTransform(m_Scale, m_Scale);
g.DrawImage(Image, (float)m_ImageOffset.X, (float)m_ImageOffset.Y);
}
finally
{
brushBackground.Dispose();
}
}
private List<IShape> _Shapes = new List<IShape>();
/// <summary>
/// A list of all of the entities (shapes) to be drawn.
/// </summary>
public List<IShape> Shapes
{
get
{
if (_Shapes == null) _Shapes = new List<IShape>();
return _Shapes;
}
set { _Shapes = value; }
}
private Metafile Image { get; set; }
/// <summary>
/// Creates an in memory image file.
/// </summary>
private void BuildImage()
{
Graphics refGraph = this.CreateGraphics();
IntPtr hdc = refGraph.GetHdc();
try
{
Metafile image = new Metafile(hdc, EmfType.EmfOnly, "Shapes");
using (Graphics g = Graphics.FromImage(image))
{
g.SmoothingMode = SmoothingMode.AntiAlias;
foreach (IShape entity in Shapes)
{
entity.Draw(g);
}
}
Image = image;
}
finally
{
refGraph.ReleaseHdc(hdc);
refGraph.Dispose();
}
Invalidate();
}
private void PanelMapControl_Resize(object sender, EventArgs e)
{
if (m_InZoomFitMode)
{
ZoomFit();
}
}
private void PanelMapControl_MouseDown(object sender, MouseEventArgs e)
{
this.Focus(); //Need to get focus in order to receive mouse wheel events.
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
Cursor = Cursors.Hand;
//Note the current mouse position in order to calculate the image offset
//when the mouse is moved.
m_MouseStartPosition.X = e.X;
m_MouseStartPosition.Y = e.Y;
m_OffsetAtStartOfMove = m_ImageOffset;
}
}
private void PanelMapControl_MouseMove(object sender, MouseEventArgs e)
{
if(e.Button == System.Windows.Forms.MouseButtons.Left)
{
m_ImageOffset.X = (int)(m_OffsetAtStartOfMove.X + (e.X - m_MouseStartPosition.X) / m_Scale);
m_ImageOffset.Y = (int)(m_OffsetAtStartOfMove.Y + (e.Y - m_MouseStartPosition.Y) / m_Scale);
Invalidate();
}
}
private void PanelMapControl_MouseUp(object sender, MouseEventArgs e)
{
if(e.Button == System.Windows.Forms.MouseButtons.Left)
{
Cursor = Cursors.Cross;
}
}
I am a beginner at this so cut me a little slack please. I am trying to draw a dot on the form window at the location where the mouse is clicked. I keep getting a Null Exception at g.FillEllipse is called. What am I missing or doing wrong?
namespace ConvexHullScan
{
public partial class convexHullForm : Form
{
Graphics g;
//Brush blue = new SolidBrush(Color.Blue);
Pen bluePen = new Pen(Color.Blue, 10);
Pen redPen = new Pen(Color.Red);
public convexHullForm()
{
InitializeComponent();
}
private void mainForm_Load(object sender, EventArgs e)
{
Graphics g = this.CreateGraphics();
}
private void convexHullForm_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
int x, y;
Brush blue = new SolidBrush(Color.Blue);
x = e.X;
y = e.Y;
**g.FillEllipse(blue, x, y, 20, 20);**
}
}
}
}
Replace Graphics g = this.CreateGraphics(); with just g = this.CreateGraphics(); because otherwise you are defining a new variable that lives only inside the scope of the mainForm_Load function rather than assigning a value to the variable defined at the higher-level scope of convexHullForm
It's not clear what your end goal is, but those dots drawn with CreateGraphics() will only be temporary. They will get erased when the form repaints itself, such as when you minimize and restore, or if another window obscures yours. To make them "persistent", use the supplied e.Graphics in the Paint() Event of the Form:
public partial class convexHullForm : Form
{
private List<Point> Points = new List<Point>();
public convexHullForm()
{
InitializeComponent();
this.Paint += new PaintEventHandler(convexHullForm_Paint);
this.MouseDown += new MouseEventHandler(convexHullForm_MouseDown);
}
private void convexHullForm_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
Points.Add(new Point(e.X, e.Y));
this.Refresh();
}
}
void convexHullForm_Paint(object sender, PaintEventArgs e)
{
foreach (Point pt in Points)
{
e.Graphics.FillEllipse(Brushes.Blue, pt.X, pt.Y, 20, 20);
}
}
}
My current code allows me to draw rectangles from a user defined spot but not in the way in whihc i desire. I need it to be like you would do it in paint, here is my current code:
namespace SimpleDraw2
{
///
/// Description of MainForm.
///
public partial class MainForm : Form
{
bool IsMouseDown = false;
Point MousePosition;
int DrawShape = 0;
Bitmap StoredImage;
public MainForm()
{
//
// The InitializeComponent() call is required for Windows Forms designer support.
//
InitializeComponent();
//
// TODO: Add constructor code after the InitializeComponent() call.
//
pictureBox1.Image = new Bitmap (pictureBox1.Width,pictureBox1.Height);
StoredImage = new Bitmap(pictureBox1.Width,pictureBox1.Height);
}
void PictureBox1MouseDown(object sender, MouseEventArgs e)
{
IsMouseDown = true;
MousePosition = e.Location;
Graphics gStored = Graphics.FromImage(StoredImage);
gStored.Clear(Color.Transparent);
gStored.DrawImage(pictureBox1.Image, 0, 0);
}
void PictureBox1MouseUp(object sender, MouseEventArgs e)
{
IsMouseDown = false;
}
void PictureBox1MouseMove(object sender, MouseEventArgs e)
{
Graphics g = Graphics.FromImage(pictureBox1.Image);
if (DrawShape == 0)
{
Pen p = new Pen(Color.Red, 10);
if (IsMouseDown)
{
g.DrawLine(p,MousePosition,e.Location);
MousePosition = e.Location;
}
}
if (DrawShape == 1)
{
g.Clear(Color.Transparent);
g.DrawImage(StoredImage,0,0);
g.DrawRectangle(Pens.Green,MousePosition.X,MousePosition.Y,e.X,e.Y);
}
if (DrawShape == 2)
{
g.Clear(Color.Transparent);
g.DrawImage(StoredImage, 0, 0);
g.DrawEllipse(Pens.HotPink, MousePosition.X, MousePosition.Y, e.X, e.Y);
}
if (DrawShape == 3)
{
g.Clear(Color.Transparent);
g.DrawImage(StoredImage, 0, 0);
g.DrawArc(Pens.Indigo,pictureBox1.Bounds, e.Y, e.X);
}
//if (DrawShape == 4)
//{
// g.Clear(Color.Transparent);
// g.DrawImage(StoredImage, 0, 0);
// g.DrawPolygon(Pens.Indigo, Point[] e.X);
//}
this.Refresh();
}
private void button2_Click(object sender, EventArgs e)
{
OpenFileDialog ofd = new OpenFileDialog();
if (ofd.ShowDialog() == DialogResult.OK)
{
axWindowsMediaPlayer1.URL = ofd.FileName;
}
}
private void button1_Click(object sender, EventArgs e)
{
axWindowsMediaPlayer1.Ctlcontrols.pause();
Bitmap bmp = new Bitmap(axWindowsMediaPlayer1.Width, axWindowsMediaPlayer1.Height);
Graphics gfx = Graphics.FromImage(bmp);
gfx.CopyFromScreen(PointToScreen(axWindowsMediaPlayer1.Location), new Point(0, 0), axWindowsMediaPlayer1.Bounds.Size, CopyPixelOperation.SourceCopy);
pictureBox1.BackgroundImage = bmp;
//axWindowsMediaPlayer1.Visible = false;
//pictureBox1.Visible = true;
}
private void button3_Click(object sender, EventArgs e)
{
Graphics gg = Graphics.FromImage(pictureBox1.BackgroundImage);
gg.Clear(Color.Transparent);
Graphics gStored = Graphics.FromImage(StoredImage);
gStored.Clear(Color.Transparent);
Graphics g = Graphics.FromImage(pictureBox1.Image);
g.Clear(Color.Transparent);
}
private void button4_Click(object sender, EventArgs e)
{
DrawShape = 1;
}
private void button6_Click(object sender, EventArgs e)
{
DrawShape = 2;
}
private void button8_Click(object sender, EventArgs e)
{
DrawShape = 3;
}
private void button7_Click(object sender, EventArgs e)
{
DrawShape = 0;
}
}
}
If someone could help me edit my code to iron out the issue to make it easy drag and draw system it would me much appreciate.
Thanks in Advance
Chris
From msdn:
Draws a rectangle specified by a
coordinate pair, a width, and a
height.
So your code won't work:
g.DrawRectangle(Pens.Green,MousePosition.X,MousePosition.Y,e.X,e.Y);
Should be something like
g.DrawRectangle(Pens.Green, MousePosition.X, MousePosition.Y, Math.Abs(e.X - MousePosition.X), Math.Abs(e.Y - MousePosition.Y));
The biggest problem I see is that you're trying to draw in the mouse events. This means your drawing will be wiped away the instant you get a refresh event.
Only draw in Paint events, never in mouse events. If you want your app to draw as a result of mouse events, set a point, rectangle, or whatever in the mouse events (like you start to do with IsMouseDown), invalidate the area you want to change in your MouseMoved event, then draw your rectangle or whatever in your Paint event.