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

データ解析

技術解説

連載 :

実践！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)

01<?xml version="1.0"?>
02<画像>
03  <情報>
04    <画像名>銀杏.jpg</画像名>
05    <画像名>枯れ木.jpg</画像名>
06    <画像名>光.jpg</画像名>
07    <画像名>森林.jpg</画像名>
08    <画像名>雪の日.jpg</画像名>
09    <画像名>民家.jpg</画像名>
10    <画像名>田んぼ.jpg</画像名>
11    <画像名>冬の桜.jpg</画像名>
12    <画像名>すすき.jpg</画像名>
13    <画像名>青空.jpg</画像名>
14  </情報>
15</画像>

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

（１）ImageShowAreaというNameの

01<Window x:Class="MainWindow"
02  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04  Title="手の動きに合わせてカーソルを操作し画像を移動する" Height="763" Width="823" 
05xmlns:my="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers">
06  <Grid>
07    <Canvas Name="ImageShowArea" Width="800" Height="730">　■（１）
08      <Image Canvas.Left="620" Canvas.Top="518" Height="120" Name="Image1" Stretch="Fill" Width="160" />
09      <my:KinectSensorChooser Canvas.Left="514" Canvas.Top="286" Height="213" Name="KinectSensorChooser1" Width="267" />
10    </Canvas>　■（１）
11  </Grid>
12</Window>

図1：各コントロールを配置した。

参照の追加

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というフォルダに置いています。これは既に参照済みですが、エラーが出るようでしたら、参照し直してください。

Kinectで手の動きに合わせてカーソルを動かすサンプル

3633_1v2.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。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）。