Обрезка изображения с прямоугольником

Question

У меня есть изображение, и я хочу обрезать его, используя прямоугольник, код ниже код, который я положил изображение и нарисуйте прямоугольник в центре изображения:

MainPage.xaml:

<Canvas x:Name="canvas" HorizontalAlignment="Center" VerticalAlignment="Center" Width="340" Height="480" Background="Blue"> 
     <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All"> 
      <Image.RenderTransform> 
       <CompositeTransform/> 
      </Image.RenderTransform> 
     </Image> 
     <Path Stroke="Black" StrokeThickness="1"> 
      <Path.Data> 
       <RectangleGeometry Rect="0,0,340,480"/> 
      </Path.Data> 
     </Path> 
    </Canvas> 

Успешное отображение изображения и рисование прямоугольника. Образец образца, как показано ниже:

Теперь я хочу нажать кнопку, чтобы обрезать изображение в прямоугольнике (а не в автоматическом клипе). При загрузке изображения прямоугольник автоматически добавляется. Поэтому нельзя использовать «Point Pressed» и «Point Released». А также не может использовать «rectangle.clip», потому что он будет автоматически обрезать изображение. Как это решить? Спасибо

Обновлено: Я могу переместить изображение, Как привязать данные и установить координату прямоугольника в динамический? Ниже приведен код преобразования изображения. Благодарю.

public sealed partial class MainPage: Page 
{ 
     private CompositeTransform compositeTranslation; 

     public MainPage() 
     { 
      this.InitializeComponent(); 
      photo.ManipulationDelta += Composite_ManipulationDelta; 
      compositeTranslation = new CompositeTransform(); 
      photo.RenderTransform = this.compositeTranslation; 
     } 

     void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) 
     { 
      // scale the image. 
      compositeTranslation.CenterX = photo.ActualWidth/2; 
      compositeTranslation.CenterY = photo.ActualHeight/2; 
      compositeTranslation.ScaleX *= e.Delta.Scale; 
      compositeTranslation.ScaleY *= e.Delta.Scale; 
      compositeTranslation.TranslateX += e.Delta.Translation.X; 
      compositeTranslation.TranslateY += e.Delta.Translation.Y; 
     } 
} 

Answer 1

Я не использовал или XAML, поскольку это создает путаницу для меня. Поэтому я создал фрагмент по вашей проблеме. Попробуйте это и дайте мне знать результаты. Я использовал тот же образ, как вы вывесили

XAML

<Page.BottomAppBar> 
    <AppBar IsSticky="True" IsOpen="True"> 
     <Button Content="Crop" Click="btnCrop_Click" /> 
    </AppBar> 
</Page.BottomAppBar> 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All" Source="http://i.stack.imgur.com/UIBSp.png" /> 
    <Path x:Name="path" Stroke="Red" StrokeThickness="3"> 
     <Path.Data> 
      <RectangleGeometry Rect="545,212,440,420"/> 
     </Path.Data> 
    </Path> 
</Grid> 

C#

private void btnCrop_Click(object sender, RoutedEventArgs e) 
{ 
    var _rect = new RectangleGeometry(); 
    _rect.Rect = path.Data.Bounds; 
    photo.Clip = _rect; 
}