在Silverlight中以高StrokeThickness绘制线条

Question

I have an application where you can draw on a Canvas (like Paint). The C# code looks basically like this:

private void startDrawing(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    _drawingStart = e.GetPosition((UIElement)sender);
    _isDrawing = true;
}

private void stopDrawing(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    _isDrawing = false;
}

private void doDrawing(object sender, System.Windows.Input.MouseEventArgs e)
{
    if (_isDrawing)
    {
        Point current = e.GetPosition((UIElement)sender);
        Line line = new Line() { X1 = _drawingStart.X, Y1 = _drawingStart.Y, X2 = current.X, Y2 = current.Y };
        line.Stroke = Color;
        line.StrokeThickness = StrokeThickness;
        DrawingCanvas.Children.Add(line);
        _drawingStart = current;
    }
}

And the Canvas:

<Canvas x:Name="DrawingCanvas"
        Grid.Row="1"
        Grid.Column="1"
        Background="Transparent"
        MouseLeftButtonDown="startDrawing"
        MouseLeftButtonUp="stopDrawing"
        MouseMove="doDrawing" />

When the StrokeThickness is small, everything works normal. But if I set the StrokeThickness to a bigger number (for example 100), the line is drawn in a "zig-zag"-style and isn't "solid". Any ideas, how to avoid this? Or maybe how to achieve e rounded line (rounded ends of the line)? I think this would solve the problem.

Answer 1

You should set the Line's StrokeLineJoin property to either Bevel or Round .

var line = new Line
{
    X1 = _drawingStart.X,
    Y1 = _drawingStart.Y,
    X2 = current.X,
    Y2 = current.Y,
    Stroke = Color,
    StrokeThickness = StrokeThickness,
    StrokeLineJoin = PenLineJoin.Round
};

See the PenLineJoin Enumeration page on MSDN for details.

Alternatively you may set the StrokeMiterLimit to a suitable value.

---

That said, a more elegant solution would be to add points to the Points collection of a Polyline:

private Polyline currentPolyline;

private void startDrawing(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;

    currentPolyline = new Polyline
    {
        Stroke = Color,
        StrokeThickness = StrokeThickness,
        StrokeStartLineCap = PenLineCap.Round,
        StrokeEndLineCap = PenLineCap.Round,
        StrokeLineJoin = PenLineJoin.Round
    };

    currentPolyline.Points.Add(e.GetPosition(canvas));
    canvas.Children.Add(currentPolyline);
}

private void stopDrawing(object sender, MouseButtonEventArgs e)
{
    currentPolyline = null;
}

private void doDrawing(object sender, MouseEventArgs e)
{
    if (currentPolyline != null)
    {
        currentPolyline.Points.Add(e.GetPosition((UIElement)sender));
    }
}

Answer 2

I think you are going to be charmed with my answer:

    Point _drawingStart;
    bool _isDrawing;
    private void startDrawing(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        _drawingStart = e.GetPosition((UIElement)sender);
        InitializePath();
        _isDrawing = true;
    }

    private void stopDrawing(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        _isDrawing = false;
    }

    private void doDrawing(object sender, System.Windows.Input.MouseEventArgs e)
    {
        if (_isDrawing)
        {
            AddPoint(e.GetPosition((UIElement)sender));
        }
    }
 private void AddPoint(Point newpoint)
 {
        LineSegment l = new LineSegment() { Point = newpoint };
        pathFigure.Segments.Add(l);
        pathFigure.StartPoint = (pathFigure.Segments.First() as LineSegment).Point;
    }

    PathFigure pathFigure;
    Path path;
    private void InitializePath()
    {
        path = new Path()
        {
            StrokeLineJoin = PenLineJoin.Bevel,
            StrokeDashCap = PenLineCap.Round,
            StrokeEndLineCap = PenLineCap.Round,
            StrokeStartLineCap = PenLineCap.Round,
            StrokeThickness = 100.0,
            Stroke = new SolidColorBrush(Colors.Red)
        };

        pathFigure = new PathFigure();
        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures = new PathFigureCollection();
        pathGeometry.Figures.Add(pathFigure);
        path.Data = pathGeometry;
        DrawingCanvas.Children.Add(path);
    }

Is smoother because creates a real path instead of many lines, I hope you find it useful