Взаимодействие с пером и Windows Ink в приложениях для Windows Pen interactions and Windows Ink in Windows apps

Ручка Surface (доступна для приобретения в Магазине Microsoft). Surface Pen (available for purchase at the Microsoft Store).

Обзор Overview

Оптимизируйте приложение Windows для ввода с помощью пера, чтобы обеспечить стандартную функциональность устройства с указателями и лучшее взаимодействие с Windows для пользователей. Optimize your Windows app for pen input to provide both standard pointer device functionality and the best Windows Ink experience for your users.

Данный раздел посвящен платформе Windows Ink. This topic focuses on the Windows Ink platform. Общую информацию о работе с входными данными указателей, аналогично мыши, сенсорному экрану и сенсорной панели, см. в разделе Работа с входными данными указателя. For general pointer input handling (similar to mouse, touch, and touchpad), see Handle pointer input.

Использование рукописного ввода в приложении Windows Using ink in your Windows app

Использование пера Windows и Windows Ink для создания более привлекательных корпоративных приложений Use Windows Pen and Ink to build more engaging enterprise apps

Платформа Windows Ink — наряду с пером — обеспечивает естественный способ создания цифровых рукописных примечаний, рисунков и заметок. The Windows Ink platform, together with a pen device, provides a natural way to create digital handwritten notes, drawings, and annotations. Платформа поддерживает получение входных данных дигитайзера в виде рукописных данных, создание рукописных данных, управление этими данными, отображение их в виде росчерков пера на устройстве вывода и преобразование этих росчерков в текст с помощью функции распознавания рукописного ввода. The platform supports capturing digitizer input as ink data, generating ink data, managing ink data, rendering ink data as ink strokes on the output device, and converting ink to text through handwriting recognition.

В дополнение к получению данных об основном положении и движении пера, когда пользователь пишет или рисует, ваше приложение также может отслеживать и собирать сведения об изменяющейся силе нажатия, используемой в росчерке. In addition to capturing the basic position and movement of the pen as the user writes or draws, your app can also track and collect the varying amounts of pressure used throughout a stroke. Эти сведения вместе с параметрами формы, размера и поворота кончика пера, цвета чернил и цели (обычный рукописный ввод, стирание, выделение и выбор) позволяют обеспечить результат взаимодействия, очень похожий на письмо или рисунок ручкой, карандашом или кистью на бумаге. This information, along with settings for pen tip shape, size, and rotation, ink color, and purpose (plain ink, erasing, highlighting, and selecting), enables you to provide user experiences that closely resemble writing or drawing on paper with a pen, pencil, or brush.

Ваше приложение может также поддерживать рукописный ввод и от других устройств на основе указателя, например дигитайзеров сенсорного ввода и мыши. Your app can also support ink input from other pointer-based devices, including touch digitizers and mouse devices.

Платформа рукописного ввода очень гибкая. The ink platform is very flexible. Она предназначена для поддержки различных уровней функциональности в зависимости от ваших требований. It is designed to support various levels of functionality, depending on your requirements.

Рекомендации по взаимодействию с пользователем для Windows Ink см. в разделе Элементы управления рукописным вводом. For Windows Ink UX guidelines, see Inking controls.

Компоненты платформы Windows Ink Components of the Windows Ink platform

Компонент Component	Описание Description
InkCanvas InkCanvas	Элемент управления платформы пользовательского интерфейса XAML, который по умолчанию получает и отображает все входные данные от пера как росчерк пера или росчерк стирания. A XAML UI platform control that, by default, receives and displays all input from a pen as either an ink stroke or an erase stroke. Дополнительные сведения о том, как использовать InkCanvas, см. в разделах Распознавание росчерков пера Windows Ink как текста и Хранение и извлечение данных движения пера Windows Ink. For more information about how to use the InkCanvas, see Recognize Windows Ink strokes as text and Store and retrieve Windows Ink stroke data.
Элемента InkPresenter	Объект кода программной части, создаваемый вместе с элементом управления InkCanvas (предоставляется свойством InkCanvas.InkPresenter). A code-behind object, instantiated along with an InkCanvas control (exposed through the InkCanvas.InkPresenter property). Этот объект обеспечивает все возможности рукописного ввода по умолчанию, предоставляемые элементом InkCanvas, вместе с полным набором API для дополнительной настройки и персонализации. This object provides all default inking functionality exposed by the InkCanvas, along with a comprehensive set of APIs for additional customization and personalization. Дополнительные сведения о том, как использовать InkPresenter, см. в разделах Распознавание росчерков пера Windows Ink как текста и Хранение и извлечение данных движения пера Windows Ink. For more information about how to use the InkPresenter, see Recognize Windows Ink strokes as text and Store and retrieve Windows Ink stroke data.
InkToolbar InkToolbar	Элемент управления платформы пользовательского интерфейса XAML, который содержит настраиваемую и расширяемую коллекцию кнопок, включающие связанные с рукописным вводом функции в связанном элементе управления InkCanvas. A XAML UI platform control containing a customizable and extensible collection of buttons that activate ink-related features in an associated InkCanvas. Дополнительные сведения об использовании Инктулбар см. в разделе Добавление инктулбар в приложение Windows для рукописного ввода. For more information about how to use the InkToolbar, see Add an InkToolbar to a Windows app inking app.
IInkD2DRenderer IInkD2DRenderer	Позволяет преобразовать росчерки пера в специальный контекст устройства Direct2D универсального приложения для Windows вместо элемента управления по умолчанию InkCanvas. Enables the rendering of ink strokes onto the designated Direct2D device context of a Universal Windows app, instead of the default InkCanvas control. Это делает возможным полную настройку рукописного ввода. This enables full customization of the inking experience. Дополнительные сведения см. в разделе Сложный пример рукописного ввода. For more information, see the Complex ink sample.

Базовый рукописный ввод с использованием InkCanvas Basic inking with InkCanvas

Чтобы добавить базовую функцию рукописного ввода, просто поместите элемент управления платформы UWP InkCanvas на соответствующую страницу в приложении. To add basic inking functionality, just place an InkCanvas UWP platform control on the appropriate page in your app.

По умолчанию InkCanvas поддерживает рукописный ввод только с помощью пера. By default, the InkCanvas supports ink input only from a pen. Входные данные обрабатываются как росчерк пера с использованием параметров цвета и толщины по умолчанию (черная шариковая ручка с толщиной 2 пикселя) или трактуются как ластик для росчерков (когда ввод осуществляется кончиком ластика или кончиком пера, модифицированным при помощи кнопки стирания). The input is either rendered as an ink stroke using default settings for color and thickness (a black ballpoint pen with a thickness of 2 pixels), or treated as a stroke eraser (when input is from an eraser tip or the pen tip modified with an erase button).

Если кнопка или кончик ластика отсутствуют, InkCanvas можно настроить для обработки ввода кончика пера как росчерка стирания. If an eraser tip or button is not present, the InkCanvas can be configured to process input from the pen tip as an erase stroke.

В этом примере InkCanvas перекрывает фоновое изображение. In this example, an InkCanvas overlays a background image.

Свойство InkCanvas имеет свойства высоты и ширины по умолчанию, если оно не является дочерним элементом элемента, который автоматически изменяет размеры своих дочерних элементов, таких как StackPanel или Grid Controls. An InkCanvas has default Height and Width properties of zero, unless it is the child of an element that automatically sizes its child elements, such as StackPanel or Grid controls.

В этой серии изображений показано, как ввод с помощью пера обрабатывается этим элементом управления InkCanvas. This series of images shows how pen input is rendered by this InkCanvas control.

Пустой элемент InkCanvas с фоновым изображением. The blank InkCanvas with a background image.	InkCanvas с росчерками пера. The InkCanvas with ink strokes.	InkCanvas с одним росчерком (обратите внимание, как операция стирания применяется ко всему росчерку, а не его части). The InkCanvas with one stroke erased (note how erase operates on an entire stroke, not a portion).

Возможности рукописного ввода, поддерживаемые элементом управления InkCanvas, предоставляются объектом кода программной части InkPresenter. The inking functionality supported by the InkCanvas control is provided by a code-behind object called the InkPresenter.

При выполнении базового рукописного ввода вам не нужно беспокоиться об элементе InkPresenter. For basic inking, you don’t have to concern yourself with the InkPresenter. Однако для настройки и конфигурации реакции на рукописный ввод в элементе InkCanvas необходимо получить доступ к соответствующему объекту InkPresenter. However, to customize and configure inking behavior on the InkCanvas, you must access its corresponding InkPresenter object.

Базовая настройка с использованием InkPresenter Basic customization with InkPresenter

InkPresenter нельзя создавать напрямую. The InkPresenter cannot be instantiated directly. Вместо этого доступ к нему осуществляется с помощью свойства InkPresenter элемента InkCanvas. Instead, it is accessed through the InkPresenter property of the InkCanvas.

Помимо всех реакций на рукописный ввод по умолчанию для соответствующего элемента управления InkCanvas, InkPresenter предоставляет полный набор API для дополнительной настройки росчерков и более детализированного управления вводом с помощью пера (стандартного и измененного). Along with providing all default inking behaviors of its corresponding InkCanvas control, the InkPresenter provides a comprehensive set of APIs for additional stroke customization and finer-grained management of the pen input (standard and modified). Это касается свойств росчерков, поддерживаемых типов устройств ввода и того, обрабатываются входные данные объектом или передаются приложению для обработки. This includes stroke properties, supported input device types, and whether input is processed by the object or passed to the app for processing.

Стандартный рукописный ввод (кончик пера или кнопка/кончик ластика) не изменены с помощью таких дополнительных возможностей, как кнопка пера, правая кнопка мыши или подобные механизмы. Standard ink input (from either pen tip or eraser tip/button) is not modified with a secondary hardware affordance, such as a pen barrel button, right mouse button, or similar mechanism.

По умолчанию рукописный ввод поддерживает только ввод с помощью пера. By default, ink is supported for pen input only. Здесь мы настраиваем InkPresenter для интерпретации данных, вводимые пером или мышью, в качестве росчерков пера. Here, we configure the InkPresenter to interpret input data from both pen and mouse as ink strokes. Мы также задаем некоторые исходные атрибуты росчерка пера, используемые для вывода росчерков на InkCanvas. We also set some initial ink stroke attributes used for rendering strokes to the InkCanvas.

Чтобы включить рукописный ввод с помощью мыши и сенсорного ввода, задайте свойство InputDeviceTypesInkPresenter для сочетания значений CoreInputDeviceTypes, которые вам необходимы. To enable mouse and touch inking, set the InputDeviceTypes property of the InkPresenter to the combination of CoreInputDeviceTypes values that you want.

Атрибуты росчерка пера можно задавать динамически в соответствии с предпочтениями пользователя или требованиями к приложению. Ink stroke attributes can be set dynamically to accommodate user preferences or app requirements.

Здесь мы позволяем пользователю выбирать цвет чернил в списке. Here, we let a user choose from a list of ink colors.

Затем мы обрабатываем изменения в выбранном цвете и обновляем соответствующим образом атрибуты росчерка пера. We then handle changes to the selected color and update the ink stroke attributes accordingly.

На этих изображениях показано, как ввод с помощью пера обрабатывается и настраивается элементом InkPresenter. These images shows how pen input is processed and customized by the InkPresenter.

InkCanvas с черными штрихами по умолчанию. The InkCanvas with default black ink strokes.

InkCanvas с выбранными пользователем красными росчерками пера. The InkCanvas with user selected red ink strokes.

Для предоставления функций помимо рукописного ввода и стирания, таких как возможность выбора росчерка, ваше приложение должно определить конкретные входные данные для элемента InkPresenter, чтобы передать необработанные данные для обработки вашим приложением. To provide functionality beyond inking and erasing, such as stroke selection, your app must identify specific input for the InkPresenter to pass through unprocessed for handling by your app.

Передача входных данных для расширенной обработки Pass-through input for advanced processing

По умолчанию InkPresenter обрабатывает все входные данные как росчерк пера или росчерк стирания, включая данные ввода, которые модифицированы дополнительной возможностью оборудования, например кнопкой пера, правой кнопкой мыши или чем-то подобным. By default, InkPresenter processes all input as either an ink stroke or an erase stroke, including input modified by a secondary hardware affordance such as a pen barrel button, a right mouse button, or similar. Тем не менее при использовании этих дополнительных возможностей пользователи обычно ожидают большей функциональности или изменения поведения. However, users typically expect some additional functionality or modified behavior with these secondary affordances.

В некоторых случаях может также понадобиться предоставить дополнительные функции для пера без дополнительных возможностей (функций, которые обычно не связаны с кончиком пера), других типов устройств ввода или изменения поведения на основе выбора пользователя в пользовательском интерфейсе вашего приложения. In some cases, you might also need to expose additional functionality for pens without secondary affordances (functionality not usually associated with the pen tip), other input device types, or some type of modified behavior based on a user selection in your app’s UI.

Для поддержки этого InkPresenter можно настроить оставлять определенные входные данные необработанными. To support this, InkPresenter can be configured to leave specific input unprocessed. Эти необработанные входные данные затем передаются в ваше приложение для обработки. This unprocessed input is then passed through to your app for processing.

Пример. Использование необработанные входных данных для реализации возможности выбора росчерка Example — Use unprocessed input to implement stroke selection

Платформа Windows Ink не предоставляет встроенную поддержку для действий, требующих модификации ввода, таких как возможность выбора росчерка. The Windows Ink platform does not provide built-in support for actions that require modified input, such as stroke selection. Для обеспечения поддержки таких функций необходимо предоставить специальное решение в приложениях. To support features like this, you must provide a custom solution in your apps.

В следующем примере кода (для размещения всего кода используются файлы MainPage.xaml и MainPage.xaml.cs) показаны этапы добавления возможности выбора росчерка, когда входные данные изменяются кнопкой пера (или правой кнопкой мыши). The following code example (all code is in the MainPage.xaml and MainPage.xaml.cs files) steps through how to enable stroke selection when input is modified with a pen barrel button (or right mouse button).

Сначала мы настраиваем пользовательский интерфейс в файле MainPage.xaml. First, we set up the UI in MainPage.xaml.

Здесь мы добавляем холст (под элементом InkCanvas) для рисования росчерка выбора. Here, we add a canvas (below the InkCanvas) to draw the selection stroke. Если использовать отдельный слой для рисования росчерка выбора, элемент InkCanvas и его содержимое останутся без изменений. Using a separate layer to draw the selection stroke leaves the InkCanvas and its content untouched.

В файле MainPage.xaml.cs мы объявляем несколько глобальных переменных для сохранения ссылок на аспекты пользовательского интерфейса выбора. In MainPage.xaml.cs, we declare a couple of global variables for keeping references to aspects of the selection UI. В частности, росчерк лассо выбора и ограничивающий прямоугольник, который выделяет выбранные росчерки. Specifically, the selection lasso stroke and the bounding rectangle that highlights the selected strokes.

Затем мы настраиваем InkPresenter интерпретировать данные, вводимые пером или мышью, как росчерки пера и задаем некоторые исходные атрибуты росчерка пера, используемые для вывода росчерков на InkCanvas. Next, we configure the InkPresenter to interpret input data from both pen and mouse as ink strokes, and set some initial ink stroke attributes used for rendering strokes to the InkCanvas.

Важнее всего то, что мы используем свойство InputProcessingConfiguration элемента InkPresenter для указания того, что любые измененные входные данные должны обрабатываться приложением. Most importantly, we use the InputProcessingConfiguration property of the InkPresenter to indicate that any modified input should be processed by the app. Измененные входные данные указываются путем назначения перечислению InputProcessingConfiguration.RightDragAction значения InkInputRightDragAction.LeaveUnprocessed. Modified input is specified by assigning InputProcessingConfiguration.RightDragAction a value of InkInputRightDragAction.LeaveUnprocessed. Когда установлено это значение, элемент InkPresenter передается в класс InkUnprocessedInput — набор событий указателя для обработки. When this value is set, the InkPresenter passes through to the InkUnprocessedInput class, a set of pointer events for you to handle.

Затем мы назначаем прослушиватели для необработанных событий PointerPressed, PointerMoved и PointerReleased, переданных элементом InkPresenter. We assign listeners for the unprocessed PointerPressed, PointerMoved, and PointerReleased events passed through by the InkPresenter. Все функции выбора реализованы в обработчиках для этих событий. All selection functionality is implemented in the handlers for these events.

Наконец, мы назначаем прослушиватели для событий StrokeStarted и StrokesErased элемента InkPresenter. Finally, we assign listeners for the StrokeStarted and StrokesErased events of the InkPresenter. Мы используем обработчики для этих событий, чтобы очистить пользовательский интерфейс выбора, если начинается новый росчерк или стирается существующий. We use the handlers for these events to clean up the selection UI if a new stroke is started or an existing stroke is erased.

Все функции выбора реализованы в этих обработчиках, включая росчерк лассо и ограничивающий прямоугольник. All selection functionality is implemented in these handlers, including the lasso stroke and the bounding rectangle.

Чтобы закончить обработчик событий PointerReleased, мы очищаем слой выбора всего содержимого (росчерк лассо) и рисуем один ограничивающий прямоугольник вокруг росчерков пера, включенных в область лассо. To conclude the PointerReleased event handler, we clear the selection layer of all content (the lasso stroke) and then draw a single bounding rectangle around the ink strokes encompassed by the lasso area.

Наконец мы определяем обработчики для событий InkPresenter StrokeStarted и StrokesErased. Finally, we define handlers for the StrokeStarted and StrokesErased InkPresenter events.

Оба эти события просто вызывают одну и ту же функцию очистки, чтобы сбросить текущий выбор при обнаружении нового росчерка. These both just call the same cleanup function to clear the current selection whenever a new stroke is detected.

Вот функция для удаления всего пользовательского интерфейса выбора с холста выбора, когда начинается новый росчерк или стирается существующий. Here’s the function to remove all selection UI from the selection canvas when a new stroke is started or an existing stroke is erased.

Пользовательская передача рукописного ввода Custom ink rendering

По умолчанию рукописные данные обрабатываются в фоновом потоке с низкой задержкой и отображаются во время выполнения как «влажные» в процессе ввода. By default, ink input is processed on a low-latency background thread and rendered in-progress, or «wet», as it is drawn. После завершения росчерка (когда пользователь поднял перо или палец либо отпустил кнопку мыши) росчерк обрабатывается в потоке пользовательского интерфейса и отображается «сухим» на слое InkCanvas (над содержимым приложения, вместо влажных рукописных данных). When the stroke is completed (pen or finger lifted, or mouse button released), the stroke is processed on the UI thread and rendered «dry» to the InkCanvas layer (above the application content and replacing the wet ink).

Вы можете переопределить это поведение по умолчанию и полностью управлять рукописным вводом за счет «пользовательской сушки» влажных росчерков пера. You can override this default behavior and completely control the inking experience by «custom drying» the wet ink strokes. Тогда как поведения по умолчанию обычно достаточно для большинства приложений, есть несколько случаев, когда может потребоваться пользовательская сушка: While the default behavior is typically sufficient for most applications, there are a few cases where custom drying might be required, these include:

• Более эффективное управление большими (сложными) коллекциями росчерков пера More efficient management of large, or complex, collections of ink strokes
• Более эффективная поддержка сдвига и масштабирования на больших полотнах рукописного ввода More efficient panning and zooming support on large ink canvases
• Чередование рукописного ввода и других объектов, таких как фигуры или текст с сохранением z-порядка Interleaving ink and other objects, such as shapes or text, while maintaining z-order
• Сушка и синхронное преобразование рукописного ввода в форму DirectX (например, в прямую линию или растровую форму, интегрированную в содержимое приложения, а не в качестве отдельного слоя InkCanvas). Drying and converting ink synchronously into a DirectX shape (for example, a straight line or shape rasterized and integrated into application content instead of as a separate InkCanvas layer).

Для пользовательской сушки требуется объект IInkD2DRenderer, который управляет рукописными данными и преобразовывает их в контекст устройства Direct2D вашего универсального приложения для Windows, вместо элемента управления по умолчанию InkCanvas. Custom drying requires an IInkD2DRenderer object to manage the ink input and render it to the Direct2D device context of your Universal Windows app, instead of the default InkCanvas control.

Оба объекта SurfaceImageSource и VirtualSurfaceImageSource предоставляют приложению поверхность в форме DirectX для рисования, а затем объединяют все биты в содержимое приложения, несмотря на то, что VSIS предоставляет виртуальную поверхность, которая больше экрана, для эффективного сдвига и масштабирования. Both SurfaceImageSource and VirtualSurfaceImageSource provide a DirectX shared surface for your app to draw into and compose into your application’s content, although VSIS provides a virtual surface that’s larger than the screen for performant panning and zooming. Поскольку визуальные обновления на этих поверхностях синхронизируются с потоком пользовательского интерфейса XAML, при отображении рукописного ввода на любой из них влажные рукописные данные могут быть одновременно удалены из InkCanvas. Because visual updates to these surfaces are synchronized with the XAML UI thread, when ink is rendered to either, the wet ink can be removed from the InkCanvas simultaneously.

Вы также можете выполнить пользовательскую сушку данных рукописного ввода для SwapChainPanel, однако синхронизация с потоком пользовательского интерфейса не гарантируется, и может возникнуть задержка между тем, когда данные рукописного ввода отображаются в SwapChainPanel и тем, когда данные рукописного ввода удаляются из InkCanvas. You can also custom dry ink to a SwapChainPanel, but synchronization with the UI thread is not guaranteed and there might be a delay between when the ink is rendered to your SwapChainPanel and when ink is removed from the InkCanvas.

Полный пример этой функциональности см. в статье Сложный пример рукописного ввода. For a full example of this functionality, see the Complex ink sample.

Пользовательская сушка и InkToolbar Custom drying and the InkToolbar
Если ваше приложение переопределяет поведение по умолчанию для отрисовки рукописных данных объекта InkPresenter пользовательской реализацией сушки, отрисованные росчерки пера более недоступны для InkToolbar, а встроенные команды стирания InkToolbar не работают должным образом. If your app overrides the default ink rendering behavior of the InkPresenter with a custom drying implementation, the rendered ink strokes are no longer available to the InkToolbar and the built-in erase commands of the InkToolbar do not work as expected. Для реализации функции стирания необходимо обрабатывать все события указателя, выполнять проверку нажатия для каждого штриха и переопределить встроенную команду «Удалить все рукописные данные». To provide erase functionality, you must handle all pointer events, perform hit-testing on each stroke, and override the built-in «Erase all ink» command.