Silverlight／WPFで使える逆引きTips集
――インクキャンバス機能

（6） InkCanvasコントロール

08.ジェスチャで認識した情報をもとに図形を描画する

　この Tips は「07.ジェスチャを認識する」を踏まえた上でご覧ください。

　InkCanvasでジェスチャを認識すると、Gesture イベントの e 引数の Stroke プロパティを使用して、ストロークが動いた最大幅、高さ、位置といった情報を取得することができます。そこで、四角形を認識した場合は、「どのような高さや幅の四角形がどの位置に描かれたのか」といった情報を取得して Rectangle クラスを使用すれば、ユーザーが描いた四角形に近い、きれいな四角形を描画することができます。

　同様にして、Ellipse クラスを利用することで、ユーザーが描いた円（楕円）に近い、きれいな円（楕円）を描画することが可能です。

　下記は、ジェスチャで認識した情報をもとに図形を描画する例です。

ジェスチャで認識した情報を元に図形を描画する例

XAMLの例

<InkCanvas Name="InkCanvas1" EditingMode="InkAndGesture" />

VBの例

'下記をインポート
Imports System.Windows.Ink
Imports System.Collections.ObjectModel


Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    'InkAndGestureモードに設定する
    InkCanvas1.EditingMode = InkCanvasEditingMode.InkAndGesture
End Sub

' ジェスチャを認識
Private Sub InkCanvas1_Gesture(ByVal sender As System.Object, ByVal e As System.Windows.Controls.InkCanvasGestureEventArgs) Handles InkCanvas1.Gesture
    Dim gestureResults As ReadOnlyCollection(Of GestureRecognitionResult)
    gestureResults = e.GetGestureRecognitionResults()

    ' ジェスチャを認識したか？
    If gestureResults(0).RecognitionConfidence = _
       RecognitionConfidence.Strong Then

        '認識時の領域（外枠）サイズを取得
        Dim strokeRect As Rect = e.Strokes.GetBounds

        Select Case gestureResults(0).ApplicationGesture
            Case ApplicationGesture.Circle  '楕円（円）認識時
                '認識した外枠サイズに合わせて円を作成する
                Dim ellipse As New Ellipse()
                ellipse.Width = strokeRect.Width
                ellipse.Height = strokeRect.Height
                ellipse.SetValue(Controls.InkCanvas.LeftProperty, strokeRect.X)
                ellipse.SetValue(Controls.InkCanvas.TopProperty, strokeRect.Y)
                ellipse.Stroke = Brushes.Black

                '作成した円をキャンバスに追加
                InkCanvas1.Children.Add(ellipse)

            Case ApplicationGesture.Square  '四角形認識時
                '認識した外枠サイズに合わせて四角形を作成する
                Dim square As New Rectangle
                square.Width = strokeRect.Width
                square.Height = strokeRect.Height
                square.SetValue(Controls.InkCanvas.LeftProperty, strokeRect.X)
                square.SetValue(Controls.InkCanvas.TopProperty, strokeRect.Y)
                square.Stroke = Brushes.Black

                '作成した四角形をキャンバスに追加
                InkCanvas1.Children.Add(square)
        End Select

    End If
End Sub

C#の例

// 下記を追加
using System.Windows.Ink;
using System.Collections.ObjectModel;


private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // InkAndGestureモードに設定する
    inkCanvas1.EditingMode = InkCanvasEditingMode.InkAndGesture;
}

// ジェスチャを認識
private void inkCanvas1_Gesture(object sender, InkCanvasGestureEventArgs e)
{
    ReadOnlyCollection<gesturerecognitionresult> gestureResults;
    gestureResults = e.GetGestureRecognitionResults();

    if (gestureResults[0].RecognitionConfidence ==
        RecognitionConfidence.Strong)
    {
        // 認識時の領域（外枠）サイズを取得
        Rect strokeRect = e.Strokes.GetBounds();

        switch (gestureResults[0].ApplicationGesture)
        {
            case ApplicationGesture.Circle: // 楕円（円）認識時
                // 認識した外枠サイズに合わせて円を作成する
                Ellipse ellipse = new Ellipse();
                ellipse.Width = strokeRect.Width;
                ellipse.Height = strokeRect.Height;
                ellipse.SetValue(System.Windows.Controls.InkCanvas.LeftProperty, strokeRect.X);
                ellipse.SetValue(System.Windows.Controls.InkCanvas.TopProperty, strokeRect.Y);
                ellipse.Stroke = Brushes.Black;

                // 作成した円をキャンバスに追加
                inkCanvas1.Children.Add(ellipse);
                break;
            case ApplicationGesture.Square: // 四角形認識時
                // 認識した外枠サイズに合わせて四角形を作成する
                Rectangle rectangle = new Rectangle();
                rectangle.Width = strokeRect.Width;
                rectangle.Height = strokeRect.Height;
                rectangle.SetValue(System.Windows.Controls.InkCanvas.LeftProperty, strokeRect.X);
                rectangle.SetValue(System.Windows.Controls.InkCanvas.TopProperty, strokeRect.Y);
                rectangle.Stroke = Brushes.Black;

                // 作成した四角形をキャンバスに追加
                inkCanvas1.Children.Add(rectangle);
                break;
        }

    }
}

ポイント

　「ユーザーがどの位置にどのような大きさのストロークで描画したか」という情報と認識した図形を元に、きれいな図形を描画することができる。