Drawing / Inking API in WinRT (C#) – I

Code Sample: Windows 8 Input: Ink sample in C#/Xaml

If you are planning to develop an application that is going to have the drawing capability, one of the first namespaces to resort to in WinRT is the Inking namespace. Using the InkManager in Windows 8 (Metro) applications, you can:

• Draw ink strokes
• Capture ink strokes
• Render Strokes on a Canvas using different geometries
• Select Strokes
• Delete Strokes
• Save and Load Strokes
• Convert strokes to text through handwriting recognition
• Copy/Paste strokes from the clipboard
• Hit Test the pen input

In  this article, we will be talking about different methodologies for rendering the pen input on the Canvas element on Metro applications.

You can get the complete solution that will be used as the example from TechNet : Windows 8 Input: Ink sample in C#/Xaml

Rendering Pointer Movements

Maybe the easiest and the most efficient way to render the pen input is to render each pointer movement when the pointer is pressed until it is released.

For this purpose, we add a canvas element on our page:

<Grid Background=”White”>
    <Canvas Name=”InkCanvas” Background=”White” Margin=”0,0,0,0″ />
</Grid>

Let us add the pointer handlers to our page. We need two handlers for PointerPressed, PointerMoved.

public void OnCanvasPointerPressed(object sender, PointerRoutedEventArgs e)
{
    // Get information about the pointer location.
    PointerPoint pt = e.GetCurrentPoint(InkCanvas);
    m_PreviousContactPoint = pt.Position;

    // Accept input only from a pen or mouse with the left button pressed.
    PointerDeviceType pointerDevType = e.Pointer.PointerDeviceType;
    if (pointerDevType == PointerDeviceType.Pen ||
        pointerDevType == PointerDeviceType.Mouse && pt.Properties.IsLeftButtonPressed)
    {
        e.Handled = true;
    }
    else if (pointerDevType == PointerDeviceType.Touch)
    {
        // Process touch input
    }
}

When the user presses the pointer or uses the Ink Pen, we just record the starting point (m_PreviousContactPoint) to use.

Then when the pointer moves, we assume that the user is trying to draw something on the canvas:

public void OnCanvasPointerMoved(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerId == m_PenId)
    {
        PointerPoint pt = e.GetCurrentPoint(InkCanvas);

        currentContactPt = pt.Position;
        x1 = m_PreviousContactPoint.X;
        y1 = m_PreviousContactPoint.Y;
        x2 = currentContactPt.X;
        y2 = currentContactPt.Y;

        var color = m_CurrentDrawingColor;
        var size = m_CurrentDrawingSize;

        if (CalculateDistance(x1, y1, x2, y2) > 2.0)
        {
            //
            // If the delta of the mouse is significant enough,
            // we add a line geometry to the Canvas
            Line line = new Line()
            {
                X1 = x1,
                Y1 = y1,
                X2 = x2,
                Y2 = y2,
                StrokeThickness = size,
                Stroke = new SolidColorBrush(color)
            };

            m_PreviousContactPoint = currentContactPt;

           // Draw the line on the canvas by adding the Line object as
           // a child of the Canvas object.
           InkCanvas.Children.Add(line);
        }
    }
    else if (e.Pointer.PointerId == m_TouchId)
    {
        // Process touch input
    }
}

And for the PointerReleased, we just set e.Handled to true.

At this point we already have an example that can draw images and of which you can adjust the size and the color of the drawn lines.

But what if you want to use some more advanced functions such as hand writing recognition or copy/paste and save/load functionality. For these options, it is better to use InkManager and render the strokes that the InkManager records.

Rendering Strokes from InkManager

For the InkManager to be able to record the strokes, we need to pass on the pointer events to the InkManager.

In the PointerPressed event handler:

// (Already have) PointerPoint pt = e.GetCurrentPoint(InkCanvas);

// Pass the pointer information to the InkManager.
CurrentManager.ProcessPointerDown(pt);

In the PointerMoved event handler:

// Pass the pointer information to the InkManager.
CurrentManager.ProcessPointerUpdate(pt);

In the PointerReleased event handler:

// Pass the pointer information to the InkManager.
CurrentManager.ProcessPointerUp(pt);

S0 once we are recording the movements of the pointer, the InkManager will create a list of strokes for us to use to render.

You can render each stroke using a BezierSegment and a PathFigureCollection.

private void RenderStroke(InkStroke stroke, Color color, double width, double opacity = 1)
{
    // Each stroke might have more than one segments
    var renderingStrokes = stroke.GetRenderingSegments();

    //
    // Set up the Path to insert the segments
    var path = new Windows.UI.Xaml.Shapes.Path();
    path.Data = new PathGeometry();
    ((PathGeometry)path.Data).Figures = new PathFigureCollection();

    var pathFigure = new PathFigure();
    pathFigure.StartPoint = renderingStrokes.First().Position;
    ((PathGeometry)path.Data).Figures.Add(pathFigure);

    //
    // Foreach segment, we add a BezierSegment
    foreach (var renderStroke in renderingStrokes)
    {
        pathFigure.Segments.Add(new BezierSegment()
        {
            Point1 = renderStroke.BezierControlPoint1,
            Point2 = renderStroke.BezierControlPoint2,
            Point3 = renderStroke.Position
        });
    }

    // Set the general options (i.e. Width and Color)
    path.StrokeThickness = width;
    path.Stroke = new SolidColorBrush(color);

    // Opacity is used for highlighter
    path.Opacity = opacity;

    InkCanvas.Children.Add(path);
}

You can retrieve a list of strokes by calling the GetStrokes method of the InkManager.

Further Implementation

To create a complete implementation, you can create a Refresh method which would remove the Line elements that are added while the user is still moving the pointer and only render the strokes from the InkManager.

The refresh method would then be called when the user releases the pointer and the temporary paths that are drawn during the action are replaced by the BezierSegments.

You can continue the second part where we discuss the loading and saving of the Ink Strokes here: Drawing / Inking API in WinRT (C#) – II