WPFのインク機能①

2013年11月21日

LINEで送る

今回からWPFのインクについて紹介します。
WPFのインクは簡単に実装でき、基本的な機能も用意されているのでお勧めです。

まずは開発環境ですが、以下のような環境を利用しました。

OS:Windows 7 Professional 64bit
IDE:Visual Studio Express 2012 for Windows Desktop

Visual Studio Expressは無料で利用できます。
環境がない方はこちらからダウンロードしてください。

それでは、WPFのインクの実装について解説していきます。

1. プロジェクトの作成
C#の「WPFアプリケーション」で作成します。

wpf_01_00

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;

以上でインクの実装は終了です。
アプリケーションを実行し、マウスやペンで線を書けるようになっています。
更に筆圧に対応したペンの場合、筆圧を感知して線の太さも変わります。

wpf_01_01

また、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;
}

これでアプリケーションを実行し、ボタンを押すことで各モードに切り替えることができます。

wpf_01_02

サンプルソースはこちらにアップしてありますので、興味のある方は実際に試して頂ければと思います。

次回は、InkCanvasのデータ保存について紹介します。
InkCanvasについて興味のある方は、MSDN内のInkCanvasのページに目を通してみてください。

Top