C# UWP Canvas Polyline drawing weird results

0
votes

I have a canvas (not InkCanvas!) and I can draw on it. The drawing is done by the PointerMoved event, so everytime the pointer is moved I take the current position of the pointer and add it to a polyline point collection. So far so good. But whenever I move my pointer very small distances the drawn line is really strange like shown below.

enter image description here

(the last horizontal line is not part of the bug, it's because I automatically close the polyline to a polygon)

This is my code snipped:

private void AddPointToPolyline(Polyline pl, object sender, PointerRoutedEventArgs e)
    {
        if (e.Pointer.PointerDeviceType != PointerDeviceType.Touch)
        {
            PointerPoint pt = GetCurrentPointerPosition(sender, e);
            if (pl != null && pt != null && pl.Points.Count > 0 && pl.Points.Any())
            {
                pl.Points.Add(pt.RawPosition);
            }
        }
    }

Like I said above, this method is called everytime the pointer is moved.

I tried to implement a method that checks if two points are too close and if so discards the new point instead of putting it into the polyline. But after that the bug still occured and drawing didn't feel right anymore because it wasn't as smoothy anymore.

Is there any way to fix this bug without changing to a new technology (I don't want to use InkCanvas)?

1
c#canvasuwpdrawingpolyline
Set StrokeLineJoin to a value other than (the default value) Miter. – Clemens
I changed the StrokeLineJoin to Bevel and it fixed all my problems at once. Thank you very much Sir. – eXodiquas
Round might even look smoother :-) – Clemens

1 Answers

1
votes

Like Clemens mentioned in a comment:

StrokeLineJoin to a value other than (the default value) Miter