Swift应用中绘制图形作为VisualEffectView蒙版仅原点生效问题求助

我看了你的代码，问题核心出在蒙版图层的坐标系不匹配上。你当前的实现把全屏尺寸的tempImage直接作为蒙版，但当VisualEffectView不在屏幕原点时，蒙版只会显示tempImage左上角对应模糊视图大小的区域，而非你实际绘制的路径。下面是具体的修复方案：

问题根源拆解 #

• 你创建的tempImage是全屏尺寸，但实际需要蒙版的只有tempPath覆盖的区域。
• 蒙版图层的坐标系是相对于父图层（即blur.layer）的，当blur的frame不是从(0,0)开始时，全屏的tempImage.layer无法和blur的区域对应，导致蒙版显示错误。

修复后的代码实现 #

重点修改touchesEnded方法，确保蒙版仅包含绘制路径且坐标系匹配：

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    tempPath.close()
    let pathBounds = tempPath.bounds
    
    // 1. 创建仅包含绘制路径的蒙版图像（尺寸与路径完全匹配）
    UIGraphicsBeginImageContextWithOptions(pathBounds.size, false, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { 
        UIGraphicsEndImageContext()
        return 
    }
    
    // 复用你之前的画笔样式，保证蒙版形状和绘制的线条一致
    context.setLineCap(CGLineCap.round)
    context.setLineWidth(brushWidth)
    context.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
    
    // 关键：平移坐标系，让路径从蒙版图像的(0,0)开始绘制
    context.translateBy(x: -pathBounds.origin.x, y: -pathBounds.origin.y)
    tempPath.stroke()
    
    let maskImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    
    // 2. 创建适配模糊视图的蒙版容器
    let maskImageView = UIImageView(image: maskImage)
    maskImageView.frame = blur.bounds // 蒙版frame与模糊视图的bounds完全一致
    
    // 3. 配置并添加模糊视图
    let blur = VisualEffectView()
    blur.frame = pathBounds
    blur.blurRadius = 5
    blur.layer.mask = maskImageView.layer
    
    imageView.addSubview(blur)
    
    // 清理临时绘制内容
    otherImageView.image = nil
}

关键修改点说明 #

1. 精准尺寸的蒙版图像：基于tempPath.bounds创建图像上下文，避免多余的空白区域，减少内存占用。
2. 坐标系平移：通过context.translateBy把路径的原点对齐到蒙版图像的左上角，保证蒙版内容和模糊视图的区域完全对应。
3. 蒙版与模糊视图绑定：蒙版的frame严格匹配模糊视图的bounds，确保蒙版的坐标系完全贴合父图层。

额外优化建议 #

• 可以把画笔的样式（线宽、颜色、端点类型）抽成全局变量，方便统一维护和修改。
• 频繁创建图像上下文时，建议使用UIGraphicsImageRenderer替代UIGraphicsBeginImageContext，它是Swift更现代、更安全的绘图API。

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