選択した画像を指の動きに合わせて回転させるLeap Motionプログラムを作る

2013年11月27日(水)
薬師寺 国安

今回のアプリは画面上に配置された2枚の画像のうち1枚をタッチして選択し、指を動かすと、選んだ画像が指の動きに従って回転するというアプリです。早速開発手順を見ていきましょう。

まずWPFプロジェクトを作成しよう

今回のLeap MotionアプリもWPFで作成します。

これには、Visual Studio 2012(以下、VS 2012)のIDEを起動して、メニューバーから[ファイル]−[新規作成]−[プロジェクト]と選択して、それにより表示される[新しいプロジェクト]ダイアログで「Visual Basic」のテンプレートから「WPF アプリケーション」を選択します。上記、VS2012はVS2013でも同じです。

※Leap Motionは、.NET Framework 3.5と4.0に対応しています。しかし、.NET Framework 4.5でも動作します。今回のアプリは全て.NET Framework 4.5で作成しています。しかし、あくまでも対応しているのは、.NET Framework 3.5と4.0です。心配な方は、.NET Framework 4.0で作成すると安心でしょう。

[名前]欄には、ここでは「RecognizeFingerTypeTouch」と指定します。

ソリューション・エクスプローラー内にImagesというフォルダを作成して、2枚のPNG画像を配置しておきます。

ダウンロードされたサンプルファイルには、これらの画像ファイルは追加済です。

WPFの基本的な作成手順は、「画面上の図形を5本の指で操作する基本的なLeap Motionプログラムを作る」と同じ手順となるので、説明を割愛します。具体的な手順は、第1回の「参照の追加」「プロジェクトのルートに「LeapCSharp.dll」と「Leapd.dll」を追加する」「プロパティを設定する」を参考にしてください。

今回のLeap Motionアプリについて

今回のアプリは、タッチした画像の上でサークル(指を回転させる)すると、タッチされた画像が回転するアプリです(図1参照)。

図1:タッチした画像が回転している(クリックで拡大)

実際に動かした動画は下記になります。

今回は、前回同様「ポーリング方式」と「コールバック方式」の混合を用いています。「コールバック方式」については、第1回のサンプルの「コールバック方式の採用」を参照してください。「ポーリング方式」については連載第4回の「Leap Motionで画像のトリミングと保存を行うためのサンプルプログラムを作る」の「ポーリング方式の採用」を参照してください。

またコールバックメソッド等については、「C#開発者から見たLeap Motion開発のファースト・インプレッション」を参照してください。

画面のレイアウト(MainWindow.xaml)

Canvas内に名前がImage1というImageコントロールを配置し、子要素としてプロパティ要素を配置します。その中に、要素を配置し、Angleプロパティに「ImageAngle」をバインドします。CenterXとCenterYプロパティには、Image1のWidthとHeightの半分の値を指定します。
同様に名前がImage2というImageコントロールを配置し、要素の、Angleプロパティに「ImageAngle2」をバインドします。

プロパティ要素は、Imageの描画位置に影響する変換情報を取得して設定できます。

要素は、2-Dのx-y 座標系内にある指定した点を中心として、オブジェクトを時計回りに回転する要素です。

それぞれのSourceプロパティにImagesフォルダ内にある画像を読み込んでおきます。

一番前面に、タッチ・ポイントを表示するpaintCanvasという名前のInkPresenterコントロールを配置します(リスト1)。

リスト1 書き出されたMainWindow.xaml

<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 
  Title="MainWindow" Height="500" Width="1000">
    <Canvas>
      <Image x:Name="Image1" HorizontalAlignment="Left" Height="240" VerticalAlignment="Top" Width="320" Source="Images/林_01.png" Canvas.Left="140" Canvas.Top="111">
        <Image.RenderTransform>
          <RotateTransform Angle="{Binding ImageAngle}" CenterX="160" CenterY="120"/>
        </Image.RenderTransform>
      </Image>
      <Image x:Name="Image2" HorizontalAlignment="Left" Height="240" VerticalAlignment="Top" Width="320" Source="Images/林_03.png" Canvas.Left="522" Canvas.Top="111">
        <Image.RenderTransform>
          <RotateTransform Angle="{Binding ImageAngle2}" CenterX="160" CenterY="120"/>
        </Image.RenderTransform>
      </Image>
      <InkPresenter Name="paintCanvas"/>
    </Canvas>
</Window>

レイアウトは図2のようになります。

図2:各コントロールを配置した(MainWindow.xaml)(クリックで拡大)

プログラム・コード(MainWindow.xaml.vb)

では、次にプログラム・コード(MainWindows.xaml.vbファイル)を見ていきましょう。

第4回のコードと似通っている部分については割愛します。該当記事を参照してください。異なる部分のみ解説します。

名前空間の読み込み

「Imports Leap」と「Imports System.Windows.Ink」名前空間だけを読み込んでおきます。

メンバー変数の宣言

次にメンバー変数を宣言します。

「leap」、「touchIndicator」、「touchPoint」、「windowWidth」、「windowHeight」、「x」、「y」、等のメンバー変数については4回と同じのため、そちらを参照してください。但し今回は、windowWidthを1000、windowHeightを500で初期化しています。

  • 選択した画像を指の動きに合わせて回転させるLeap Motionプログラム

    『新世代モーションコントローラー Leap Motion -Visual Basicによる実践プログラミング-』 第7回の解説動画です。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています