PR

マウス・カーソルで指定した画像の一部を拡大表示するLeap Motionプログラム

2013年11月12日(火)
薬師寺 国安

今回のアプリは、画面上に表示された画像の一部分にマウス・カーソルを乗せ、タッチした状態(タッチ・ポイントが赤)で移動させると、マウス・カーソルのあたった個所が拡大表示されるアプリです。早速開発手順を見ていきましょう。

まずは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で作成すると安心でしょう。

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

ソリューション・エクスプローラー内にImageというフォルダを作成して、画像を1枚配置しています。画像サイズは特に指定はありません。今回はPNG画像を使用していますが、JPEG画像でも問題はありません。

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

ポーリング方式の採用

今回のサンプルは4回目のサンプルと同様、「ポーリング方式」を作用しています。「ポーリング方式」とは、Controllerクラス(Leap名前空間)だけを使用した方式です。詳細については、「C#によるLeap Motion開発の全体像」を参照してください。

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

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

今回のアプリは、タッチ・ポイントが赤の場合(タッチ状態)で、タッチ・ポイントが画像の上にある時、マウス・カーソルの位置が拡大表示されるアプリです。タッチ・ポイントが青(ホバー状態)の時は、マウス・カーソルを移動させても拡大画像には反映されません(図1参照)。

図1:画像の上にあるマウス・カーソルの位置が拡大して表示された(クリックで拡大)

実際に動かした動画は次のようになります。

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

sourceImageという名前のImageコントロールを1個配置し、Widthに320、Heightに240と指定して、SourceプロパティにImageフォルダの画像を指定しておきます。

次に、zoomImageというImageコントロールを配置し、WidthとHeightをsourceImageと同じにします。Sourceプロパティにも同じ画像を読み込んでおきます。Canvas.LeftとCanvas.Topも大体、sourceImageに近い値を指定しておきます。最初の状態では、VisibilityにCollpsedを指定して非表示とします。

zoomImageの子要素としてプロパティ要素を配置し、その中に、と記述します。ScaleXとScaleYに指定している値は、X軸とY軸に沿ったスケールファクター(倍率)です。

次に同じくzoomImageの子要素としてプロパティ要素を配置し、その中に、と記述します。直径70pxのEllipseGeometryが表示されます。EllipseGeometryにはLensという名前を付けています。

プロパティ要素は、コンテンツのアウトラインの定義に使用するジオメトリを設定できます。通常、イメージの一部を表示するだけの場合は、Clip を使用する必要があります

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

書き出されるXAMLはリスト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"
  Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
  <Canvas>
    <Image x:Name="sourceImage" HorizontalAlignment="Left" Height="240" VerticalAlignment="Top" Width="320" Canvas.Left="261" Canvas.Top="127" Source="Image/林_08.png"/>
    <Image x:Name="zoomImage" Stretch="Fill" Width="320" Height="240" Source="Image/林_08.png" Canvas.Left="263" Canvas.Top="128" Visibility="Collapsed">
      <Image.RenderTransform>
        <ScaleTransform ScaleX="3.5" ScaleY="3.5"/>
      </Image.RenderTransform>
      <Image.Clip>
        <EllipseGeometry x:Name="Lens" RadiusX="70" RadiusY="70" Center="0.5,0.5"/>
      </Image.Clip>
    </Image>
    <InkPresenter Name="paintCanvas"/>
  </Canvas>
</Window>

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

図2:各コントロールをレイアウトした(クリックで拡大)
Think IT会員限定特典
  • マウス・カーソルで指定した画像の一部を拡大表示するLeap Motionプログラム

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

薬師寺国安事務所代表。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会員サービスのご案内

関連記事