i'm doing a C# project with my friend. We have to take a signature and save it to a JPG file. We don't have much idea of how doing this, but at least we are trying. We have 2 problems:
1.
When drawing the Graphics, if the mouse moves too fast, not all the points are caught by the mousemove Event and the result image are separated points. How can i improve this?
Here is my code:
private void ingresoFirma_Load(object sender, EventArgs e)
{
myBrush = new SolidBrush(Color.Black);
myGraphics = panel1.CreateGraphics();
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
isDrawing = true;
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (isDrawing)
{
myGraphics.FillEllipse(myBrush, e.X, e.Y, 10, 10);
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
isDrawing = false;
}
The second problem is that we have no idea of how to save the Graphics to a .jpg image. We used something like this:
private void saveSign_Click(object sender, EventArgs e)
{
Bitmap signature = new Bitmap(100,100,myGraphics);
signature.Save("c:\\myBitmap.bmp");
}
But it saves a blank image.
Here's something to get you started...
public partial class ingresoFirma : Form
{
private List<Point> stroke = null;
private List<List<Point>> Strokes = new List<List<Point>>();
public ingresoFirma()
{
InitializeComponent();
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
stroke = new List<Point>();
stroke.Add(new Point(e.X, e.Y));
}
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
stroke.Add(new Point(e.X, e.Y));
if (stroke.Count == 2)
{
Strokes.Add(stroke);
}
panel1.Refresh();
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
stroke = null;
}
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
foreach(List<Point> curStroke in Strokes)
{
e.Graphics.DrawLines(Pens.Black, curStroke.ToArray());
}
}
private void btnClear_Click(object sender, EventArgs e)
{
Strokes.Clear();
panel1.Refresh();
}
private void btnSave_Click(object sender, EventArgs e)
{
SaveFileDialog sfd = new SaveFileDialog();
sfd.Filter = "JPG Files(*.JPG)|*.JPG";
if (sfd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
Bitmap bmp = new Bitmap(panel1.Width, panel1.Height);
panel1.DrawToBitmap(bmp, panel1.ClientRectangle);
bmp.Save(sfd.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}
With the DrawToBitmap() method of Control, you can save the image:
Bitmap theBitmap = new Bitmap(panel1.Width, panel1.Height)) ;
panel1.DrawToBitmap(theBitmap, new Rectangle(0, 0, bmp.Width, bmp.Height));
theBitmap.Save("c:\\myBitmap.bmp");
Related
In my form, I have a picturebox. I wanted to be able to draw arrows on top of an image. I managed to get halfway there. On the Form load event, I assign an image to the picturebox. I'm able to create arrows with the code below. The problem is every time I create the arrow the picture I assigned on my form load event gets erased. Why does my image get erased? How do I maintain my image that I assigned on form load while drawing arrows on top of it?
private bool isMoving = false;
private Point mouseDownPosition = Point.Empty;
private Point mouseMovePosition = Point.Empty;
private List<Tuple<Point, Point>> lines = new List<Tuple<Point, Point>>();
Pen _Pen;
private void Test_Load(object sender, EventArgs e)
{
pictureBox1.Image = Properties.Resources.background;
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if (isMoving)
{
if (pictureBox1.Image == null)
{
Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
using (Graphics g = Graphics.FromImage(bmp))
{
g.Clear(Color.White);
}
pictureBox1.Image = bmp;
}
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
g.Clear(pictureBox1.BackColor);
AdjustableArrowCap bigArrow = new AdjustableArrowCap(5, 5);
_Pen = new Pen(Color.IndianRed, 3);
_Pen.CustomEndCap = bigArrow;
g.DrawLine(_Pen, mouseDownPosition, mouseMovePosition);
_Pen.Dispose();
}
}
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
isMoving = true;
mouseDownPosition = e.Location;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (isMoving)
{
mouseMovePosition = e.Location;
pictureBox1.Invalidate();
}
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (isMoving)
{
lines.Add(Tuple.Create(mouseDownPosition, mouseMovePosition));
}
isMoving = false;
}
I think the problem is with this line here g.Clear(pictureBox1.BackColor);
Yes, problem is with this line here g.Clear(pictureBox1.BackColor); You erase entire the control area before you draw the line.
You should draw to e.Graphics directly:
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if (isMoving)
{
if (pictureBox1.Image == null) e.Graphics.Clear(Color.White);
// Add this line for high quality drawing:
e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
AdjustableArrowCap bigArrow = new AdjustableArrowCap(5, 5);
_Pen = new Pen(Color.IndianRed, 3);
_Pen.CustomEndCap = bigArrow;
e.Graphics.DrawLine(_Pen, mouseDownPosition, mouseMovePosition);
_Pen.Dispose();
}
}
I am working on a MS paint like program that is programmed entirely in c#. It's very basic, but I have stumbled upon a problem. So I saw another SO post regarding MS paint mock ups. It was about how to save the end result as a .bmp file. I tried using the solutions and answers provided and it worked.
The file saved. However when it saved, it only saved the blank panel ( im making a forms app) . I have only seen one SO post that deals with this issue but I couldn't incorporate to allow the user to interact. The following is my code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Paint
{
public partial class Form1 : Form
{
Graphics g;
Pen p = new Pen(Color.Black, 1);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int k = 0;
public Form1()
{
InitializeComponent();
}
private void pictureBox2_Click(object sender, EventArgs e)
{
p.Color = red.BackColor;
default1.BackColor = red.BackColor;
}
private void blue_Click(object sender, EventArgs e)
{
p.Color = blue.BackColor;
default1.BackColor = blue.BackColor;
}
private void green_Click(object sender, EventArgs e)
{
p.Color = green.BackColor;
default1.BackColor = green.BackColor;
}
private void panel2_MouseDown(object sender, MouseEventArgs e)
{
sp = e.Location;
if (e.Button == MouseButtons.Left)
k = 1;
}
private void panel2_MouseUp(object sender, MouseEventArgs e)
{
k = 0;
}
private void panel2_MouseMove(object sender, MouseEventArgs e)
{
if (k == 1)
{
ep = e.Location;
g = panel2.CreateGraphics();
g.DrawLine(p, sp, ep);
}
sp = ep;
}
private void panel2_MouseLeave(object sender, EventArgs e)
{
k = 0; }
private void panel2_Paint(object sender, PaintEventArgs e)
{
}
private void button1_Click(object sender, EventArgs e)
{
SaveFileDialog dialog = new SaveFileDialog();
if (dialog.ShowDialog() == DialogResult.OK)
{
int width = Convert.ToInt32(panel2.Width);
int height = Convert.ToInt32(panel2.Height);
Bitmap bmp = new Bitmap(width, height);
panel2.DrawToBitmap(bmp, new Rectangle(0, 0, width, height));
bmp.Save(dialog.FileName, System.Drawing.Imaging.ImageFormat.Bmp);
}
}
}
}
So my question is... How do I Succesfully save a .bmp image in my c# forms app , as in how do i not make it save blank. Thanks in advance :)
edit
So I have tried the first answer and also im trying the ideas suggested by the individual in the comments and some how, instead of just saving a blank canvas. the application literally just saves a black image. Here is the code I ended up with. Where did I go wrong?
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Paint
{
public partial class Form1 : Form
{
Graphics g;
Graphics h;
Pen p = new Pen(Color.Black, 1);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int k = 0;
Bitmap bmp =null;
public Form1()
{
InitializeComponent();
}
private void pictureBox2_Click(object sender, EventArgs e)
{
p.Color = red.BackColor;
default1.BackColor = red.BackColor;
}
private void blue_Click(object sender, EventArgs e)
{
p.Color = blue.BackColor;
default1.BackColor = blue.BackColor;
}
private void green_Click(object sender, EventArgs e)
{
p.Color = green.BackColor;
default1.BackColor = green.BackColor;
}
private void panel2_MouseDown(object sender, MouseEventArgs e)
{
sp = e.Location;
if (e.Button == MouseButtons.Left)
k = 1;
}
private void panel2_MouseUp(object sender, MouseEventArgs e)
{
k = 0;
}
private void panel2_MouseMove(object sender, MouseEventArgs e)
{
if (k == 1)
{
ep = e.Location;
int width = Convert.ToInt32(panel2.Width);
int height = Convert.ToInt32(panel2.Height);
Bitmap bmp = new Bitmap(width, height);
g = Graphics.FromImage(bmp);
g.DrawLine(p, sp, ep);
h = panel2.CreateGraphics();
h.DrawLine(p, sp, ep);
}
sp = ep;
}
private void panel2_MouseLeave(object sender, EventArgs e)
{
k = 0; }
private void panel2_Paint(object sender, PaintEventArgs e)
{
}
private void button1_Click(object sender, EventArgs e)
{
SaveFileDialog dialog = new SaveFileDialog();
if (dialog.ShowDialog() == DialogResult.OK)
{
/*
Bitmap bmp = Bitmap.FromHbitmap(panel2.CreateGraphics().GetHdc());
panel2.DrawToBitmap(bmp, new Rectangle(0, 0, width, height));*/
int width = panel2.Width;
int height = Convert.ToInt32(panel2.Height);
if (bmp == null)
bmp = new Bitmap(width, height);
bmp.Save(dialog.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}
}
Here is a revised version, pretty much what I told you in the comments..:
public partial class Form2 : Form
{
Graphics g;
Graphics h;
Pen p = new Pen(Color.Black, 1);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int k = 0;
Bitmap bmp =null;
public Form2()
{
InitializeComponent();
bmp = new Bitmap(panel2.ClientSize.Width, panel2.ClientSize.Height);
g = Graphics.FromImage(bmp);
g.Clear(panel2.BackColor);
}
private void pictureBox2_Click(object sender, EventArgs e)
{
p.Color = red.BackColor;
default1.BackColor = red.BackColor;
}
private void color_Click(object sender, EventArgs e)
{
Control ctl = sender as Control;
p.Color = ctl.BackColor;
default1.BackColor = ctl.BackColor;
}
private void panel2_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
ep = e.Location;
g.DrawLine(p, sp, ep);
h = panel2.CreateGraphics();
h.DrawLine(p, sp, ep);
}
sp = ep;
}
private void panel2_MouseDown(object sender, MouseEventArgs e)
{
sp = e.Location;
}
private void button1_Click(object sender, EventArgs e)
{
SaveFileDialog dialog = new SaveFileDialog();
if (dialog.ShowDialog() == DialogResult.OK)
{
bmp.Save(dialog.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}
A few notes:
I mapped all the clicks of the palette control into one.
I have eliminated the flag k by doing the button test in the move.
I have kept the cached Graphics g; this is usually not recommended, but as we keep drawing into one and the same bitmap is is ok.
I have remove all duplicate declaration of the bitmap bmp.
I don't know what the picturebox does, so I didn't touch the code.
Drawbacks of the soution:
Since you don''t keep track of all the moves you can't do a good undo.
Since all lines are drawn separately you can't get good results with broader and/or semi-transparent Pens because the overlapping endpoints will look bad.
For a better solution of simple doodeling see here and after you have studied it you can tackle the even better solution, which will allow you to use all sort of drawing tools here..
Use Graphics.GetHdc Method and save it like this:
Bitmap bitMap = Bitmap.FromHbitmap(g.GetHdc());
bitMap.Save(dialog.FileName, System.Drawing.Imaging.ImageFormat.Bmp);
I've tried many methods including bitmap converting and etc.
Here's my code. Would love it someone will explain to me how to save it and why. Thanks!
public partial class Form1 : Form
{
Graphics G;
Pen myPen = new Pen(Color.Black);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int ctrl = 0;
public Form1()
{
InitializeComponent();
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
sp = e.Location;
if(e.Button == MouseButtons.Left)
{
ctrl = 1;
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
ctrl = 0;
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if(ctrl == 1)
{
ep = e.Location;
G = panel1.CreateGraphics();
G.DrawLine(myPen, sp, ep);
}
sp = ep;
}
private void button1_Click(object sender, EventArgs e)
{
colorDialog1.ShowDialog();
myPen.Color = colorDialog1.Color;
colourBtn.BackColor = colorDialog1.Color;
}
private void clrBtn_Click(object sender, EventArgs e)
{
G.Clear(colorDialog2.Color);
}
private void button1_Click_1(object sender, EventArgs e)
{
colorDialog2.ShowDialog();
panel1.BackColor = colorDialog2.Color;
panel1Colourbtn.BackColor = colorDialog2.Color;
}
private void button1_Click_2(object sender, EventArgs e)
{
SaveFileDialog dlgSave = new SaveFileDialog();
dlgSave.Title = "Save Image";
dlgSave.Filter = "Bitmap Images (*.bmp)|*.bmp|All Files (*.*)|*.*";
if (dlgSave.ShowDialog(this) == DialogResult.OK)
{
using (Bitmap bmp = new Bitmap(panel1.Width, panel1.Height))
{
// how do i save my drawing using savefiledialog?
}
}
}
After you edited your question I suggest to do the following:
create a Bitmap member in your Form with the same dimensions as the panel
create the Graphics G from that bitmap
in your panel1_MouseMove draw on that Graphics (effectivly drawing into the bitmp`
in your panel1_Paint draw that bitmap on the panel and
in your button1_Click_2 save that bitmap:
Code example:
public partial class Form1 : Form
{
Bitmap bmp;
Graphics G;
Pen myPen = new Pen(Color.Black);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int ctrl = 0;
public Form1()
{
InitializeComponent();
// create bitmap
bmp = new Bitmap(panel1.Width, panel1.Height);
// create Graphics
G = Graphics.FromImage(bmp);
G.Clear(Color.Black);
// redraw panel
panel1.Invalidate();
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
// draw bitmap on panel
if (bmp != null)
e.Grahics.DrawImage(bmp, Point.Empty);
}
// shortened for clarity
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if(ctrl == 1)
{
ep = e.Location;
// draw onto graphics -> bmp
G.DrawLine(myPen, sp, ep);
}
sp = ep;
// redraw panel
panel1.Invalidate();
}
private void button1_Click_2(object sender, EventArgs e)
{
SaveFileDialog dlgSave = new SaveFileDialog();
dlgSave.Title = "Save Image";
dlgSave.Filter = "Bitmap Images (*.bmp)|*.bmp|All Files (*.*)|*.*";
if (dlgSave.ShowDialog(this) == DialogResult.OK)
{
bmp.Save(dlgSave.FileName);
}
}
}
Try this:
panel1.DrawToBitmap(bmp, new Rectangle(0, 0, panel1.Width, panel1.Height));
bmp.Save(dlgSave.FileName);
I have a Panel which the user of the application. The panel allows the user to enter their signature digitally. I would like to take the drawing from the panel and copy it to the very end of the richTextBox.
My current code for the panel is as follows:
public partial class Signature : Form
{
SolidBrush color;
float width;
List<List<Point>> _lines;
Boolean _mouseDown;
public Signature()
{
InitializeComponent();
_lines = new List<List<Point>>();
color = new SolidBrush(Color.Black);
_mouseDown = false;
}
private void clear_Click(object sender, EventArgs e)
{
_lines.Clear();
sign.Invalidate();
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
_mouseDown = true;
_lines.Add(new List<Point>());
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (_mouseDown)
{
_lines.Last().Add(e.Location);
sign.Invalidate();
}
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
foreach (var lineSet in _lines)
{
if (lineSet.Count > 1)
{
e.Graphics.DrawLines(new Pen(Color.Black, 4.0F), lineSet.ToArray());
}
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
_mouseDown = false;
}
private void use_Click(object sender, EventArgs e)
{
MessageBox.Show("Signature successfully imported!", "Success!", MessageBoxButtons.OK, MessageBoxIcon.Exclamation);
Basic_Word_Processor.Instance.richTextBoxPrintCtrl1.SelectedText = "";
this.Close();
}
}
}
How can I take the drawing from the Panel and insert it to the end of the richTextBox?
You could first draw the signature to the Bitmap and then copy that bitmap through Clipboard into RichTextBox. You could try this but I must say that it is not tested:
Bitmap bmp = new Bitmap(panel1.Width, panel1.Height);
Rectangle rect = new Rectangle(0, 0, panel1.Width, panel1.Height);
panel1.DrawToBitmap(bmp, rect);
Clipboard.SetImage(bmp);
richTextBox1.Paste();
Or alternatively, you could draw Lines into the Bitmap
I have the following picture box I populate with a barcode then try to print.
Here's the code:
private void button1_Click(object sender, EventArgs e)
{
printDocument1.OriginAtMargins = true;
printDocument1.DocumentName = "TEST IMAGE PRINTING";
printDialog1.Document = printDocument1;
printDialog1.ShowDialog();
printDocument1.Print();
}
private void printDocument1_PrintPage_1(object sender, PrintPageEventArgs e)
{
System.Drawing.Graphics formGraphics = System.Drawing.Graphics.FromImage(picpdf417.Image);
}
You need to actually draw the image:
private void printDocument1_PrintPage_1(object sender, PrintPageEventArgs e)
{
e.Graphics.DrawImage(picpdf417.Image, Point.Empty);
}