iOS Swift开发：实现类Twitter/Instagram圆形头像及裁剪编辑器

嘿，很高兴你已经搞定了捏合缩放和移动的核心交互！接下来咱们就聊聊怎么实现圆形遮罩层，让图片只显示圆形区域，完美复刻Twitter/Instagram的头像效果和编辑器体验。

如果只是静态圆形头像，直接给UIImageView设cornerRadius就行，但编辑器里需要实时适配图片的缩放移动，这时候就得用遮罩层了——它能固定圆形裁剪范围，不管图片怎么动，都只显示圈内的内容。

1. 创建圆形遮罩层（Circle Layer） #

先写个方法生成圆形的CAShapeLayer，这个layer的路径就是我们要保留的圆形区域：

func createCircleMask(for container: UIView) -> CAShapeLayer {
    let maskLayer = CAShapeLayer()
    // 圆形路径和容器视图的bounds完全匹配
    let circlePath = UIBezierPath(ovalIn: container.bounds)
    maskLayer.path = circlePath.cgPath
    // 遮罩只看alpha通道，填充色随便设，只要不透明就行
    maskLayer.fillColor = UIColor.black.cgColor
    return maskLayer
}

2. 给图片容器绑定遮罩 #

假设你的图片放在UIScrollView里（毕竟你已经实现了缩放移动），直接把遮罩层赋值给scrollView的layer.mask：

// 替换成你自己的图片容器视图
let circleMask = createCircleMask(for: avatarScrollView)
avatarScrollView.layer.mask = circleMask

这样一来，scrollView里的图片就只会显示圆形区域内的部分了，缩放移动时裁剪范围始终固定在scrollView的可视范围内。

3. 适配视图尺寸变化（比如屏幕旋转） #

如果编辑器支持旋转屏幕，记得在视图布局更新时同步更新遮罩路径：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // 确保遮罩层是CAShapeLayer类型
    guard let maskLayer = avatarScrollView.layer.mask as? CAShapeLayer else { return }
    let updatedPath = UIBezierPath(ovalIn: avatarScrollView.bounds)
    maskLayer.path = updatedPath.cgPath
}

当用户调整好图片位置和大小后，需要把当前显示的圆形区域导出成新图片，用Core Graphics就能搞定：

func exportCircularAvatar() -> UIImage? {
    // 用屏幕分辨率创建绘图上下文，保证导出图片清晰
    UIGraphicsBeginImageContextWithOptions(avatarScrollView.bounds.size, false, UIScreen.main.scale)
    defer { UIGraphicsEndImageContext() } // 确保上下文被释放
    
    // 设置圆形裁剪区域
    let circlePath = UIBezierPath(ovalIn: avatarScrollView.bounds)
    circlePath.addClip()
    
    // 把scrollView的内容绘制到上下文里
    avatarScrollView.drawHierarchy(in: avatarScrollView.bounds, afterScreenUpdates: true)
    
    return UIGraphicsGetImageFromCurrentImageContext()
}

这个方法导出的图片就是用户看到的圆形头像，和Twitter编辑器的导出效果完全一致。

• 添加边框：如果想给头像加个类似Twitter的白色边框，可以再创建一个CAShapeLayer，设置描边属性后加到容器视图上：

  let borderLayer = CAShapeLayer()
  borderLayer.path = UIBezierPath(ovalIn: avatarScrollView.bounds).cgPath
  borderLayer.strokeColor = UIColor.white.cgColor
  borderLayer.lineWidth = 4 // 边框宽度
  borderLayer.fillColor = UIColor.clear.cgColor
  avatarScrollView.layer.addSublayer(borderLayer)
  

• 关闭视图裁剪：记得把图片容器的clipsToBounds设为false，因为遮罩层已经帮我们完成裁剪了，不需要视图自身裁剪。

内容的提问来源于stack exchange，提问作者FREDERIC1405