如何在 UWP C# 中使用 BezierSegment 在 Canvas 上渲染 InkStroke

Posted 2023-02-25

【中文标题】如何在 UWP C# 中使用 BezierSegment 在 Canvas 上渲染 InkStroke

【英文标题】：How to render InkStroke on Canvas using BezierSegment in UWP C#

【发布时间】：2017-05-14 14:06:45

【问题描述】：

我正在将一个应用程序从 javascript 移植到 UWP c#，我正在努力使用新的 InkCanvas。如果您熟悉 UWP 中的新 InkCanvas，我将非常感谢您的帮助。 这是我编写的将 InkStroke 渲染到 Canvas 上的代码。

    public static void Bezier(Canvas canvas, InkStroke stroke)
    
        var segments = stroke.GetRenderingSegments();

        PathFigure pthFigure = new PathFigure()  StartPoint = new Point(segments[0].Position.X, segments[0].Position.Y);

        for (int i = 1; i < segments.Count; i++)
        
            var segment = segments[i];
            var bezier = new BezierSegment();
            bezier.Point1 = new Point(segment.BezierControlPoint1.X, segment.BezierControlPoint1.Y);
            bezier.Point2 = new Point(segment.BezierControlPoint2.X, segment.BezierControlPoint2.Y);
            bezier.Point3 = new Point(segment.Position.X, segment.Position.Y);
            pthFigure.Segments.Add(bezier);
        

        PathGeometry pthGeometry = new PathGeometry();

        pthGeometry.Figures.Add(pthFigure);

        Path path = new Path();
        //path.Stroke = new SolidColorBrush(stroke.DrawingAttributes.Color);
        //path.StrokeThickness = stroke.DrawingAttributes.Size.Height;
        path.Stroke = new SolidColorBrush(Colors.Red);
        path.StrokeThickness = 1;
        path.Data = pthGeometry;

        canvas.Children.Add(path);
    

不幸的是，控制点似乎搞砸了，我不明白为什么。

您可以在下面看到我运行此代码的图像。 黑色描边是最初在 InkCanvas 中渲染的，红色描边是上面代码中在 Canvas 上渲染的。

The black stroke is the one originally rendered in the InkCanvas, and the red stroke is the one rendered on the Canvas from the code above

有人知道我做错了什么吗？

【问题讨论】：

我在我这边测试了你的代码 sn-p，结果看起来像 this picture 所示。这是你期望的结果吗？而且我无法重现您在上图中显示的结果。您能否还提供 XAML 代码以及您如何调用上述方法？还有 uwp 应用版本。

XML代码是动态构建的，不容易复现，但是我发现了问题！我正在设置 drawingAttributes.FitToCurve = false ，这导致控制点为零。我认为这个设置只会影响渲染，但现在它是有道理的，因为我正在调用 GetRenderingSegments。我能够使用 GetInkPoints 绘制形状，然后绘制一条折线。感谢您的及时回复！

【参考方案1】：

我发现了问题！我正在设置 drawingAttributes.FitToCurve = false ，这导致控制点为零。我认为这个设置只会影响渲染，但现在它是有道理的，因为我正在调用 GetRenderingSegments。我可以使用 GetInkPoints 绘制形状，然后绘制折线。