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

Question

我有一个可以在 Canvas 上绘图的应用程序（例如画图）。 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:

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

当StrokeThickness较小时，一切正常。但是，如果我将 StrokeThickness 设置为更大的数字（例如 100），则线条将以 "zig-zag" 样式绘制，而不是 "solid"。任何想法，如何避免这种情况？或者如何实现 e 圆线（线的圆端）？我认为这会解决问题。

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 设置为合适的值。

也就是说，更优雅的解决方案是将点添加到折线的 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

我想你会被我的回答迷住的：

    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 的线条

Draw line with high StrokeThickness in silverlight

c#

silverlight

xaml

line

stroke