view.mask 遮罩,或者刮獎效果的核心屬性

https://github.com/pgorzelany/ScratchCardView
這有一個實現(xiàn)刮獎效果的第三方,一個灰色遮罩,手指劃過會顯現(xiàn)圖片內(nèi)容.
如圖:

效果圖

看到效果第一時間,認為是在imageView 上方遮蓋一層灰色 View ,在手指劃過時,路徑變成透明,以達到效果.當然,現(xiàn)實中是這樣實現(xiàn)的沒錯.
但是,在運行 demo 時,看到層級結(jié)構(gòu)
當相關(guān)如下時:


效果
層級結(jié)構(gòu)
????

頂著崩壞的世界觀繼續(xù)看源碼
直到

        canvasMaskView.backgroundColor = UIColor.clear
        canvasMaskView.strokeColor = UIColor.orange
        canvasMaskView.lineWidht = scratchWidth
        contentViewContainer.mask = canvasMaskView

canvasMaskView 即 我寫了 Hi 的圖層

mask 是什么屬性? 點擊去還是系統(tǒng)的屬性?

于是去百了個度 看到文章
http://www.reibang.com/p/e4ac8266d9f0
恍然大悟! 我的世界觀得以修正,謝謝!

說:

UIView有一個maskView屬性(遮罩),這個屬性是通過改變alpha通道來改變透明度的荷并,可以理解為maskview將自己“投影”到view上,實現(xiàn)改變alpha一樣的效果。
1.設(shè)置了遮罩屬性后view只顯示和遮罩重疊的區(qū)域呜达。
2.通過改變遮罩的alpha和顏色實現(xiàn)透明颂郎、半透明的效果膘茎。

至于劃線部分.代碼非常簡單(以下為框架:ScratchCardView 中摘抄)

import UIKit

class CanvasView: UIView {
    
    // MARK: Properties
    
    @IBInspectable var lineWidht: CGFloat = 1
    @IBInspectable var strokeColor = UIColor.red
    
    fileprivate var paths: [CGMutablePath] = []
    fileprivate var currentPath: CGMutablePath?
    
    // MARK: Lifecycle
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.configureView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        self.configureView()
    }
    
    init(strokePaths paths: [CGMutablePath]) {
        self.init()
        
        self.paths = paths
    }
    
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        for path in self.paths + [self.currentPath].flatMap({$0}) {
            context?.addPath(path)
            context?.setLineWidth(lineWidht)
            context?.strokePath()
        }
    }
    
    // MARK: Actions
    
    func panGestureRecognized(_ recognizer: UIPanGestureRecognizer) {
        let location = recognizer.location(in: self)
        
        switch recognizer.state {
        case .began:
            self.beginPath(at: location)
        case .changed:
            self.addLine(to: location)
        default:
            self.closePath()
        }
    }
    
    // MARK: Public methods
    
    func beginPath(at point: CGPoint) {
        self.currentPath = CGMutablePath()
        self.currentPath?.move(to: point)
    }
    
    func addLine(to point: CGPoint) {
        self.currentPath?.addLine(to: point)
        self.setNeedsDisplay()
    }
    
    func closePath() {
        if let currentPath = self.currentPath {
            self.paths.append(currentPath)
        }
        self.currentPath = nil
        self.setNeedsDisplay()
    }
    
    func clear() {
        self.paths = []
        self.setNeedsDisplay()
    }
    
    // MARK: Private Methods
    
    fileprivate func configureView() {
        self.addGestureRecognizers()
    }
    
    fileprivate func addGestureRecognizers() {
        let panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(panGestureRecognized))
        self.addGestureRecognizer(panRecognizer)
    }
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市睦裳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌置逻,老刑警劉巖推沸,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異券坞,居然都是意外死亡鬓催,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門恨锚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宇驾,“玉大人,你說我怎么就攤上這事猴伶】紊幔” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵他挎,是天一觀的道長筝尾。 經(jīng)常有香客問我,道長办桨,這世上最難降的妖魔是什么筹淫? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮呢撞,結(jié)果婚禮上损姜,老公的妹妹穿的比我還像新娘。我一直安慰自己殊霞,他們只是感情好摧阅,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著绷蹲,像睡著了一般棒卷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天娇跟,我揣著相機與錄音岩齿,去河邊找鬼。 笑死苞俘,一個胖子當著我的面吹牛盹沈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吃谣,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼乞封,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了岗憋?” 一聲冷哼從身側(cè)響起肃晚,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎仔戈,沒想到半個月后关串,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡监徘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年晋修,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凰盔。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡墓卦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出户敬,到底是詐尸還是另有隱情落剪,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布尿庐,位于F島的核電站忠怖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏抄瑟。R本人自食惡果不足惜凡泣,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锐借。 院中可真熱鬧问麸,春花似錦往衷、人聲如沸钞翔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽布轿。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間汰扭,已是汗流浹背稠肘。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留萝毛,地道東北人项阴。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像笆包,于是被迫代替她去往敵國和親环揽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

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