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

Статья
01/10/2024

Surface Pen hero image.
Ручка Surface (доступна для покупки в Microsoft Store).

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

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

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

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

Введение

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

Необходимые компоненты

Компьютер (или виртуальная машина) под управлением текущей версии Windows 10 или Windows 11
Visual Studio 2019 и пакет SDK RS2 или более поздней версии
Пакет SDK для Windows 10 (10.0.15063.0)
В зависимости от конфигурации может потребоваться установить пакет NuGet Microsoft.NETCore.UniversalWindowsPlatform и включить режим разработчика в параметрах системы (Параметры> — обновление и безопасность> — для разработчиков —> использование функций разработчиков).
Если вы не знакомы с разработкой приложений Windows с помощью Visual Studio, ознакомьтесь с этими разделами перед началом работы с этим руководством:
- Установка инструментов для Windows App SDK
- Создание приложения Hello, world (XAML)
[НЕОБЯЗАТЕЛЬНО] Цифровое перо и компьютер с дисплеем, поддерживающим входные данные из этого цифрового пера.

Примечание.

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

Пример кода

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

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

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

Важно!

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

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

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

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

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

После скачивания примера приложения RadialController убедитесь, что он выполняется:

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

Примечание.

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

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

Screenshot of the empty app.

Теперь у нас есть базовое приложение Для 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.
Найдите код, помеченный заголовком этого шага ("<-- шаг 2. Простое рукописное ввод с помощью InkCanvas --").>
Раскомментируйте следующую строку.

    <InkCanvas x:Name="inkCanvas" />

Вот и все!

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

Screenshot of the Basic Ink Sample app highlighted in this topic.

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

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

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

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

Примечание.

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

Чтобы включить ввод мыши и сенсорного ввода, задайте для свойства InputDeviceTypes inkPresenter сочетание значений 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 и попробовать некоторые средства.

Screenshot of the Basic Ink Sample app highlighted in this topic with the default InkToolbar.

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

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

Screenshot of the Ink Toolbar from Sketchpad in the Ink Workspace.

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

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

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

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

Примечание.

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

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

В примере:

Откройте файл 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. Распознавание фигур

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

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

Круг
Алмаз
Рисунок
Эллипс
EquilateralTriangle
Hexagon
IsoscelesTriangle
Параллелограмм
Пятиугольник
Четырехугольник
Прямоугольник
RightTriangle
Square
Трапеции
Треугольник

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

В этом примере мы не пытаемся перераскрыть рукописные штрихи (хотя это возможно). Вместо этого мы добавим стандартный холст в 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)
    {
        ...
    }

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

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

Screenshot of a rudimentary flowchart from a digital napkin.

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

Screenshot of the flowchart after the user selects Recognize shape.

Шаг 7. Сохранение и загрузка рукописного ввода

Итак, вы сделали дудлинг и вы любите то, что вы видите, но думаете, что вы можете настроить пару вещей позже? Вы можете сохранить росчерки рукописного ввода в файл рукописного сериализованного формата (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 также поддерживает копирование и вставку рукописных росчерков в буфер обмена и из нее.

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

Итоги

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

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

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

Введение

Необходимые компоненты

Пример кода

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

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

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

В примере:

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

В примере:

В примере

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

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

В примере:

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

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

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

В примере:

Шаг 7. Сохранение и загрузка рукописного ввода

В примере:

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

Итоги

Примеры

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

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

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

Введение

Необходимые компоненты

Пример кода

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

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

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

В примере:

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

В примере:

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

В примере

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

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

В примере:

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

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

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

В примере:

Шаг 7. Сохранение и загрузка рукописного ввода

В примере:

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

Итоги

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

Примеры

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

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