CODEWITHSUNDEEP
c#wpfcanvas
Thanh Dong
Thanh Dong

Reputation: 3

Polyline is drawn wrong position on Canvas

I am simulating painting as same as Paint app in Windows, but can select stroke after drawing.

I draw a polyline by dragging mouse to paint on canvas, but sometimes suddenly a very straight line is drawn.

I checked the point collection of polyline, it is correct.

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)
        {
        }
    }

Could someone please explain me why this issue happened and guide me how to fix it? Polyline with wrong position on canvas

Upvotes: 0

Views: 377

Answers (1)

Clemens
Clemens

Reputation: 128145

In order to avoid "spiky" vertices, set the Polyline's StrokeLineJoin to Round or Bevel:

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

Upvotes: 1

Related Questions