トリミングボックスのドラッグによるトリミング

クライアント側で画像を完全にトリミングできれば、とても便利です。Windows ストアアプリケーションでは、C1Bitmap または WriteableBitmap クラスを使用してこれを実現できます。C1Bitmap コンポーネントには、あらゆるビットマップ関連操作を実行する際に簡単に使用できる API が用意されています。この API は、単純に色を取得および設定することができ、GetPixel および SetPixel メソッドを使用してピクセルに直接アクセスできます。

次の XAML は、トリミング領域を作成するために必要な要素を定義します。トリミング領域を作成するには、XAML マークアップに <Grid> 要素を追加して XAML にイメージマスクを作成し、コードビハインドでユーザーの選択に基づいて画像にイメージマスクを適用します。

XAML でマークアップの書き方

XAML マークアップ	コードのコピー
<UserControl.Resources> <SolidColorBrush Color="#66FFFFFF" x:Key="MaskBrush" /> </UserControl.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <Grid Name="imageGrid" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Stretch="None" Name="image" Grid.RowSpan="3" Grid.ColumnSpan="3" /> <Grid Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" /> <Grid Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" /> <Grid Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" /> <Grid Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" /> </Grid> </Grid>

以下のコードは、画像にトリミング効果を実装します。このコードは、ユーザーがトリミングする画像の範囲を選択すると、OnDragStarted イベントと OnDragDelta イベントを使用して水平方向と垂直方向の変更をキャプチャします。さらに、計算によって開始点と終了点の値を求め、それらの点を Rect オブジェクトに変換します。

C# コードの書き方

C#	コードのコピー
Point _startPosition; void OnDragStarted(object sender, C1DragStartedEventArgs e) { _startPosition = e.GetPosition(null); } void OnDragDelta(object sender, C1DragDeltaEventArgs e) { var transform = Window.Current.Content.TransformToVisual(image); var start = transform.TransformPoint(_startPosition); var end = transform.TransformPoint(e.GetPosition(null)); start.X = Math.Min((double)Math.Max(start.X, 0), bitmap.Width); end.X = Math.Min((double)Math.Max(end.X, 0), bitmap.Width); start.Y = Math.Min((double)Math.Max(start.Y, 0), bitmap.Height); end.Y = Math.Min((double)Math.Max(end.Y, 0), bitmap.Height); selection = new Rect(new Point( Math.Round(Convert.ToDouble(Math.Min(start.X, end.X))), Math.Round(Convert.ToDouble(Math.Min(start.Y, end.Y)))), new Size(Convert.ToDouble(Math.Round(Math.Abs(start.X - end.X))), Convert.ToDouble(Math.Round(Math.Abs(start.Y - end.Y))))); UpdateMask(); }

マスクの各部の範囲に多少のロジックを適用します。

C# コードの書き方

C#	コードのコピー
void UpdateMask() { topMask.Height = selection.Top; bottomMask.Height = bitmap.Height - selection.Bottom; leftMask.Width = selection.Left; rightMask.Width = bitmap.Width - selection.Right; }

UpdateMask() メソッドは、Grid Rect の Left、Top、Width、および Height プロパティに基づいて、すべての Grid マスク要素の位置を更新します。

C# コードの書き方