Question

我有一个应用程序，您可以在Canvas（如Paint）上绘制。 C＃代码看起来基本上是这样的：

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;
    }
}

画布：

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

当StrokeThickness很小时，一切正常。但是如果我将StrokeThickness设置为更大的数字（例如100），则该线以“Z字形”样式绘制并且不是“实心”。任何想法，如何避免这种情况？或者也许如何实现圆线（圆线的末端）？我认为这可以解决问题。

Answer 1

您应该将行的StrokeLineJoin属性设置为Bevel或Round。

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

有关详细信息，请参阅MSDN上的PenLineJoin Enumeration页面。

或者，您可以将StrokeMiterLimit设置为合适的值。

也就是说，更优雅的解决方案是在Polyline的Points集合中添加点：

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

我认为你会被我的答案所吸引：

enter image description here

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

更顺畅是因为创建了一条真正的路径而不是很多行，我希望你发现它很有用

在silverlight中绘制具有高StrokeThickness的线条

2 个答案: