如何在CGImage上进行垂直翻转？

Question

Currently, I have the following color wheel implemented using the following code

class ColorWheelPalette: UIView {
    var cgImage: CGImage?
    
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {return}

        if self.cgImage == nil {
            // https://stackoverflow.com/a/54819655/72437
            let filter = CIFilter(name: "CIHueSaturationValueGradient", parameters: [
                "inputColorSpace": CGColorSpaceCreateDeviceRGB(),
                "inputDither": 0,
                "inputRadius": 160,
                "inputSoftness": 0,
                "inputValue": 1
            ])!
            
            let ciImage = filter.outputImage!
            let ciContext = CIContext(options: nil)
            self.cgImage = ciContext.createCGImage(ciImage, from: ciImage.extent)
        }
        
        context.draw(cgImage!, in: rect)
    }
}

It looks as following

However, the output image is not what I desire. I want to green color region stay on the top. Hence, I do a quick vertical flipping using the following code

class ColorWheelPalette: UIView {
    var cgImage: CGImage?
    
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {return}

        if self.cgImage == nil {
            // https://stackoverflow.com/a/54819655/72437
            let filter = CIFilter(name: "CIHueSaturationValueGradient", parameters: [
                "inputColorSpace": CGColorSpaceCreateDeviceRGB(),
                "inputDither": 0,
                "inputRadius": 160,
                "inputSoftness": 0,
                "inputValue": 1
            ])!
            
            let ciImage = filter.outputImage!
            let ciContext = CIContext(options: nil)
            self.cgImage = ciContext.createCGImage(ciImage, from: ciImage.extent)
        }
        
        context.saveGState()
        
        // Flip vertically
        context.translateBy(x: 0, y: rect.height)
        context.scaleBy(x: 1.0, y: -1.0)
        
        context.draw(cgImage!, in: rect)
        
        context.restoreGState()
    }
}

The above code achieve what I want (green region at the top)

---

However, for performance optimisation purpose, instead of having perform translate and scale transformation operations each time,

is there a way to perform such vertical flipping on the self.cgImage directly for just one-time?

So that the ideal code would look like the following

class ColorWheelPalette: UIView {
    ...
    
    override func draw(_ rect: CGRect) {
        ...

        if self.cgImage == nil {
            ...
            self.cgImage = ciContext.createCGImage(ciImage, from: ciImage.extent)
            
            // Question: Can we perform one-time vertical flipping on self.cgImage right here?
        }
        
        context.draw(cgImage!, in: rect)
    }
}

Answer 1

Just create an UIImage from your CGImage and draw it directly:

class ColorWheelPalette: UIView {
    var image: UIImage?
    override func draw(_ rect: CGRect) {
        if image == nil {
            guard
                let filter = CIFilter(name: "CIHueSaturationValueGradient", parameters: [
                "inputColorSpace": CGColorSpaceCreateDeviceRGB(),
                "inputDither": 0,
                "inputRadius": 160,
                "inputSoftness": 0,
                "inputValue": 1]),
                let ciImage = filter.outputImage,
                let cgImage = CIContext(options: nil)
                    .createCGImage(ciImage, from: ciImage.extent)
            else { return }
            let size = ciImage.extent.size
            let format = UIGraphicsImageRendererFormat.default()
            format.opaque = false
            image = UIGraphicsImageRenderer(size: size, format: format).image { ctx in
                var transform = CGAffineTransform(scaleX: 1, y: -1)
                transform = transform.translatedBy(x: 0, y: -size.height)
                ctx.cgContext.concatenate(transform)
                ctx.cgContext.draw(cgImage, in: CGRect(origin: .zero, size: size))
            }
        }
        image?.draw(in: rect)
    }
}