Windows Phone – 裁剪图片 (Crop Image)-阿里云开发者社区

最近在处理图像的功能，对於图像的比例我也不是非常的清楚，因此，在编辑图片上花了不少时间。

该篇文章主要说明的是：如何对图片选择需要的范围进行裁剪(Crop Image)。

如果App里想要用到图像，通常我们会使用PhotoChooserTask来取得图像并加上一个Image Control显示内容，

程式码如下：

 
  void AddImageBtn_Click(object sender, RoutedEventArgs e) 
   
  { 
   
      // 呼叫PhotoTask取得指定的图示 
   
      PhotoChooserTask tTask = new PhotoChooserTask(); 
   
      tTask.Completed += PhotoTask_Completed; 
   
      tTask.Show(); 
   
  } 
   
  ? 
   
  void PhotoTask_Completed(object sender, PhotoResult e) 
   
  { 
   
      if (e.Error != null) 
   
          MessageBox.Show(e.Error.Message, "Error", MessageBoxButton.OK); 
   
      else 
   
      { 
   
          if (e.ChosenPhoto == null) return; 
   
          BitmapImage tBitMap = new BitmapImage(); 
   
          tBitMap.SetSource(e.ChosenPhoto); 
   
          image1.Source = tBitMap; 
   
      } 
   
  }

但是这样的内容就跟原来选到的内容是一样的，那如果我只想要某一块的内容呢？就需要加点程式来处理了。

参考<Custom image cropping in Windows Phone 7 - Part 1 of 2>与<Custom image cropping in Windows Phone 7 - Part 2 of 2>

这两篇的内容说明如何透过手指要裁剪的指定范围，其主要的概念分成几个部分：

(1) 采用整个LayoutRoot为底图，上方加入一个Image控件；并且加入4个按钮；

???? 最重要的是该Image控件，定义了要裁剪的对象；透过PhotoChooserTask取得要裁剪的图像；

???? 4个按钮，其任务为了裁剪图像。

(2) 绘制一个方框，搭配手指移动调整要裁剪的范围；

???? 增加透过手指的Touch输入，调整Rectangle的大小，搭配其中一个Accept的按钮执行透过该Rectangle裁剪图像。

???? 首先，根据参考文件的Part 1介绍了透过手指的滑动，调整Rectangle的大小范围，如下：

 
  void SetPicture() 
   
  { 
   
      Rectangle rect = new Rectangle(); 
   
      rect.Opacity = .5; 
   
      rect.Fill = new SolidColorBrush(Colors.White); 
   
      rect.Height = image1.Height; 
   
      rect.MaxHeight = image1.Height; 
   
      rect.MaxWidth = image1.Width; 
   
      rect.Width = image1.Width; 
   
      rect.Stroke = new SolidColorBrush(Colors.Red); 
   
      rect.StrokeThickness = 2; 
   
      rect.Margin = image1.Margin; 
   
      rect.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(rect_ManipulationDelta); 
   
  ? 
   
      LayoutRoot.Children.Add(rect); 
   
  } 
   
  ? 
   
  void rect_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) 
   
  { 
   
      // 实现移动时，手指往外移动范围加大；往内移动范围缩小的效果。 
   
      Rectangle r = (Rectangle)sender; 
   
      // 利用 -= 的方式来调整 
   
      r.Width -= e.DeltaManipulation.Translation.X; 
   
      r.Height -= e.DeltaManipulation.Translation.Y;             
   
  }

?????? 里面滑动的事件主要注册了ManipulationDelta，该事件为主要操作的Trigger，往下先补充有关Rectangle的操作说明。

???

载入图片不是最重要的部分，最重要是怎麽操作Rectangle与最後根据Rectangle的大小对应至图片中的范围进行裁剪，

往下先针对Rectangle的操作加以说明：

〉Rectangle：

??? 绘制一个矩形的类别，可以具有Stoke(笔触)与Fill(填充)。

类型	名称	说明
Properties	Opacity	设定或取得对象的透明程度。
Properties	Fill	设定或取得如何绘制内部Shape的Brush。 (Inherited from Shape.)
Properties	Stroke	设定或取得如何绘制指定Shape轮廓的Brush。 (Inherited from Shape.)
Properties	StrokeThickness	设定或取得如何绘制指定Shape笔划轮廓的宽度。 (Inherited from Shape.)
Event	ManipulationDelta	发生於当输入设备(例如：手指)开始操作UIElement时。(Inherited from UIElement.)

??? 透过ManipulationDelta负责处理当input device(输入设备)开始操作的UIElement开始，去修改目前Rectangle的大小，

进一步去调整要裁剪的范围。对於如何处理ManipulationDelta的事件，参考<How to: Handle Manipulation Events>来加以说明：

透过控制Manipulation事件对於touch与multitouch输入产生回应，进而对物件进行move、scale的调整。该事件由UIElement所提供。

在Windows Phone里manipulation events支援三种类型：

?ManipulationCompleted：

??? 该事件发生於manipulation与inertia(惯性)完成时。

?ManipulationStarted：

??? 该事件发生於当有input device (例如：touch)开始在UIElement进行manipulation。

?ManipulationDelta：

??? 该事件发生於当input device在操作UIElment过程中改变了位置。例如：touch该UIElement时，由A这个位置移动到另一个位置。

??? 该事件在操作期间会发生多次，主要是因为touch deivce未离开UIElement之前该事件的触法会一直存在。

??? 那麽在操作时程式要怎麽处理呢，如下范例：

 
  public Page2() 
   
  { 
   
      InitializeComponent(); 
   
      // 初始化 
   
      Initialization(); 
   
  } 
   
  ? 
   
  private TransformGroup transformGroup; 
   
  private TranslateTransform translation; 
   
  private ScaleTransform scale; 
   
  ? 
   
  private void Initialization() 
   
  { 
   
      this.transformGroup = new TransformGroup(); 
   
      this.translation = new TranslateTransform(); 
   
      this.scale = new ScaleTransform(); 
   
      // 注册要处理的效果 transliation与scale 
   
      this.transformGroup.Children.Add(this.scale); 
   
      this.transformGroup.Children.Add(this.translation); 
   
      this.rectangle.RenderTransform = this.transformGroup; 
   
      // 注册manipulation的事件 
   
      this.ManipulationDelta += this.PhoneApplicationPage_ManipulationDelta; 
   
  } 
   
  ? 
   
  private void PhoneApplicationPage_ManipulationDelta(object sender,  
   
      System.Windows.Input.ManipulationDeltaEventArgs e) 
   
  { 
   
      // Scale the rectangle. 
   
      //this.scale.ScaleX *= e.DeltaManipulation.Scale.X; 
   
      //this.scale.ScaleY *= e.DeltaManipulation.Scale.Y; 
   
  ? 
   
      // Move the rectangle. 
   
      this.translation.X += e.DeltaManipulation.Translation.X; 
   
      this.translation.Y += e.DeltaManipulation.Translation.Y; 
   
  }

????? 在ManipulationDelta事件中，透过参数ManipluationDeltaEventArgs取得操作的效果值，配合公式完成UIElement的移动与Scale调整。

????? 更多有关手势操作的内容可以参考<Windows Phone 7 - 浅谈手势(Gestures)运作>的说明。

(3) 执行裁剪的重要逻辑，保持移动与缩放的值，重新计算实际要剪下的范围：

????? 在这个部分，根据原文的说明将Rectangle的移动与大小的计算分开，增加了许多变数来加以协助，往下便依步骤说明如何调整：

3-1. 增加变数协助逻辑计算：

 
  // 标记目前是否为移动的状态 
   
  private bool isMove = false; 
   
  // 暂存Translation的X与Y值 
   
  private double trX = 0; 
   
  private double trY = 0; 
   
  // 独立Rectangle用於保存目前要裁剪的范围 
   
  private Rectangle r;

3-2. 调整拥有Image的LayoutRoot.width/height与Image相同：

 
  void SetPicture() 
   
  { 
   
      Rectangle rect = new Rectangle(); 
   
      rect.Opacity = .5; 
   
      rect.Fill = new SolidColorBrush(Colors.White); 
   
      rect.Height = image1.Height; 
   
      rect.MaxHeight = image1.Height; 
   
      rect.MaxWidth = image1.Width; 
   
      rect.Width = image1.Width; 
   
      rect.Stroke = new SolidColorBrush(Colors.Red); 
   
      rect.StrokeThickness = 2; 
   
      rect.Margin = image1.Margin; 
   
      rect.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(rect_ManipulationDelta); 
   
  ? 
   
      LayoutRoot.Children.Add(rect); 
   
  ? 
   
      // 增加整个LayoutRoot的width/height与image相同， 
   
      // 这样Rectangle就可以使用与image相同的coordinate。 
   
      LayoutRoot.Width = image1.Width; 
   
      LayoutRoot.Height = image1.Height; 
   
  }

??? 在原有的SetPicture()加入两行指令，让LayoutRoot的width、height与Image相同，这样LayoutRoot才可以与Image的coordinate对齐。

??? 进行裁剪时才能对在相同的Point上。

3-3. 调整ManipulationDelta的事件处理逻辑：

 
  void rect_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) 
   
  { 
   
      // 利用Rectangle的建立通用的Transform 
   
      GeneralTransform gt = ((Rectangle)sender).TransformToVisual(LayoutRoot); 
   
      Point p = gt.Transform(new Point(0, 0)); 
   
  ? 
   
      // 计算LayoutRoot与Rectangle的间距：X、Y 
   
      int intermediateValueY = (int)((LayoutRoot.Height - ((Rectangle)sender).Height)); 
   
      int intermediateValueX = (int)((LayoutRoot.Width - ((Rectangle)sender).Width)); 
   
      Rectangle croppingRectangle = (Rectangle)sender; 
   
  ? 
   
      if (isMove) 
   
      { 
   
          // 负责移动的逻辑 
   
          TranslateTransform tr = new TranslateTransform(); 
   
          trX += (int)e.DeltaManipulation.Translation.X; 
   
          trY += (int)e.DeltaManipulation.Translation.Y; 
   
  ? 
   
          // 识别移动後的Y是否小於间距范围 
   
          // True：给予最小参数 
   
          // False：大於间距范围，给予最大间距 
   
          if (trY < (-intermediateValueY / 2)) 
   
          { 
   
              trY = (-intermediateValueY / 2); 
   
          } 
   
          else if (trY > (intermediateValueY / 2)) 
   
          { 
   
              trY = (intermediateValueY / 2); 
   
          } 
   
  ? 
   
          // 识别移动後的X是否小於间距范围 
   
          // True：给予最小参数 
   
          // False：大於间距范围，给予最大间距 
   
          if (trX < (-intermediateValueX / 2)) 
   
          { 
   
              trX = (-intermediateValueX / 2); 
   
          } 
   
          else if (trX > (intermediateValueX / 2)) 
   
          { 
   
              trX = (intermediateValueX / 2); 
   
          } 
   
  ? 
   
          // 修改为新的X,Y 
   
          tr.X = trX; 
   
          tr.Y = trY; 
   
          croppingRectangle.RenderTransform = tr; 
   
      } 
   
      else 
   
      { 
   
          // 负责大小缩放的逻辑，>=0 代表手指往右移动，相反的往左移动，修改Width 
   
          if (p.X >= 0) 
   
          { 
   
              // 识别此次移动的X, 是否小於等於区间范围 
   
              if (p.X <= intermediateValueX) 
   
              { 
   
                  croppingRectangle.Width -= (int)e.DeltaManipulation.Translation.X; 
   
              } 
   
              else 
   
              { 
   
                  croppingRectangle.Width -= (p.X - intermediateValueX); 
   
              } 
   
          } 
   
          else 
   
          { 
   
              croppingRectangle.Width -= Math.Abs(p.X); 
   
          } 
   
  ? 
   
          // 负责大小缩放的逻辑，>=0 代表手指往下移动，相反的往上移动，修改Height 
   
          if (p.Y >= 0) 
   
          { 
   
              if (p.Y <= intermediateValueY) 
   
              { 
   
                  croppingRectangle.Height -= (int)e.DeltaManipulation.Translation.Y; 
   
              } 
   
              else 
   
              { 
   
                  croppingRectangle.Height -= (p.Y - intermediateValueY); 
   
              } 
   
          } 
   
          else 
   
          { 
   
              croppingRectangle.Height -= Math.Abs(p.Y); 
   
          } 
   
      } 
   
      // 
   
  }

??? 此段的逻辑相对复杂许多，主要是搭配Rectangle透过TransformToVisual(LayoutRoot)将LayoutRoot的座标转换为指定的视觉物件。

??? 再透过GeneralTransform重新取得目前移动後的Point；

??? 接着计算此次移动所造成LayoutRoot与Rectangle在X、Y的间距，接着识别目前是为移动模式还是缩放模式，进一步依手指移动的范围

??? 进行X、Y(则建立一个新的TranslateTransform根据计算移动的范围进行调整)或Width、Height(直接调整Rectangle物件)。

3-4. 利用Rectangle的范围进行裁剪图片；

 
  /// <summary> 
   
  /// 利用Rectangle取得Image要调整至新大小的范围。 
   
  /// </summary> 
   
  void ClipImage() 
   
  {             
   
      // 取得画面上的Rectangle 
   
      r = (Rectangle)(from c in LayoutRoot.Children where c.Opacity == .5 select c).First(); 
   
  ? 
   
      // 利用Rectangle建立RectangleGeometry指定要用来裁剪的大小 
   
      RectangleGeometry geo = new RectangleGeometry(); 
   
      GeneralTransform gt = r.TransformToVisual(LayoutRoot); 
   
      Point p = gt.Transform(new Point(0, 0)); 
   
      geo.Rect = new Rect(p.X, p.Y, r.Width, r.Height); 
   
      // 对image进行裁剪 
   
      image1.Clip = geo; 
   
      r.Visibility = System.Windows.Visibility.Collapsed; 
   
  ? 
   
      // 将image移动到裁剪的座标 
   
      TranslateTransform t = new TranslateTransform(); 
   
      t.X = -p.X; 
   
      t.Y = -p.Y; 
   
      image1.RenderTransform = t; 
   
  }

??? 先取得Rectangle物件，再一次使用GeneralTransform取得LayoutRoot的座标转换为指定的视觉物件後，建立一个RectangleGeometry，

??? 将取得的座标指定给该矩形类别，并且指定它的维度。接着指定image.Clip的值，让image进行裁剪形成我们选择的范围。

??? 最後搭配TrasnslateTransform移动裁剪好的图示至预设位置。

??? 裁剪好的图示要怎麽储存呢，请参考下方的程式内容：

 
  /// <summary> 
   
  /// 将画面撷取下来产生档案。 
   
  /// </summary> 
   
  /// <param name="element"></param> 
   
  void WriteBitmap(FrameworkElement element, string filename) 
   
  { 
   
      WriteableBitmap wBitmap = new WriteableBitmap(element, null); 
   
  ? 
   
      using (MemoryStream stream = new MemoryStream()) 
   
      { 
   
          wBitmap.SaveJpeg(stream, (int)element.Width, (int)element.Height, 0, 100); 
   
  ? 
   
          using (var local = new IsolatedStorageFileStream(filename,  
   
              FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication())) 
   
          { 
   
              local.Write(stream.GetBuffer(), 0, stream.GetBuffer().Length); 
   
          } 
   
      } 
   
  }

〉GeneralTransform：

??? 提供物件的通用转换支援，例如点和矩形。这是个抽象类别。本篇用到Transform()方法转换指定的点，然後传回结果。

〉TranslateTransform：

??? 平移(移动)物件2D x-y座标系统。

〉RectangleGeometry：

??? 描述二维矩型的类别。Rect属性用於设定/取得矩形的维度。

〉Image：

??? 负责处理图像的显示、调整与效果。针对本篇用到的项目加以说明：

类型	名称	说明
Properties	Clip	Gets or sets the Geometry used to define the outline of the contents of a UIElement. (Inherited from UIElement.)
Properties	RenderTransform	Gets or sets transform information that affects the rendering position of a UIElement. (Inherited from UIElement.)

=====

以上为说明如何实作Crop Image的方式，但是如果参考原文的程式码，它是限制在固定的image物件width/height，

对於实际图像大小有些差异，所以我做了一个简单的调整：

(1) 调整放入图片时将原始图片加上萤幕比例的Size调整：

 
  void task_Completed(object sender, PhotoResult e) 
   
  { 
   
      BitmapImage image = new BitmapImage(); 
   
      image.SetSource(e.ChosenPhoto); 
   
      image1.Source = image; 
   
      // 增加图像适用萤幕比例 
   
      Fit(image.PixelWidth, image.PixelHeight); 
   
      SetPicture(); 
   
  } 
   
  ? 
   
  /// <summary> 
   
  /// 依画面大小进行图像的比例缩放。 
   
  /// </summary> 
   
  /// <param name="width">图像width</param> 
   
  /// <param name="height">图像height</param> 
   
  private void Fit(double width, double height) 
   
  { 
   
      double tScreenWidth = Application.Current.Host.Content.ActualWidth;  
   
      double tScreenHeight = Application.Current.Host.Content.ActualHeight; 
   
      // 图像比例换算 
   
      image1.Height = (tScreenWidth / width) * height; 
   
      image1.Width = tScreenWidth; 
   
  }

记得要将xaml中指定image的width/height给去掉喔。

(2) 修改储存图片的方式，改为直接储存图像而不是全画面：

 
  /// <summary> 
   
  /// 储存实际图片的方法。 
   
  /// </summary> 
   
  /// <param name="element"></param> 
   
  void WriteBitmap(Image element) 
   
  { 
   
      int tWidth = (int)element.Clip.Bounds.Width; 
   
      int tHeight = (int)element.Clip.Bounds.Height; 
   
      // 重新绘制一个新的WriteableBitmap 
   
      WriteableBitmap wBitmap = new WriteableBitmap(tWidth, tHeight); 
   
      // 加上图像来源与使用的RenderTransform 
   
      wBitmap.Render(element, element.RenderTransform); 
   
      wBitmap.Invalidate(); 
   
  ? 
   
      using (MemoryStream stream = new MemoryStream()) 
   
      { 
   
          wBitmap.SaveJpeg(stream, tWidth, tHeight, 0, 100); 
   
  ? 
   
          using (var local = new IsolatedStorageFileStream("myImage1.jpg", 
   
              FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication())) 
   
          { 
   
              local.Write(stream.GetBuffer(), 0, stream.GetBuffer().Length); 
   
          } 
   
      } 
   
  }