インクの収集

2011-08-09

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

[必須コンポーネント]

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

InkCanvas 要素の使用

WPF で最も簡単にインクを収集する方法は、InkCanvas 要素を使用することです。 InkCanvas 要素は、Tablet PC SDK 1.7 以前のバージョンの InkOverlay オブジェクトに似ています。

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

XAML を使用して、InkCanvas 要素をツリーに追加するだけで簡単にインク収集を設定できます。次の例では、Microsoft Visual Studio 2005 で作成された既定の 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 は、ペンの消しゴムツールによる消去をサポートします。この機能を要素に追加するために、追加コードは必要ありません。

Selection

選択モードは、InkCanvasEditingMode プロパティを Select に設定するだけで、簡単に設定できます。次のコードは、CheckBox の値に基づいて編集モードを設定します。

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

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

DrawingAttributes

DrawingAttributes プロパティは、インクストロークの外観を変更するために使用します。たとえば、DrawingAttributes の Color メンバーは、描画される Stroke の色を設定します。選択されたストロークの色を赤に変更する方法を次の例に示します。

' 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

// 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;
    }
}

DefaultDrawingAttributes

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

分離コードファイルでの DefaultDrawingAttributes の変更に加えて、XAML 構文を使用した DefaultDrawingAttributes プロパティの指定もできます。 Color プロパティを設定する方法を次の XAML コードに示します。このコードを使用するには、Visual Studio 2005 で "HelloInkCanvas" という新しい WPF プロジェクトを作成します。 Window1.xaml ファイルのコードを次のコードに置き換えます。

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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>

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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>

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

' Set the EditingMode to ink input.
Private Sub Ink(ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink

    ' Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = False
    inkCanvas1.DefaultDrawingAttributes.Height = 2

End Sub 'Ink

' Set the EditingMode to highlighter input.
Private Sub Highlight(ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink

    ' Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = True
    inkCanvas1.DefaultDrawingAttributes.Height = 25

End Sub 'Highlight


' Set the EditingMode to erase by stroke.
Private Sub EraseStroke(ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke

End Sub 'EraseStroke

' Set the EditingMode to selection.
Private Sub [Select](ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.Select

End Sub 'Select

// 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;
}

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

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

参照

DrawingAttributes

DefaultDrawingAttributes()

System.Windows.Ink

次の方法で共有

インクの収集

[必須コンポーネント]

InkCanvas 要素の使用

InkCollection モード

インクの操作

Selection

DrawingAttributes

DefaultDrawingAttributes

参照

参照

その他のリソース