インクの収集
更新 : 2007 年 11 月
Windows Presentation Foundation プラットフォームでは、その機能の中核としてデジタル インクが収集されます。ここでは、Windows Presentation Foundation (WPF) でのインクの収集方法について説明します。
必要条件
以降に示す例を使用するには、まず Microsoft Visual Studio 2005 と Windows SDK をインストールする必要があります。また、WPF に対応するアプリケーションの作成方法も理解しておく必要があります。WPF の概要については、「Windows Presentation Foundation の概要」を参照してください。
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 は、ペンの消しゴム ツールによる消去をサポートします。この機能を要素に追加するために、追加コードは必要ありません。
選択
選択モードは、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="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="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>
次に、以下のボタン イベント ハンドラを、分離コード ファイルの 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 オーダーの上位に位置するため、インクはその背後で描画されます。
参照
参照
DefaultDrawingAttributes()