タッチで領域指定したエリア選択枠で写真を切り出す（XAML2行+C#6行）
#wp7dev_jp #wpdev_jp
さて、タッチで領域指定した時のエリア選択枠を動かす で枠の作成から移動まで終わりました。
あとは、枠をもとに画像を切り取るだけです。枠をもとに、といっても座標とサイズを使うだけですけどね。
画像の切り取り
プログラムで画像を切り取るにはどうしたらいいでしょう？これには2つの加工が必要です。
- 切り取る場所に画像を移動する
- 指定サイズで画像を切り取る
この時に使うのは、WriteableBitmap です。Image → WriteableBItmap で切り取りながら画像生成 → 例えば 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#
あとはボタンを押した時の処理ですね。
- 矩形に合わせて WrtiteableBitmapを作成 (new) し
- 画像を移動しながら WriteableBitmap に描画 (render) し
- 最後に切り抜き (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 ボタンで左上に結果表示されます。
ね？かんたんでしょ？
関連情報