如何将SVG解析生成的CAShapeLayer适配到UIImageView上？

适配逻辑实现 #

你需要先计算SVG原始内容的整体边界，再结合UIImageView的尺寸计算缩放比例，同时添加平移变换保证路径居中显示，完整代码如下：

if let svgURL = Bundle.main.url(forResource: "image", withExtension: "svg") {
    let paths = SVGBezierPath.pathsFromSVG(at: svgURL)
    // 1. 计算SVG所有路径的总原始边界
    var totalSvgBounds = CGRect.zero
    for path in paths {
        totalSvgBounds = totalSvgBounds.union(path.bounds)
    }
    // 2. 获取目标ImageView的尺寸，需保证此时ImageView已完成布局
    let targetBounds = backgroundIV.bounds
    let targetSize = targetBounds.size
    
    // 3. 计算缩放比例
    // 等比例适配（不会变形，推荐）：取宽高缩放比的最小值
    let scaleX = targetSize.width / totalSvgBounds.width
    let scaleY = targetSize.height / totalSvgBounds.height
    let finalScale = min(scaleX, scaleY)
    // 若需要拉伸铺满ImageView，直接用scaleX和scaleY即可，不需要取最小值
    
    // 4. 计算居中偏移量
    let scaledWidth = totalSvgBounds.width * finalScale
    let scaledHeight = totalSvgBounds.height * finalScale
    let offsetX = (targetSize.width - scaledWidth) / 2 - totalSvgBounds.origin.x * finalScale
    let offsetY = (targetSize.height - scaledHeight) / 2 - totalSvgBounds.origin.y * finalScale
    
    // 5. 给每个路径应用变换
    for path in paths {
        // 注意变换顺序：先缩放再平移
        path.apply(CGAffineTransform(scaleX: finalScale, y: finalScale))
        path.apply(CGAffineTransform(translationX: offsetX, y: offsetY))
        
        items.append(path)
        let layer = createLayer(path: path)
        layer.frame = targetBounds
        self.backgroundIV.layer.addSublayer(layer)
    }
}

注意事项 #

• 上述代码需要在backgroundIV布局完成后执行，建议放在viewDidLayoutSubviews方法中，或者自动布局完成的回调中执行，避免拿到错误的ImageView尺寸
• 如果需要支持屏幕旋转、ImageView尺寸动态变化，可以在每次布局变更时，先移除之前添加的所有CAShapeLayer，再重新执行上述逻辑生成适配后的图层
• 你现有的触摸事件逻辑不需要修改，变换直接应用在SVG路径上，生成的CAShapeLayer路径坐标已经和ImageView坐标系匹配，原有点击检测逻辑可以正常运行

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