#wp7dev_jp #wpdev_jp

さて、タッチで領域指定した時のエリア選択枠を動かす で枠の作成から移動まで終わりました。

あとは、枠をもとに画像を切り取るだけです。枠をもとに、といっても座標とサイズを使うだけですけどね。

画像の切り取り

プログラムで画像を切り取るにはどうしたらいいでしょう?これには2つの加工が必要です。

  • 切り取る場所に画像を移動する
  • 指定サイズで画像を切り取る

この時に使うのは、WriteableBitmap です。Image → WriteableBItmap で切り取りながら画像生成 → 例えば Imageに戻す

処理の流れ(と使うメソッド)はこんな感じですね。

image

XAML

結果を表示する Image と、切り出しのボタンを配置します。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    
    <Grid Background="Transparent"
       :
    </Grid>
    <Image HorizontalAlignment="Left"  Stretch="None" Name="resultImg" 
            VerticalAlignment="Top" />
    <Button Content="Crop" Margin="0,520,0,0" Click="button1_Click" />
</Grid>

 

C#

あとはボタンを押した時の処理ですね。

  1. 矩形に合わせて WrtiteableBitmapを作成 (new) し
  2. 画像を移動しながら WriteableBitmap に描画 (render) し
  3. 最後に切り抜き (Invalidate) ます。

あとは、切り抜いた画像に合わせて Image コントロールのサイズを調整して、Image コントロールに切り抜いた WriteableBitmap を渡すだけです。

private void button1_Click(object sender, RoutedEventArgs e)
{
    WriteableBitmap wb = new WriteableBitmap(
        (int)rectangle1.Width, (int)rectangle1.Height);
    wb.Render(photo, new TranslateTransform { 
        X = - rectangle1.Margin.Left , 
        Y = - rectangle1.Margin.Top });
    wb.Invalidate();
    resultImg.Width = rectangle1.Width;
    resultImg.Height = rectangle1.Height;
    resultImg.Source = wb;
}

この処理にって何かに似ているなーと思ったら、証明写真用のカッターでした。

証明写真用ダイカッター(耐久使用型)

さて、結果です

選択して、移動して、Crop ボタンで左上に結果表示されます。

image image

ね?かんたんでしょ?

関連情報

  1. タッチで領域指定した時のエリア選択枠を描く (XAML 1行、C#6行)
  2. タッチで領域指定した時のエリア選択枠を動かす (C#+3行)
  3. タッチで領域指定したエリア選択枠で写真を切り出す(XAML2行+C#6行)