1. 程式人生 > >CALayer mask屬性實現蒙板效果

CALayer mask屬性實現蒙板效果

相信很多人在ios上實現控制元件圓角的時候都用過:cornerRadius這個屬性,例如實現圓形頭像,一般我會這麼寫:

self.headImageView.layer.masksToBounds = YES;
self.headImageView.layer.cornerRadius = 20;

這樣就能簡單的實現圖片圓角效果了,那麼,實現圓角效果的原理是什麼呢?下面我簡單的談一下我自己的理解(錯誤指出還請指出)。

相信我們都注意到了,這裡使用了一個layer屬性,layer其實是控制元件上的一個層。而我們平時用的控制元件組成部分其實是 UIView + layer,這兩部分實現了控制元件的展示。而layer的大小和形狀是直接影響我們視覺中所看的樣子,而並非控制元件中的UIView層。通過改變layer的形狀和大小,能改變控制元件所呈現的樣子。那麼是如何改變layer的形狀呢?這裡就要涉及到layer的一個屬性mask,下面給出蘋果官方的定義:

/* A layer whose alpha channel is used as a mask to select between the
* layer's background and the result of compositing the layer's
* contents with its filtered background. Defaults to nil. When used as
* a mask the layer's `compositingFilter' and `backgroundFilters'
* properties are ignored. When setting the mask to a new layer, the
* new layer must have a nil superlayer, otherwise the behavior is
* undefined. Nested masks (mask layers with their own masks) are
* unsupported. */

大概意思是:mask是一個layer層,並且作為背景層和組成層之間的一個遮罩層通道,預設是nil。並且如果要建立新的layer賦給mask,那麼新的layer必須沒有superlayer,也不支援含有子mask。

我簡單的理解為mask是個介於背景層和表現層之間的一個遮罩層,如果要建立新的layer賦給這個遮罩層,則這個新layer不能有superlayer,也不能再上面新增子mask

通過,上面的解釋可以看到,layer的大小和形狀是受到mask遮罩層的影響的,可以通過賦給mask層一個新layer,來實現改變layer形狀的效果。

通過一個例子來簡單說明下:

通過上面的程式碼就能簡單的封裝一個圓形圖片展示的效果

呼叫也非常簡單,一句話搞定:

效果是這樣的:

下面進入主題,用layer實現蒙板效果,先看效果:

直接上程式碼了:

viewDidload中的程式碼如下:

我簡單的分析一下蒙板的原理:我們都知道控制元件view有一個alpha屬性用來設定透明度,預設alpha=1,只有當alpha不為0是我們才能正常的看到View的樣子,alpha其實改變的是mask和background layer的透明度,來實現透明效果。而mask是控制元件view上的一層layer,mask也有一個alpha,要想看到view,只有當mask的透明度不為0時,我們才能看到mask後面的view的樣子,view自帶的masklayer是不透明的。新建立的masklayer的是透明的,因此,我們只需要給新建立的masklayer一個顏色,使他不透明就能看見蒙板後的View了,而蒙板外是透明的,這樣就能實現蒙板效果了。原理大概是這樣了。