This page provides an introduction to the way iink SDK manages the rendering. You will learn how to use the reference implementation provided by MyScript and properly plug things together.

Key concepts

With these concepts, you will be able to better understand how to use the reference rendering implementation or build your own (not documented yet).

Render target

A render target (implementing the IRenderTarget interface) represents the platform “view” where the drawing operations will occur.

Canvas

A canvas object provides a platform implementation of the drawing commands called by iink SDK to render content. It is defined in the ICanvas interface.

A renderer is a component in charge of deciding how to render content of each layer, knowing which area of the model needs to be refreshed, as well as parameters such as zoom factor or view offset. It will issue rendering commands, through a canvas object that will do the actual drawing operations.

Version 1.4 introduced a new rendering capacity for the renderer based on the drawing of offscreen surfaces. This increases the rendering speed and is even necessary for new features like math animation. So it is definitively our recommended choice.

To use this rendering, you must implement the offscreen rendering functions of IRenderTarget and ICanvas introduced in version 1.4, or use the ones provided with the reference implementation, to handle the drawing requests of offscreen surfaces.

Only the UWP reference implementation implements these interfaces for you. For WPF, you should make your own implementation.

The iink SDK 2.0 renderer is still compatible with the legacy rendering mode that we name “direct rendering”.

Layer

For performance reasons, the renderer works on two different layers.

The reference rendering implementation implements these layers for you. However, you may sometimes need to interact with them.

The two layers are:

A model layer, corresponding to everything in the model that was already processed by the engine (guidelines, strokes, images, typeset text, …),
A capture layer, rendering the ink drawn on the screen but not yet processed by the engine.

Each layer can be refreshed independently from the other, so that it is not needed to redraw everything.

Reference implementation

To make it easy to build applications, MyScript provides in its examples repository a default rendering implementation.

It is released as a library, under a permissive license and can be reused as-is or modified should you feel the need. As an integrator, you just have to link against it and do a bit of plumbing:

Instanciate a EditorUserControl object in your application xaml. It is a ready-to-use implementation of a UserControl that holds an Editor and a Renderer, and that handles capture, rendering and some editing commands.

Back to the example

For the rendering part of the calculator, you can just reuse the reference implementation coming with the MyScript iink code examples.

Once the reference implementation has been integrated with your project, all you have to do is the corresponding plumbing:

<Page
  x:Class="Company.Calculator"
  ...
  xmlns:Uc="using:MyScript.IInk.UIReferenceImplementation.UserControls">

  <Grid ...>
    ...
    <Uc:EditorUserControl Grid.Row="1"  x:Name="Editor"></Uc:EditorUserControl>
  </Grid>
</Page>

If you compile and run the application at this point, you will notice that the view currently shows nothing, as you have not added any content to the model yet. This is the goal of the next step of this guide.