インクを収集する

[アーティクル]
05/04/2023

Windows Presentation Foundation プラットフォームでは、その機能の中核としてデジタルインクが収集されます。このトピックでは、Windows Presentation Foundation (WPF) でインクを収集する方法について説明します。

必須コンポーネント

次の例を使用するには、まず Visual Studio と Windows SDK をインストールする必要があります。また、WPF に対応するアプリケーションの作成方法も理解しておく必要があります。 WPF の概要については、「チュートリアル: 初めての WPF デスクトップアプリケーション」を参照してください。

InkCanvas 要素を使用する

System.Windows.Controls.InkCanvas 要素を使用すると、最も簡単に WPF でインクを収集できます。 InkCanvas 要素を使用して、インク入力を受け取って表示します。インクは一般的に、スタイラスを使用して入力します。スタイラスはデジタイザーとの対話により、インクストロークを生成します。また、スタイラスの代わりにマウスを使用することもできます。作成されたストロークは Stroke オブジェクトとして表され、プログラムとユーザー入力の両方で操作できます。 InkCanvas を使用すると、ユーザーは既存の Stroke を選択、変更、または削除できます。

XAML を使用して、InkCanvas 要素をツリーに追加するだけで簡単にインク収集を設定できます。次の例では、Visual Studio で作成された既定の WPF プロジェクトに InkCanvas を追加します。

<Grid>
  <InkCanvas/>
</Grid>

InkCanvas 要素には子要素を含めることもできます。これにより、ほとんどすべての XAML 要素にインク注釈機能を追加できます。たとえば、テキスト要素にインク機能を追加するには、単にそれを InkCanvas の子にします。

<InkCanvas>
  <TextBlock>Show text here.</TextBlock>
</InkCanvas>

インクを使用したイメージのマークアップのサポートも、簡単に追加できます。

<InkCanvas>
  <Image Source="myPicture.jpg"/>
</InkCanvas>

InkCollection モード

InkCanvas は、EditingMode プロパティを介したさまざまな入力モードをサポートしています。

インクを操作する

InkCanvas は、多くのインク編集操作をサポートしています。たとえば、InkCanvas は消しゴム付きペンの機能をサポートしており、この機能を要素に追加するために追加のコードは必要ありません。

選択ツール

選択モードの設定は、InkCanvasEditingMode プロパティを Select に設定する場合と同じくらい簡単です。

次のコードでは、CheckBox の値に基づいて編集モードを設定します。

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

インクストロークの外観を変更するには、DrawingAttributes プロパティを使用します。たとえば、DrawingAttributes の Color メンバーを使用して、レンダリングされた Stroke の色を設定できます。

次の例では、選択されたストロークの色を赤に変更します。

// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();

// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
    // Change the color of each stroke in the collection to red
    foreach (System.Windows.Ink.Stroke stroke in selection)
    {
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
    }
}

' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()

' Check to see if any strokes are actually selected
If selection.Count > 0 Then
    ' Change the color of each stroke in the collection to red
    Dim stroke As System.Windows.Ink.Stroke
    For Each stroke In  selection
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
    Next stroke
End If

DefaultDrawingAttributes

DefaultDrawingAttributes プロパティを使用すると、InkCanvas で作成されるストロークの高さ、幅、色などのプロパティにアクセスできます。 DefaultDrawingAttributes を変更すると、以降、InkCanvas に入力されるすべてのストロークは、新しいプロパティ値でレンダリングされます。

分離コードファイルの DefaultDrawingAttributes を変更するだけでなく、XAML 構文を使用して DefaultDrawingAttributes プロパティを指定できます。

次の例は、Color プロパティを設定する方法を示しています。このコードを使用するには、Visual Studio で "HelloInkCanvas" という新しい WPF プロジェクトを作成します。 MainWindow.xaml ファイル内のコードを次のコードに置き換えます。

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
    Title="Hello, InkCanvas!" Height="300" Width="300"
    >
  <Grid>
    <InkCanvas Name="inkCanvas1" Background="Ivory">
      <InkCanvas.DefaultDrawingAttributes>
        <Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
      </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>

    <!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it, 
         higher in z-order, so that ink is collected and rendered behind -->
    <StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
      <Button Click="Ink">Ink</Button>
      <Button Click="Highlight">Highlight</Button>
      <Button Click="EraseStroke">EraseStroke</Button>
      <Button Click="Select">Select</Button>
    </StackPanel>
  </Grid>
</Window>

次に、以下のボタンイベントハンドラーを、分離コードファイルの MainWindow クラス内に追加します。

// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
    inkCanvas1.DefaultDrawingAttributes.Height = 2;
}

// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
    inkCanvas1.DefaultDrawingAttributes.Height = 25;
}

// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}

// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}

このコードをコピーしたら、Visual Studio で F5 キーを押して、デバッガーでプログラムを実行します。

StackPanel によってボタンが InkCanvas の上に配置されていることに注意してください。ボタンの上にインクを塗ろうとすると、InkCanvas によってボタンの背後にインクが収集され、レンダリングされます。これは、ボタンが InkCanvas の子ではなく兄弟であるためです。また、ボタンは z オーダーの上位に位置するため、インクはその背後で描画されます。

次の方法で共有