使用画布矩形裁剪图像 [英] Crop Image using Canvas Rectangle

问题描述

裁剪图片无法正常工作。我错了？

Cropping the image is not working properly. Where I'm wrong?

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

它正在裁剪错误的部分。

It is cropping the wrong part.

推荐答案

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

The Margin property was not set properly to the Canvas control. It should be the same as Image control's margin properly value. If we don't set Margin to Canvas, It will take the full window size.

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>   

这篇关于使用画布矩形裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！