绘制内阴影

本文原本发布在我的个人博客里,由于工作原因长久未更新维护,遂将其重新整理后转移至此。

给视图添加阴影效果可以使用 CALayer 对象的 shadowColorshadowOffsetshadowRadiusshadowOpactiy 属性。它们指定了阴影的颜色,方位,模糊度和不透明度。不过这个阴影存在于 layer 外部,而我的需求则是创建一个具有内阴影的圆(如下图右侧的圆)。

绘制内阴影_第1张图片
shadows.png

实现圆形很简单,但这个内阴影让人有点头疼,因为 Core Animation 并没有为我们提供任何可行的 API 去直接设置 layer 的 inner shadow,所以只能自己实现相关操作。最开始的想法是建立一个长度为圆周长的 CAGradientLayer,设置它的渐变色(从 blackColor 到 clearColor),然后把它弯曲变形成一个圆。

不过这个方案太傻,把简单的问题复杂化了,除了涉及渐变还要考虑图形变形。那 Core Graphics 画图呢?我们是可以直接在 layer 上绘制图形的。于是上 stackoverflow 搜寻相关问题,庆幸的是,这个问题给了我解决方向。

由于 layer 只负责显示和动画,并不处理交互事件,而阴影只是单纯地作为装饰显示在视图中,那我们把 shadow 单独作为一个图层覆盖在需要 inner shadow 的视图上,这个 inner shadow 尺寸需要足够大,能够满足 offset 的正常需求(模拟光源位置不同产生的投影角度也不同),并且最重要的是它必须是中间镂空的。

那么动手实现它。子类化一个 CAShapeLayer,命名为WLInnerShadow,在WLInnerShadowdrawInContext方法中设置阴影路径。另外,我们还需要 4 个属性记录和监听阴影信息,比如阴影颜色,方位,不透明度和模糊度。

import UIKit

class WLInnerShadow: CAShapeLayer {
    var innerShadowColor: CGColor? = UIColor.blackColor().CGColor {
        didSet { setNeedsDisplay() }
    }
    
    var innerShadowOffset: CGSize = CGSizeMake(0, 0) {
        didSet { setNeedsDisplay() }
    }
    
    var innerShadowRadius: CGFloat = 8 {
        didSet { setNeedsDisplay() }
    }
    
    var innerShadowOpacity: Float = 1 {
        didSet { setNeedsDisplay() }
    }
    
    override init() {
        super.init()
        initialize()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initialize()
    }
    
    func initialize() {
        self.masksToBounds      = true
        self.shouldRasterize    = true
        self.contentsScale      = UIScreen.mainScreen().scale
        self.rasterizationScale = UIScreen.mainScreen().scale
        
        setNeedsDisplay()
    }
    
    override func drawInContext(ctx: CGContext) {
        // 设置 Context 属性
        // 允许抗锯齿
        CGContextSetAllowsAntialiasing(ctx, true);
        // 允许平滑
        CGContextSetShouldAntialias(ctx, true);
        // 设置插值质量
        CGContextSetInterpolationQuality(ctx, .High);
        
        // 以下为核心代码
        
        // 创建 color space
        let colorspace = CGColorSpaceCreateDeviceRGB();
        
        var rect   = self.bounds
        var radius = self.cornerRadius
        
        // 去除边框的大小
        if self.borderWidth != 0 {
            rect   = CGRectInset(rect, self.borderWidth, self.borderWidth);
            radius -= self.borderWidth
            radius = max(radius, 0)
        }
        
        // 创建 inner shadow 的镂空路径
        let someInnerPath: CGPathRef = UIBezierPath(roundedRect: rect, cornerRadius: radius).CGPath
        CGContextAddPath(ctx, someInnerPath)
        CGContextClip(ctx)
        
        // 创建阴影填充区域,并镂空中心
        let shadowPath = CGPathCreateMutable()
        let shadowRect = CGRectInset(rect, -rect.size.width, -rect.size.width)
        CGPathAddRect(shadowPath, nil, shadowRect)
        CGPathAddPath(shadowPath, nil, someInnerPath);
        CGPathCloseSubpath(shadowPath)
        
        // 获取填充颜色信息
        let oldComponents: UnsafePointer = CGColorGetComponents(innerShadowColor)
        var newComponents:[CGFloat] = [0, 0, 0, 0]
        let numberOfComponents: Int = CGColorGetNumberOfComponents(innerShadowColor);
        switch (numberOfComponents){
        case 2:
            // 灰度
            newComponents[0] = oldComponents[0]
            newComponents[1] = oldComponents[0]
            newComponents[2] = oldComponents[0]
            newComponents[3] = oldComponents[1] * CGFloat(innerShadowOpacity)
        case 4:
            // RGBA
            newComponents[0] = oldComponents[0]
            newComponents[1] = oldComponents[1]
            newComponents[2] = oldComponents[2]
            newComponents[3] = oldComponents[3] * CGFloat(innerShadowOpacity)
        default: break
        }
        
        // 根据颜色信息创建填充色
        let innerShadowColorWithMultipliedAlpha = CGColorCreate(colorspace, newComponents)
        
        // 填充阴影
        CGContextSetFillColorWithColor(ctx, innerShadowColorWithMultipliedAlpha)
        CGContextSetShadowWithColor(ctx, innerShadowOffset, innerShadowRadius, innerShadowColorWithMultipliedAlpha)
        CGContextAddPath(ctx, shadowPath)
        CGContextEOFillPath(ctx)
    }
}

用法很简单:

let myView                      = UIView(frame: CGRectMake(0, 0, 280, 280))
myView.layer.backgroundColor    = UIColor.hexColor(0xeeeeee, alpha: 1).CGColor
myView.center                   = self.view.center
myView.layer.cornerRadius       = myView.bounds.size.width / 2
myView.layer.shouldRasterize    = true
myView.layer.contentsScale      = UIScreen.mainScreen().scale
myView.layer.rasterizationScale = UIScreen.mainScreen().scale
        
let shadowLayer                = WLInnerShadow()
shadowLayer.frame              = myView.bounds
shadowLayer.cornerRadius       = myView.layer.cornerRadius
shadowLayer.innerShadowOffset  = CGSizeMake(4, 4)
shadowLayer.innerShadowOpacity = 0.5
shadowLayer.innerShadowRadius  = 16
myView.layer.addSublayer(shadowLayer)
        
self.view.addSubview(myView)

看看效果图:

绘制内阴影_第2张图片
AirPlay_Screenshot_2016-03-14_06-24-37.png

你可能感兴趣的:(绘制内阴影)