Windows アプリでのペン操作と Windows Ink

[アーティクル]
06/02/2023

Surface ペンのヒーローイメージ。
Surface ペン (Microsoft ストアで購入できます)。

概要

ペン入力向けに Windows アプリを最適化して、標準のポインターデバイス機能と最適な Windows Ink エクスペリエンスをユーザーに提供します。

注意

ここでは主に、Windows Ink プラットフォームについて説明します。ポインター入力処理 (マウス、タッチ、タッチパッドに類似) の概要については、「ポインター入力の処理」をご覧ください。

Windows アプリでのインクの使用

Use Windows Pen and Ink to build more engaging enterprise apps (Windows ペンとインクを使ったより魅力的なエンタープライズアプリの構築)

Windows Ink プラットフォームでペンデバイスを使うと、自然な形でデジタルの手書きノート、描画、コメントを作れます。このプラットフォームは、デジタイザー入力のインクデータとしてのキャプチャ、インクデータの生成、インクデータの管理、出力デバイスのインクストロークとしてのインクデータのレンダリング、手書き認識によるインクからテキストへの変換をサポートします。

アプリでは、ユーザーが筆記や描画を行うときの基本的なペンの位置と動きのキャプチャに加えて、ストロークの筆圧の変化を追跡および収集することもできます。この情報が、ペン先の形状、サイズ、回転や、インクの色、用途 (プレーンインク、消去、強調表示、選択) などの設定と組み合わされて、紙の上でペン、鉛筆、ブラシを使っているときに近いユーザーエクスペリエンスが実現されます。

注意

タッチデジタイザーやマウスデバイスなど、他のポインターベースデバイスからの手描き入力をアプリでサポートすることもできます。

インクプラットフォームは非常に柔軟で、必要に応じてさまざまなレベルの機能をサポートできるようになっています。

Windows Ink UX のガイドラインについては、「手描き入力コントロール」をご覧ください。

Windows Ink プラットフォームのコンポーネント

コンポーネント	説明
InkCanvas	既定でペンからのすべての入力を受け取ってインクストロークか消去ストロークとして表示する XAML UI プラットフォームコントロールです。 InkCanvas の使用方法について詳しくは、「Windows インクストロークのテキスト認識」と「Windows Ink ストロークデータの保存と取得」をご覧ください。
InkPresenter	InkCanvas コントロールと共にインスタンス化される分離コードオブジェクトです (InkCanvas.InkPresenter プロパティによって公開されます)。 InkCanvas によって公開される既定の手描き入力機能のすべてと、追加のカスタマイズや個人用設定のための包括的な API のセットを提供します。 InkPresenter の使用方法について詳しくは、「Windows Ink ストロークのテキスト認識」と「Windows Ink ストロークデータの保存と取得」をご覧ください。
InkToolbar	関連付けられた InkCanvas のインク関連機能をアクティブ化する、カスタマイズと拡張が可能なボタンのコレクションが含まれている XAML UI プラットフォームコントロールです。 InkToolbar の使用方法の詳細については、Windows 手描き入力アプリへの InkToolbar の追加に関する記事を参照してください。
IInkD2DRenderer	既定の InkCanvas コントロールの代わりに、ユニバーサル Windows アプリが指定した Direct2D デバイスコンテキストにインクストロークをレンダリングできます。これにより、手描き入力エクスペリエンスの全面的なカスタマイズが実現されます。詳しくは、「複雑なインクのサンプル」をご覧ください。

InkCanvas による基本的な手描き入力

基本的な手描き機能を追加するには、InkCanvas UWP プラットフォームコントロールをアプリの適切なページに配置します。

既定では、InkCanvas はペンからの手描き入力のみをサポートしています。入力は、色と太さの既定の設定 (太さ 2 ピクセルの黒のボールペン) を使ってインクストロークとしてレンダリングされるか、ストロークの消しゴムとして扱われます (ペンの消しゴムからの入力か、消しゴムボタンで変更されたペン先からの入力の場合)。

注意

ペンの消しゴムまたは消しゴムボタンがない場合は、ペン先からの入力を消去ストロークとして処理するように InkCanvas を構成できます。

次の例では、InkCanvas を背景画像にオーバーレイしています。

注意

InkCanvas の Height プロパティと Width プロパティは、子要素 (StackPanel コントロールや Grid コントロールなど) のサイズを自動的に設定する要素の子である場合を除き、既定では 0 です。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
        <TextBlock x:Name="Header"
                   Text="Basic ink sample"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Margin="10,0,0,0" />            
    </StackPanel>
    <Grid Grid.Row="1">
        <Image Source="Assets\StoreLogo.png" />
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

次の一連の画像は、この InkCanvas コントロールによってペン入力がどのようにレンダリングされるかを示しています。


空の InkCanvas と背景画像。	インクストロークを含む InkCanvas。	ストロークの一部が削除された InkCanvas (削除が部分ではなく全体にどのように影響するかに注意してください)。

InkCanvas コントロールでサポートされている手書き入力機能は、InkPresenter という分離コードオブジェクトによって提供されます。

基本的な手書き入力では InkPresenter のことを気にする必要はありませんが、 InkCanvas の手書き入力動作をカスタマイズしたり構成したりするには、対応する InkPresenter オブジェクトにアクセスする必要があります。

InkPresenter による基本的なカスタマイズ

InkPresenter オブジェクトは、各 InkCanvas コントロールと共にインスタンス化されます。

注意

InkPresenter を直接インスタンス化することはできません。代わりに、InkCanvas の InkPresenter プロパティを通じてアクセスします。

InkPresenter には、対応する InkCanvas コントロールの既定の手書き入力動作のすべてに加えて、ストロークの追加のカスタマイズのための包括的な API のセット、および手描き入力 (標準および変更) の細かい管理を提供します。たとえば、ストロークのプロパティ、サポートされている入力デバイスの種類、入力をオブジェクトで処理するかアプリに渡して処理するかなどを指定できます。

注意

標準のインク入力 (ペン先または消しゴムの先端やボタン) は、セカンダリハードウェアアフォーダンス (ペンバレルボタン、マウスの右ボタン、または類似のメカニズムなど) で変更されません。

既定では、インクはペン入力のみをサポートします。次の例では、ペンとマウスの両方の入力データをインクストロークとして解釈するように InkPresenter を構成しています。 InkCanvas へのストロークのレンダリングに使うインクストロークの最初の属性も設定しています。

マウスとタッチによる手描き入力を有効化するには、InkPresenter の InputDeviceTypes プロパティを、必要な CoreInputDeviceTypes 値の組み合わせに設定します。

public MainPage()
{
    this.InitializeComponent();

    // Set supported inking device types.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse |
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

    // Set initial ink stroke attributes.
    InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
    drawingAttributes.Color = Windows.UI.Colors.Black;
    drawingAttributes.IgnorePressure = false;
    drawingAttributes.FitToCurve = true;
    inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
}

インクストロークの属性は、ユーザー設定やアプリの要件に合わせて動的に設定できます。

次の例では、ユーザーがインクの色を一覧から選べるようにしています。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
        <TextBlock x:Name="Header"
                   Text="Basic ink customization sample"
                   VerticalAlignment="Center"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Margin="10,0,0,0" />
        <TextBlock Text="Color:"
                   Style="{StaticResource SubheaderTextBlockStyle}"
                   VerticalAlignment="Center"
                   Margin="50,0,10,0"/>
        <ComboBox x:Name="PenColor"
                  VerticalAlignment="Center"
                  SelectedIndex="0"
                  SelectionChanged="OnPenColorChanged">
            <ComboBoxItem Content="Black"/>
            <ComboBoxItem Content="Red"/>
        </ComboBox>
    </StackPanel>
    <Grid Grid.Row="1">
        <Image Source="Assets\StoreLogo.png" />
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

ユーザーが色を選択したら、その変更を処理して、それに合わせてインクストロークの属性を更新します。

// Update ink stroke color for new strokes.
private void OnPenColorChanged(object sender, SelectionChangedEventArgs e)
{
    if (inkCanvas != null)
    {
        InkDrawingAttributes drawingAttributes =
            inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();

        string value = ((ComboBoxItem)PenColor.SelectedItem).Content.ToString();

        switch (value)
        {
            case "Black":
                drawingAttributes.Color = Windows.UI.Colors.Black;
                break;
            case "Red":
                drawingAttributes.Color = Windows.UI.Colors.Red;
                break;
            default:
                drawingAttributes.Color = Windows.UI.Colors.Black;
                break;
        };

        inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
    }
}

次の画像は、InkPresenter によるペン入力の処理とカスタマイズがどのように行われるかを示しています。

既定の黒いインクストロークを含む InkCanvas を示すスクリーンショット。

既定の黒のインクストロークを含む InkCanvas。

ユーザーが赤いインクストロークを選択した InkCanvas のスクリーンショット。

ユーザーが選択した赤のインクストロークを含む InkCanvas。

手書き入力と消去以外の機能 (ストロークの選択など) を提供するには、アプリで処理するために InkPresenter では未処理のままパススルーする入力をアプリで識別する必要があります。

高度な処理のための入力のパススルー

既定では、InkPresenter によって、すべての入力がインクストロークまたは消去ストロークとして処理されます。こうした入力には、セカンダリハードウェアアフォーダンス (ペンバレルボタン、マウスの右ボタンなど) によって変更された入力も含まれます。ただし、ユーザーは通常、これらのセカンダリアフォーダンスを使うときに、追加機能や動作の変更を期待します。

場合によっては、アプリの UI でユーザーが選択した内容に基づいて、セカンダリアフォーダンス (通常はペン先に関連付けられていない機能) を持たないペンのための追加機能、その他の入力デバイスの種類、または変更された動作を公開することも必要になります。

そのような場合のために、InkPresenter は、特定の入力を処理しないように構成することができます。この未処理の入力は、アプリにパススルーされて処理されます。

例 - 未処理の入力を使って、ストロークの選択を実装する

Windows Ink プラットフォームには、変更された入力を必要とする操作のためのサポート (ストロークの選択など) が組み込まれていません。このような機能をサポートするには、アプリでカスタムソリューションを提供する必要があります。

次のコード例は、ペンバレルボタン (またはマウスの右ボタン) で入力が変更された場合にストロークを選択できるようにする手順を示しています (すべてのコードは MainPage.xaml ファイルと MainPage.xaml.cs ファイルに含まれています)。

まず、MainPage.xaml で UI を設定します。

ここでは、選択ストロークを描画するためのキャンバスを (InkCanvas の下に) 追加しています。別のレイヤーを使って選択ストロークを描画すると、InkCanvas とそのコンテンツに影響を与えずに済みます。

基になる選択キャンバスを含む空白の InkCanvas のスクリーンショット。

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
      <TextBlock x:Name="Header"
        Text="Advanced ink customization sample"
        VerticalAlignment="Center"
        Style="{ThemeResource HeaderTextBlockStyle}"
        Margin="10,0,0,0" />
    </StackPanel>
    <Grid Grid.Row="1">
      <!-- Canvas for displaying selection UI. -->
      <Canvas x:Name="selectionCanvas"/>
      <!-- Inking area -->
      <InkCanvas x:Name="inkCanvas"/>
    </Grid>
  </Grid>

MainPage.xaml.cs で、選択 UI のいくつかの要素への参照を保持するグローバル変数を宣言します。具体的には、なげなわ選択ストロークと、選択されたストロークを強調表示する境界の四角形への参照を保持します。
```
  // Stroke selection tool.
  private Polyline lasso;
  // Stroke selection area.
  private Rect boundingRect;
```

次に、ペンとマウスの両方の入力データをインクストロークとして解釈するように InkPresenter を構成し、InkCanvas へのストロークのレンダリングに使うインクストロークの最初の属性をいくつか設定します。

ここで最も重要なのは、InkPresenter の InputProcessingConfiguration プロパティを使って、変更された入力はアプリで処理するように指定することです。 InputProcessingConfiguration.RightDragAction に InkInputRightDragAction.LeaveUnprocessed という値を割り当てて、変更された入力を指定します。この値が設定されると、InkPresenter によって InkUnprocessedInput クラス (ユーザーが処理できるポインターイベントのセット) にパススルーされます。

InkPresenter によってパススルーされる PointerPressed、PointerMoved、PointerReleased の各未処理イベントのリスナーが割り当てられます。選択機能はすべてこれらのイベントのハンドラーに実装します。

最後に、InkPresenter の StrokeStarted イベントと StrokesErased イベントのリスナーを割り当てます。これらのイベントのハンドラーを使って、新しいストロークが開始された場合や既にあるストロークが消去された場合に選択 UI をクリーンアップします。

既定の黒いインクストロークを含む inkcanvas を示す Advances インクカスタマイズサンプルアプリのスクリーンショット。

  public MainPage()
  {
    this.InitializeComponent();

    // Set supported inking device types.
    inkCanvas.InkPresenter.InputDeviceTypes =
      Windows.UI.Core.CoreInputDeviceTypes.Mouse |
      Windows.UI.Core.CoreInputDeviceTypes.Pen;

    // Set initial ink stroke attributes.
    InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
    drawingAttributes.Color = Windows.UI.Colors.Black;
    drawingAttributes.IgnorePressure = false;
    drawingAttributes.FitToCurve = true;
    inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);

    // By default, the InkPresenter processes input modified by
    // a secondary affordance (pen barrel button, right mouse
    // button, or similar) as ink.
    // To pass through modified input to the app for custom processing
    // on the app UI thread instead of the background ink thread, set
    // InputProcessingConfiguration.RightDragAction to LeaveUnprocessed.
    inkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =
        InkInputRightDragAction.LeaveUnprocessed;

    // Listen for unprocessed pointer events from modified input.
    // The input is used to provide selection functionality.
    inkCanvas.InkPresenter.UnprocessedInput.PointerPressed +=
        UnprocessedInput_PointerPressed;
    inkCanvas.InkPresenter.UnprocessedInput.PointerMoved +=
        UnprocessedInput_PointerMoved;
    inkCanvas.InkPresenter.UnprocessedInput.PointerReleased +=
        UnprocessedInput_PointerReleased;

    // Listen for new ink or erase strokes to clean up selection UI.
    inkCanvas.InkPresenter.StrokeInput.StrokeStarted +=
        StrokeInput_StrokeStarted;
    inkCanvas.InkPresenter.StrokesErased +=
        InkPresenter_StrokesErased;
  }

次に、InkPresenter によってパススルーされる PointerPressed、PointerMoved、PointerReleased の未処理イベントのハンドラーを定義します。

なげなわストロークと境界の四角形を含むすべての選択機能をこれらのハンドラーに実装します。

選択されたなげなわのスクリーンショット。

  // Handle unprocessed pointer events from modified input.
  // The input is used to provide selection functionality.
  // Selection UI is drawn on a canvas under the InkCanvas.
  private void UnprocessedInput_PointerPressed(
    InkUnprocessedInput sender, PointerEventArgs args)
  {
    // Initialize a selection lasso.
    lasso = new Polyline()
    {
        Stroke = new SolidColorBrush(Windows.UI.Colors.Blue),
        StrokeThickness = 1,
        StrokeDashArray = new DoubleCollection() { 5, 2 },
        };

        lasso.Points.Add(args.CurrentPoint.RawPosition);

        selectionCanvas.Children.Add(lasso);
    }

    private void UnprocessedInput_PointerMoved(
      InkUnprocessedInput sender, PointerEventArgs args)
    {
      // Add a point to the lasso Polyline object.
      lasso.Points.Add(args.CurrentPoint.RawPosition);
    }

    private void UnprocessedInput_PointerReleased(
      InkUnprocessedInput sender, PointerEventArgs args)
    {
      // Add the final point to the Polyline object and
      // select strokes within the lasso area.
      // Draw a bounding box on the selection canvas
      // around the selected ink strokes.
      lasso.Points.Add(args.CurrentPoint.RawPosition);

      boundingRect =
        inkCanvas.InkPresenter.StrokeContainer.SelectWithPolyLine(
          lasso.Points);

      DrawBoundingRect();
    }

PointerReleased イベントハンドラーの最後の処理として、選択レイヤーのすべてのコンテンツ (なげなわストローク) をクリアして、なげなわの領域で囲まれたインクストロークの周りに境界の四角形を 1 つ描画します。

選択境界の修正のスクリーンショット。

  // Draw a bounding rectangle, on the selection canvas, encompassing
  // all ink strokes within the lasso area.
  private void DrawBoundingRect()
  {
    // Clear all existing content from the selection canvas.
    selectionCanvas.Children.Clear();

    // Draw a bounding rectangle only if there are ink strokes
    // within the lasso area.
    if (!((boundingRect.Width == 0) ||
      (boundingRect.Height == 0) ||
      boundingRect.IsEmpty))
      {
        var rectangle = new Rectangle()
        {
          Stroke = new SolidColorBrush(Windows.UI.Colors.Blue),
            StrokeThickness = 1,
            StrokeDashArray = new DoubleCollection() { 5, 2 },
            Width = boundingRect.Width,
            Height = boundingRect.Height
        };

        Canvas.SetLeft(rectangle, boundingRect.X);
        Canvas.SetTop(rectangle, boundingRect.Y);

        selectionCanvas.Children.Add(rectangle);
      }
    }

最後に、InkPresenter の StrokeStarted イベントと StrokesErased イベントのハンドラーを定義します。

これらは両方とも同じクリーンアップ関数を呼び出します。これにより、新しいストロークが検出されるたびに現在の選択がクリアされます。

  // Handle new ink or erase strokes to clean up selection UI.
  private void StrokeInput_StrokeStarted(
    InkStrokeInput sender, Windows.UI.Core.PointerEventArgs args)
  {
    ClearSelection();
  }

  private void InkPresenter_StrokesErased(
    InkPresenter sender, InkStrokesErasedEventArgs args)
  {
    ClearSelection();
  }

次の例は、新しいストロークが開始された場合や既にあるストロークが消去された場合に選択キャンバスからすべての選択 UI を削除する関数を示しています。

  // Clean up selection UI.
  private void ClearSelection()
  {
    var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
    foreach (var stroke in strokes)
    {
      stroke.Selected = false;
    }
    ClearDrawnBoundingRect();
   }

  private void ClearDrawnBoundingRect()
  {
    if (selectionCanvas.Children.Any())
    {
      selectionCanvas.Children.Clear();
      boundingRect = Rect.Empty;
    }
  }

カスタムインクレンダリング

既定では、手書き入力は待機時間が短いバックグラウンドスレッドで処理され、描画と同時にレンダリングが実行中となります ("ウェット" レンダリングが実行されます)。ストロークが完了すると (ペンまたは指が画面を離れるか、マウスのボタンが離されると)、UI スレッドでストロークが処理されて、InkCanvas レイヤーへの "ドライ" レンダリングが行われます (アプリケーションコンテンツの上にレンダリングされてウェットインクが置き換えられます)。

ウェットインクストロークを "カスタムドライレンダリング" することによって、この既定の動作を上書きし、手描き入力エクスペリエンスを完全に制御することができます。ほとんどのアプリケーションでは、通常、既定の動作で十分ですが、場合によっては、カスタムドライレンダリングが必要になります。次に例を示します。

大きく複雑なインクストロークのコレクションをより効率的に管理する場合
大きなインクキャンバスでより効率的にパンやズームのサポートを行う場合
Z オーダーを維持しながら、インクや他のオブジェクト (図形やテキストなど) をインターリーブする場合
ドライレンダリングを行い、インクを DirectX 図形に同期的に変換する場合 (たとえば、ラスタライズされ、アプリケーションコンテンツに (個別の InkCanvas レイヤーとしてではなく) 統合される直線や図形など)。

カスタムドライレンダリングでは、手書き入力を管理して、既定の InkCanvas コントロールの代わりにユニバーサル Windows アプリの Direct2D デバイスコンテキストにレンダリングするための IInkD2DRenderer オブジェクトが必要です。

ActivateCustomDrying を (InkCanvas が読み込まれる前に) 呼び出すと、SurfaceImageSource または VirtualSurfaceImageSource へのインクストロークのドライレンダリングの方法をカスタマイズするための InkSynchronizer オブジェクトが作成されます。

SurfaceImageSource と VirtualSurfaceImageSource はどちらも、アプリがアプリケーションのコンテンツに描画し、組み込むための DirectX 共有サーフェスを提供します。ただし VSIS は、効率的なパンやズームのために、画面よりも大きい仮想サーフェスを提供します。これらのサーフェスの表示更新は XAML の UI スレッドと同期されるため、インクをいずれかにレンダリングしたときに、同時にウェットインクが InkCanvas から取り除かれる場合があります。

ドライインクを SwapChainPanel 用にカスタマイズすることもできますが、UI スレッドとの同期は保証されません。インクを SwapChainPanel にレンダリングしたタイミングと、インクが InkCanvas から取り除かれるタイミングの間にずれが生じる可能性があります。

この機能の完全な例については、「複雑なインクのサンプル」をご覧ください。

注意

カスタムドライレンダリングと InkToolbar
カスタムドライの実装によって、アプリが InkPresenter の既定のインクレンダリング動作を上書きすると、レンダリングされたインクストロークが InkToolbar で利用できなくなり、InkToolbar の組み込みの消去コマンドが正常に機能しなくなります。消去機能を提供するには、すべてのポインターイベントを処理し、ストロークごとにヒットテストを実行すると共に、組み込みの [すべてのインクのデータを消去] コマンドをオーバーライドする必要があります。

このセクションの他の記事

トピック	説明
インクストロークの認識	インクストロークを手書き認識によりテキストに変換したり、カスタム認識により図形に変換したりします。
インクストロークの保存と取得	埋め込みの Ink Serialized Format (ISF) メタデータを使って、インクストロークデータをグラフィックス交換形式 (GIF) ファイルに保存します。
Windows 手描き入力アプリへの InkToolbar の追加	既定の InkToolbar を Windows 手描き入力アプリに追加し、カスタムペンボタンを InkToolbar に追加して、カスタムペンボタンをカスタムペン定義にバインドします。

Windows アプリでのペン操作と Windows Ink

概要

Windows Ink プラットフォームのコンポーネント

InkCanvas による基本的な手描き入力

InkPresenter による基本的なカスタマイズ

高度な処理のための入力のパススルー

例 - 未処理の入力を使って、ストロークの選択を実装する

カスタムインクレンダリング

このセクションの他の記事

API

サンプル

サンプルのアーカイブ

フィードバック

その他のリソース

Windows アプリでのペン操作と Windows Ink

概要

Windows Ink プラットフォームのコンポーネント

InkCanvas による基本的な手描き入力

InkPresenter による基本的なカスタマイズ

高度な処理のための入力のパススルー

例 - 未処理の入力を使って、ストロークの選択を実装する

カスタム インク レンダリング

このセクションの他の記事

関連記事

API

サンプル

サンプルのアーカイブ

フィードバック

その他のリソース

カスタムインクレンダリング