How to render InkStroke on Canvas using BezierSegment in UWP C#

Question

I am porting an application from javascript to UWP c# and I am struggling with the new InkCanvas. If you are familiar with the new InkCanvas in UWP, I would truly appreciate your help. This is the code I wrote that takes renders an InkStroke onto a 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);
    }

Unfortunately, the control points seem to be messed up, and I do not understand why.

You can see below an image of what I get running this code. 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.

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

Anyone has any idea of what I am doing wrong?

I testing your code snippet on my side, and the result looks as this picture shows. Is this your expect result? And I cannot reproduce the result you showed on the above picture. Could you please also provide the XAML code and how you invoke above method? And also the uwp app version. — Sunteen Wu
The XML code is not easy to reproduce since I build it dynamically, but I found the problem! I was setting drawingAttributes.FitToCurve = false and this caused the control points to be zero. I assumed this setting was only affecting the rendering, but now it makes sense because I was calling GetRenderingSegments. I was able to draw the shape by using GetInkPoints and then draw a polyline. Thanks for the prompt reply! — ClaudiaWey

ClaudiaWey ClaudiaWey · Accepted Answer · 2017-06-01T19:24:39

I found the problem! I was setting drawingAttributes.FitToCurve = false and this caused the control points to be zero. I assumed this setting was only affecting the rendering, but now it makes sense because I was calling GetRenderingSegments. I was able to draw the shape by using GetInkPoints and then draw a polyline.

How to render InkStroke on Canvas using BezierSegment in UWP C#

1 Answers