PR

Kinectで手の動きとカーソルを連動して操作するサンプル

2012年7月30日(月)
薬師寺 国安

今回のサンプルは、手の動きとマウスカーソルの動きを連動させ、左手を上から下に下すことで「ホールド」、左手を上に上げることで「ホールドの解除」といった処理を実現します。カーソルの動きは右手の動きに追従します。

画像の上にマウスカーソルを持っていき、左手を上から降ろすと画像がホールドされた状態になり、画像の移動が可能になります。ホールドを解除するには、左手を上に挙げます。

実際に操作した動画は以下です。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。

次に、「WPF アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「KINECT_SelectImageMove」という名前を付けています。ソリューションエクスプローラー内にImageというフォルダを作成して画像を取り込んでいます。またbin\Debugフォルダ内にリスト1のphoto_etc.xmlを配置しています。

ツールボックスからデザイン画面上に、Canvas、その子要素としてImage、KinectSensorChooserコントロールを1個ずつ配置します。書き出されるXAMLコードはリスト2、レイアウトは図1のようになります。

リスト1 使用するXML文書ファイル(photo_etc.xml)

<?xml version="1.0"?>
<画像>
  <情報>
    <画像名>銀杏.jpg</画像名>
    <画像名>枯れ木.jpg</画像名>
    <画像名>光.jpg</画像名>
    <画像名>森林.jpg</画像名>
    <画像名>雪の日.jpg</画像名>
    <画像名>民家.jpg</画像名>
    <画像名>田んぼ.jpg</画像名>
    <画像名>冬の桜.jpg</画像名>
    <画像名>すすき.jpg</画像名>
    <画像名>青空.jpg</画像名>
  </情報>
</画像>

リスト2  書き出されたXAMLコード(MainWindow.xaml)

(1)ImageShowAreaというNameの要素の子要素として、要素を配置する。

<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="手の動きに合わせてカーソルを操作し画像を移動する" Height="763" Width="823" 
xmlns:my="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers">
  <Grid>
    <Canvas Name="ImageShowArea" Width="800" Height="730"> ■(1)
      <Image Canvas.Left="620" Canvas.Top="518" Height="120" Name="Image1" Stretch="Fill" Width="160" />
      <my:KinectSensorChooser Canvas.Left="514" Canvas.Top="286" Height="213" Name="KinectSensorChooser1" Width="267" />
    </Canvas> ■(1)
  </Grid>
</Window>
 図1:各コントロールを配置した。の子要素としてと<KinectSensorChooser>を配置(クリックで拡大)

参照の追加

VS2010のメニューから「プロジェクト(P)/参照の追加(R)」と選択して、各種コンポーネントを追加しておきます。今回追加するのは、Microsoft.KinectとCodingFun4.Kinect.Wpf.dll、Microsoft.Samples.Kinect.WpfViewers.dll、MultiTouch.Behaviors.WPF4.dllとCursorClass.dllの5つです。

.NETタブ内に表示されていないDLLファイルは「参照」タブからDLLファイルを指定します。

Microsoft.Kinect.dllは、C:\Program Files\Microsoft SDKs\Kinect\v1.5\Assemblies内に存在しますので、これを指定します。CodingFun4.Kinect.Wpf.dllはCoding4Fun.Kinect.Toolkitをダウンロードして解凍したフォルダ内に存在していますので、それを指定してください。また、Kinectforwindowssdkv1.zipを下記のURLよりダウンロードしてください。
→参照:Kinectforwindowssdkv1(RapidLibrary)

解凍してできた以下のフォルダから、Microsoft.Samples.Kinect.WpfViewers.dllを「参照の追加」で追加してください。
> \KinectforWindowsSDKV1\KinectforWindowsSDKV1\2.Setting Up Dev Environment\SettingUpDevEnvironmentVB\SettingUpDevEnvironment\bin\Release

(*)KinectSensorChooserをデザイン画面上に追加した時点で、このMicrosoft.Samples.Kinect.WpfViewers.dllは既に参照されていることになります。

MultiTouch.Behaviors.WPF4.dllは下記のURLより[DOWNLOAD] ボタンを選択して、MultiTouchBehaviorSource.zipをダウンロードしてください。
→参照:Windows Phone, Silverlight and WPF Multi-Touch Manipulations(CodePlex)

任意のフォルダで解凍し、\MultiTouchBehaviorsSource\SilverlightMultiTouch内にできる、SilverlightWP7MultiTouch.slnをダブルクリックして実行します。各種メッセージが表示されますが、全てに「はい(Y)」または[OK] を選択してください。
ソリューションエクスプローラー内に各種プロジェクトが表示されます。Releaseモードでソリューションのビルドを行ってください。

その後、以下のフォルダ内に作成される、MultiTouch.Behaviors.WPF4.dllを選択して、「プロジェクト(P)/参照の追加(R)」と選択して「参照」タブから追加してください。
> \MultiTouchBehaviorsSource\SilverlightMultiTouch\MultiTouch.Behaviors.WPF4\bin\Release

CursorClass.dllはソリューションエクスプローラー内のDLLというフォルダに置いています。これは既に参照済みですが、エラーが出るようでしたら、参照し直してください。

Think IT会員限定特典
  • Kinectで手の動きに合わせてカーソルを動かすサンプル

薬師寺国安事務所

薬師寺国安事務所代表。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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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