Scaling and Hit-Testing in Ink Applications

In addition to recognition of text and similar capabilities, Ink can also be used for annotation and markup of images. Medical and insurance applications are typical examples in which allowing users to mark up images can be a valuable form of input.

Ink is a versatile input medium.

It’s common in imaging applications for images to be displayed at different sizes. If such images are annotated with Ink, it’s necessary for the Ink to be scaled to the current size of the image. Developers just starting with the Tablet PC often find that this is trickier than they thought. This article covers the basics of scaling Ink, including a quick introduction to the concept of transforms, which are one of the underlying mechanisms for scaling Ink, and one about which most developers have never had to worry.

Annotation applications also need to know whether Ink has been entered into a particular area of a drawing. For example, an insurance application might annotate a picture of a car to indicate damaged places. The application might then need to detect whether an annotation had been added that indicated damage only to the door of the vehicle.

This capability is called “hit testing.” The basic technique to do hit testing for Ink is pretty easy. It uses a method of the Ink object, which checks to see if Ink is within or around a given rectangle. But given that the image may be scaled to different sizes and resolutions, the concept of scaling also applies to hit testing, because the rectangle for hit testing must be sized and positioned properly for the currently displayed image.

Because these topics are related, this article also looks at the basics of hit testing, and demonstrates how to scale hit tests to various image sizes.

Logistical notes

The examples in this article are in Visual Basic but can be translated to C# easily. The classes used are the .NET wrapper classes for Ink, so all examples must be done on the .NET Framework.

The step-by-step construction of the examples below assumes that you have a Tablet PC already set up with Visual Studio 2003, and that the standard Ink controls (InkPicture and InkEdit) are present in the Visual Studio toolbox.

These examples should work fine with Visual Studio 2005.

Basics of Scaling

Scaling Ink is an issue under two typical scenarios. First, if an image dynamically becomes larger or smaller in an application, the Ink that overlays the image must scale as well. Second, if Ink is stored and later retrieved, it must be scaled to the present size of the image.

To see the scaling problem, let’s start the example application. In Visual Studio, create a new Windows Application, and name it ScaleAndHitTestSample. When the application comes up, add a new form to the project named InkScaleForm. Drag the corner of the form to make it about twice as wide and twice as high as it appeared by default.

Drag an InkPicture control to the form, and name the control VehicleImage. Set the Image property for the InkPicture to some appropriate bitmapped image. In the example application that you can download for the article (http://dotnetmasters.com/downloads/CodeMagArticle.zip), I have a yellow car, as in Figure 1. Set the Anchor property for the InkPicture to anchor the image to all four sides of the form.

The InkPicture control inherits from the PictureBox control, and has a property derived from PictureBox called SizeMode. By default, this is set to Normal, which means that the image displays from the top left of the control, and that there will be no sizing of the image to accommodate the control’s size. If the image is larger than the control, the image will be clipped.

By: Billy Hollis

Billy Hollis is an author and consultant specializing in .NET technologies. He has written several books and was coauthor of the first book ever published on Visual Basic .NET. He speaks at major conferences worldwide, including TechEd, VSLive, DevConnections, and Microsoft’s Patterns and Practices Architect Summit events. He is available for consulting and training on .NET architecture, smart client systems, Tablet PC, and WPF.

bhollis@dotnetmasters.com