• Статья
  • Чтение занимает 10 мин

Изображение Hero пера Surface.
Ручка Surface (доступна для приобретения в Магазине Microsoft).

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

Мы обращаем внимание на следующее:

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

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

Введение

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

Предварительные требования

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

Примечание

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

Образец кода

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

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

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

Важно!

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

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

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

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

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

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

  1. Откройте скачанный проект в Visual Studio.

  2. В раскрывающемся списке Платформы решений выберите вариант без ARM.

  3. Нажмите клавишу F5, чтобы скомпилировать, развернуть и запустить.

    Примечание

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

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

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

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

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

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

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

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

Примечание

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

В примере:

  1. Откройте файл MainPage.xaml.cs.
  2. Найдите код, отмеченный заголовком этого этапа («// Шаг 2. Использование InkCanvas для поддержки базового рукописного ввода»).
  3. Раскомментируйте следующие строки. (Эти ссылки необходимы для функции, используемой на последующих этапах).
    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;
  1. Откройте файл MainPage.xaml.
  2. Найдите код, помеченный заголовком этого шага (» < !—Шаг 2. базовый рукописный ввод с помощью InkCanvas— > «).
  3. Раскомментируйте следующую строку.
    <InkCanvas x:Name="inkCanvas" />

Вот и все!

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

Снимок экрана: пример приложения Basic Ink, выделенный в этом разделе.

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

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

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

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

Примечание

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

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

В примере:

  1. Откройте файл MainPage.xaml.cs.
  2. Найдите код с заголовком этого шага («// Шаг 3. Поддержка рукописного ввода с помощью мыши и сенсорной панели»).
  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 и свяжите эти два элемента управления.

В примере:

  1. Откройте файл MainPage.xaml.
  2. Найдите код, помеченный заголовком этого шага (» < !—Шаг 4. Добавление панели инструментов для рукописного ввода > ).
  3. Раскомментируйте следующие строки.
    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Примечание

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

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

Снимок экрана с образцом приложения Basic Ink, выделенным в этом разделе, с Инктулбар по умолчанию.

Задача: добавление пользовательской кнопки

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

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

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

Примечание

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

  1. откройте меню и выберите Параметры.
  2. на экране Параметры выберите устройстваперо Windows Ink.
    снимок экрана со страницей параметров Windows Ink пера.
  3. Выберите Изучить почерк, чтобы открыть диалоговое окно Персонализация рукописного текста.
    Снимок экрана диалогового окна

В примере:

  1. Откройте файл MainPage.xaml.
  2. Найдите код, помеченный заголовком этого шага (» < !—Шаг 5. Поддержка распознавания рукописного ввода > ).
  3. Раскомментируйте следующие строки.
    <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" />
  1. Откройте файл MainPage.xaml.cs.
  2. Найдите код с заголовком этого шага (» Шаг 5. Поддержка распознавания рукописного ввода»).
  3. Раскомментируйте следующие строки.
  • Это глобальные переменные, которые необходимы для этого шага.
    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. Снова запустите приложение и напишите что-то, а затем нажмите кнопку Распознавание текста
  2. Результаты распознавания отображаются рядом с кнопкой

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

challenge icon

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

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

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

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

challenge icon

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

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

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

Хорошо! Теперь можно преобразовать рукописные заметки во что-нибудь более разборчивое. Но как насчет этих дрожащих, кофеиносодержащих записок с утреннего собрания «Flowcharters Anonymous»?

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

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

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

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

В примере:

  1. Откройте файл MainPage.xaml
  2. Найдите код, помеченный заголовком этого шага (» < !—Шаг 6: распознавание фигур— > «).
  3. Раскомментируйте эту строку.
   <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" />
  1. Откройте файл MainPage.xaml.cs
  2. Найдите код с заголовком этого шага («// Шаг 6. Распознавание фигур»)
  3. Раскомментируйте эти строки:
    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

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

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }
  1. Запустите приложение, нарисуйте несколько фигур и нажмите кнопку Распознавание форм

Вот пример элементарной блок-схемы из цифрового шаблона.

Снимок экрана элементарной блок-схемы из цифрового напкин.

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

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

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

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

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

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

В примере:

  1. Откройте файл MainPage.xaml.
  2. Найдите код, помеченный заголовком этого шага (» < !—Шаг 7. сохранение и загрузка рукописных данных— > «).
  3. Раскомментируйте следующие строки.
    <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"/>
  1. Откройте файл MainPage.xaml.cs.
  2. Найдите код с заголовком этого шага («// Шаг 7. Загрузка и сохранение рукописного фрагмента»).
  3. Раскомментируйте следующие строки.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Запустите приложение и нарисуйте что-нибудь.
  2. Нажмите кнопку Сохранить и сохраните документ.
  3. Очистите рукописный ввод или перезапустите приложение.
  4. Нажмите кнопку Загрузить и откройте файл с рукописным фрагментом, который вы только что сохранили.

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

Итоги

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

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

Примеры

  • Пример анализа рукописного ввода (базовый) (C#)
  • Пример распознавания рукописного ввода (C#)
  • Сохранение и загрузка росчерков пера из файла Ink Serialized Format (ISF)
  • Сохранение и загрузка росчерков пера из буфера обмена
  • Пример расположения и ориентации панели инструментов рукописного ввода (базовый)
  • Пример расположения и ориентации панели инструментов рукописного ввода (динамичный)
  • Простой пример рукописного ввода (C#/C++)
  • Сложный пример рукописного ввода (C++)
  • Пример рукописного ввода (JavaScript)
  • Начало работы учебник. поддержка рукописного ввода в приложении Windows
  • Пример раскраски
  • Пример семейных заметок