This page explains how zooming and scrolling can be managed via the Renderer object of iink SDK.

View transformation matrix

Although interactive ink is digital by essence, handwriting itself has its roots in the physical world. A user feels comfortable when writing with a certain line spacing and will write differently depending on the type and quality of its stylus. Similarly the recognition engine will not interpret the same way an ink circle, if it is almost undistinguishable from a dot or if it one centimeter wide. True to this anchoring in the physical world, iink SDK internally stores its data in millimeters.

Your application, however, will most likely work in view coordinates, and this is the unit you will rely on to dispatch input to the SDK. As you may also specify a zoom factor, things are likely to get complicated.

MyScript iink SDK makes the link between these two coordinate systems via the view transform of the Renderer object you attached to your editor. It takes into account dpi, zoom and potential offset.

Like with most iink SDK APIs, you do not need to manipulate the transformation matrix yourself. You can however access it by calling GetViewTransform and use it to transform from one system into the other.

View size

The size of the view must be provided to the editor using SetViewSize(). If not, an exception will be raised when trying to attach a part to the editor (note that in the reference implementation, this call is made for you as part of the implementation of the EditorUserControl object).

The size of the view plays an important role to enable interactive content to dynamically reflow and adjust to the view size.

Zoom and scroll management

Zooming and scrolling are managed by acting on the view transformation matrix. Rather than manipulating it directly, however, a set of convenience methods are provided on the renderer object.

Zooming

You can manipulate the absolute value of the view scale with the ViewScale property. A scale of 2.0 will make your content look twice as large as it is in reality, while a scale of 0.5 will render it twice smaller.

Alternatively, you can apply a zoom factor relatively to the current scale by calling Zoom() and passing it the desired factor.

For example:

renderer.ViewScale = 2.0f; // Scale = 2.0
renderer.Zoom(4.0f);       // Scale = 8.0

If you are processing a pinch to zoom gesture, you may also want to specify the location of the point around which to adjust the zoom. In this case, use ZoomAt() and provide the coordinates of the point to consider in addition to the zoom factor you want to apply.

Scrolling

To scroll the view, just apply an offset to the renderer via the ViewOffset property with the x and y absolute components of the offset to consider.

For example:

renderer.ViewOffset = new MyScript.IInk.Graphics.Point(2.0f, 3.0f); // Offset = (2.0, 3.0)
renderer.ViewOffset = new MyScript.IInk.Graphics.Point(2.0f, 2.0f); // Offset = (2.0, 2.0)

Monitoring transformation matrix changes

You may want to attach a listener to the renderer to be notified of transformation matrix changes (for instance to adapt your user interface). Such a listener shall implement the ViewTransformChanged() method of the IRendererListener interface and can be respectively attached to or detached from your rendering using the AddListener() and RemoveListener() methods.

Back to the example

Let’s say that you want to implement an horizontal zoom slider for your handwriting calculator, that calls a SetZoomScale() method on the Calculator object, with a floating value ranging between 0.25 (when it is to the far left) to 4.0 (when it is to the far right), and a medium value of 2.0 (when it is at the center).

You can then implement the method as follows:

public void Zoom(float scale)
{
  renderer.ViewScale = scale;
  renderer.RenderTarget.Invalidate(renderer, LayerType.LayerType_ALL);
}

Now, if you launch your application and move the slider to the right, you will zoom in, and zoom out when moving the slider to the left.

The next part of the step-by-step guide will show how you can style your content.