繪制內(nèi)陰影

本文原本發(fā)布在我的個(gè)人博客里进萄,由于工作原因長久未更新維護(hù),遂將其重新整理后轉(zhuǎn)移至此。

給視圖添加陰影效果可以使用 CALayer 對象的 shadowColorshadowOffset嘶伟、shadowRadiusshadowOpactiy 屬性怎憋。它們指定了陰影的顏色又碌,方位,模糊度和不透明度绊袋。不過這個(gè)陰影存在于 layer 外部毕匀,而我的需求則是創(chuàng)建一個(gè)具有內(nèi)陰影的圓(如下圖右側(cè)的圓)。

shadows.png

實(shí)現(xiàn)圓形很簡單癌别,但這個(gè)內(nèi)陰影讓人有點(diǎn)頭疼皂岔,因?yàn)?Core Animation 并沒有為我們提供任何可行的 API 去直接設(shè)置 layer 的 inner shadow,所以只能自己實(shí)現(xiàn)相關(guān)操作展姐。最開始的想法是建立一個(gè)長度為圓周長的 CAGradientLayer躁垛,設(shè)置它的漸變色(從 blackColor 到 clearColor),然后把它彎曲變形成一個(gè)圓圾笨。

不過這個(gè)方案太傻教馆,把簡單的問題復(fù)雜化了,除了涉及漸變還要考慮圖形變形擂达。那 Core Graphics 畫圖呢土铺?我們是可以直接在 layer 上繪制圖形的。于是上 stackoverflow 搜尋相關(guān)問題板鬓,慶幸的是悲敷,這個(gè)問題給了我解決方向。

由于 layer 只負(fù)責(zé)顯示和動(dòng)畫俭令,并不處理交互事件后德,而陰影只是單純地作為裝飾顯示在視圖中,那我們把 shadow 單獨(dú)作為一個(gè)圖層覆蓋在需要 inner shadow 的視圖上抄腔,這個(gè) inner shadow 尺寸需要足夠大瓢湃,能夠滿足 offset 的正常需求(模擬光源位置不同產(chǎn)生的投影角度也不同),并且最重要的是它必須是中間鏤空的妓柜。

那么動(dòng)手實(shí)現(xiàn)它箱季。子類化一個(gè) CAShapeLayer,命名為WLInnerShadow棍掐,在WLInnerShadowdrawInContext方法中設(shè)置陰影路徑藏雏。另外,我們還需要 4 個(gè)屬性記錄和監(jiān)聽陰影信息,比如陰影顏色掘殴,方位赚瘦,不透明度和模糊度。

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) {
        // 設(shè)置 Context 屬性
        // 允許抗鋸齒
        CGContextSetAllowsAntialiasing(ctx, true);
        // 允許平滑
        CGContextSetShouldAntialias(ctx, true);
        // 設(shè)置插值質(zhì)量
        CGContextSetInterpolationQuality(ctx, .High);
        
        // 以下為核心代碼
        
        // 創(chuàng)建 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)
        }
        
        // 創(chuàng)建 inner shadow 的鏤空路徑
        let someInnerPath: CGPathRef = UIBezierPath(roundedRect: rect, cornerRadius: radius).CGPath
        CGContextAddPath(ctx, someInnerPath)
        CGContextClip(ctx)
        
        // 創(chuàng)建陰影填充區(qū)域奏寨,并鏤空中心
        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<CGFloat> = 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
        }
        
        // 根據(jù)顏色信息創(chuàng)建填充色
        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)

看看效果圖:

AirPlay_Screenshot_2016-03-14_06-24-37.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末起意,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子病瞳,更是在濱河造成了極大的恐慌揽咕,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件套菜,死亡現(xiàn)場離奇詭異亲善,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)逗柴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門蛹头,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人戏溺,你說我怎么就攤上這事渣蜗。” “怎么了旷祸?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵耕拷,是天一觀的道長。 經(jīng)常有香客問我肋僧,道長斑胜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任嫌吠,我火速辦了婚禮止潘,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘辫诅。我一直安慰自己凭戴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布炕矮。 她就那樣靜靜地躺著么夫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪肤视。 梳的紋絲不亂的頭發(fā)上档痪,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機(jī)與錄音邢滑,去河邊找鬼腐螟。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的乐纸。 我是一名探鬼主播衬廷,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼汽绢!你這毒婦竟也來了吗跋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤宁昭,失蹤者是張志新(化名)和其女友劉穎跌宛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體久窟,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秩冈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了斥扛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡丹锹,死狀恐怖稀颁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情楣黍,我是刑警寧澤匾灶,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站租漂,受9級特大地震影響阶女,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜哩治,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一秃踩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧业筏,春花似錦憔杨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至台谢,卻和暖如春寻狂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背朋沮。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工蛇券, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓怀读,卻偏偏與公主長得像诉位,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子菜枷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Core Animation其實(shí)是一個(gè)令人誤解的命名苍糠。你可能認(rèn)為它只是用來做動(dòng)畫的,但實(shí)際上它是從一個(gè)叫做Laye...
    小貓仔閱讀 3,689評論 1 4
  • 轉(zhuǎn)載:http://www.reibang.com/p/32fcadd12108 每個(gè)UIView有一個(gè)伙伴稱為l...
    F麥子閱讀 6,168評論 0 13
  • 每個(gè)UIView有一個(gè)伙伴稱為layer啤誊,一個(gè)CALayer岳瞭。UIView實(shí)際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,088評論 0 17
  • >嗯,圓和橢圓還不錯(cuò)蚊锹,但如果是帶圓角的矩形呢瞳筏? >我們現(xiàn)在能做到那樣了么? >史蒂芬·喬布斯 我們在第三章『圖層幾...
    夜空下最亮的亮點(diǎn)閱讀 670評論 0 0
  • 繪制像素到屏幕上 answer-huang22 Mar 2014 分享文章 一個(gè)像素是如何繪制到屏幕上去的牡昆?有很多...
    阿貍旅途T恤閱讀 1,625評論 0 7