《iOS Core Animation》學(xué)習(xí)筆記:圖層幾何學(xué)

布局

UIView有三個比較重要的布局屬性:frame娘侍、bounds技矮、center。CALayer對應(yīng)地叫做:frame估脆、bounds钦奋、position。雖然UIView的center和CALayer的position屬性代表同樣的值疙赠。

  • frame代表了圖層的外部坐標付材,也就是在父圖層上占據(jù)的空間;
  • bounds代表了圖層的內(nèi)部坐標圃阳,{0,0通常是圖層的左上角}厌衔;
  • center和position代表了相對于父圖層anchorPoint所在的位置;
UIView和CALayer的坐標系

視圖的frame和圖層的frame是相關(guān)聯(lián)的捍岳,視圖的frame發(fā)生改變富寿,該視圖對應(yīng)的CALayer的frame也會發(fā)生變化。

frame屬性值是根據(jù)bounds锣夹、position和transform計算出來的页徐,當其中任意一個值發(fā)生變化,frame就會發(fā)生變化银萍,當然改變frame值变勇,也會影響到他們當中的值。

當對圖層做變換的時候贴唇,例如旋轉(zhuǎn)或縮放搀绣,frame實際上代表了覆蓋在圖層旋轉(zhuǎn)之后的整個軸對齊的矩形區(qū)域,因此frame的寬高可能和bounds的寬高不再一致了戳气。

錨點

視圖的center屬性和圖層的position屬性都指定anchorPoint相對于父圖層的位置链患。

默認情況下,anchorPoint位于圖層的中點物咳,因此圖層將會以這個點為中心放置锣险。

anchorPoint用單位坐標來描述蹄皱,也就是圖層的相對坐標览闰。因為圖層的左上角是{0,0}芯肤,右下角是{1,1},所以anchorPoint的默認坐標是{0.5,0.5}压鉴。

坐標系

和視圖一樣崖咨,圖層在圖層樹當中也是相對于父圖層按層級關(guān)系放置,一個圖層的position依賴于它父圖層的bounds油吭,如果父圖層發(fā)生了移動击蹲,它的所有子圖層也會跟著移動。

Z坐標軸

和UIView嚴格的二維坐標系不同婉宰,CALayer存在于一個三維空間中歌豺。CALayer還有另外兩個屬性:zPosition和anchorPointZ,二者都是在Z軸上描述圖層位置的浮點類型心包。

通常圖層是根據(jù)它們子圖層的sublayers出現(xiàn)的順序來繪制的类咧。

下面這個示例,是在Interface Builder中放置了一對視圖蟹腾,其中綠色視圖會被繪制在紅色視圖的后面痕惋。

當然也可以提高綠色視圖的zPosition來改變繪圖的順序。

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var greenView: UIView!
@IBOutlet weak var redView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    self.greenView.layer.zPosition = 1.0
  }
}
綠色視圖被繪制在紅色視圖的前面

Hit Testing

CALayer并不關(guān)心任何響應(yīng)鏈事件娃殖,所以不能直接處理觸摸事件或手勢值戳。但是CALayer包含了兩個方法幫助我們處理事件:containsPoint()和hitTest()。

containsPoint(_ p: CGPoint)方法接收一個在本圖層坐標系下的CGPoint炉爆,如果這個點在圖層的frame范圍內(nèi)就返回true堕虹。

import UIKit

class ViewController: UIViewController {

@IBOutlet var layerView: UIView!

private var blueLayer = CALayer()

override func viewDidLoad() {
    super.viewDidLoad()
    
    self.blueLayer.frame = CGRectMake(50.0, 50.0, 100.0, 100.0)
    self.blueLayer.backgroundColor = UIColor.blueColor().CGColor
    
    self.layerView.layer.addSublayer(self.blueLayer)
}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    //get touch position relation to main view
    var point = touches.first?.locationInView(self.view)
    //convert point to the white layer's coordinates
    point = self.layerView.layer.convertPoint(point!, fromLayer: self.view.layer)
    //get layer using containsPoint method
    if self.layerView.layer.containsPoint(point!) {
        //convert point to blueLayer's coordinates
        point = self.blueLayer.convertPoint(point!, fromLayer: self.layerView.layer)
        if self.blueLayer.containsPoint(point!) {
           UIAlertView(title: "Inside Blue Layer", message: nil, delegate: nil, cancelButtonTitle: "OK").show()
        } else {
            UIAlertView(title: "Inside White Layer", message: nil, delegate: nil, cancelButtonTitle: "OK").show()
        }
    }
  }
}

hitTest方法同樣接受一個CGPoint類型參數(shù),但是返回值不是BOOL類型芬首,而是圖層本身鲫凶,或者包含這個坐標點的葉子節(jié)點圖層。

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var layerView: UIView!

private var blueLayer = CALayer()

override func viewDidLoad() {
    super.viewDidLoad()
    
    self.blueLayer.frame = CGRectMake(50, 50, 100, 100)
    self.blueLayer.backgroundColor = UIColor.blueColor().CGColor
    
    self.layerView.layer.addSublayer(self.blueLayer)
}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    //get touch position
    let point = touches.first?.locationInView(self.view)
    //get touch layer
    let layer = self.layerView.layer.hitTest(point!)
    //get layer using hitTest
    if layer == self.blueLayer {
        UIAlertView(title: "Inside Blue Layer", message: nil, delegate: nil, cancelButtonTitle: "OK").show()
    } else if layer == self.layerView.layer {
        UIAlertView(title: "Inside White Layer", message: nil, delegate: nil, cancelButtonTitle: "OK").show()
    }
  }
}

注意:當調(diào)用圖層的hitTest方法時衩辟,測試的順序嚴格依賴圖層樹當中的圖層順序螟炫。

示例代碼地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市艺晴,隨后出現(xiàn)的幾起案子昼钻,更是在濱河造成了極大的恐慌,老刑警劉巖封寞,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件然评,死亡現(xiàn)場離奇詭異,居然都是意外死亡狈究,警方通過查閱死者的電腦和手機碗淌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人亿眠,你說我怎么就攤上這事碎罚。” “怎么了纳像?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵荆烈,是天一觀的道長。 經(jīng)常有香客問我竟趾,道長憔购,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任岔帽,我火速辦了婚禮玫鸟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘犀勒。我一直安慰自己屎飘,他們只是感情好,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布账蓉。 她就那樣靜靜地躺著枚碗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪铸本。 梳的紋絲不亂的頭發(fā)上肮雨,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音箱玷,去河邊找鬼怨规。 笑死,一個胖子當著我的面吹牛锡足,可吹牛的內(nèi)容都是我干的波丰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼舶得,長吁一口氣:“原來是場噩夢啊……” “哼掰烟!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起沐批,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤纫骑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后九孩,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體先馆,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年躺彬,在試婚紗的時候發(fā)現(xiàn)自己被綠了煤墙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梅惯。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖仿野,靈堂內(nèi)的尸體忽然破棺而出铣减,到底是詐尸還是另有隱情,我是刑警寧澤设预,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布徙歼,位于F島的核電站犁河,受9級特大地震影響鳖枕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜桨螺,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一宾符、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧灭翔,春花似錦魏烫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至煌张,卻和暖如春呐赡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背骏融。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工链嘀, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人档玻。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓怀泊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親误趴。 傳聞我的和親對象是個殘疾皇子霹琼,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

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