"画布"上的多段线绘制位置错误

Question

我模拟绘画与Windows中的Paint应用程序相同，但可以在绘制后选择笔划。

我通过拖动鼠标在画布上绘制多段线，但有时会突然画出一条非常直的线。

我检查了多段线的点集合，它是正确的。

private Polyline _drawingLine;
private Ellipse _ellipse;
private void CanvasDrawStudentScreen_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
try
{
// Get point before mouse changes position
Point position = new Point(e.GetPosition(CanvasDrawStudentScreen).X, e.GetPosition(CanvasDrawStudentScreen).Y);
if (_ellipse == null)
{
_ellipse = new Ellipse()
{
Width = 10,
Height = 10,
Fill = new SolidColorBrush(Colors.Blue),
Stroke = new SolidColorBrush(Colors.Blue),
};
_ellipse.MouseDown += _ellipse_MouseDown;
CanvasDrawStudentScreen.Children.Add(_ellipse);
}
Canvas.SetLeft(_ellipse, position.X - 5);
Canvas.SetTop(_ellipse, position.Y - 5);
// Get list point when mouse move
if (e.LeftButton == MouseButtonState.Pressed)
{
_drawingLine.Points.Add(new Point(Canvas.GetLeft(_ellipse) + 5, Canvas.GetTop(_ellipse) + 5));
}
}
catch (Exception ex)
{
}
}
private void _ellipse_MouseDown(object sender, MouseButtonEventArgs e)
{
// Get point
System.Windows.Point startPosition = e.GetPosition(CanvasDrawStudentScreen);
var points = new PointCollection
{
startPosition
};
// Draw at start position
_drawingLine = new Polyline
{
Stroke = Brushes.Black,
StrokeThickness = 10,
Points = points,
};
CanvasDrawStudentScreen.Children.Add(_drawingLine);
Mouse.Capture(_ellipse);
e.Handled = true;
}
private void CanvasDrawStudentScreen_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
try
{
// Get point before mouse changes position
var position = e.GetPosition(CanvasDrawStudentScreen);
// Reset temporary drawn objects
_drawingLine = null;
_ellipse.ReleaseMouseCapture();
}
catch (Exception ex)
{
}
}

有人能解释一下为什么会出现这个问题，并指导我如何解决吗？画布上位置错误的多段线

Answer 1

为了避免"尖峰"顶点，请将多段线的StrokeLineJoin设置为Round或Bevel:

_drawingLine = new Polyline
{
Stroke = Brushes.Black,
StrokeThickness = 10,
StrokeLineJoin = PenLineJoin.Round,
Points = points,
};