使用Quartz2D擦除笔画路径时出现过度删除问题

嘿，我来帮你搞定这个橡皮擦擦过头的问题～ 你用clear混合模式实现擦除的思路是对的，但范围超出大概率是这几个细节没处理好，咱们一个个排查：

1. 别用stroke，改用fill绘制擦除路径 #

如果你的圆形是用stroke（描边）来绘制的，那线宽的一半会超出你定义的圆形路径范围，导致擦除区域比预期大。比如你设了半径10的圆，描边线宽5，实际擦除的半径会变成12.5，自然就“超界”了。

解决办法：橡皮擦的圆形路径直接用fill（填充）来绘制，这样擦除范围就是你定义的圆形本身，不会有额外的扩展。

2. 适配Retina屏幕的缩放因子 #

iOS设备的Retina屏有2x/3x的缩放比例，如果创建图像上下文时没考虑这个，绘制的路径会被自动放大，看起来就像是擦除范围超出了。

解决办法：创建上下文时一定要指定屏幕的scale，而不是默认的1.0：

let scale = UIScreen.main.scale
UIGraphicsBeginImageContextWithOptions(canvasSize, false, scale)

3. 准确创建圆形路径 #

如果你的圆形路径是通过UIBezierPath(roundedRect:...)创建的，可能因为rect的计算错误导致范围不对。最好直接用圆心+半径的方式创建路径：

let erasePath = UIBezierPath(arcCenter: touchPoint, radius: eraseRadius, startAngle: 0, endAngle: .pi*2, clockwise: true)

4. 正确管理上下文的混合模式 #

记得在擦除操作前后保存和恢复上下文的混合模式，避免影响后续的绘制操作：

context.saveGState()
context.setBlendMode(.clear)
// 绘制擦除路径
erasePath.fill()
context.restoreGState()

完整的橡皮擦实现示例（Swift） #

这里给你一个经过验证的小示例，你可以参考调整：

func handleEraseGesture(at touchPoint: CGPoint, eraseRadius: CGFloat) {
    guard let currentImage = canvasImageView.image else { return }
    let canvasSize = canvasImageView.bounds.size
    let scale = UIScreen.main.scale
    
    // 创建适配Retina的图像上下文
    UIGraphicsBeginImageContextWithOptions(canvasSize, false, scale)
    guard let context = UIGraphicsGetCurrentContext() else {
        UIGraphicsEndImageContext()
        return
    }
    
    // 先把当前画布内容绘制到上下文
    currentImage.draw(in: canvasImageView.bounds)
    
    // 保存上下文状态
    context.saveGState()
    
    // 设置擦除混合模式
    context.setBlendMode(.clear)
    
    // 创建准确的圆形擦除路径
    let erasePath = UIBezierPath(arcCenter: touchPoint, radius: eraseRadius, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true)
    // 填充路径实现擦除
    erasePath.fill()
    
    // 恢复上下文状态
    context.restoreGState()
    
    // 更新画布图像
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    canvasImageView.image = newImage
}

你可以先检查自己的代码是不是踩了上面提到的坑，尤其是描边改填充和Retina适配这两点，大概率能解决问题～

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