仿知乎裁剪头像

最近刚做了一个新的app,里面有裁剪头像的需求,于是仿照这知乎的效果自己写了一个裁剪图片的控制器,支持设置裁剪区域和蒙版样式,缩放、移动、双击放大和缩小图片。想着分享出来提高开发效率。

效果如下

test.gif
test2.gif

使用方式

    //创建控制器,传入裁剪区域,原图,蒙版是否为圆角
    CGRect clipFrame = CGRectMake(0, (ScreenH - ScreenW) * 0.5, ScreenW, ScreenW);
    HTClipImageController *controller = [[HTClipImageController alloc] initWithImage:image ClipFrame:clipFrame IsRoundedCorner:YES];
    // 设置代理,实现代理协议
    controller.delegate = self;
    [picker pushViewController:controller animated:true];

实现原理

  1. 考虑到需要缩放和拖动所以用的是UIScrollView + UIImageView
  2. 根据裁剪区域的大小和原图的大小,计算出图片缩放后imageView的frame和scrollView的contentsize, 调整offset使得图片位于中心位置
  3. 根据裁剪区域frame, 设置模版大小、位置和样式
  4. 在缩放的代理方法中,根据新的imageView的frame, 设置contentSize和offset
  5. 在点击确定的方法中,根据裁剪区域frame和当前imageView的frame,截取图片,调用代理方法

demo地址

有什么问题可以在下面评论交流,如果感觉有用的话麻烦给个star
https://github.com/JTWang4778/PickAndClipImage

你可能感兴趣的:(仿知乎裁剪头像)