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
}
}
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.