如何在UIImage上笔触？

问题描述

我想保存带有笔触的彩色形状，但是下面的代码（getImage（））会生成未描边的形状：

func getImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 1024,height: 1024))
        let image = renderer.image { (context) in
            for key in shapeItemKeys {
                let currentShape = shapeItemsByKey[key]!
                UIColor.black.setStroke()
                context.stroke(renderer.format.bounds)
                currentShape.color.setFill()
                context.cgContext.addPath(currentShape.path.bezierPath.cgPath)
                context.cgContext.fillPath()
                context.cgContext.strokePath()
            }
        }
        return image
    }

struct ShapeItem: Identifiable {
    let id = UUID()
    var color: UIColor = UIColor.white
    var path: ScaledBezier
    init(path: ScaledBezier) {
        self.path = path
    }
}

struct ScaledBezier: Shape {
    let bezierPath: UIBezierPath
    let sourceWidth: CGFloat
    let sourceHeight: CGFloat
    
    func path(in rect: CGRect) -> Path {
        var path = Path(bezierPath.cgPath)
        
        // Figure out how much bigger we need to make our path in order for it to fill the available space without clipping.
        let multiplier = min(rect.width/sourceWidth,rect.height/sourceHeight)
        
        // Create an affine transform that uses the multiplier for both dimensions equally.
        let transform = CGAffineTransform(scaleX: multiplier,y: multiplier)
        
        // Apply that scale and send back the result.
        path.closeSubpath()
        return path.applying(transform)
    }
}

有人知道如何绘制形状以便在UIImage上显示吗？

解决方法

如果您要抚摸和填充，则需要如下所示使用路径

func getImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 1024,height: 1024))
        let image = renderer.image { (context) in
            for key in shapeItemKeys {
                let currentShape = shapeItemsByKey[key]!
                UIColor.black.setStroke()
                context.stroke(renderer.format.bounds)
                currentShape.color.setFill()
                context.cgContext.addPath(currentShape.path.bezierPath.cgPath)
                context.cgContext.strokePath()
                context.cgContext.addPath(currentShape.path.bezierPath.cgPath)
                context.cgContext.fillPath()
            }
        }
        return image
    }

演示代码：

struct DemoView: View {

    let shapeItemKeys = [1]
    let shapeItemsByKey = [1: ShapeItem(path: ScaledBezier(bezierPath: UIBezierPath(roundedRect: CGRect(x: 10,y: 10,width: 100,height: 200),cornerRadius: 20),sourceWidth: 100,sourceHeight: 200))]

    var body: some View {
        VStack(spacing: 0) {
            Image(uiImage: getImage())
        }
    }
    func getImage() -> UIImage {
            let renderer = UIGraphicsImageRenderer(size: CGSize(width: 300,height: 300))
            let image = renderer.image { (context) in
                for key in shapeItemKeys {
                    let currentShape = shapeItemsByKey[key]!
                    UIColor.black.setStroke()
                    context.stroke(renderer.format.bounds)
                    currentShape.color.setFill()
                    context.cgContext.addPath(currentShape.path.bezierPath.cgPath)
                    context.cgContext.strokePath()
                    context.cgContext.addPath(currentShape.path.bezierPath.cgPath)
                    context.cgContext.fillPath()
                }
            }
            return image
        }
}