i am trying to make signature panel in c# windowsform application where input is from drawing tablet
my code as below this code working for line drawing not dot created.
So please suggest how dot and line both are create.
{
Graphics graphics;
Boolean cusorMoving = false;
Pen cursorPen;
int cursorX = -1;
int cursorY = -1;
public SignPad()
{
InitializeComponent();
graphics = panel2.CreateGraphics();
cursorPen = new Pen(Color.Black, 2);
graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
cursorPen.StartCap = System.Drawing.Drawing2D.LineCap.Round;
cursorPen.EndCap = System.Drawing.Drawing2D.LineCap.Round;
}
Mouse Down event
private void panel2_MouseDown(object sender, MouseEventArgs e)
{
cusorMoving = true;
cursorX = e.X;
cursorY = e.Y;
}
private void panel2_MouseUp(object sender, MouseEventArgs e)
{
cusorMoving = false;
cursorX = -1;
cursorY = -1;
}
Mouse Move event
private void panel2_MouseMove(object sender, MouseEventArgs e)
{
if (cursorX != -1 && cursorY != -1 && cusorMoving == true)
{
graphics.DrawLine(cursorPen, new Point(cursorX, cursorY), e.Location);
cursorX = e.X;
cursorY = e.Y;
}
}
You need to store individual points in a collection and draw them separately in the Paint handler. Every time you add a point to the collection, you also need to tell the panel to draw the area where the new segment was added. Something like this:
using System.Collections.Generic;
using System.Drawing;
namespace Lines
{
public partial class SignPad : Form
{
Pen cursorPen = SystemPens.ControlText;
List<Point> points = new List<Point>();
bool cursorMoving = false;
public SignPad()
{
InitializeComponent();
cursorPen = new Pen(Color.Black, 2);
cursorPen.StartCap = System.Drawing.Drawing2D.LineCap.Round;
cursorPen.EndCap = System.Drawing.Drawing2D.LineCap.Round;
}
private void panel2_Paint(object? sender, PaintEventArgs e)
{
var g = e.Graphics;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
for (int i = 1; i < points.Count; ++i)
g.DrawLine(cursorPen, points[i - 1], points[i]);
}
private void panel2_MouseDown(object? sender, MouseEventArgs e)
{
if (!cursorMoving)
{
cursorMoving = true;
points.Clear();
points.Add(e.Location);
panel2.Invalidate();
}
}
private void panel2_MouseMove(object? sender, MouseEventArgs e)
{
if (cursorMoving && points.Count > 0)
{
var p = e.Location;
var q = points[points.Count - 1];
var r = Rectangle.FromLTRB(Math.Min(p.X, q.X), Math.Min(p.Y, q.Y), Math.Max(p.X, q.X), Math.Max(p.Y, q.Y));
r = Rectangle.Inflate(r, (int)cursorPen.Width, (int)cursorPen.Width);
points.Add(p);
panel2.Invalidate(r);
}
}
private void panel2_MouseUp(object? sender, MouseEventArgs e)
{
cursorMoving = false;
}
}
}
Don't forget to add the Paint handler the same way you added MouseMove, MouseDown and MouseUp handlers - in the Designer.
XAML
<Canvas Name="canvas" MouseDown="canvas_MouseDown" MouseUp="canvas_MouseUp" Background="White" MouseMove="canvas_MouseMove" />
C#
Line AnimationLine;
Point P1;
private void canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
P1 = e.GetPosition(canvas);
AnimationLine = new Line() { Stroke = new SolidColorBrush { Color = Colors.Blue },StrokeThickness = 3};
AnimationLine.X1 = P1.X;
AnimationLine.Y1 = P1.Y;
canvas.Children.Add(AnimationLine);
}
private void canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
var P2 = e.GetPosition(canvas);
canvas.Children.Remove(AnimationLine);
//AnimationLine = new Line();
canvas.Children.Add
(new Line()
{
X1 = P1.X,
Y1 = P1.Y,
X2 = P2.X,
Y2 = P2.Y,
StrokeThickness = 3,
Stroke = new SolidColorBrush { Color = Colors.Blue }
});
}
private void canvas_MouseMove(object sender, MouseEventArgs e)
{
if(e.LeftButton == MouseButtonState.Pressed)
{
var P2 = e.GetPosition(canvas);
AnimationLine.X2 = P2.X;
AnimationLine.Y2 = P2.Y;
}
}
i am trying to draw a line first point assigned on mouse down, second point assigned on mouse up and thats when the line gets drawn, but when dragging i want to show the Animation line, animation line which is like a real time guide line.
in order to get it i want to draw a line just like in microsoft paint.
i just wrote the above and it works great, but is this really the way to do it? any built in functionalities that could help?
Your code could be simplified like shown below. In particular you should add handlers for the MouseLeftButtonDown and MouseLeftButtonUp events instead of the more general MouseDown and MouseUp events. Note also that you would typically capture the mouse, and that the only purpose for having a mouse up handler is to release the mouse capture.
XAML:
<Canvas Background="Transparent"
MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
MouseLeftButtonUp="Canvas_MouseLeftButtonUp"
MouseMove="Canvas_MouseMove"/>
Code behind:
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var canvas = (Canvas)sender;
if (canvas.CaptureMouse())
{
var startPoint = e.GetPosition(canvas);
var line = new Line
{
Stroke = Brushes.Blue,
StrokeThickness = 3,
X1 = startPoint.X,
Y1 = startPoint.Y,
X2 = startPoint.X,
Y2 = startPoint.Y,
};
canvas.Children.Add(line);
}
}
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
var canvas = (Canvas)sender;
if (canvas.IsMouseCaptured && e.LeftButton == MouseButtonState.Pressed)
{
var line = canvas.Children.OfType<Line>().LastOrDefault();
if (line != null)
{
var endPoint = e.GetPosition(canvas);
line.X2 = endPoint.X;
line.Y2 = endPoint.Y;
}
}
}
private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
((Canvas)sender).ReleaseMouseCapture();
}
I encounter a strange problem. I've got a canvas and drawed a complexe structure:
an Image inside a Grid inside a Border.
My Image is the one which is active for moving.
It works well the first time i drag my structure but the second time nothing works at all no exception but nothing works. It seems to me to be a problem of mouse capture but i can't catch what's about.
Here is my event code :
bool captured = false;
double x_shape, x_canvas, y_shape, y_canvas;
double x_shape_Origine, y_shape_Origine;
Border source = null;
int CountZ = 10;
private void shape_MoveButtonDown(object sender, MouseButtonEventArgs e)
{
/// AWFULLY SOURCE WAS null. I don't understand Why it was working the
/// first time
Mouse.Capture(source);
captured = true;
Image myImage = (Image)sender;
Grid outerGrid = (Grid)myImage.Parent;
source = (Border)outerGrid.Parent;
Canvas.SetZIndex(source, CountZ++);
x_shape = Canvas.GetLeft(source);
y_shape = Canvas.GetTop(source);
x_canvas = e.GetPosition(myCanvas).X;
y_canvas = e.GetPosition(myCanvas).Y;
}
private void shape_MoveMoving(object sender, MouseEventArgs e)
{
if (captured)
{
double x = e.GetPosition(myCanvas).X;
double y = e.GetPosition(myCanvas).Y;
x_shape += x - x_canvas;
Canvas.SetLeft(source, x_shape);
x_canvas = x;
y_shape += y - y_canvas;
Canvas.SetTop(source, y_shape);
y_canvas = y;
}
}
private void shape_MoveButtonUp(object sender, MouseButtonEventArgs e)
{
Mouse.Capture(null);
captured = false;
}
private void shape_MouseEnter(object sender, MouseEventArgs e)
{
if (!captured)
{
Border inner = (Border)sender;
Grid parentInner = (Grid)inner.Parent;
parentInner.Children[0].Visibility = Visibility.Visible;
parentInner.Children[2].Visibility = Visibility.Visible;
parentInner.Children[5].Visibility = Visibility.Visible;
parentInner.Children[6].Visibility = Visibility.Visible;
parentInner.Children[8].Visibility = Visibility.Visible;
parentInner.Background = new SolidColorBrush(Colors.Red);
}
}
private void shape_MouseLeave(object sender, MouseEventArgs e)
{
if (!captured)
{
Grid outer = (Grid)sender;
outer.Children[0].Visibility = Visibility.Hidden;
outer.Children[2].Visibility = Visibility.Hidden;
outer.Children[5].Visibility = Visibility.Hidden;
outer.Children[6].Visibility = Visibility.Hidden;
outer.Children[8].Visibility = Visibility.Hidden;
outer.Background = null;
}
}
Hope it will make sense for you
I had a complete sample for D&D with WPF and Silverlight. Here full code, hope it helps.
class MyWnd : Window
{
public MyWnd()
{
var c = new Canvas();
c.Background = new SolidColorBrush(Colors.White);
var rect = new Rectangle { Fill = new SolidColorBrush(Colors.Red), Width = 20, Height = 20 };
c.Children.Add(rect);
this.Content = c;
Canvas.SetLeft(rect, 0);
Canvas.SetTop(rect, 0);
rect.MouseLeftButtonDown+=Handle_MouseDown;
rect.MouseLeftButtonUp+=Handle_MouseUp;
rect.MouseMove+=Handle_MouseMove;
}
bool isMouseCaptured;
double mouseVerticalPosition;
double mouseHorizontalPosition;
public void Handle_MouseDown(object sender, MouseEventArgs args)
{
var item = sender as FrameworkElement;
mouseVerticalPosition = args.GetPosition(null).Y;
mouseHorizontalPosition = args.GetPosition(null).X;
isMouseCaptured = true;
item.CaptureMouse();
}
public void Handle_MouseMove(object sender, MouseEventArgs args)
{
var item = sender as FrameworkElement;
if (isMouseCaptured)
{
// Calculate the current position of the object.
double deltaV = args.GetPosition(null).Y - mouseVerticalPosition;
double deltaH = args.GetPosition(null).X - mouseHorizontalPosition;
double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);
// Set new position of object.
item.SetValue(Canvas.TopProperty, newTop);
item.SetValue(Canvas.LeftProperty, newLeft);
// Update position global variables.
mouseVerticalPosition = args.GetPosition(null).Y;
mouseHorizontalPosition = args.GetPosition(null).X;
}
}
public void Handle_MouseUp(object sender, MouseEventArgs args)
{
var item = sender as FrameworkElement;
isMouseCaptured = false;
item.ReleaseMouseCapture();
mouseVerticalPosition = -1;
mouseHorizontalPosition = -1;
}
}
void Main()
{
var wnd = new MyWnd();
wnd.ShowDialog();
}
I'm trying to make an application for a homework assignment that adds a RectangleGeometry to the path.data as GeometryGroup Children and then updates the size while I hold down the mouse button and move the mouse and then finalizes it when on mouseup. The problem is that I need the subsequent rectangles to be drawn over top of the preceeding ones. Setting FillRule to nonzero doesn't accomplish this because it still shows the stroke of the underlying rectangles. So how can I accomplish this?
private void path_MouseDown(object sender, MouseButtonEventArgs e)
{
path.Stroke = strokeColor;
path.Fill = fillColor;
path.StrokeThickness = thickness;
p = Mouse.GetPosition((UIElement)sender);
gg = path.Data as GeometryGroup;
gg.Children.Add(new RectangleGeometry());
}
private void path_MouseMove(object sender, MouseEventArgs e)
{
if (p == null) return;
var pp = Mouse.GetPosition((UIElement)sender);
gg = path.Data as GeometryGroup;
if (index == 0)
{
var pg = gg.Children.Last() as RectangleGeometry;
pg.Rect = new Rect(p.Value, pp);
}
else if(index == 1)
{
var pg = gg.Children.Last() as RectangleGeometry;
pg.RadiusX = pp.X - p.Value.X;
pg.RadiusY = pp.Y - p.Value.Y;
pg.Rect = new Rect(p.Value, pp);
}
}
private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
p = null;
}
I'm trying to draw a single line using OnMouseMove() event. My Problem is that everytime I move the mouse It leaves a trail. I tried to use the refresh method, but when I stop moving the mouse the line is gone. I don't want the line to be drawn OnPaint();, Just want to draw it OnMouseMove().
EDIT: I'm using a transparent panel(cp.ExStyle |= 0x20;), so I cant use the graphics.Clear() and BackColor()
Here's a Sample Image without the Refresh():
Here's my code:
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
Graphics g = panel1.CreateGraphics();
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
using (var p = new Pen(Color.Black, 3))
{
p.StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
p.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
g.DrawLine(p, st, e.Location);
}
Thread.Sleep(30);
Invalidate();
//this.Refresh();
g.Dispose();
}
Regards
The following works for me. Basically keep track of the last line drawn and draw over it with the background color of the panel (gives the effect of clearing it).
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private const int PEN_WIDTH = 3;
private const LineCap START_CAP = LineCap.ArrowAnchor;
private const LineCap END_CAP = LineCap.ArrowAnchor;
Point mAnchorPoint = new Point(10, 10);
Point mPreviousPoint = Point.Empty;
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
using (Graphics g = panel1.CreateGraphics())
{
// Clear last line drawn
using (Pen clear_pen = new Pen(panel1.BackColor, PEN_WIDTH))
{
clear_pen.StartCap = START_CAP;
clear_pen.EndCap = END_CAP;
g.DrawLine(clear_pen, mAnchorPoint, mPreviousPoint);
}
// Update previous point
mPreviousPoint = e.Location;
// Draw the new line
using (Pen draw_pen = new Pen(Color.Black, PEN_WIDTH))
{
draw_pen.StartCap = START_CAP;
draw_pen.EndCap = END_CAP;
g.DrawLine(draw_pen, mAnchorPoint, e.Location);
}
}
}
}
If you panel's background color is set to Transparent, you will need to change panel1.BackColor to panel1.Parent.BackColor
If the Transparent Panel is not working, you could use the DrawReversibleLine function (although this doesn't allow the color or thickness of the line to be changed, it should have no issues with drawing/erasing even if the panel is Transparent:
Point mAnchorPoint = new Point(200, 200);
Point mPreviousPoint = Point.Empty;
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (mPreviousPoint != Point.Empty)
{
// Clear last line drawn
ControlPaint.DrawReversibleLine(PointToScreen(mAnchorPoint), PointToScreen(mPreviousPoint), Color.Pink);
}
// Update previous point
mPreviousPoint = e.Location;
mPreviousPoint.Offset(myPanel1.Location);
// Draw the new line
ControlPaint.DrawReversibleLine(PointToScreen(mAnchorPoint), PointToScreen(mPreviousPoint), Color.Pink);
}
Another simple way to draw a line with mouse in C#:
public partial class Form1 : Form
{
Options_c o = new Options_c();
public Form1()
{
InitializeComponent();
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
o.Allow = false;
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
o.Allow = true;
o.X = e.X;
o.Y = e.Y;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (o.Allow == true)
{
Graphics g = pictureBox1.CreateGraphics();
Pen p1 = new Pen(o.color, 5);
g.DrawLine(p1, o.X,o.Y, e.X, e.Y);
o.X = e.X;
o.Y = e.Y;
}
}
}
class Options_c
{
public Boolean Allow = false;
public Int32 X;
public Int32 Y;
public Color color = Color.Bisque;
}
After
g.DrawLine(p, st, e.Location);
put:
st = e.Location;
Does that fix the problem?
The problem with the line disappearing is that when the panel is repainted, the line is not redrawn. What you really need is to update the end-point of the line-segment when the mouse is moved across the panel and to invalidate the panel. Of course, this will mean that you do handle the Paint event on the panel.
Code here, without the event-handler registration:
Point endPoint;
private void panel1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
using (var p = new Pen(Color.Black, 3))
{
p.StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
p.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
g.DrawLine(p, st, endPoint);
}
Thread.Sleep(30);
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
endPoint = e.Location;
panel1.Invalidate();
}
OKaie, i got it! If you have to draw a line between two geopoint
location on tocuhing these two location, then u have to use the
overlay class in this shape... MY CODE IS :
in Main activity write this code also:
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mapView = (MapView) findViewById(R.id.mapView1);
mapView.setBuiltInZoomControls(true);
mapOverlays = mapView.getOverlays();//it get the mapview all overlays...
mc = mapView.getController();
mc.setZoom(13);
GeoPoint p = new GeoPoint(34159000,73220000);//starting point Abbottabad
GeoPoint p1 = new GeoPoint(41159000,43220000);//starting point Abbottabad
List<Overlay> mapOverlays2 ;
mapOverlays2 = mapView.getOverlays();
projection = mapView.getProjection();
myoverlay = new MarkerOverlay(p,p1);
mapOverlays2.add(myoverlay);//*/
}
class MarkerOverlay extends Overlay
{
GeoPoint p,p1;
private GeoPoint pa;
public MarkerOverlay(GeoPoint p,GeoPoint p1)
{
this.p = p;
this.p1=p1;
Toast.makeText(GoogleMapShowActivity.this, "point value is "+p +"-->"+p1, Toast.LENGTH_LONG).show();
}
public void draw(Canvas canvas, MapView mapView,boolean shadow)//), long when)
{
super.draw(canvas, mapView, shadow);
Paint mPaint = new Paint();
mPaint.setDither(true);
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(4);
GeoPoint gP1 = new GeoPoint(p.getLatitudeE6(),p.getLongitudeE6());//starting point Abbottabad
GeoPoint gP2 = new GeoPoint(p1.getLatitudeE6(),p1.getLongitudeE6());//(33695043,73050000);//End point Islamabad
Point p1 = new Point();
Point p2 = new Point();
Path path1 = new Path();
projection.toPixels(gP1, p1); //changing the latitude into the screen pixels.
projection.toPixels(gP2, p2);
path1.moveTo(p1.x, p1.y);//Moving to Abbottabad location
path1.lineTo(p2.x,p2.y);//Path till Islamabad
canvas.drawPath(path1, mPaint);//Actually drawing the path from Abbottabad to Islamabad
}
//--------------------------//
public boolean onTouchEvent(MotionEvent event, MapView mapView)
{
location_touch++;//this is called two times before executing other codes in thsi method(),
// Toast.makeText(GoogleMapShowActivity.this, "this is mmmm"+location_touch, Toast.LENGTH_LONG).show();
if (event.getAction() == 1)
{
// Toast.makeText(GoogleMapShowActivity.this, "this is me ..."+location_touch, Toast.LENGTH_LONG).show();
GeoPoint p = mapView.getProjection().fromPixels((int) event.getX(), (int) event.getY());
if((location_touch%2)!=0)
{
location_touch=0;
Toast.makeText(GoogleMapShowActivity.this, "VALUE 2..."+location_touch+"gp is "+p+",,"+p1, Toast.LENGTH_LONG).show();
mapView.getOverlays().add(new MarkerOverlay(p,pa));
mapView.invalidate();
}
else //if((location_touch==0 ))
{
pa=p;
Toast.makeText(GoogleMapShowActivity.this, "VALUE 1.."+location_touch+",,,"+p1, Toast.LENGTH_LONG).show();
location_touch++;
}