WPFのインク機能①
2013年11月21日
今回からWPFのインクについて紹介します。
WPFのインクは簡単に実装でき、基本的な機能も用意されているのでお勧めです。
まずは開発環境ですが、以下のような環境を利用しました。
OS:Windows 7 Professional 64bit
IDE:Visual Studio Express 2012 for Windows Desktop
Visual Studio Expressは無料で利用できます。
環境がない方はこちらからダウンロードしてください。
それでは、WPFのインクの実装について解説していきます。
1. プロジェクトの作成
C#の「WPFアプリケーション」で作成します。
2. InkCanvasの設定
ソリューションエクスプローラーに、「MainWindow.xaml」というファイルがあるので、
以下のようにInkCanvasを追加します。
<Window x:Class="WpfInkCanvasSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="480" Width="640"> <Grid> <!-- インクのキャンバス --> <InkCanvas x:Name="inkCanvas"/> </Grid> </Window>
3. ペンの太さの変更
デフォルトの線の太さでは、筆圧の変化がわかりにくいので、
MainWindowのコンストラクタに線の太さを変える処理を追加します。
// デフォルトのペンの太さでは筆圧の変化がわかりにくいため、太めに変更する inkCanvas.DefaultDrawingAttributes.Width = 10; inkCanvas.DefaultDrawingAttributes.Height = 10;
以上でインクの実装は終了です。
アプリケーションを実行し、マウスやペンで線を書けるようになっています。
更に筆圧に対応したペンの場合、筆圧を感知して線の太さも変わります。
また、InkCanvasには様々なモードが用意されており、
EditingModeというプロパティからモードを変更することができます。
Ink | 初期はこのモードに設定されています。 ジェスチャーイベントは発生せずに、線の描画のみを行います。 |
GestureOnly | ジェスチャーのみを処理します。 ジェスチャー中の線は描画されますが、ペン等を離した時点で描画していた線は消えます。 |
InkAndGesture | 線の描画に加えて、ジェスチャーイベントも処理します。 このモードの場合、ジェスチャーとして認識されるものは描画されないようです。 |
None | 全ての入力を無効化します。 |
EraseByPoint | ペンが選択した部分を削除します。 いわゆる消しゴムです。 |
EraseByStroke | ペンが選択した線を削除します。 |
それでは、サンプルアプリにEditingModeを変更する機能を追加します。
1. ボタンの設置
InkCanvasの右側に各モードのボタンを設置します。
<Window x:Class="WpfInkCanvasSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="480" Width="640"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100px"/> </Grid.ColumnDefinitions> <!-- インクのキャンバス --> <InkCanvas x:Name="inkCanvas" Grid.Column="0"/> <StackPanel Orientation="Vertical" Background="Gray" Grid.Column="1"> <Button x:Name="eraseByPointBtn" Content="EraseByPoint" Click="eraseByPointBtn_Click"/> <Button x:Name="eraseByStrokeBtn" Content="EraseByStroke" Click="eraseByStrokeBtn_Click"/> <Button x:Name="gestureOnlyBtn" Content="GestureOnly" Click="gestureOnlyBtn_Click"/> <Button x:Name="inkBtn" Content="Ink" Click="inkBtn_Click"/> <Button x:Name="inkAndGestureBtn" Content="InkAndGesture" Click="inkAndGestureBtn_Click"/> <Button x:Name="noneBtn" Content="None" Click="noneBtn_Click"/> <Button x:Name="selectBtn" Content="Select" Click="selectBtn_Click"/> </StackPanel> </Grid> </Window>
2. ボタンイベントの追加
MainWindow.xaml.csにボタンイベントの処理を追加します。
private void eraseByPointBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.EraseByPoint; } private void eraseByStrokeBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.EraseByStroke; } private void gestureOnlyBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.GestureOnly; } private void inkBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.Ink; } private void inkAndGestureBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.InkAndGesture; } private void noneBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.None; } private void selectBtn_Click(object sender, RoutedEventArgs e) { inkCanvas.EditingMode = InkCanvasEditingMode.Select; }
これでアプリケーションを実行し、ボタンを押すことで各モードに切り替えることができます。
サンプルソースはこちらにアップしてありますので、興味のある方は実際に試して頂ければと思います。
次回は、InkCanvasのデータ保存について紹介します。
InkCanvasについて興味のある方は、MSDN内のInkCanvasのページに目を通してみてください。