如何在UWP用C#实现HTML5中canvas各种画图操作

Posted 2023-05-09

画布
用canvas作画，首先，你需要有一块“画布”。如果你的书架里面没有画布，你可以买一卷回来放进去。当然，在网页里面我们不需要花钱买，直接写一个canvas即可，类似：

复制代码
代码如下:

<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas>

其中标签里面的文字是给不支持canvas的浏览器看的，支持的永远看不到。
这个画布的特性有必要说一下，他有两个原生的属性，即width和height.同时，因为他也是一个html元素，所以他也可以使用css来定义width和height，但是，千万要注意：他自身的宽高和通过css定义的宽高是不一样的！
我们用JS来改变Canvas的宽高，是这样的：

复制代码
代码如下:

canvas.width= 400
canvas.height = 300 参考技术A 用Microsoft/Win2D · GitHub

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

【中文标题】如何在 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 绘制形状，然后绘制折线。