PR

好きな写真を指で選んで順番に拡大表示するLeap Motionプログラムを作る

2013年12月6日(金)
薬師寺 国安

BlendでGotoStateActionを設定する(TransitionEffectListBox.xaml)

前述の方法に従ってBlendを起動します。実際にBlend起動する前に、必ずVS 2012でプロジェクトをビルドしておいてください。

アートボードの上に表示されているタブからTransitionEffectListBoxを選択します。

[アセット]のビヘイビアーから「GoToStateAction」を選択して、ListBox1上にドラッグ&ドロップします(図16)。

図16:ListBox1コントロール上にGoToSateActionビヘイビアーをドラッグ&ドロップする(クリックで拡大)

[オブジェクトとタイムライン(B)] 内の「GoToStateAction」を選択し、プロパティを設定します。

[トリガー]内の[EventName]が「SelectionChanged」になっているのを確認してください。次に、[TargetName]プロパティの横に付いている[…]ボタンをクリックします。「要素の選択」画面が表示され、要素の一覧が表示されます。「ターゲットにする要素の選択」にImageShowAreaを指定します(図17)。ImageShowAreaはTransitionEffectImageShowに付けたx:Nameです。

図17:GoToSateActionビヘイビアーの各プロパティを設定する(クリックで拡大)

TransitionEffectListBox.xamlの設定は以上で終わりです。Blendを閉じて、VS 2012に戻ります。保存と適用のメッセージが出ますので、保存して適用させます。

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

前述した方法で、localという名前空間を、MainPage.xaml内の要素内で定義します。xmlns:local=””と入力すると、名前空間の値の一覧が表示されますので、現在作成しているプロジェクト名を選択します。

内に

最前面にpaintCanvasという名前のInkPresenterを配置します。

図18:MainWindow.xaml内にTransitionEffectListBox.xamlを取り込む(クリックで拡大)

書き出されるXAMLはリスト3のようになります。

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

<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:SlideInTransitionLeapMotion"
  Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
  <Grid>
    <local:TransitionEffectListBox Margin="10,10,702,28"/>
    <InkPresenter Name="paintCanvas"/>
  </Grid>
</Window>

今回の筆者の環境では、TransitionEffectListBoxを取り込むとデザイン画面にエラーが表示されて、デザイン画面が使えませんでした(図19)。但しプログラムは問題なく動きます。原因は現時点では不明です。

図19:デザイン画面でエラーが表示される(クリックで拡大)

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

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

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

名前空間の読み込み

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

メンバー変数の宣言

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

今回もWin32 APIを使用するためにWin32 APIの宣言も行います。4回と同じWin32 APIを使用しています。定数メンバー変数「Private Const MOUSEEVENTF_MOVE = &H1」は、今回は不要です。

「leap」、「touchIndicator」、「touchPoint」、「windowWidth」、「windowHeight」、「tx」、「ty」、「x」、「y」、「FingersCount」等のメンバー変数については4回と同じのため、そちらの記事を参照してください。これ以外に、XML要素を表すXElementクラス型のメンバー変数xmldocを宣言します(リスト4)。

リスト4 メンバー変数の宣言

・・・・コード略・・・
  Private xmldoc As XElement
・・・コード略・・・・

MainWindow_Loadedメソッドの処理

MainWindow_Loadedメソッド(=メイン・ウィンドウのLoadedイベントのハンドラー)では、MainWindowが読み込まれた時の処理を実装します。

AddHandlerステートメントを使って、構成ツリーのオブジェクトがレンダリングされる直前に発生する「CompositionTarget.Renderingイベント」に対するイベント・ハンドラーとしてUpdateメソッドを指定します(※Updateメソッドの実装内容は後述)。

インク・ストロークの外観を表す、DrawingAttributesオブジェクトのインスタンス「touchIndicator」のWidthプロパティとHeightプロパティにそれぞれ「20」を指定します。スタイラスの形状を指定するStylusTipプロパティに「StylusTip.Ellipse」を指定して円形とします。Leap Motionの上で指をかざすと、かざした指の本数に応じて20px(px=ピクセル)の円が表示されるようになります(リスト5)。

リスト5 MainWindow_Loadedメソッド

  Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
    AddHandler CompositionTarget.Rendering, AddressOf Update
    touchIndicator.Width = 20
    touchIndicator.Height = 20
 
    touchIndicator.StylusTip = StylusTip.Ellipse
  End Sub

Updateメソッドの処理

4回と同じにつき割愛します、4回を参照してください。

次にLeap Motionのタッチ処理になる。タッチのイメージは次の図20のようなイメージです。

Think IT会員限定特典
  • 好きな写真を指で選んで順番に拡大表示するLeap Motionプログラム

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

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

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