Language: HTML | XAML

Responding to pen and stylus interactions (HTML)

Applies to Windows only

Make an app that can create handwritten notes, drawings, and annotations, by adding support for a pen or stylus.

Tip  The info in this topic is specific to developing Windows Store apps using JavaScript.

See Responding to pen and stylus interactions (XAML) for Windows Store app using C++, C#, or Visual Basic.

Prerequisites:  If you're new to developing Windows Store apps using JavaScript, have a look through these topics to get familiar with the technologies discussed here.

Create your first Windows Store app using JavaScript

Roadmap for Windows Store apps using JavaScript

Learn about events with Quickstart: adding HTML controls and handling events

App features, start to finish:  Explore this functionality in more depth as part of our App features, start to finish series

User interaction, start to finish (HTML)

User interaction customization, start to finish (HTML)

Note  

The platform control libraries (HTML and XAML) provide the full Windows user interaction experience, including standard interactions, animated physics effects, and visual feedback. If you don't need customized interaction support, use these built-in controls.

If the platform controls are not sufficient, these user interaction guidelines can help you provide a compelling and immersive interaction experience that is consistent across input modes. These guidelines are primarily focused on touch input, but they are still relevant for touchpad, mouse, keyboard, and stylus input.

Samples:  See this functionality in action in our Windows Store app samples.

User interaction customization, start to finish sample

Input: Device capabilities sample

Input: DOM pointer event handling sample

Input: Ink sample

Input: Simplified ink sample

Overview

A pen/stylus can serve as a precision pointing device. It can also be a drawing device associated with digital ink.

The Windows 8 ink platform, together with a pen/stylus device, provides a natural way to create handwritten notes, drawings, and annotations. The platform supports capturing ink data from digitizer input, generating ink data, rendering that data as ink strokes on the output device, managing the ink data, and performing handwriting recognition.

In addition to capturing the spatial movements of the pen as the user writes or draws, your app can also collect info such as pressure, shape, color, and opacity, to offer user experiences that closely resemble drawing on paper with a pen, pencil, or brush.

Note  The ink platform in Windows 8 also supports input from other pointer devices, including touch digitizers and mouse devices.

The inherent precision of pen input is supported naturally by the UI of Windows 8, which is optimized for the imprecise nature of touch. Optimize your Windows Store app design for touch input and get basic pen support by default.

To support pen interactions in scenarios that emphasize direct manipulation, use pen-specific UI to provide equivalent functionality for the users of your app independent of the device they are using. For example, when a pen is detected use a scrollbar to emulate panning or previous and next buttons to flip through pages of content.

In this section

TopicDescription

Quickstart: Capturing ink data

This Quickstart walks you through capturing ink data from an input digitizer.

How to render ink data

Learn how to render ink stroke segments as smooth Bézier curves.

How to save ink data

This topic demonstrates how to save ink data by serializing it as Ink Serialized Format (ISF) metadata and embedding the metadata into a Graphics Interchange Format (GIF) file.

How to load ink data

This topic demonstrates how to load ink data by de-serializing it from ISF metadata embedded in a GIF file.

How to select ink strokes

Learn how to select ink strokes in a Windows Store app using JavaScript.

How to erase ink strokes

Learn how to erase ink strokes in a Windows Store app using JavaScript.

How to convert ink strokes to text

Learn how to use handwriting recognition and convert ink strokes to text in a Windows Store app using JavaScript.

 

Related topics

Conceptual
Responding to user interaction

 

 

Show:
© 2014 Microsoft