使用画布矩形裁剪图像

Posted 2023-02-25

【中文标题】使用画布矩形裁剪图像

【英文标题】：Crop Image using Canvas Rectangle

【发布时间】：2014-04-23 09:31:04

【问题描述】：

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

我的 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

它裁剪了错误的部分。

【问题讨论】：

“无法正常工作”在互联网上向陌生人寻求帮助时非常模糊。什么具体不起作用？到目前为止，您的调查发现了什么？

@DanielKelley。我已经上传了我的图片。

【参考方案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>   

【参考方案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>