圖層幾何學

不熟悉幾何學的人就不要來這裏了 --柏拉圖學院入口的簽名

在第二章裏面，我們介紹了圖層背後的圖片，和一些控制圖層座標和旋轉的屬性。在這一章中，我們將要看一看圖層內部是如何根據父圖層和兄弟圖層來控制位置和尺寸的。另外我們也會涉及如何管理圖層的幾何結構，以及它是如何被自動調整和自動佈局影響的。

佈局

UIView有三個比較重要的佈局屬性：frame，bounds和center，CALayer對應地叫做frame，bounds和position。爲了能清楚區分，圖層用了“position”，視圖用了“center”，但是他們都代表同樣的值。

frame代表了圖層的外部座標（也就是在父圖層上佔據的空間），bounds是內部座標（{0, 0}通常是圖層的左上角），center和position都代表了相對於父圖層anchorPoint所在的位置。anchorPoint的屬性將會在後續介紹到，現在把它想成圖層的中心點就好了。圖3.1顯示了這些屬性是如何相互依賴的。

圖3.1 UIView和CALayer的座標系

視圖的frame，bounds和center屬性僅僅是存取方法，當操縱視圖的frame，實際上是在改變位於視圖下方CALayer的frame，不能夠獨立於圖層之外改變視圖的frame。

對於視圖或者圖層來說，frame並不是一個非常清晰的屬性，它其實是一個虛擬屬性，是根據bounds，position和transform計算而來，所以當其中任何一個值發生改變，frame都會變化。相反，改變frame的值同樣會影響到他們當中的值

記住當對圖層做變換的時候，比如旋轉或者縮放，frame實際上代表了覆蓋在圖層旋轉之後的整個軸對齊的矩形區域，也就是說frame的寬高可能和bounds的寬高不再一致了（圖3.2）

圖3.2 旋轉一個視圖或者圖層之後的frame屬性

錨點

之前提到過，視圖的center屬性和圖層的position屬性都指定了anchorPoint相對於父圖層的位置。圖層的anchorPoint通過position來控制它的frame的位置，你可以認爲anchorPoint是用來移動圖層的把柄。

默認來說，anchorPoint位於圖層的中點，所以圖層的將會以這個點爲中心放置。anchorPoint屬性並沒有被UIView接口暴露出來，這也是視圖的position屬性被叫做“center”的原因。但是圖層的anchorPoint可以被移動，比如你可以把它置於圖層frame的左上角，於是圖層的內容將會向右下角的position方向移動（圖3.3），而不是居中了。

圖3.3 改變anchorPoint的效果

和第二章提到的contentsRect和contentsCenter屬性類似，anchorPoint用單位座標來描述，也就是圖層的相對座標，圖層左上角是{0, 0}，右下角是{1, 1}，因此默認座標是{0.5, 0.5}。anchorPoint可以通過指定x和y值小於0或者大於1，使它放置在圖層範圍之外。

注意在圖3.3中，當改變了anchorPoint，position屬性保持固定的值並沒有發生改變，但是frame卻移動了。

那在什麼場合需要改變anchorPoint呢？既然我們可以隨意改變圖層位置，那改變anchorPoint不會造成困惑麼？爲了舉例說明，我們來舉一個實用的例子，創建一個模擬鬧鐘的項目。

鐘面和鐘錶由四張圖片組成（圖3.4），爲了簡單說明，我們還是用傳統的方式來裝載和加載圖片，使用四個UIImageView實例（當然你也可以用正常的視圖，設置他們圖層的contents圖片）。

圖3.4 組成鐘面和鐘錶的四張圖片

鬧鐘的組件通過IB來排列（圖3.5），這些圖片視圖嵌套在一個容器視圖之內，並且自動調整和自動佈局都被禁用了。這是因爲自動調整會影響到視圖的frame，而根據圖3.2的演示，當視圖旋轉的時候，frame是會發生改變的，這將會導致一些佈局上的失靈。

我們用NSTimer來更新鬧鐘，使用視圖的transform屬性來旋轉鐘錶（如果你對這個屬性不太熟悉，不要着急，我們將會在第5章“變換”當中詳細說明），具體代碼見清單3.1

圖3.5 在Interface Builder中佈局鬧鐘視圖

清單3.1 Clock

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIImageView *hourHand;
@property (nonatomic, weak) IBOutlet UIImageView *minuteHand;
@property (nonatomic, weak) IBOutlet UIImageView *secondHand;
@property (nonatomic, weak) NSTimer *timer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //start timer
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];
                  
    //set initial hand positions
    [self tick];
}

- (void)tick
{
    //convert time to hours, minutes and seconds
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
    NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
    NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
    CGFloat hoursAngle = (components.hour / 12.0) * M_PI * 2.0;
    //calculate hour hand angle //calculate minute hand angle
    CGFloat minsAngle = (components.minute / 60.0) * M_PI * 2.0;
    //calculate second hand angle
    CGFloat secsAngle = (components.second / 60.0) * M_PI * 2.0;
    //rotate hands
    self.hourHand.transform = CGAffineTransformMakeRotation(hoursAngle);
    self.minuteHand.transform = CGAffineTransformMakeRotation(minsAngle);
    self.secondHand.transform = CGAffineTransformMakeRotation(secsAngle);
}

@end

運行項目，看起來有點奇怪（圖3.6），因爲鐘錶的圖片在圍繞着中心旋轉，這並不是我們期待的一個支點。

圖3.6 鐘面，和不對齊的鐘指針

你也許會認爲可以在Interface Builder當中調整指針圖片的位置來解決，但其實並不能達到目的，因爲如果不放在鐘面中間的話，同樣不能正確的旋轉。

也許在圖片末尾添加一個透明空間也是個解決方案，但這樣會讓圖片變大，也會消耗更多的內存，這樣並不優雅。

更好的方案是使用anchorPoint屬性，我們來在-viewDidLoad方法中添加幾行代碼來給每個鍾指針的anchorPoint做一些平移（清單3.2），圖3.7顯示了正確的結果。

清單3.2

- (void)viewDidLoad 
{
    [super viewDidLoad];
    // adjust anchor points

    self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f); 
    self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f); 
    self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);


    // start timer
}

圖3.7 鐘面，和正確對齊的鐘指針

座標系

和視圖一樣，圖層在圖層樹當中也是相對於父圖層按層級關係放置，一個圖層的position依賴於它父圖層的bounds，如果父圖層發生了移動，它的所有子圖層也會跟着移動。

這樣對於放置圖層會更加方便，因爲你可以通過移動根圖層來將它的子圖層作爲一個整體來移動，但是有時候你需要知道一個圖層的絕對位置，或者是相對於另一個圖層的位置，而不是它當前父圖層的位置。

CALayer給不同座標系之間的圖層轉換提供了一些工具類方法：

- (CGPoint)convertPoint:(CGPoint)point fromLayer:(CALayer *)layer; 
- (CGPoint)convertPoint:(CGPoint)point toLayer:(CALayer *)layer; 
- (CGRect)convertRect:(CGRect)rect fromLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect toLayer:(CALayer *)layer;

這些方法可以把定義在一個圖層座標系下的點或者矩形轉換成另一個圖層座標系下的點或者矩形

翻轉的幾何結構

常規說來，在iOS上，一個圖層的position位於父圖層的左上角，但是在Mac OS上，通常是位於左下角。Core Animation可以通過geometryFlipped屬性來適配這兩種情況，它決定了一個圖層的座標是否相對於父圖層垂直翻轉，是一個BOOL類型。在iOS上通過設置它爲YES意味着它的子圖層將會被垂直翻轉，也就是將會沿着底部排版而不是通常的頂部（它的所有子圖層也同理，除非把它們的geometryFlipped屬性也設爲YES）。

Z座標軸

和UIView嚴格的二維座標系不同，CALayer存在於一個三維空間當中。除了我們已經討論過的position和anchorPoint屬性之外，CALayer還有另外兩個屬性，zPosition和anchorPointZ，二者都是在Z軸上描述圖層位置的浮點類型。

注意這裏並沒有更深的屬性來描述由寬和高做成的bounds了，圖層是一個完全扁平的對象，你可以把它們想象成類似於一頁二維的堅硬的紙片，用膠水粘成一個空洞，就像三維結構的摺紙一樣。

zPosition屬性在大多數情況下其實並不常用。在第五章，我們將會涉及CATransform3D，你會知道如何在三維空間移動和旋轉圖層，除了做變換之外，zPosition最實用的功能就是改變圖層的顯示順序了。

通常，圖層是根據它們子圖層的sublayers出現的順序來類繪製的，這就是所謂的畫家的算法--就像一個畫家在牆上作畫--後被繪製上的圖層將會遮蓋住之前的圖層，但是通過增加圖層的zPosition，就可以把圖層向相機方向前置，於是它就在所有其他圖層的前面了（或者至少是小於它的zPosition值的圖層的前面）。

這裏所謂的“相機”實際上是相對於用戶是視角，這裏和iPhone背後的內置相機沒任何關係。

圖3.8顯示了在Interface Builder內的一對視圖，正如你所見，首先出現在視圖層級綠色的視圖被繪製在紅色視圖的後面。

圖3.8 在視圖層級中綠色視圖被繪製在紅色視圖的後面

我們希望在真實的應用中也能顯示出繪圖的順序，同樣地，如果我們提高綠色視圖的zPosition（清單3.3），我們會發現順序就反了（圖3.9）。其實並不需要增加太多，視圖都非常地薄，所以給zPosition提高一個像素就可以讓綠色視圖前置，當然0.1或者0.0001也能夠做到，但是最好不要這樣，因爲浮點類型四捨五入的計算可能會造成一些不便的麻煩。

清單3.3

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *greenView;
@property (nonatomic, weak) IBOutlet UIView *redView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //move the green view zPosition nearer to the camera
    self.greenView.layer.zPosition = 1.0f;
}
@end

圖3.9 綠色視圖被繪製在紅色視圖的前面

Hit Testing

第一章“圖層樹”證實了最好使用圖層相關視圖，而不是創建獨立的圖層關係。其中一個原因就是要處理額外複雜的觸摸事件。

CALayer並不關心任何響應鏈事件，所以不能直接處理觸摸事件或者手勢。但是它有一系列的方法幫你處理事件：-containsPoint:和-hitTest:。

-containsPoint:接受一個在本圖層座標系下的CGPoint，如果這個點在圖層frame範圍內就返回YES。如清單3.4所示第一章的項目的另一個合適的版本，也就是使用-containsPoint:方法來判斷到底是白色還是藍色的圖層被觸摸了（圖3.10）。這需要把觸摸座標轉換成每個圖層座標系下的座標，結果很不方便。

清單3.4 使用containsPoint判斷被點擊的圖層

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView;
@property (nonatomic, weak) CALayer *blueLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create sublayer
    self.blueLayer = [CALayer layer];
    self.blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    self.blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    //add it to our view
    [self.layerView.layer addSublayer:self.blueLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //get touch position relative to main view
    CGPoint point = [[touches anyObject] 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:
    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 alloc] initWithTitle:@"Inside Blue Layer" 
                                        message:nil
                                       delegate:nil 
                              cancelButtonTitle:@"OK"
                              otherButtonTitles:nil] show];
        } else {
            [[[UIAlertView alloc] initWithTitle:@"Inside White Layer"
                                        message:nil 
                                       delegate:nil
                              cancelButtonTitle:@"OK"
                              otherButtonTitles:nil] show];
        }
    }
}

@end

圖3.10 點擊圖層被正確標識

-hitTest:方法同樣接受一個CGPoint類型參數，而不是BOOL類型，它返回圖層本身，或者包含這個座標點的葉子節點圖層。這意味着不再需要像使用-containsPoint:那樣，人工地在每個子圖層變換或者測試點擊的座標。如果這個點在最外面圖層的範圍之外，則返回nil。具體使用-hitTest:方法被點擊圖層的代碼如清單3.5所示。

清單3.5 使用hitTest判斷被點擊的圖層

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //get touch position
    CGPoint point = [[touches anyObject] locationInView:self.view];
    //get touched layer
    CALayer *layer = [self.layerView.layer hitTest:point];
    //get layer using hitTest
    if (layer == self.blueLayer) {
        [[[UIAlertView alloc] initWithTitle:@"Inside Blue Layer"
                                    message:nil
                                   delegate:nil
                          cancelButtonTitle:@"OK"
                          otherButtonTitles:nil] show];
    } else if (layer == self.layerView.layer) {
        [[[UIAlertView alloc] initWithTitle:@"Inside White Layer"
                                    message:nil
                                   delegate:nil
                          cancelButtonTitle:@"OK"
                          otherButtonTitles:nil] show];
    }
}

注意當調用圖層的-hitTest:方法時，測算的順序嚴格依賴於圖層樹當中的圖層順序（和UIView處理事件類似）。之前提到的zPosition屬性可以明顯改變屏幕上圖層的順序，但不能改變事件傳遞的順序。

這意味着如果改變了圖層的z軸順序，你會發現將不能夠檢測到最前方的視圖點擊事件，這是因爲被另一個圖層遮蓋住了，雖然它的zPosition值較小，但是在圖層樹中的順序靠前。我們將在第五章詳細討論這個問題。

自動佈局

你可能用過UIViewAutoresizingMask類型的一些常量，應用於當父視圖改變尺寸的時候，相應UIView的frame也跟着更新的場景（通常用於橫豎屏切換）。

在iOS6中，蘋果介紹了自動排版機制，它和自動調整不同，並且更加複雜。

在Mac OS平臺，CALayer有一個叫做layoutManager的屬性可以通過CALayoutManager協議和CAConstraintLayoutManager類來實現自動排版的機制。但由於某些原因，這在iOS上並不適用。

當使用視圖的時候，可以充分利用UIView類接口暴露出來的UIViewAutoresizingMask和NSLayoutConstraintAPI，但如果想隨意控制CALayer的佈局，就需要手工操作。最簡單的方法就是使用CALayerDelegate如下函數：

- (void)layoutSublayersOfLayer:(CALayer *)layer;

當圖層的bounds發生改變，或者圖層的-setNeedsLayout方法被調用的時候，這個函數將會被執行。這使得你可以手動地重新擺放或者重新調整子圖層的大小，但是不能像UIView的autoresizingMask和constraints屬性做到自適應屏幕旋轉。

這也是爲什麼最好使用視圖而不是單獨的圖層來構建應用程序的另一個重要原因之一。

總結

本章涉及了CALayer的集合結構，包括它的frame，position和bounds，介紹了三維空間內圖層的概念，以及如何在獨立的圖層內響應事件，最後簡單說明了在iOS平臺，Core Animation對自動調整和自動佈局支持的缺乏。

在第四章“視覺效果”當中，我們接着介紹一些圖層外表的特性。

王崇

發佈了13 篇原創文章 · 獲贊 3 · 訪問量 2萬+

私信關注

iOS動畫進階(三)圖層幾何學

圖層幾何學

佈局

錨點

座標系

翻轉的幾何結構

Z座標軸

Hit Testing

自動佈局

總結

iOS動畫進階(一)圖層樹

iOS動畫進階(十)緩衝

iOS動畫進階(十一)基於定時器的動畫

iOS的橫屏(Landscape)與豎屏(Portrait)

iOS動畫進階(三)圖層幾何學

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結