将 CGContext 中的图像保存在背景上

Question

语境

用户在当前 CGContext 的画布上用直线绘制草图。 用户可以绘制直线、缩放（捏）和平移（平移）整个绘图。 一旦用户离开绘图场景，应用程序会将所有绘制的线条保存到数据结构中。

问题

当用户处于完全不同的场景时，我想将绘图保存到图像中（png，jpeg 无关紧要），点击上传将绘图的图像发送到服务器。

到目前为止，我已经找到了一种仅将当前核心图形上下文导出到图像的方法。 但我不知道如何在背景上创建上下文，从存储的数据中复制绘图，然后将其导出到图像，而不将其呈现在屏幕上。

我不想在用户处于画布场景时保存图像，因为我需要在不应用任何转换（即缩放、平移）的情况下保存图像。

Answer 1

当用户完成绘图时，您可以将其保存（到 docs 或 temp 目录），然后加载它以上传/显示等。

或者，使用UIGraphicsImageRenderer使用您保存的数据结构生成UIImage 。

这是一个快速、非常简单的示例。

我们创建一个点数组，然后使用.addLine生成一个通过这些点循环到贝塞尔路径的图像：

class RenderDrawingVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let points: [CGPoint] = [
            CGPoint(x: 60, y: 40),
            CGPoint(x: 140, y: 40),
            CGPoint(x: 140, y: 80),
            CGPoint(x: 160, y: 120),
            CGPoint(x: 100, y: 160),
            CGPoint(x: 80, y: 120),
            CGPoint(x: 20, y: 20),
        ]
    
        let img = renderImage(bkgColor: .systemYellow, lineColor: .systemRed, size: CGSize(width: 200, height: 200), points: points)
        
        // img is now a 200x200 UIImage
        // save it, upload it, display it, whatever

    }

    func renderImage(bkgColor: UIColor, lineColor: UIColor, size: CGSize, points: [CGPoint]) -> UIImage {
        let fmt = UIGraphicsImageRendererFormat()
        fmt.scale = 1
        fmt.opaque = true
        let rndr = UIGraphicsImageRenderer(size: size, format: fmt)
        let newImg = rndr.image { ctx in
            ctx.cgContext.setFillColor(bkgColor.cgColor)
            ctx.cgContext.addRect(CGRect(origin: .zero, size: size))
            ctx.cgContext.drawPath(using: .fill)
            let bez = UIBezierPath()
            bez.move(to: points[0])
            for i in 1..<points.count {
                bez.addLine(to: points[i])
            }
            ctx.cgContext.setFillColor(UIColor.clear.cgColor)
            ctx.cgContext.setStrokeColor(lineColor.cgColor)
            ctx.cgContext.setLineWidth(4)
            ctx.cgContext.setLineJoin(.round)
            ctx.cgContext.setLineCap(.round)
            ctx.cgContext.addPath(bez.cgPath)
            ctx.cgContext.drawPath(using: .stroke)
        }
        return newImg
    }

}

结果图像：