//
you're reading...
HCI

[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;
 geometry.Figures.Add(f);
 path.Data = geometry;
 mainCanvas.Children.Add(path);
 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;
 geometry.Figures[0].Segments.Add(seg);
 }
 else
 {
 QuadraticBezierSegment seg = new QuadraticBezierSegment(geometry.Figures[0].StartPoint, pos, true);
 geometry.Figures[0].Segments.Add(seg);
 }
 return true;
}

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

Advertisements

About Xiang 'Anthony' Chen

Making an Impact in Your Life

Discussion

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: