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

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

手势开始时

在这里我们要根据手势的 beginPoint 判断触发对象是边线还是 UIImageView


// 开始滑动时判断滑动对象是 ImageView 还是 Layer 上的 Line
 if (panGesture.state == UIGestureRecognizerStateBegan) {
 if (beginPoint.x >= self.cropAreaX - judgeWidth && beginPoint.x <= self.cropAreaX + judgeWidth && beginPoint.y >= self.cropAreaY && beginPoint.y <= self.cropAreaY + self.cropAreaHeight && self.cropAreaWidth >= 50) {
  self.activeGestureView = CROPVIEWLEFT;
 } else if (beginPoint.x >= self.cropAreaX + self.cropAreaWidth - judgeWidth && beginPoint.x <= self.cropAreaX + self.cropAreaWidth + judgeWidth && beginPoint.y >= self.cropAreaY && beginPoint.y <= self.cropAreaY + self.cropAreaHeight && self.cropAreaWidth >= 50) {
  self.activeGestureView = CROPVIEWRIGHT;
 } else if (beginPoint.y >= self.cropAreaY - judgeWidth && beginPoint.y <= self.cropAreaY + judgeWidth && beginPoint.x >= self.cropAreaX && beginPoint.x <= self.cropAreaX + self.cropAreaWidth && self.cropAreaHeight >= 50) {
  self.activeGestureView = CROPVIEWTOP;
 } else if (beginPoint.y >= self.cropAreaY + self.cropAreaHeight - judgeWidth && beginPoint.y <= self.cropAreaY + self.cropAreaHeight + judgeWidth && beginPoint.x >= self.cropAreaX && beginPoint.x <= self.cropAreaX + self.cropAreaWidth && self.cropAreaHeight >= 50) {
  self.activeGestureView = CROPVIEWBOTTOM;
 } else {
  self.activeGestureView = BIGIMAGEVIEW;
  [view setCenter:CGPointMake(view.center.x + translation.x, view.center.y + translation.y)];
  [panGesture setTranslation:CGPointZero inView:view.superview];
 }
 }

手势进行时

在这里,如果触发对象是边线,则计算边线需要移动的距离和方向,以及对于边界条件的限制以防止边线之间交叉错位的情况,具体来说就是获得坐标差值,更新 cropAreaX、cropAreaWidth 等值,然后更新 CAShapeLayer 上的空心蒙层。

如果触发对象是 UIImageView 则只需要将其位置进行改变即可。


// 滑动过程中进行位置改变
 if (panGesture.state == UIGestureRecognizerStateChanged) {
 CGFloat diff = 0;
 switch (self.activeGestureView) {
  case CROPVIEWLEFT: {
  diff = movePoint.x - self.cropAreaX;
  if (diff >= 0 && self.cropAreaWidth > 50) {
   self.cropAreaWidth -= diff;
   self.cropAreaX += diff;
  } else if (diff < 0 && self.cropAreaX > self.bigImageView.frame.origin.x && self.cropAreaX >= 15) {
   self.cropAreaWidth -= diff;
   self.cropAreaX += diff;
  }
  [self setUpCropLayer];
  break;
  }
  case CROPVIEWRIGHT: {
  diff = movePoint.x - self.cropAreaX - self.cropAreaWidth;
  if (diff >= 0 && (self.cropAreaX + self.cropAreaWidth) < MIN(self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width, self.cropView.frame.origin.x + self.cropView.frame.size.width - 15)){
   self.cropAreaWidth += diff;
  } else if (diff < 0 && self.cropAreaWidth >= 50) {
   self.cropAreaWidth += diff;
  }
  [self setUpCropLayer];
  break;
  }
  case CROPVIEWTOP: {
  diff = movePoint.y - self.cropAreaY;
  if (diff >= 0 && self.cropAreaHeight > 50) {
   self.cropAreaHeight -= diff;
   self.cropAreaY += diff;
  } else if (diff < 0 && self.cropAreaY > self.bigImageView.frame.origin.y && self.cropAreaY >= 15) {
   self.cropAreaHeight -= diff;
   self.cropAreaY += diff;
  }
  [self setUpCropLayer];
  break;
  }
  case CROPVIEWBOTTOM: {
  diff = movePoint.y - self.cropAreaY - self.cropAreaHeight;
  if (diff >= 0 && (self.cropAreaY + self.cropAreaHeight) < MIN(self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height, self.cropView.frame.origin.y + self.cropView.frame.size.height - 15)){
   self.cropAreaHeight += diff;
  } else if (diff < 0 && self.cropAreaHeight >= 50) {
   self.cropAreaHeight += diff;
  }
  [self setUpCropLayer];
  break;
  }
  case BIGIMAGEVIEW: {
  [view setCenter:CGPointMake(view.center.x + translation.x, view.center.y + translation.y)];
  [panGesture setTranslation:CGPointZero inView:view.superview];
  break;
  }
  default:
  break;
 }
 }