LINEで送る

今回から、Windows ストア アプリのInk機能を紹介します。
まずは開発環境ですが、以下のような環境を利用しました。

OS:Windows 8.1 Pro
IDE:Visual Studio Express 2013 for Windows

Visual Studio Expressは無料で利用できます。
インストールされていない方はこちらからダウンロードしてください。

まずは、ペンやタッチのイベントを取得する方法を紹介します。

1.プロジェクトの作成
Visual C#の「新しいアプリケーション(XAML)」でプロジェクトを作成します。

WindowsStoreApp_1_1

2.Canvasの追加
タッチイベントを検知するCanvasと、情報を表示するTextBlockをXAMLに追加します。

<Page
    x:Class="WindowsStoreAppInkSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStoreAppInkSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Canvas x:Name="InkCanvas" Background="White" Margin="12, 12, 12, 12">
            <TextBlock x:Name="LogText" Foreground="Black" FontSize="18" Text=""/>
        </Canvas>
    </Grid>
</Page>

3.イベントの追加
2で追加したInkCanvasにポインターイベントを追加します。

public MainPage()
{
    this.InitializeComponent();

    InkCanvas.PointerPressed += InkCanvas_PointerPressed;
    InkCanvas.PointerMoved += InkCanvas_PointerMoved;
    InkCanvas.PointerReleased += InkCanvas_PointerReleased;
    InkCanvas.PointerExited += InkCanvas_PointerExited;
}
void InkCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    LogText.Text = "InkCanvas_PointerPressed ----------------------------------------- ";
    OutputPointerData(e);
}

void InkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    LogText.Text = "InkCanvas_PointerMoved ------------------------------------------- ";
    OutputPointerData(e);
}

void InkCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    LogText.Text = "InkCanvas_PointerReleased ---------------------------------------- ";
    OutputPointerData(e);
}

void InkCanvas_PointerExited(object sender, PointerRoutedEventArgs e)
{
    LogText.Text = "InkCanvas_PointerExited ------------------------------------------ ";
    OutputPointerData(e);
}

4つのイベントを追加しましたが、各イベントは以下のような条件で発生します。

PointerPressed:ペンや指が触れた時や、マウスの左ボタンを押した時に発生
PointerMoved:ポインターが移動した時に発生
PointerReleased:ペンや指が離れた時や、マウスの左ボタンを離した時に発生
PointerExited:ポインターがコントロール外に移動した時に発生

各イベント内で実行しているOutputPointerDataというメソッドは、PointerRoutedEventArgsの情報をLogTextに表示するためのメソッドです。
OutputPointerDataは、以下のように実装します。

// PointerRoutedEventArgsの情報を出力する
private void OutputPointerData(PointerRoutedEventArgs e)
{
    // InkCanvasに対する情報を取得する
    PointerPoint po = e.GetCurrentPoint(InkCanvas);

    // 各デバイスに合わせた情報を表示する
    if (po.PointerDevice.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
    {
        // マウス
        LogText.Text += "\n    DeviceType : Mouse";
    }
    else if (po.PointerDevice.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Pen)
    {
        // ペン
        LogText.Text += "\n    DeviceType : Pen";
        // 筆圧
        LogText.Text += "\n    Pressure : " + po.Properties.Pressure;
        // 消しゴムかどうか
        LogText.Text += "\n    IsEraser : " + po.Properties.IsEraser;
    }
    else if (po.PointerDevice.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        // タッチ
        LogText.Text += "\n    DeviceType : Touch";
        // タッチの領域
        LogText.Text += "\n    ContactRect : (" + (int)po.Properties.ContactRect.Width + "," + (int)po.Properties.ContactRect.Height + ")";
    }

    LogText.Text += "\n    Position : (" + (int)po.Position.X + ", " + (int)po.Position.Y + ")";
}

PointerRoutedEventArgsからは、ポインターのデバイスの種類を取得することができますので、各デバイスに合わせた情報を表示しています。
ペンの場合は筆圧と消しゴムかどうかを表示し、タッチの場合はタッチの領域を表示しています。

以上で、ペンやタッチのイベントを取得するための実装が終わりましたので、実際にアプリケーションを実行してみましょう。

WindowsStoreApp_1_2

マウスやペン、タッチによって表示される情報が変わり、座標等の情報が表示されます。
サンプルソースはこちらにアップしてありますので、興味のある方は実際に試して頂ければと思います。

次回は、イベントを利用し、線を描画する方法をご紹介します。

Top