遮罩Mask

學(xué)習(xí)1
學(xué)習(xí)2

1.mask 是CALayer的一個屬性,同時也是CALayer 類型的。
2.原理:控制layer本身渲染的一個layer账月。效果是:比如imageLayer有一個maskLayer作為mask(注意maskLayer可以不跟imageLayer大小一樣),那maskLayer透明的地方歉秫,imageLayer就不會渲染,而是變透明养铸,顯示出imageLayer之后的內(nèi)容雁芙,maskLayer不透明的地方,imageLayer就會正常渲染钞螟,顯示出imageLayer本來的內(nèi)容如果maskLayer比imageLayer要小却特,那默認(rèn)的maskLayer之外的地方都是透明的,都不會渲染筛圆。
3.mask 的作用就是讓父圖層部分區(qū)域可見。
4.mask 的backgroundColor必須設(shè)置椿浓,不設(shè)置mask 背景就是透明的太援,mask 是不會起作用的,但是backgroundColor設(shè)置什么顏色無所謂扳碍。
5.為一個layer的mask 創(chuàng)建一個新的mask時提岔,這個新的mask不能有superlayer 和sublayer。(官方文檔的說明)
6.mask 可以配合CAGradientLayer笋敞、CAShapeLayer 使用碱蒙。可以實現(xiàn)蒙層透明度夯巷、顯示不同形狀圖層赛惩、圖案鏤空、文字變色等等功能趁餐。
7.mask在動畫中使用喷兼,可以產(chǎn)生很好的動畫效果。

用法一

作為圖片的遮罩

let backImage = UIImageView(frame: CGRect(x: 0, y: 0, width: KscreenWidth, height: KscreenHeight - 60))
backImage.image = UIImage(named: "R-C (1).jpeg")
backImage.contentMode = .scaleAspectFill
view.addSubview(backImage)

let coverImage = UIImageView(frame: CGRect(x: 0, y: 0, width: KscreenWidth, height: KscreenWidth))
coverImage.center = view.center
coverImage.image = UIImage(named: "R-C.jpeg")
coverImage.contentMode = .scaleAspectFit
view.addSubview(coverImage)
coverImage.isUserInteractionEnabled = true
let pan = UIPanGestureRecognizer(target: self, action: #selector(panAction(_:)))
coverImage.addGestureRecognizer(pan)

/// 圖片的遮罩,修改layer的位置后雷,需要使用layer的 position<位置> 和 anchorPoint<錨點>
maskLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
maskLayer.position = CGPoint(x: KscreenWidth/2, y: KscreenWidth/2)
maskLayer.backgroundColor = UIColor.orange.cgColor
maskLayer.cornerRadius = 100
coverImage.layer.mask = maskLayer

/// 拖動手勢
@objc
func panAction(_ pan: UIPanGestureRecognizer){
    let point = pan.translation(in: view)
    var frame = maskLayer.frame
    frame.origin.x += point.x
    frame.origin.y += point.y
    maskLayer.frame = frame
    
    pan.setTranslation(.zero, in: view)
}

用法二

UILabel作為遮罩


UILabel作為遮罩.png
let converView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
converView.backgroundColor = .lightGray
converView.center = view.center
view.addSubview(converView)

let gradLayer = CAGradientLayer()
gradLayer.frame = converView.bounds
gradLayer.startPoint = .zero
gradLayer.endPoint = CGPoint(x: 1, y: 1)
gradLayer.colors = [UIColor.RGB(255, 0, 0), UIColor.RGB(255, 165, 0), UIColor.RGB(255, 255, 0), UIColor.RGB(0, 255, 0), UIColor.RGB(0, 255, 255), UIColor.RGB(0, 0, 255), UIColor.RGB(43, 0, 255), UIColor.RGB(87, 0, 255)]
converView.layer.addSublayer(gradLayer)

let lbl = UILabel()
lbl.text = "你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧你說說這是怎么個事吧"
lbl.numberOfLines = 0
lbl.font = .boldSystemFont(ofSize: 15)
lbl.frame = CGRect(x: 5, y: 5, width: 190, height: 190)
converView.addSubview(lbl)
gradLayer.mask = lbl.layer

用法三

文本顏色分段顯示


文本顏色分段顯示.png
let contentView = UIView(frame: CGRect(x: 0, y: 0, width: 280, height: 280))
contentView.center = view.center
view.addSubview(contentView)

let lblBack = UILabel()
lblBack.frame = CGRect(x: 5, y: 5, width: 180, height: 30)
lblBack.text = "你好季惯,早飯吃了嗎"
lblBack.textColor = .black
contentView.addSubview(lblBack)

let lblCover = UILabel()
lblCover.frame = CGRect(x: 5, y: 5, width: 180, height: 30)
lblCover.text = "你好吠各,早飯吃了嗎"
lblCover.textColor = .red
contentView.addSubview(lblCover)

/// 遮罩
let coverLayer = CALayer()
coverLayer.frame = CGRect(x: 30, y: 10, width: 100, height: 30)
coverLayer.backgroundColor = UIColor.orange.cgColor
coverLayer.cornerRadius = 15
lblCover.layer.mask = coverLayer
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市勉抓,隨后出現(xiàn)的幾起案子贾漏,更是在濱河造成了極大的恐慌,老刑警劉巖藕筋,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纵散,死亡現(xiàn)場離奇詭異,居然都是意外死亡念逞,警方通過查閱死者的電腦和手機(jī)困食,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來翎承,“玉大人硕盹,你說我怎么就攤上這事∵犊В” “怎么了瘩例?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長甸各。 經(jīng)常有香客問我垛贤,道長,這世上最難降的妖魔是什么趣倾? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任聘惦,我火速辦了婚禮,結(jié)果婚禮上儒恋,老公的妹妹穿的比我還像新娘善绎。我一直安慰自己,他們只是感情好诫尽,可當(dāng)我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布禀酱。 她就那樣靜靜地躺著,像睡著了一般牧嫉。 火紅的嫁衣襯著肌膚如雪剂跟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天酣藻,我揣著相機(jī)與錄音曹洽,去河邊找鬼。 笑死辽剧,一個胖子當(dāng)著我的面吹牛衣洁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播抖仅,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼坊夫,長吁一口氣:“原來是場噩夢啊……” “哼砖第!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起环凿,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤梧兼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后智听,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體羽杰,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年到推,在試婚紗的時候發(fā)現(xiàn)自己被綠了考赛。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡莉测,死狀恐怖颜骤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捣卤,我是刑警寧澤忍抽,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站董朝,受9級特大地震影響鸠项,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜子姜,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一祟绊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧哥捕,春花似錦牧抽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽记舆。三九已至鸽捻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泽腮,已是汗流浹背御蒲。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留诊赊,地道東北人厚满。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像碧磅,于是被迫代替她去往敵國和親碘箍。 傳聞我的和親對象是個殘疾皇子遵馆,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,724評論 2 354

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