Руководство: Поддержка рукописного ввода в приложении Windows

Основное изображение Surface Pen.
Surface Pen (доступно для покупки в магазине Microsoft Store).

В этом руководстве шаг за шагом описывается, как создать базовое приложение Windows, которое поддерживает ввод текста и рисование с помощью Windows Ink. Мы используем фрагменты кода из примера приложения, которое можно скачать из GitHub (см. Sample code), чтобы продемонстрировать различные функции и связанные api Windows рукописного ввода (см. Components платформы Windows рукописного ввода) на каждом шаге.

Мы сосредоточимся на следующем:

Добавление базовой поддержки рукописного ввода
Добавление панели инструментов для рисования
Поддержка распознавания рукописного ввода
Поддержка базового распознавания фигур
Сохранение и загрузка рукописного ввода

Дополнительные сведения о реализации этих функций см. в разделе Взаимодействие с пером и Windows Ink в приложениях Windows.

Введение

С помощью Windows Ink вы можете предоставить клиентам цифровой эквивалент практически любого опыта использования пера и бумаги, от быстрых рукописных заметок до демонстраций на интерактивной доске, а также от архитектурных и инженерных чертежей до личных шедевров.

Необходимые условия

Компьютер (или виртуальная машина) под управлением текущей версии Windows 10 или Windows 11
Visual Studio настроено для разработки UWP.
[НЕОБЯЗАТЕЛЬНО] Цифровое перо и компьютер с дисплеем, поддерживающим входные данные из этого цифрового пера.

Замечание

Хотя Windows Ink может поддерживать рисование с помощью мыши и сенсорного ввода (мы покажем, как это сделать в шаге 3 этого учебника), для оптимального использования Windows Ink рекомендуется использовать цифровое перо и компьютер с дисплеем, поддерживающим ввод с этого цифрового пера.

Пример кода

В этом руководстве мы используем пример приложения рукописного ввода для демонстрации концепций и функциональных возможностей, описанных в этом руководстве.

Скачайте этот пример Visual Studio и исходный код из GitHub по адресу windows-appsample-get-started-ink sample:

Нажмите зеленую кнопку "Клонировать" или "Скачать "
Если у вас есть учетная запись GitHub, вы можете клонировать репозиторий на локальный компьютер, выбрав Open в Visual Studio
Если у вас нет учетной записи GitHub или требуется только локальная копия проекта, выберите Download ZIP (вам придется регулярно проверять, чтобы скачать последние обновления)

Это важно

Большая часть кода в примере закомментирована. По мере прохождения каждого шага вам будет предложено раскомментировать различные разделы кода. В Visual Studio просто выделите строки кода и нажмите клавишу CTRL-K, а затем CTRL-U.

Компоненты платформы Windows Ink

Эти объекты предоставляют большую часть возможностей рукописного ввода для приложений Windows.

Компонент	Описание
InkCanvas	Элемент управления платформой пользовательского интерфейса XAML, который по умолчанию получает и отображает все входные данные из пера в виде росчерка рукописного ввода или штриха удаления.
InkPresenter	Объект code-behind, созданный вместе с элементом управления InkCanvas (доступный через свойство InkCanvas.InkPresenter). Этот объект предоставляет все функции рукописного ввода по умолчанию, предоставляемые InkCanvas, а также комплексный набор API для дополнительной настройки и персонализации.
InkToolbar	Элемент управления платформы пользовательского интерфейса XAML, содержащий настраиваемую и расширяемую коллекцию кнопок, которые активируют функции, связанные с рукописным вводом, в связанном InkCanvas.
IInkD2DRenderer Здесь мы не рассматриваем эту функциональность, дополнительные сведения см. в примере Комплекс рукописного ввода.	Позволяет отрисовывать росчерки рукописного ввода в указанном контексте устройства Direct2D универсального приложения Windows, а не в элементе управления по умолчанию InkCanvas.

Шаг 1. Запуск примера

После загрузки примера приложения RadialController убедитесь, что он работает.

Откройте пример проекта в Visual Studio.
Установите выпадающее меню "Платформы решения" на вариант, отличный от Arm.
Нажмите клавишу F5, чтобы скомпилировать, развернуть и запустить.

Замечание

Кроме того, можно выбрать пункт меню Отладка>Начать отладку или нажать кнопку "Запуск на локальном компьютере", показанную здесь.

Откроется окно приложения, и после того, как экран-заставка появится в течение нескольких секунд, вы увидите этот начальный экран.

Снимок экрана: пустое приложение.

Теперь у нас есть базовое приложение Windows, которое мы будем использовать в остальной части этого руководства. В следующих шагах мы добавим функции чернильного ввода.

Шаг 2. Использование InkCanvas для поддержки простого рукописного ввода

Возможно, вы уже заметили, что приложение в первоначальной форме не позволяет рисовать ничего с пером (хотя вы можете использовать перо как стандартное устройство указателя для взаимодействия с приложением).

Давайте исправим этот небольшой недостаток на этом шаге.

Чтобы добавить основные функции рукописного ввода, просто поместите элемент управления InkCanvas на соответствующей странице в приложении.

Замечание

InkCanvas имеет свойства Height и Width по умолчанию нулю, если он не является дочерним элементом, который автоматически размерирует его дочерние элементы.

В примере:

Откройте файл MainPage.xaml.cs.
Найдите код, помеченный заголовком этого шага ("// Шаг 2. Использование InkCanvas для поддержки простого рукописного ввода").
Раскомментируйте следующие строки. (Эти ссылки необходимы для функциональных возможностей, используемых в последующих шагах.

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

Откройте файл MainPage.xaml.
Найдите код, помеченный заголовком этого шага ("").
Раскомментируйте следующую строку.

    <InkCanvas x:Name="inkCanvas" />

Вот и все!

Теперь снова запустите приложение. Действуйте смело: черкайте, напишите свое имя или (если у вас есть зеркало или очень хорошая память) нарисуйте свой автопортрет.

Снимок экрана приложения «Пример штриховых чернил», выделенного в этом разделе.

Шаг 3. Поддержка рукописного ввода с помощью сенсорного ввода и мыши

Вы заметите, что по умолчанию рукописный ввод поддерживается только для ввода пера. Если вы пытаетесь написать или нарисовать пальцем, мышью или сенсорной панелью, вы будете разочарованы.

Чтобы перевернуть хмурое лицо, необходимо добавить вторую строку кода. На этот раз он находится в коде для XAML-файла, в котором вы объявили InkCanvas.

На этом шаге мы введем объект InkPresenter , который обеспечивает более детальное управление входными, обработкой и отрисовкой входных данных рукописного ввода (стандартного и измененного) в inkCanvas.

Замечание

Стандартный ввод при помощи пера (наконечник пера или наконечник/кнопка ластика) не изменяется с использованием дополнительного аппаратного средства, например кнопки на корпусе пера, правой кнопки мыши или аналогичного механизма.

Чтобы включить ввод мыши и сенсорного ввода, задайте для свойства InputDeviceTypesinkPresenter сочетание значений CoreInputDeviceTypes , которые требуется.

В примере:

Откройте файл MainPage.xaml.cs.
Найдите код, помеченный заголовком этого шага ("// Шаг 3. Поддержка рукописного ввода с помощью сенсорного ввода и мыши").
Раскомментируйте следующие строки.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Запустите приложение еще раз, и вы обнаружите, что все ваши мечты о рисовании пальцами на экране компьютера сбудутся!

Замечание

При указании типов входных устройств необходимо указать поддержку каждого конкретного типа ввода (включая перо), так как установка этого свойства переопределяет параметр InkCanvas по умолчанию.

InkToolbar — это элемент управления платформой UWP, который предоставляет настраиваемую и расширяемую коллекцию кнопок для активации функций, связанных с рукописным вводом.

По умолчанию панель InkToolbar включает базовый набор кнопок, которые позволяют пользователям быстро выбирать между пером, карандашом, маркером или ластиком, любой из которых можно использовать вместе с набором элементов (линейка или протяжатель). Кнопки пера, карандаша и маркера также предоставляют всплывающее меню для выбора цвета чернил и размера штриха.

Чтобы добавить InkToolbar по умолчанию в приложение для черчения, просто разместите его на той же странице, что и InkCanvas, и свяжите два элемента управления.

В примере

Откройте файл MainPage.xaml.
Найдите код, помеченный заголовком этого шага ("<-- шаг 4. Добавление панели инструментов рукописного ввода --").>
Раскомментируйте следующие строки.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Замечание

Чтобы пользовательский интерфейс и код оставались как можно более простыми, мы используем базовый макет сетки, объявляя панель InkToolbar после InkCanvas в строке сетки. Если вы объявляете его перед InkCanvas, InkToolbar сначала рендерится и отображается под холстом, следовательно, недоступна для пользователя.

Теперь запустите приложение еще раз, чтобы просмотреть панель InkToolbar и попробовать некоторые средства.

Снимок экрана приложения

Задача. Добавление настраиваемой кнопки

Ниже приведен пример настраиваемой InkToolbar (из Sketchpad в рабочей области Windows Ink).

Скриншот панели рукописи из приложения Sketchpad в области рукописного ввода.

Дополнительные сведения о настройке InkToolbar см. в разделе Добавление InkToolbar в приложение Windows для рукописного ввода.

Шаг 5. Поддержка распознавания рукописного ввода

Теперь, когда вы можете написать и нарисовать в приложении, давайте попробуем сделать что-то полезное с этими scribbles.

На этом шаге мы используем функции распознавания рукописного ввода Windows Ink, чтобы попытаться расшифровать написанные вами данные.

Замечание

Распознавание рукописного ввода можно улучшить через настройки Pen & Windows Ink:

Откройте меню "Пуск" и выберите "Параметры".
На экране "Параметры" выберите Устройства>Ручка и Windows Ink.
Выберите "Узнать мой почерк", чтобы открыть диалоговое окно персонализации почерка.

В примере:

Откройте файл MainPage.xaml.
Найдите код, помеченный заголовком этого шага ("<-- шаг 5. Поддержка распознавания рукописного ввода -->").
Раскомментируйте следующие строки.

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

Откройте файл MainPage.xaml.cs.
Найдите код, помеченный заголовком этого шага (шаг 5. Поддержка распознавания рукописного ввода).
Раскомментируйте следующие строки.

Это глобальные переменные, необходимые для этого шага.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

Это обработчик для кнопки Распознавания текста , где выполняется обработка распознавания.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

Снова запустите приложение, напишите что-то, а затем нажмите кнопку "Распознать текст "
Результаты распознавания отображаются рядом с кнопкой

Задача 1. Международное признание

Windows Ink поддерживает распознавание текста для многих языков, поддерживаемых Windows. Каждый языковой пакет включает модуль распознавания рукописного ввода, который можно установить с помощью языкового пакета.

Выберите конкретный язык, выполнив запрос к установленным механизмам распознавания рукописного ввода.

Дополнительные сведения о распознавании рукописного ввода для международных языков см. в разделе Распознавание рукописных штрихов Windows Ink в виде текста.

Задача 2. Динамическое распознавание

Для работы с этим руководством требуется, чтобы кнопка была нажата, чтобы инициировать распознавание. Вы также можете выполнять динамическое распознавание с помощью базовой функции времени.

Для получения дополнительной информации о динамическом распознавании см. раздел Распознавание рукописных вводов Windows Ink как текста.

Шаг 6. Распознавание фигур

Итак, теперь вы можете преобразовать рукописные заметки в что-то немного более удобочитаемое. Но как насчет этих шатких, кофеиновых каракулей с утреннего собрания Анонимного общества составителей блок-схем?

С помощью анализа рукописного ввода приложение также может распознать набор основных фигур, в том числе:

Circle
Алмаз
Рисование
Эллипс
РавностороннийТреугольник
Шестиугольник
Равнобедренный треугольник
Параллелограмм
Пентагон
Четырёхугольник
Прямоугольник
RightTriangle
Square
Трапеция
Triangle

На этом шаге мы используем функции распознавания фигур Windows Ink, чтобы попробовать привести ваши дудлы в порядок.

В этом примере мы не пытаемся перерисовывать чернильные штрихи (хотя это возможно). Вместо этого мы добавляем стандартный холст под InkCanvas, где мы рисуем эквивалентные объекты Ellipse или Polygon, производные от исходного рукописного ввода. Затем мы удаляем соответствующие росчерки рукописного ввода.

В примере:

Откройте файл MainPage.xaml
Найдите код, помеченный заголовком этого шага ("<-- шаг 6. Распознавание фигур -->")
Раскомментируйте эту строку.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

Откройте файл MainPage.xaml.cs
Найдите код, помеченный заголовком этого шага ("// Шаг 6. Распознавание фигур")
Раскомментируйте следующие строки:

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

Запустите приложение, нарисуйте некоторые фигуры и нажмите кнопку "Распознать фигуру "

Ниже приведен пример заурядной блок-схемы из цифровой салфетки.

Снимок экрана: элементарная блок-схема на цифровой салфетке.

Ниже приведена та же блок-схема после распознавания фигур.

Снимок экрана: блок-схема после выбора пользователем фигуры

Шаг 7. Сохранение и загрузка цифровых чернил

Итак, вы закончили свои наброски и довольны результатом, но думаете, что позже захотите внести пару изменений? Вы можете сохранить росчерки рукописного ввода в файл в формате Ink Serialized Format (ISF) и загрузить их для редактирования при возникновении вдохновения.

ISF-файл — это базовый GIF-образ, содержащий дополнительные метаданные, описывающие свойства и поведение рукописного штриха. Приложения, не поддерживающие функции рукописного ввода, могут игнорировать дополнительные метаданные и всё равно загружать основное GIF-изображение (включая прозрачность фона альфа-канала).

Замечание

Спецификация сериализованного формата рукописного ввода (ISF) можно скачать из Центра загрузки Майкрософт.

На этом шаге мы подключим кнопки сохранения и загрузки , расположенные рядом с панелью инструментов рукописного ввода.

В примере:

Откройте файл MainPage.xaml.
Найдите код, помеченный заголовком этого шага ("<-- шаг 7. Сохранение и загрузка рукописного ввода -->").
Раскомментируйте следующие строки.

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

Откройте файл MainPage.xaml.cs.
Найдите код, помеченный заголовком этого шага ("// Шаг 7. Сохранение и загрузка рукописного ввода").
Раскомментируйте следующие строки.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

Запустите приложение и нарисуйте что-то.
Нажмите кнопку "Сохранить " и сохраните рисунок.
Удалите "чернила" или перезапустите приложение.
Нажмите кнопку «Загрузить» и откройте только что сохраненный рукописный файл.

Задача: Использование буфера обмена для копирования и вставки линий рукописного ввода

Windows Ink также поддерживает копирование и вставку рукописных росчерков в буфер обмена и из него.

Дополнительные сведения об использовании буфера обмена и рукописного ввода см. в разделе Сохранение и извлечение данных о штрихах Windows Ink.

Сводка

Поздравляем, вы завершили Input: поддержка рукописного ввода в приложении Windows учебное пособие! Мы показали базовый код, необходимый для поддержки рукописного ввода в приложениях Windows, и как предоставить некоторые из более богатых пользовательских возможностей, поддерживаемых платформой Windows Ink.

Взаимодействие пера и Windows Ink в приложениях Windows.

Образцы

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-11

Руководство: Поддержка рукописного ввода в приложении Windows

Введение

Необходимые условия

Пример кода

Компоненты платформы Windows Ink

Шаг 1. Запуск примера

Шаг 2. Использование InkCanvas для поддержки простого рукописного ввода

В примере:

Шаг 3. Поддержка рукописного ввода с помощью сенсорного ввода и мыши

В примере:

Шаг 4. Добавление панели инструментов рукописного ввода

В примере

Задача. Добавление настраиваемой кнопки

Шаг 5. Поддержка распознавания рукописного ввода

В примере:

Задача 1. Международное признание

Задача 2. Динамическое распознавание

Шаг 6. Распознавание фигур

В примере:

Шаг 7. Сохранение и загрузка цифровых чернил

В примере:

Задача: Использование буфера обмена для копирования и вставки линий рукописного ввода

Сводка

Связанные статьи

Образцы

Обратная связь

Дополнительные ресурсы