虫眼鏡でズームするサンプルとその応用

開発ツール

技術解説

連載 :

Marketplaceのアプリから解説する実践サンプルコード集

2012年6月22日(金)

PROJECT KySS

今回紹介するのは、画面の一部を指でホールドして虫眼鏡のように拡大させるサンプルです。応用編として、カメラ上でズーム機能を使うサンプルも解説しますので、最後までお付き合いください。

画像をズーム機能で拡大表示する

はじめに、「画像をズーム機能で拡大表示する」サンプルの動作を、下記に解説します。

まず実機を横向きにします。
プログラムを実機にデプロイすると、1枚の画像が表示されています。
画像の上をホールドすると、その部分が拡大されて円の中に表示されます。
指でホールドした周辺の風景が拡大して表示されます（図1）。

The Kanji on The Image

この処理は、前回でも紹介したThe Kanji on The Imageに使用しています。写真を撮影して、文字を使った装飾アイテムを画面上に自由に配置できるアプリです。

図1：画像をホールドした場所が拡大して表示されている（クリックで拡大）

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

実機（IS12T）で動かした動画はこちら

プロジェクトの作成

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

次に、「Windows Phone アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP71_ ZoomLens」という名前を付けています。Windows Phoneのバージョンは7.1を選択します。

ソリューションエクスプローラー内にImageというフォルダを作って、PNG画像を一枚追加しておきます（サンプルファイルには追加画像が入っています）。

MainPage.xamlの編集とコントロールの追加

ツールボックスからImageコントロールを2個配置します（Image1とzoomImage）。

2個のImageコントロールのSourceプロパティにはImageフォルダ内の画像を指定します。なお前面に配置されるImageコントロール（名前はzoomImage）は非表示としておきます。

書き出されるXAMLコードをリスト1のように編集します。

リスト1　編集されたXAMLコード(MainPage.xaml)

（１）エミュレーターを横向きで表示するため、SupportedOrientationsにLandscape、OrientationにLandscapeLeftと指定しています。これらはPhoneApplicationPageのプロパティから設定できます（図2）。

（２）x:NameがzoomImageの、プロパティ要素内に、要素を配置し、ScaleXとScaleYプロパティに3を指定します。すると、3倍に拡大された画像が表示されます。

ScaleTransformクラスは、2-D x-y 座標系内のオブジェクトをスケーリングするクラスです。ScaleXプロパティではx軸のスケール・ファクター、ScaleYプロパティではy軸のスケール・ファクターを設定します。

プロパティ要素内に要素を配置し、名前をlensとしておきます。

RadiusXとRadiusYに70を指定して円形にします。

プロパティ要素では、Imageのコンテンツの、アウトラインの定義に使用するジオメトリを設定できます。

要素は、円または楕円のジオメトリを表します。RadiusXプロパティでは、EllipseGeometryのx半径の値、RadiusYプロパティでは、EllipseGeometryのy半径の値を設定します。

このzoomImageは、VisibilityにCollapsedを指定して非表示としておきます。

図2：PhoneApplicationPageのプロパティから、SupportedOrientationsとOrientationプロパティを設定している（クリックで拡大）

01<phone:PhoneApplicationPage 
02  x:Class="WP71_ZoomLens.MainPage"
03  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
06  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
07  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
08  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
09  mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
10  FontFamily="{StaticResource PhoneFontFamilyNormal}"
11  FontSize="{StaticResource PhoneFontSizeNormal}"
12  Foreground="{StaticResource PhoneForegroundBrush}"
13  SupportedOrientations="Landscape" Orientation="LandscapeLeft"
14  shell:SystemTray.IsVisible="True">　■（１）
15 
16  <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
17  <Grid x:Name="LayoutRoot" Background="Transparent">
18    <!--ContentPanel - 追加コンテンツをここに入力します-->
19    <Grid x:Name="ContentPanel">
20      <Image Height="240" HorizontalAlignment="Left"  Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="320" Source="/WP71_ZoomLens;component/Image/beranda.jpg" Margin="6,6,0,0" />
21      <Image Height="240" HorizontalAlignment="Left"  Name="zoomImage" Stretch="Fill" VerticalAlignment="Top" Width="320" Source="/WP71_ZoomLens;component/Image/beranda.jpg" Visibility="Collapsed">　■（２）
22        <Image.RenderTransform>　■（２）
23          <ScaleTransform ScaleX="3" ScaleY="3"/>　　■（２）
24        </Image.RenderTransform>　　■（２）
25        <Image.Clip>　　■（２）
26          <EllipseGeometry x:Name="lens" RadiusX="70" RadiusY="70" Center="0.5,0.5"/>　　■（２）
27        </Image.Clip>　■（２）
28      </Image>　■（２）
29    </Grid>
30  </Grid>
31  <!--ApplicationBar の使用法を示すサンプル コード-->
32  ～コード略～
33</phone:PhoneApplicationPage>

レイアウトは図3のようになります。zoomImageは非表示ですが、どのように配置されているかを見るためキャプチャでは表示させています。

図3：Imageコントロールを3個配置し、前面のzoomImageにはEllipseGeometry を付加している（クリックで拡大）

次に、MainPage.xamlを展開して表示されるMainPage.xaml.vbをダブルクリックして、リスト2のコードを記述します。

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

リスト2　(MainPage.xaml.vb)

1Option Strict On
2Partial Public Class MainPage
3  Inherits PhoneApplicationPage
4  
5  ' コンストラクター
6  Public Sub New()
7    InitializeComponent()
8  End Sub

Image1コントロール上でホールドされた時の処理

zoomImageコントロールを表示します。

Image1のホールドされたX座標位置を変数xに格納します。同様に、Y座標位置を変数yに格納します。このxとyの値の位置に、拡大画像（レンズ）を表示するLensPositionプロシージャを実行します。

1Private Sub Image1_Hold(sender As Object, e As System.Windows.Input.GestureEventArgs) Handles Image1.Hold
2  zoomImage.Visibility = Windows.Visibility.Visible
3  Dim x As Double = e.GetPosition(Image1).X
4  Dim y As Double = e.GetPosition(Image1).Y
5  LensPosition(x, y)
6End Sub

Image1コントロールから指が離れた時の処理

zoomImageを非表示にします。

1Private Sub Image1_MouseLeftButtonUp(sender As Object, e As System.Windows.Input.MouseButtonEventArgs) Handles Image1.MouseLeftButtonUp
2    zoomImage.Visibility = Windows.Visibility.Collapsed
3  End Sub

Image1のホールドされた部分を拡大表示する処理

引数x,y変数の値で初期化されたPointを、lensという名前を持つEllipseGeometryのCenterプロパティに指定します。

1Private Sub LensPosition(x As Double, y As Double)
2  lens.Center = New Point(x, y)
3End Sub

Image1の上で指を移動させた時の処理

Image1のホールドされたX座標位置を変数xに格納します。同様にY座標位置を変数yに格納します。このxとyの位置に拡大画像（レンズ）を表示するLensPositionプロシージャを実行します。

1  Private Sub Image1_MouseMove(sender As Object, e As System.Windows.Input.MouseEventArgs) Handles Image1.MouseMove
2    Dim x As Double = e.GetPosition(Image1).X
3    Dim y As Double = e.GetPosition(Image1).Y
4    LensPosition(x, y)
5  End Sub
6End Class

設計 / 写真 / 開発 / スマートフォン / Windows Phone / サンプルプログラム / カメラ

画像の一部を拡大するサンプル

3592_1.zip
カメラで拡大表示するサンプル

3592_2.zip

著者

PROJECT KySS

この著者の記事一覧この著者の
記事一覧

四国のSOHO。薬師寺国安（VBプログラマ）と、薬師寺聖（デザイナ、エンジニア）によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/