使用Canvas Rectangle裁剪图像

Question

裁剪图像无法正常工作。哪里我错了？

我的Xaml：

<Grid x:Name="Gridimage1">
 <Image Name="image1" Grid.Column="0" Height="317" HorizontalAlignment="Left" Margin="20,67,0,0"  Stretch="Fill" VerticalAlignment="Top" Width="331"></Image>
    <Canvas  x:Name="BackPanel">
      <Rectangle x:Name="selectionRectangle" Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed" />
     </Canvas>
</Grid>      
<Button Content="&gt;&gt;" Height="23" HorizontalAlignment="Left" Margin="357,201,0,0" Name="Go" VerticalAlignment="Top" Width="41" Click="Go_Click" FontWeight="Bold" Visibility="Hidden" />
<Image Grid.Column="1" Height="317" HorizontalAlignment="Left" Margin="408,67,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="331" />

C＃：

private  bool isDragging = false;
private Point anchorPoint = new Point();
 public MainWindow()
    {
        InitializeComponent();
        Gridimage1.MouseLeftButtonDown += new MouseButtonEventHandler(image1_MouseLeftButtonDown);
         Gridimage1.MouseMove += new MouseEventHandler(image1_MouseMove);
         Gridimage1.MouseLeftButtonUp += new MouseButtonEventHandler(image1_MouseLeftButtonUp);
         Go.IsEnabled = false;
         image2.Source = null;
    }
 private void Go_Click(object sender, RoutedEventArgs e)
    {        
      if (image1.Source != null)
        {
        Rect rect1 = new Rect(Canvas.GetLeft(selectionRectangle), Canvas.GetTop(selectionRectangle), selectionRectangle.Width, selectionRectangle.Height);
                System.Windows.Int32Rect rcFrom = new System.Windows.Int32Rect();
                rcFrom.X = (int)((rect1.X) * (image1.Source.Width) /(image1.Width));
                rcFrom.Y = (int)((rect1.Y) *(image1.Source.Height) / (image1.Height));
                rcFrom.Width = (int)((rect1.Width) * (image1.Source.Width) /(image1.Width));
                rcFrom.Height = (int)((rect1.Height) * (image1.Source.Height) /(image1.Height));  
                BitmapSource bs = new CroppedBitmap(image1.Source as BitmapSource, rcFrom);
                image2.Source = bs;  
            }
        }
#region "Mouse events"
    private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
       if (isDragging == false)
        {
            anchorPoint.X = e.GetPosition(BackPanel).X;
            anchorPoint.Y = e.GetPosition(BackPanel).Y;
            isDragging = true;
        }

    }

    private void image1_MouseMove(object sender, MouseEventArgs e)
    {
        if (isDragging)
        {
            double x = e.GetPosition(BackPanel).X;
            double y = e.GetPosition(BackPanel).Y;
            selectionRectangle.SetValue(Canvas.LeftProperty, Math.Min(x, anchorPoint.X));
            selectionRectangle.SetValue(Canvas.TopProperty, Math.Min(y, anchorPoint.Y));
            selectionRectangle.Width = Math.Abs(x - anchorPoint.X);
            selectionRectangle.Height = Math.Abs(y - anchorPoint.Y);

            if (selectionRectangle.Visibility != Visibility.Visible)
                selectionRectangle.Visibility = Visibility.Visible;  
        }
    }

    private void image1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (isDragging)
        {
            isDragging = false;
            if(selectionRectangle.Width >0)
            {
            Go.Visibility = System.Windows.Visibility.Visible;
            Go.IsEnabled = true;
            }
                 if (selectionRectangle.Visibility != Visibility.Visible)
                selectionRectangle.Visibility = Visibility.Visible;
        }
    }

    private void RestRect()
    {
        selectionRectangle.Visibility = Visibility.Collapsed;
        isDragging = false;
    }

#endregion

这是错误的部分。

Answer 1

Margin属性未正确设置为Canvas控件。它应该与图像控件的边距正确值相同。如果我们不将Margin设置为Canvas，它将占用整个窗口大小。

<强>的Xaml

 <Grid x:Name="Gridimage1" Margin="0,0,411,100">
        <Image Name="image1" Grid.Column="0" Height="317" HorizontalAlignment="Left" Margin="20,67,0,0"  Stretch="Fill" VerticalAlignment="Top" Width="331">
        </Image>
            <Canvas x:Name="BackPanel" Margin="20,67,0,0">
                <Rectangle x:Name="selectionRectangle" Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed" />
            </Canvas>
        </Grid>   

Answer 2

                                       

    <Grid x:Name="other">
        <Button Content="&gt;&gt;" Height="23" HorizontalAlignment="Left" Margin="341,152,0,0" Name="Go" VerticalAlignment="Top" Width="41" Click="Go_Click" FontWeight="Bold"  />
        <Image Height="317" HorizontalAlignment="Left" Margin="403,10,-217,-7" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="331" />

    </Grid>
</Grid>