Sketch阴影效果在Swift+Xcode中实现不符预期的问题排查

Hey there! I’ve dealt with this exact Sketch-to-iOS shadow discrepancy so many times—let’s break down what’s wrong with your current code and get you the exact shadow you designed.

What’s Going Wrong? #

Sketch’s shadow parameters don’t map 1:1 to CALayer’s properties directly, and your current code has two key issues:

• You’re dividing the Sketch blur value by 2 for shadowRadius (this makes the blur way weaker than intended)
• You’re not handling the Sketch spread parameter at all—CALayer doesn’t have a direct spread property, so we need to use shadowPath to replicate it.

Corrected Extension #

Here’s the fixed version of your applySketchShadow extension that perfectly matches Sketch’s shadow behavior:

extension CALayer {
    func applySketchShadow(
        color: UIColor = .black,
        alpha: Float = 0.5,
        x: CGFloat = 0,
        y: CGFloat = 2,
        blur: CGFloat = 4,
        spread: CGFloat = 0
    ) {
        shadowColor = color.cgColor
        shadowOpacity = alpha
        shadowOffset = CGSize(width: x, height: y)
        // Sketch's Blur value maps directly to CALayer's shadowRadius—no division needed!
        shadowRadius = blur
        
        // Handle Sketch's Spread parameter using shadowPath
        if spread == 0 {
            shadowPath = nil
        } else {
            let offset = -spread
            let expandedBounds = bounds.insetBy(dx: offset, dy: offset)
            shadowPath = UIBezierPath(rect: expandedBounds).cgPath
        }
        
        // Critical: Ensure masksToBounds is false so shadows aren't clipped
        masksToBounds = false
    }
}

Why This Works #

Let’s break down the key fixes:

• Shadow Radius: Sketch's "Blur" setting is exactly the same as CALayer’s shadowRadius—dividing by 2 was making your shadow far less blurry than your design.
• Spread Handling: Sketch's "Spread" makes the shadow expand outward from the layer. To replicate this, we create a shadow path that’s larger than the layer’s bounds (by the spread amount) so the shadow draws beyond the layer’s edges.
• Masks To Bounds: If this is set to true, the layer clips everything (including shadows) to its bounds. Setting it to false ensures your shadow is fully visible.

Quick Usage Example #

Suppose your Sketch shadow has these values:

• Color: Dark gray (#333333)
• Alpha: 0.25
• X offset: 0
• Y offset: 4
• Blur: 8
• Spread: 0.5

You’d call the extension like this:

yourCustomView.layer.applySketchShadow(
    color: UIColor(red: 51/255, green: 51/255, blue: 51/255, alpha: 1),
    alpha: 0.25,
    x: 0,
    y: 4,
    blur: 8,
    spread: 0.5
)

This will give you a shadow that’s identical to what you designed in Sketch.

内容的提问来源于stack exchange，提问作者Sagaya Abdul