you're reading...

[UI Basics] A sketch application using WPF

At its simplest, a sketch app lets you use the mouse/pen to draw – i.e., to create strokes.

The pseudo-code:

// mousedown() { initiate a new stroke; }

// mousemove { track the mouse/pen and add to the stroke; }

// mouseup { finish the last bit of the stroke; }

To start a new stroke, we use

private System.Windows.Shapes.Path path = null;
private PathGeometry geometry = null;

A method called startDrawing does the initialization:

private bool startDrawing(Point pos)
 path = new System.Windows.Shapes.Path();
 path.Opacity = 0.7;
 path.StrokeThickness = 10;
 path.StrokeStartLineCap = PenLineCap.Round;
 path.StrokeEndLineCap = PenLineCap.Round;
 path.Stroke = new SolidColorBrush(Colors.Black);
 geometry = new PathGeometry();
 geometry.Figures = new PathFigureCollection();
 PathFigure f = new PathFigure();
 f.StartPoint = pos;
 path.Data = geometry;
 return true;

The other method adds to the stroke (or path) when the mouse/pen moves:

private bool draw(Point pos)
 if (geometry.Figures[0].Segments.Count > 0)
 QuadraticBezierSegment lastLine = (QuadraticBezierSegment)geometry.Figures[0].Segments.Last();
 Point lastEndPoint = lastLine.Point2;
 QuadraticBezierSegment seg = new QuadraticBezierSegment(lastEndPoint, pos, true);
 seg.IsSmoothJoin = true;
 QuadraticBezierSegment seg = new QuadraticBezierSegment(geometry.Figures[0].StartPoint, pos, true);
 return true;

Then these two methods are coupled with the three mouse events, based on the pseudo-code.


About Xiang 'Anthony' Chen

Making an Impact in Your Life


No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Twitter Updates

%d bloggers like this: