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

カメラでの拡大映像の表示

ここからは、先ほどのズーム機能の応用編として、カメラでの撮影時にズームを使うサンプルを解説します。このサンプルの動作は下記の通りです。

1. まずは実機を横向きにして使用します。
2. プログラムを実機にデプロイするとすぐにカメラが起動します。
3. カメラ上には「等倍」と「3倍」のRadioButtonが配置されています（規定値は等倍）。
4. 「3倍」をチェックすると、カメラの画像が実物より3倍の大きさで表示されます（図4）。

The Zoom

この処理はMarketplaceに上げているThe ZOOM で使用しています。カメラ上でタップすることで4段階まで拡大して撮影できるアプリです。

図4：カメラの画像を等倍から3倍ズームに切り替えたところ（クリックで拡大）

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

プロジェクトの作成

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

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

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

ツールボックスからRectangleコントロールを1個、Imageコントロールを1個、RadioButtonコントロールを2個配置します。

RadioButtonコントロールのプロパティにある[共通]パネルのContentに「等倍」「3倍」と指定します。GroupNameには2つ共に同じ名称zoomと指定します。

（＊）同じ名称を指定しないと、RadioButtonに複数チェックが入ってしまいますので、必ず任意の同じ名称を指定してください。

[ブラシ]パネル内のBackgroundやForegroundに適当な色を指定します。書き出されるXAMLコードをリスト3のように編集します。

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

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

（２）プロパティ要素内に要素を配置し、x:NameにmyVideoBrushと指定しておきます。ビデオ コンテンツで領域を塗りつぶす要素です。

（３）x:NameがmainImageのプロパティ要素内に、要素を配置し、x:NameをmyZoomとしておきます。ScaleXとScaleYプロパティに0を指定しておきます。このクラスは、2-D x-y 座標系内のオブジェクトをスケーリングするクラスです。ScaleXプロパティではx軸のスケール ファクター、ScaleYプロパティではy軸のスケール ファクターを設定しますが、このScaleXとScaleYの値を変化させることで、被写体の倍率を変更できます。
プロパティ要素内に要素を配置し、名前をlensとしておきます。こうすることで、Imageのコンテンツの、アウトラインの定義に使用するジオメトリを設定できます。
要素は、円または楕円のジオメトリを表します。RadiusXプロパティでは、EllipseGeometryのx半径の値を、RadiusYプロパティでは、EllipseGeometryのy半径の値を設定します。ここでは、両方とも450と指定します。するとEllipseGeometryで実機の画面全体が覆われます。

（４）2つの要素を配置し、GroupNameプロパティにzoomと指定しています。

<phone:PhoneApplicationPage 
  x:Class="WP71_TheZoom.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Landscape" Orientation="LandscapeLeft"
  shell:SystemTray.IsVisible="True">　■（１）
 
  <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Rectangle Width="704" HorizontalAlignment="Left" Margin="12,25,0,28">　■（２）
      <Rectangle.Fill>　■（２）
        <VideoBrush x:Name="myVideoBrush" />　■（２）
      </Rectangle.Fill>　■（２）
    </Rectangle>　■（２）
 
    <Image x:Name="mainImage" 
        Width="629" Height="451" 
        HorizontalAlignment="Left" VerticalAlignment="Bottom" 
        Stretch="Uniform" Margin="-3,0,0,28">　■（３）
      <Image.RenderTransform>　■（３）
        <ScaleTransform x:Name="myZoom" ScaleX="0" ScaleY="0" />　■（３）
      </Image.RenderTransform>　■（３）
      <Image.Clip>　■（３）
        <EllipseGeometry x:Name="lens" Center="0,0" RadiusX="450" RadiusY="450" />
      </Image.Clip>　■（３）
    </Image>　■（３）
    <RadioButton Content="3倍" GroupName="zoom" Height="73" HorizontalAlignment="Right" Margin="0,390,436,0" Name="sanbaiRadioButton" VerticalAlignment="Top" Width="128" FontSize="22" FontWeight="Bold" Foreground="Red" Background="Gold" BorderBrush="Navy" />　■（４）
    <RadioButton Content="等倍" GroupName="zoom" Height="82" HorizontalAlignment="Left" IsChecked="True" Margin="24,386,0,0" Name="toubaiRadioButton" VerticalAlignment="Top" Width="112" FontSize="22" FontWeight="Bold" Foreground="Red" Background="Gold" BorderBrush="Navy" />　■（４）
  </Grid>
  <!--ApplicationBar の使用法を示すサンプル コード-->
  ～コード略～
</phone:PhoneApplicationPage>

レイアウト図は図5になります。

図5：各コントロールを配置した（クリックで拡大）