検索
連載

マルチタッチで、複数画像を選択・拡大・縮小・回転するには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（2）（2/2 ページ）

古（いにしえ）からのVBでWindows 8.1向けのさまざまな機能のアプリを開発する手順やコツを解説していく。今回は、マルチタッチで、複数画像を選択・拡大・縮小・回転するアプリを作る方法について。

[薬師寺国安，PROJECT KySS] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

ロジックコードを記述する

　次に、［ソリューション・エクスプローラー］内の「MainWindow.xaml」を展開して表示される、「MainWindow.xaml.vb」をダブルクリックしてコードを記述する。

　ここでは、コードが長くなるため、主にページがアクティブになった時の処理（OnNavigatedToメソッド処理）について解説する。全てのコードを見る場合は、サンプルのプロジェクトをダウンロードして「MainWindow.xaml.vb」ファイルを見ていただきたい。

    Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
        Dim no As Integer = 0
        Dim xmldoc As XElement = XElement.Load("photo_etc.xml")
        For Each result In From c In xmldoc.Descendants("情報") Select c
            Dim myImage As New Image
            With myImage
                .Width = 640
                .Height = 480
                .Source = New BitmapImage(New Uri("ms-appx:///Images/" & result.Element("画像名").Value, UriKind.Absolute))
                .RenderTransform = New CompositeTransform
                .ManipulationMode = ManipulationModes.All
            End With
            ShowArea.Children.Add(myImage)
　　　　　　　　　‘　このプログラムの肝。画像の移動、拡大縮小、回転の処理だ。
            AddHandler myImage.ManipulationDelta, Sub(mySender As Object, myArgs As Input.ManipulationDeltaRoutedEventArgs)
                   Dim myTrans = DirectCast(myImage.RenderTransform, CompositeTransform)
                   myTrans.TranslateX = myTrans.TranslateX + myArgs.Delta.Translation.X
                   myTrans.TranslateY = myTrans.TranslateY + myArgs.Delta.Translation.Y
                 myTrans.ScaleX = myTrans.ScaleX * myArgs.Delta.Scale
                   myTrans.ScaleY = myTrans.ScaleY * myArgs.Delta.Scale
                   myTrans.CenterX = 320
                   myTrans.CenterY = 240
                   myTrans.Rotation = myTrans.Rotation + myArgs.Delta.Rotation
                   myImage.SetValue(Canvas.ZIndexProperty, no)
                   no += 1
               End Sub
        Next
    End Sub

　以降、上記コードの中身を詳細に見ていこう。

　まず、変数「no」を宣言し「0」で初期化しておく。

　次に、XElement.LoadメソッドでXML文書ファイル（photo_etc.xml）を読み込む。読み込んだXMLのDescendantsメソッドで、すべての子孫要素<情報>に対して、要素の値を変数resultに格納しながら反復処理を行う。

　新しいImageのインスタンス「myImage」オブジェクトを作成する。［Width］に「640」、［Height］に「480」の値を指定し、［Source］プロパティに、画像を格納している「ms-appx:///Images」フォルダーと、<画像名>要素の値を連結して設定する。

　UIElementの描画位置に影響する変換情報を設定する［RenderTransform］プロパティに、1つのオブジェクトに複数の異なる変換を適用できる「CompositeTransform」を指定する。

　ジェスチャーとともにUIElementの動作および操作に使用される［ManipulationMode］に、すべての相互作用モードを有効にする、「ManipulationModes.All」を指定。UIElement.ManipulationModes列挙体については、下記のURLを参考にしてほしい。

　「ShowArea」というCanvasに各プロパティの設定されたmyImageオブジェクトを追加。これで、画像が表示されるようになる。画像は左隅上に重なって表示される。

　AddHandlerステートメントで、操作中に入力デバイスが位置を変更した時に発生するManipulationDeltaイベントに、イベントハンドラを追加する。イベントハンドラ内では以下の処理を行う。

　TranslateXとTranslateYで、x軸とy軸に沿って並行移動する距離を、ScaleXとScaleYで、オブジェクトを拡大縮小する値を設定する。

　［Rotaion］プロパティでオブジェクトを回転させる。［CenterX］と［CenterY］には実際の画像サイズの半分の［Width］と［Height］の値を指定する（320と240の値）。これで、画像の中心を起点として回転するようになる。

　SetValueメソッドでZIndexPropertyに1ずつ加算される変数noの値を指定する（選択された画像が一番手前に配置されるようになる）。

次回は、選択した画像をトリミングして保存させる

　今回は、ここまでだ。また、次回お会いしよう。次回は選択した画像をトリミングして保存させる方法を紹介する。

関連リンク

本コンテストでは、2013年9月1日〜12月1日に新たにWindowsストアに新規公開されたアプリを募集します。入賞したアプリの製作者には、総額130万円の賞金が授与されますので、ふるってご応募ください。

著者プロフィール

PROJECT KySS 薬師寺 国安（やくしじ くにやす）

1950年生まれ。フリーVBプログラマ。高級婦人服メーカーの事務職に在職中、趣味でVBやActiveXに取り組み、記事を執筆。2003年よりフリー。.NETやRIAに関する執筆多数。Windowsストアアプリも多数公開中（約270本）。

　

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）。

PROJECT KySSは、1997年に薬師寺聖と結成したコラボレーション・ユニット


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る