連載

2013年12月10日

選択した画像をトリミングして保存させるには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（9）（3/4 ページ）

古（いにしえ）からのVBでWindows 8.1向けのさまざまな機能のアプリを開発する手順やコツを解説していく。今回は、表示された画像の任意の部分を矩形で選択し、切り出して保存・一覧する方法をサンプルを交えて解説する。

[薬師寺国安，PROJECT KySS] PC用表示関連情報

LINE

Hatena

前のページへ | 次のページへ

メイン画面のロジックコードを記述する（MainWindow.xaml.vb）

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

　ここでは、コードが長くなるため今回のテーマと肝となる「画像の合成」「データの一覧表示」部分の解説にとどめている。名前空間の読み込み、メンバー変数の宣言も省略している。全てのコードを見る場合は、サンプルをダウンロードして「MainWindow.xaml.vb」ファイルを見ていただきたい。

ページがアクティブになったときの処理（OnNavigatedToメソッド処理）

Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
        Dim myFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
        Dim SubFolder = Await myFolder.CreateFolderAsync("TrimingImage", CreationCollisionOption.OpenIfExists)
        myPictureFiles = Await SubFolder.GetFilesAsync
        If myPictureFiles.Count > 0 Then
            allDeleteButton.IsEnabled = True
            deleteButton.IsEnabled = True
        Else
            allDeleteButton.IsEnabled = False
            deleteButton.IsEnabled = False
        End If
        Await AddPhoto()
        MyBase.OnNavigatedTo(e)
    End Sub

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

　まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。

　次に、ピクチャライブラリにアクセスし、CreateFolderAsyncメソッドで「TrimingImage」というフォルダーを作成する。その際、CreationCollisionOption.OpenIfExistsを指定すると、同名フォルダーがあるときは、そのフォルダー名を返し、ないときは新規に作成する。

　CreationCollisionOption Enumerationの詳細については、下記のURLを参照してほしい。

http://msdn.microsoft.com/ja-jp/library/windows/apps/windows.storage.creationcollisionoption.aspx

　GetFilesAsyncメソッドで「TrimingImage」フォルダー内のファイルを取得し、メンバー変数「myPictureFiles」で参照しておく。

　Countプロパティで、そのフォルダー内のファイルの数を取得し、ファイルが存在する場合は、「削除」と「一括削除」ボタンの使用を可能にする。それ以外は使用を不可とする。

　切り出した画像が保存されている場合は、GridViewに画像の一覧を表示する、AddPhotoタスクを実行する。

ドラッグしたときの処理（ContentPanel_ManipulationDeltaメソッドの処理）

Private Sub ContentPanel_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) 'Handles ContentPanel.ManipulationDelta
        'エラー処理をしていないとトリミング時にエラーが発生する
        Try
            Rectangle1.Width = e.Cumulative.Translation.X
            Rectangle1.Height = e.Cumulative.Translation.Y
        Catch
            e.Handled = False
            Exit Sub
        End Try
    End Sub

　ここでは、「e.Cumulative.Translation.X」「e.Cumulative.Translation.Y」でx-y画面座標を取得し、RectangleのWidthとHeightに設定する。矩形で描かれたWidthとHeightの値を、RectangleのWidthとHeightの値に指定するということだ。

タッチを開始したときの処理（ContentPanel_ManipulationStartedメソッドの処理）

    Private Sub ContentPanel_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) 
 
        Rectangle1.Margin = New Thickness(e.Position.X, e.Position.Y, 0, 0)
        Rectangle1.Width = 0
        Rectangle1.Height = 0
        If flag = True Then
            Rectangle1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
            Button1.IsEnabled = False
        Else
            Rectangle1.Visibility = Windows.UI.Xaml.Visibility.Visible
            Button1.IsEnabled = True
        End If
    End Sub

　RectangleのMarginプロパティに、タッチした位置に合わせてRectangleを移動した位置を指定する。Marginプロパティの書式は下記の通りだ。

FrameworkElement.Margin(left,,top, right, buttom)

　例えば、「Margin="10"」は全てのプロパティが10に設定される。またMargin=”10,20”はLeftとRightが10、TopとBottomが20に設定されたThicknessとして解釈される。

　Marginプロパティの値は「New Thickness(Left、Top、Right、Bottom)」と指定する。この場合はleftにe.Position.Xを、topにe.Position.Yの値を指定している。

　RectangleのWidthとHeightは「0」で初期化する。

　メンバー変数「flag」の値で条件分岐を行う。Trueであった場合、つまり一覧表示されている切り出された画像が画面上に表示されていた場合は、トリミングができないように、Rectangle1を非表示にし、「切り出す」ボタンの使用を不可とする。それ以外の場合は、トリミングを可能にし、「切り出す」ボタンの使用を可能にする。

矩形上でドラッグしたときの処理（Rectangle1_ManipulationDeltaメソッドの処理）

    Private Sub Rectangle1_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) 
 
        Rectangle1.Margin = New Thickness(Rectangle1.Margin.Left + e.Delta.Translation.X, Rectangle1.Margin.Top + e.Delta.Translation.Y, 0, 0)
        e.Handled = True
    End Sub

　ここでは、矩形の位置をドラッグした移動量分だけ動かす。「e.Delta.Translation.X」「e.Delta.Translation.Y」でx-y画面座標の変化を取得している。「e.Handled=True」と指定して、Gridにイベントが伝わらないようにする。

「画像選択」ボタンがタップされたときに実行されるSelectImageタスク処理

    Private Async Function SelectImage() As Task
        Dim myFileOpenPicker As New FileOpenPicker
        myFileOpenPicker.ViewMode = PickerViewMode.Thumbnail
        myFileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary
        myFileOpenPicker.FileTypeFilter.Add(".png")
        myFileOpenPicker.FileTypeFilter.Add(".jpg")
        myFile = Await myFileOpenPicker.PickSingleFileAsync()
        If myFile Is Nothing = False Then
            flag = False
            FileName = myFile.Path
            myBmp.SetSource(Await myFile.OpenReadAsync)
            Image1.Source = myBmp
            If myBmp.PixelWidth <> 640 OrElse myBmp.PixelHeight <> 480 Then
                Dim myMessage As New MessageDialog("画像サイズは640×480限定です。切り出しはできません。")
                Await myMessage.ShowAsync
                Image1.Source = Nothing
                Button1.IsEnabled = False
           Else
            Button1.IsEnabled = False
　　　　　　　　End If
        End If
    End Function

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

　まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。

　次に、FileOpenPickerクラスの新しいインスタンスmyFileOpenPickerオブジェクトを作成する。FileOpenPickerクラスは、ユーザーが選択し、ファイルを開くことのできるUI要素を表すクラスだ。

　ファイルの表示モードを指定するViewModeプロパティにサムネイル表示を指定する。サムネイル表示の他にリスト（List）表示がある。ファイルを開く最初の場所を設定する、SuggestedStartLocationプロパティにピクチャライブラリを指定しておく。

　開くファイルタイプを指定するFileTypeFilter.Addで「.png」「.jpg」を指定しておく。PNGファイルを指定する場合は、「FileTyleFilter.Add(".png")」と指定する。"*.png"ではないので、注意してほしい。

　PickSingleFileAsynメソッドで、ユーザーが1つのファイルを選択できるようにファイルピッカーを表示し、変数「myFile」で参照する。変数「myFile」がファイルを参照している場合は、メンバー変数「flag」にFalseを指定し、トリミングを可能にしておく。選択された画像のファイルシステムパス名（myFile.Path）を、メンバー変数「FileName」に格納しておく。

　新しいBitmapImageクラスのインスタンスmyBmpオブジェクトに、SetSourceメソッドで「Await myFile.OpenReadAsync」と指定して、ファイルの内容を読み込むために、現在のファイルを、ランダムアクセスストリームで開く。

　Image1のSourceプロパティにmyBmpオブジェクトを指定する。これで、ファイルピッカーで指定したファイルが表示される。

　もし指定したファイルの画像サイズが640×480より大きかった場合は、メッセージを表示し、画像は表示せず、［切り取り］ボタンの使用も不可とする。

　また、画像を選択する際、選択をやめてキャンセルした場合も、［切り取り］ボタンの使用は不可としておく。

このアプリの肝