UIKit中圆形UIImageView仅可视区域可响应点击的实现方法咨询

• UIKit默认的交互命中判定完全基于视图的矩形frame边界，和layer.cornerRadius裁切出的圆形可视形状没有任何关联。这也是为什么正方形frame范围内、圆形外的四个透明角落，依然可以被检测为可点击区域。
• 要实现匹配圆形可视区域的点击热区，只需要在系统的交互命中判定流程中，主动拦截并过滤掉圆形范围外的点击位置即可，不需要改动现有视觉渲染逻辑。

方案1：自定义UIImageView子类（推荐） #

这是从视图命中测试的底层逻辑做修改，所有加在该视图上的手势交互都会自动被限制在圆形范围内，不需要单独给每一个手势做区域校验，长期维护成本最低，且性能为O(1)，没有任何渲染开销。
原理是重写UIView的核心命中方法point(_:inside:with:)——这是系统判断某个触摸点是否属于当前视图交互范围的最终入口。

自定义类实现代码 #

class CircularHitTestImageView: UIImageView {
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        // 先执行系统默认的基础校验：视图是否开启交互、是否在当前frame范围内
        guard super.point(inside: point, with: event) else {
            return false
        }
        // 计算点击位置到视图几何中心的距离
        let viewCenter = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = bounds.width / 2 // 正圆场景下宽高与半径匹配
        let deltaX = point.x - viewCenter.x
        let deltaY = point.y - viewCenter.y
        let distance = sqrt(deltaX * deltaX + deltaY * deltaY)
        // 仅当点击位置在圆内时才判定为命中
        return distance <= radius
    }
}

接入步骤 #

• 打开Storyboard/Xib，将原profilePictureView绑定的类从默认UIImageView替换为上述自定义的CircularHitTestImageView
• 原有设置cornerRadius、添加点击手势、开启交互的代码完全不需要修改，即可直接生效。

方案2：手势代理过滤（轻量备选） #

如果不想修改现有视图类的继承关系，可以通过给手势添加代理，在手势接收触摸事件前做一次圆形区域校验。

实现代码 #

class ProfileViewController: UIViewController, UIGestureRecognizerDelegate {
    @IBOutlet weak var profilePictureView: UIImageView?

    override func viewDidLoad() {
        super.viewDidLoad()
        profilePictureView?.layer.cornerRadius = 240 / 2
        
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleProfilePictureTap(_:)))
        // 关联手势代理
        tap.delegate = self
        profilePictureView?.addGestureRecognizer(tap)
        profilePictureView?.isUserInteractionEnabled = true
    }

    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        guard let targetView = profilePictureView else { return false }
        // 将触摸点转换为相对于头像视图的坐标
        let touchPoint = touch.location(in: targetView)
        // 执行和方案1一致的圆形范围校验
        let viewCenter = CGPoint(x: targetView.bounds.midX, y: targetView.bounds.midY)
        let radius = targetView.bounds.width / 2
        let deltaX = touchPoint.x - viewCenter.x
        let deltaY = touchPoint.y - viewCenter.y
        let distance = sqrt(deltaX * deltaX + deltaY * deltaY)
        return distance <= radius
    }

    @objc private func handleProfilePictureTap(_ tap: UITapGestureRecognizer) {
        // 原有点击业务逻辑
    }
}

• 不要选择遍历图层alpha通道做碰撞检测的方案：这类方案需要读取图层实际渲染像素，在高频触摸事件下会带来明显的性能损耗，而基于几何距离的计算没有任何渲染开销，是iOS下匹配简单几何形状热区的最优解。
• 如果后续视图尺寸或形状发生变化，只需要同步调整半径和距离计算规则即可，不需要改动视觉渲染相关的代码。
• 上述实现不会影响视图的自动布局、手势的系统默认行为，也不会改变视图的视觉裁切效果。

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