PR

Kinectで手の動きに合わせてモニタ上の画像を動かすサンプル

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

今回は、人間の手の動きに合わせて、画面上に表示した画像の拡大や縮小、また回転したりするサンプルを紹介します。Kinectが手の動きを検知すると、あたかも自分の手で掴んでいるかのように画面上を自由自在に動かすことができます。

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

サンプルプログラムは以下よりダウンロードできます。
Kinectに音声認識させるサンプルプログラム(1,870KB)

プロジェクトの作成

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

次に、「WPF アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「KINECT_MultiTouch」という名前を付けています。ソリューションエクスプローラー内にImageというフォルダを作って、画像を1枚置いています。

ツールボックスからデザイン画面上に、KinectColorViewerと、KinectSensorChooser、Imageコントロールを1個ずつと、Ellipseコントロールを2個配置します。
ImageコントロールのSourceプロパティにImageフォルダ内の画像を指定します。
要素内にプロパティ要素を配置し、子要素として要素を配置します。
その中にx:NameがmyScaleというと、x:NameがmyRotateという要素を配置します。
要素は画像の拡大、縮小時に使用されます。また、要素は、画像の回転時に使用されます。

KinectColorViewerのプロパティの[その他]パネルにある、Kinectプロパティの「データバインドの適用」から、ElementNameにKinectSensorChooser1、パスにKinectを指定します。

要素のWindowStateプロパティにMaximizedを指定し、全画面表示としています。

書き出されるコードはリスト1、レイアウトは図1のようになります。

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

  • (1)WindowStateプロパティにMaximizedを指定し、全画面表示としている。
  • (2)要素内の要素内に要素を配置している。要素内でなければ、これら2つの要素の配置ができませんので、注意してください。
  • (3)同じ位置に同じサイズ、同じ大きさ、同じ色の要素を配置している。NameはHandRightとHandLeftとしている。
  • (4)KinectColorViewerのKinectプロパティにデータバインドが設定されている。
<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
xmlns:my="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers" 
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" x:Class="MainWindow"
  Title="MainWindow" Height="754" Width="978" WindowState="Maximized"> ■(1)
  <Grid>
    <Canvas>
      <my:KinectColorViewer Canvas.Left="0" Canvas.Top="0" Height="480" Name="KinectDepthViewer1" Width="640" Kinect="{Binding ElementName=KinectSensorChooser1, Path=Kinect}" /> ■(4)
        <my:KinectSensorChooser HorizontalAlignment="Left" Margin="55,375,0,0" x:Name="KinectSensorChooser1" VerticalAlignment="Top" Width="217" Canvas.Left="-14" Canvas.Top="-116" />
        <Image Height="120" HorizontalAlignment="Left" Margin="423,111,0,0" Name="Image1" Source="/KINECT_MultiTouch;component/Image/beranda.jpg" Stretch="Fill" VerticalAlignment="Top" Width="160" Canvas.Left="328" Canvas.Top="50">
          <Image.RenderTransform>
            <TransformGroup>
              <ScaleTransform x:Name="myScale" ScaleX="1.0" ScaleY="1.0"></ScaleTransform> ■(2)
              <RotateTransform x:Name="myRotate" CenterX="80" CenterY="60"></RotateTransform> ■(2)
            </TransformGroup>
          </Image.RenderTransform>
        </Image>
        <Ellipse Height="50" Width="50" Fill="Blue" Name="HandRight"/> ■(3)
        <Ellipse Height="50" Width="50" Fill="Blue" Name="HandLeft"/> ■(3)
    </Canvas>
  </Grid>
</Window>
 図1:各コントロールを配置した(クリックで拡大)

参照の追加

VS2010のメニューから「プロジェクト(P)/参照の追加(R)」と選択して、各種コンポーネントを追加しておきます。

今回追加するのは、「Microsoft.Kinect」、「CodingFun4.Kinect.Wpf.dll」、「Microsoft.Samples.Kinect.WpfViewers.dll」の3つです。.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\KinectforWindowsSDKV1\2.Setting Up Dev Environment\SettingUpDevEnvironmentVB\SettingUpDevEnvironment\bin\Release
内にある、Microsoft.Samples.Kinect.WpfViewers.dllを参照の追加で追加してください。
→参照:Kinectforwindowssdkv1(Rapidlibrary)

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

薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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