徹底理解position與anchorPoint

2021-06-27 15:31:20 字數 3754 閱讀 7283

相信很多剛接觸calayer的人都會遇到一下幾個麻煩:

1、為什麼修改anchorpoint會移動layer的位置?

2、calayer的position點是哪一點呢?

3、anchorpoint與position有什麼關係?

我也迷惑過,在網上也翻了很多教程,但最終都沒有解決我的困惑,最終,我看到了這篇博文才算明白。現在我講詳細講解一下這裡面的糾結的關係,保證這是你最後一次糾結這兩個概念。here we go!

每乙個uiview內部都預設關聯著乙個calayer, uiview有frame、bounds和center三個屬性,calayer也有類似的屬性,分別為frame、bounds、position、anchorpoint。frame和bounds比較好理解,bounds可以視為x座標和y座標都為0的frame,那position、anchorpoint是什麼呢?先看看兩者的原型,可知都是cgpoint點。

@property

cgpoint position

@property

cgpoint anchorpoint

一般都是先介紹position,再介紹anchorpoint。我這裡反過來,先來說說anchorpoint。

從乙個例子開始入手吧,想象一下,把一張a4白紙用圖釘訂在書桌上,如果訂得不是很緊的話,白紙就可以沿順時針或逆時針方向圍繞圖釘旋轉,這時候圖釘就起著支點的作用。我們要解釋的anchorpoint就相當於白紙上的圖釘,它主要的作用就是用來作為變換的支點,旋轉就是一種變換,類似的還有平移、縮放。

繼續擴充套件。很明顯,白紙的旋轉形態隨圖釘的位置不同而不同,圖釘訂在白紙的正中間與左上角時分別造就了兩種旋轉形態,這是由圖釘(anchorpoint)的位置決定的。如何衡量圖釘(anchorpoint)在白紙中的位置呢?在ios中,anchorpoint點的值是用一種相對bounds的比例值來確定的,在白紙的左上角、右下角,anchorpoint分為為(0,0),(1, 1)。類似地,可以得出在白紙的中心點、左下角和右上角的anchorpoint為(0.5,0.5), (0,1), (1,0)。

然後再來看下面兩張圖,注意圖中分ios與macos,因為兩者的座標系不相同,ios座標原點在左上角,macos座標原點在左下角,我們看ios部分即可。

在上面這張圖中,anchorpoint有(0.5,0.5)和(0,0)兩種情況,分別為矩形的中心點與原點。那麼,這兩個anchorpoint在superlayer中的實際位置分別為多少呢?簡單計算一下就可以得到(100, 100)和(40, 60),把這兩個值分別與各自的position值比較,發現完全一致,該不會是巧合?

這時候可以大膽猜測一下,position是不是就是anchorpoint在superlayer中的位置呢?答案是確定的,更確切地說,position是layer中的anchorpoint點在superlayer中的位置座標。因此可以說, position點是相對suerlayer的,anchorpoint點是相對layer的,兩者是相對不同的座標空間的乙個重合點。

再來看看position的原始定義:

the layer』s position in its superlayer』s coordinate space。

中文可以理解成為position是layer相對superlayer座標空間的位置。所以請記住這個結論:position的位置是根據anchorpoint來確定的。anchorpoint通常被翻譯成錨點,其實可以理解為同乙個東西。它具體的表現可以看下面這張圖,其實就是作為旋轉縮放等空間變化提供了中心點。這就類似於剛才講的圖釘訂在白紙的正中間與左上角時分別造就了兩種旋轉形態。

3.1 —— 三者之間的計算公式

聰明的你其實已經可以在第二點中已經找到這三者之間的關係了,現在我只不過是特地拿出來正式講一下。

anchorpoint的預設值為(0.5,0.5),也就是anchorpoint預設在layer的中心點。計算position的值便可以用下面的公式計算:

position.x = frame.origin.x + 0.5 * bounds.size.width;  

position.y = frame.origin.y + 0.5 * bounds.size.height;

裡面的0.5是因為anchorpoint取預設值,更通用的公式應該是:

position.x = frame.origin.x + anchorpoint.x * bounds.size.width;  

position.y = frame.origin.y + anchorpoint.y * bounds.size.height;

3.2 —— 第二個問題

下面再來看另外兩個問題,如果單方面修改layer的position位置,會對anchorpoint有什麼影響呢?修改anchorpoint又如何影響position呢?

**根據**測試,兩者互不影響,受影響的只會是frame.origin。**
所以我們又可以得出今天的第二個結論:anchorpoint和position互不影響,故受影響的只有frame

現在又可以得出乙個換湯不換藥的裝逼公式:

frame.origin.x = position.x - anchorpoint.x * bounds.size.width;  

frame.origin.y = position.y - anchorpoint.y * bounds.size.height;

ps:這就解釋了為什麼修改anchorpoint會移動layer,因為position不受影響,只能是frame.origin做相應的改變,因而會移動layer。

3.3 —— 優化

在實際情況中,可能還有這樣一種需求,我需要修改anchorpoint而不想移動layer,在修改anchorpoint後再重新設定一遍frame就可以達到目的,這時position就會自動進行相應的改變。

**:

- (void) setanchorpoint:(cgpoint)anchorpoint forview:(uiview *)view
1、position是layer中的anchorpoint在superlayer中的位置座標。 

2、互不影響原則:單獨修改position與anchorpoint中任何乙個屬性都不影響另乙個屬性。 

3、frame、position與anchorpoint有以下關係:

frame.origin.x = position.x - anchorpoint.x * bounds.size.width;  

frame.origin.y = position.y - anchorpoint.y * bounds.size.height;

參考:

《徹底理解position與anchorpoint》 from wonderffee's blog:

簡單的理解position與anchorPoint

很多人都搞不清楚這兩個點,其實這兩個點還是不難理解的,用一句話就能概括 anchorpoint 表示這個點在 自身layer 中的位置,position 表示這個點在父layer中的位置 1.anchorpoint 錨點,用很多人舉過的例子 把一張a4白紙用圖釘訂在書桌上,如果訂得不是很緊的話,白紙...

理解position定位

使用css布局position非常重要,語法如下 position static relative absolute fixed center page sticky 預設值 static,center page sticky是css3中新增加的值。1 static 可以認為靜態的,預設元素都是靜態...

徹底理解sizeof

很多人認為sizeof是乙個函式,這是從它的用法看出來的,因為我們用的時候一般會寫成sizeof 確實像函式。但sizeof其實是操作符,返回乙個物件或者型別在當前平台下所佔的記憶體位元組數。首先我們來看乙個例子,注意本機使用平台為64位系統 includeint main void 輸出結果是 1...