iOS中实现动态区域裁剪图片功能实例

2020-01-21 02:34:44王振洲

这里我们通过生成当前图片的 CGRect,与裁剪区域的边界进行如下比较

图片左边线大于裁剪区域左边线时图片移动到裁剪区域 x 值 图片上边线大于裁剪区域上边线时图片移动到裁剪区域 y 值 图片右边线小于裁剪区域右边线时图片右贴裁剪区域右边线 图片下边线小于裁剪区域右边线时图片下贴裁剪区域下边线

进行这番操作后,可能会出现由于图片过小无法铺满裁剪区域的情况,如下图所示

ios,裁剪屏幕指定区域,裁剪图片指定区域,图片裁剪

因此还需要再次对图片尺寸进行修正


 // 对图片缩放进行比例修正,防止过小
 if (self.cropAreaX < self.bigImageView.frame.origin.x
  || ((self.cropAreaX + self.cropAreaWidth) > self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width)
  || self.cropAreaY < self.bigImageView.frame.origin.y
  || ((self.cropAreaY + self.cropAreaHeight) > self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height)) {
  view.frame = self.originalFrame;
 }

这样就实现了缩放功能。

移动功能

相比于缩放,移动功能实现就简单了,只需要在 cropview 上添加 UIPanGestureRecognizer,然后在回调方法里拿到需要移动的距离,修改 UIImageView 的 center 就可以了。


 CGPoint translation = [panGesture translationInView:view.superview];
 [view setCenter:CGPointMake(view.center.x + translation.x, view.center.y + translation.y)];
  [panGesture setTranslation:CGPointZero inView:view.superview];

但是同样为了保证移动后的图片不会与裁剪区域出现空白甚至是超出裁剪区域,这里更新了图片位置后,在手势结束时还要对图片进行位置修正


  CGRect currentFrame = view.frame;
  
  if (currentFrame.origin.x >= self.cropAreaX) {
   currentFrame.origin.x = self.cropAreaX;
   
  }
  if (currentFrame.origin.y >= self.cropAreaY) {
   currentFrame.origin.y = self.cropAreaY;
  }
  if (currentFrame.size.width + currentFrame.origin.x < self.cropAreaX + self.cropAreaWidth) {
   CGFloat movedLeftX = fabs(currentFrame.size.width + currentFrame.origin.x - (self.cropAreaX + self.cropAreaWidth));
   currentFrame.origin.x += movedLeftX;
  }
  if (currentFrame.size.height + currentFrame.origin.y < self.cropAreaY + self.cropAreaHeight) {
   CGFloat moveUpY = fabs(currentFrame.size.height + currentFrame.origin.y - (self.cropAreaY + self.cropAreaHeight));
   currentFrame.origin.y += moveUpY;
  }
  [UIView animateWithDuration:0.3 animations:^{
   
   [view setFrame:currentFrame];
  }];

可以看到,这里做的位置检查与缩放时做的检查是一样的,只是由于不会改变图片尺寸所以这里不需要进行尺寸修正。