使用BezierPath实现图像全分辨率遮罩的问题

嘿，我完全懂你遇到的这个麻烦——直接对视图上的贝塞尔路径做upscale时，遮罩要么拉伸变形，要么原点跑偏，本质是没搞清楚AspectFit模式下视图坐标到原图坐标的正确转换逻辑。下面给你一套精准的解决方案，核心是把视图上的路径坐标映射到原图的坐标系统里，而不是粗暴缩放。

核心思路拆解 #

AspectFit模式下，图像是按最小比例适配到视图的，会在视图上下/左右留出空白。我们需要先算出视图到原图的缩放比例，再把路径点从视图坐标平移到图像在视图中的实际显示区域，最后缩放回原图尺寸，这样路径就能完美匹配原图的分辨率了。

步骤1：计算适配参数 #

先获取视图尺寸、原图尺寸，算出AspectFit的缩放比例和图像在视图中的偏移量：

let viewBounds = yourView.bounds.size
let imageSize = yourHighResImage.size

// 计算视图到图像的缩放比例（AspectFit取最小比例）
let scaleViewToImageX = viewBounds.width / imageSize.width
let scaleViewToImageY = viewBounds.height / imageSize.height
let aspectScale = min(scaleViewToImageX, scaleViewToImageY)
// 反向缩放：从视图坐标转原图坐标的比例
let inverseScale = 1 / aspectScale

// 计算图像在视图中的实际显示区域偏移（留白部分）
let scaledImageWidth = imageSize.width * aspectScale
let scaledImageHeight = imageSize.height * aspectScale
let imageOffsetX = (viewBounds.width - scaledImageWidth) / 2
let imageOffsetY = (viewBounds.height - scaledImageHeight) / 2

步骤2：转换贝塞尔路径到原图坐标 #

遍历路径的所有点（移动点、曲线控制点等），把每个点从视图坐标转换为原图坐标：

func convertPathToImageResolution(originalPath: UIBezierPath, viewSize: CGSize, imageSize: CGSize) -> UIBezierPath {
    // 先复用上面的参数计算逻辑
    let scaleX = viewSize.width / imageSize.width
    let scaleY = viewSize.height / imageSize.height
    let aspectScale = min(scaleX, scaleY)
    let inverseScale = 1 / aspectScale
    
    let scaledImageWidth = imageSize.width * aspectScale
    let scaledImageHeight = imageSize.height * aspectScale
    let imageOffsetX = (viewSize.width - scaledImageWidth) / 2
    let imageOffsetY = (viewSize.height - scaledImageHeight) / 2
    
    let convertedPath = UIBezierPath()
    var pathElements = [CGPathElement]()
    
    // 提取原始路径的所有元素
    originalPath.cgPath.apply(info: &pathElements) { info, element in
        let elements = info!.assumingMemoryBound(to: [CGPathElement].self)
        elements.pointee.append(element.pointee)
    }
    
    // 逐个转换路径元素
    for element in pathElements {
        switch element.type {
        case .moveToPoint:
            let point = element.points[0]
            let convertedPoint = CGPoint(
                x: (point.x - imageOffsetX) * inverseScale,
                y: (point.y - imageOffsetY) * inverseScale
            )
            convertedPath.move(to: convertedPoint)
        case .addLineToPoint:
            let point = element.points[0]
            let convertedPoint = CGPoint(
                x: (point.x - imageOffsetX) * inverseScale,
                y: (point.y - imageOffsetY) * inverseScale
            )
            convertedPath.addLine(to: convertedPoint)
        case .addQuadCurveToPoint:
            let control = element.points[0]
            let end = element.points[1]
            convertedPath.addQuadCurve(
                to: CGPoint(x: (end.x - imageOffsetX)*inverseScale, y: (end.y - imageOffsetY)*inverseScale),
                controlPoint: CGPoint(x: (control.x - imageOffsetX)*inverseScale, y: (control.y - imageOffsetY)*inverseScale)
            )
        case .addCurveToPoint:
            let control1 = element.points[0]
            let control2 = element.points[1]
            let end = element.points[2]
            convertedPath.addCurve(
                to: CGPoint(x: (end.x - imageOffsetX)*inverseScale, y: (end.y - imageOffsetY)*inverseScale),
                controlPoint1: CGPoint(x: (control1.x - imageOffsetX)*inverseScale, y: (control1.y - imageOffsetY)*inverseScale),
                controlPoint2: CGPoint(x: (control2.x - imageOffsetX)*inverseScale, y: (control2.y - imageOffsetY)*inverseScale)
            )
        case .closeSubpath:
            convertedPath.close()
        @unknown default:
            break
        }
    }
    return convertedPath
}

步骤3：用转换后的路径做原图遮罩 #

现在用转换好的路径给高分辨率图像加遮罩就不会有问题了：

// 你的原始高分辨率图像
let originalImage = UIImage(named: "your-high-res-image")!
// 视图上绘制的原始路径
let viewPath = UIBezierPath(rect: CGRect(x: 50, y: 50, width: 200, height: 200)) // 示例路径

// 转换路径到原图分辨率
let imageScaledPath = convertPathToImageResolution(
    originalPath: viewPath,
    viewSize: yourView.bounds.size,
    imageSize: originalImage.size
)

// 创建遮罩层并应用到图像
let maskLayer = CAShapeLayer()
maskLayer.path = imageScaledPath.cgPath
maskLayer.fillRule = .evenOdd // 根据需求选择填充规则

let imageLayer = CALayer()
imageLayer.contents = originalImage.cgImage
imageLayer.frame = CGRect(origin: .zero, size: originalImage.size)
imageLayer.mask = maskLayer

// 转换为最终UIImage（如果需要）
UIGraphicsBeginImageContextWithOptions(originalImage.size, false, originalImage.scale)
imageLayer.render(in: UIGraphicsGetCurrentContext()!)
let maskedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

避坑提醒 #

• 不要直接对路径做apply(CGAffineTransform(scaleX: scale, y: scale))，因为没考虑AspectFit的留白偏移，会导致路径在原图上错位。
• 注意坐标系统：UIKit和Core Graphics都是左上角为原点，不需要额外翻转y轴；如果是macOS开发，需要调整y轴的转换逻辑。

内容的提问来源于stack exchange，提问作者Reza.Ab