如何在不丢失阴影饱和度的情况下将带阴影的 UIBezierpath 转换为 UIImage

Question

I'm doing a drawing app, which allows users to draw on video frames, so when drawing on the UIImageView, i add the Bezierpath to a CAShapeLayer and set a shadow path to it, and it works great, the thing is when i want to convert the layer to a cg or uiimage which will be eventually ciimage(to compose to a video frame), UIGraphicContext drops the shadow saturation, like, the line in CAShapeLayer doesn't have shadow path, but just a simple shadow with much less saturation this is the image while drawing with shadow

this image is the path with the same shadow after converting to image

i have tried lots of different methods that i could find in SOF or any other place on the internet, so basically there are two ways to convert a path to image(ci,ui,cg) which all of them using somehow same practice which is UIGraphicContext(if there is any other way PLEASE tell me), so i tried to convert a layer to uiimage(by rendering it on CGContext) and also tried to draw path directly on the context, drawing path directly gave me (just)a little improvement than rendering layer on the context. this is the code for directly drawing the path on the context:

    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    let context = UIGraphicsGetCurrentContext()!
    //// Shadow Declarations
    let shadow = UIColor.yellow.withAlphaComponent(1)
    let shadowOffset = CGSize(width: 0, height: 0) //offset is the same as when drawing a path on CAShapeLayer
    let shadowBlurRadius: CGFloat = 20

    //// Bezier 2 Drawing
    context.saveGState()
    context.addPath(path.cgPath)
    context.setShadow(offset: shadowOffset, blur: shadowBlurRadius, color: (shadow as UIColor).cgColor)
    path.lineCapStyle = .round
    path.lineCapStyle = .round
    UIColor.white.setStroke()
    path.lineWidth = 10
    path.stroke(with: .color, alpha: 1.0)
    //context.strokePath()
    context.restoreGState()
    let image = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image

i would really appreciate any help or hint that i could get the same shadow result after converting.

Updated :

here is the code which generates the shadow on layer which works fine on the view (the first picture) I need the same result after rendering or drawing on the context.

private func setTheLayer(layer: CAShapeLayer, size: Int, path: CGPath, glowing: Bool, color: CGColor) {
    if glowing {
        layer.path = path
        layer.fillColor = nil
        layer.opacity = 1.0
        layer.lineWidth = CGFloat(size)
        layer.lineCap = .round
        layer.lineJoin = .round
        layer.strokeColor = UIColor.white.cgColor
        // drawing the glow shadow
        layer.shadowPath = path.copy(strokingWithWidth: CGFloat(size) * 4, lineCap: .round, lineJoin: .round, miterLimit: 0)
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowColor = color
        layer.shadowRadius = 5.0
        layer.shadowOpacity = 0.7
    } else {
        layer.path = path
        layer.fillColor = nil
        layer.opacity = 1.0
        layer.lineWidth = CGFloat(size)
        layer.lineCap = .round
        layer.lineJoin = .round
        layer.strokeColor = color
    }
}

Answer 1

For reasons I don't understand, shadows are not rendered correctly when you use a layer's render(in:) method.

However, if your layers are added to a view, you can use that view's drawHierarchy(in: afterScreenUpdates:) , which will faithfully render the shadow.

This playground code:

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = .black
PlaygroundPage.current.liveView = view

let layer = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: 20, y: 50))
path.addLine(to: CGPoint(x: 180, y: 50))
layer.path = path.cgPath
layer.lineCap = .round
layer.fillColor = nil
layer.lineWidth = 4
layer.strokeColor = UIColor.white.cgColor
layer.shadowPath = path.cgPath.copy(strokingWithWidth: 16, lineCap: .round, lineJoin: .round, miterLimit: 0)
layer.shadowOffset = .zero
layer.shadowColor = UIColor.yellow.cgColor
layer.shadowRadius = 5
layer.shadowOpacity = 0.7
layer.frame = CGRect(x:0, y: 0, width: 200, height: 100)
view.layer.addSublayer(layer)
layer.shouldRasterize = true
let renderer = UIGraphicsImageRenderer(bounds: layer.bounds)
let image = renderer.image { context in
    view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
}
let imageView = UIImageView(image: image)
view.addSubview(imageView)
imageView.frame.origin.y = 100

Gives you this output:

I'd love to know why shadows don't render properly, though.