iOS开发之layer.frame,layer.anchorPoint,layer.position对frame的影响

article/2025/10/22 23:54:24

最近遇到相关的问题,所以就将这三个属性值,进行了分析和研究,话不多说,直接上代码了,详细的文字描述都在代码中,可以自行查看。

之前还写了一篇文章,也可以同时查看一下:

iOS开发之如何保证控件位置不变,增加触控范围(即frame和bounds的区别)_hbblzjy的博客-CSDN博客_ios 设置bounds

代码分析了

场景一:修改 锚点 + 结构框架,即 layer.anchorPoint + layer.frame

场景二:修改 位置 + 结构框架,即 layer.position + layer.frame

场景三:探究修改 锚点 + 结构框架,即 layer.position + layer.frame 后,对 layer.position的影响

UIView *bView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];bView.backgroundColor = [UIColor redColor];[self.view.layer addSublayer:bView.layer];UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];aView.backgroundColor = [UIColor greenColor];[bView.layer addSublayer:aView.layer];/**// 场景一:修改 锚点 + 结构框架,即 layer.anchorPoint + layer.frameNSLog(@"初始化后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));aView.layer.anchorPoint = CGPointMake(1.5, 1.5);NSLog(@"修改layer.anchorPoint后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));// 修改frame的本质其实是修改layer.frame,所以修改layer.frame就是修改frameaView.layer.frame = CGRectMake(50, 50, 100, 100);NSLog(@"接着修改frame后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));aView.layer.anchorPoint = CGPointMake(1.0, 1.0);NSLog(@"再次修改layer.anchorPoint后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));*//**输出:2023-01-06 14:21:59.496431+0800 Demo[8398:1402935] 初始化后,aView.layer的frame值:{{50, 50}, {50, 50}},aView.layer的anchorPoint值:{0.5, 0.5},aView.layer的position值:{75, 75},2023-01-06 14:21:59.496994+0800 Demo[8398:1402935] 修改layer.anchorPoint后,aView.layer的frame值:{{0, 0}, {50, 50}},aView.layer的anchorPoint值:{1.5, 1.5},aView.layer的position值:{75, 75},2023-01-06 14:21:59.497796+0800 Demo[8398:1402935] 接着修改frame后,aView.layer的frame值:{{50, 50}, {100, 100}},aView.layer的anchorPoint值:{1.5, 1.5},aView.layer的position值:{200, 200},2023-01-06 14:21:59.498687+0800 Demo[8398:1402935] 再次修改layer.anchorPoint后,aView.layer的frame值:{{100, 100}, {100, 100}},aView.layer的anchorPoint值:{1, 1},aView.layer的position值:{200, 200},关于锚点,根据输出结果,描述如下:1、确定好frame后,当前view的中心点,就是view的默认锚点(0.5,0.5),此时view的右下角为锚点原点(0,0);2、设置锚点(比如设置为(1.5,1.5)),都是中心点带动view在 父view 上移动,以旧的锚点(0.5,0.5)开始向新的锚点(1.5,1.5)移动,此时view在 父view 上的位置会发生改变,即frame的(x,y)发生改变;3、如果view的frame发生变化,那么锚点的值(1.5,1.5)不会改变且还是中心点,但锚点在 父view 上的位置发生了改变,不再是之前的位置;4、再次设置锚点(比如设置为(1.0,1.0)),即旧的锚点(1.5,1.5)开始向新的锚点(1.0,1.0)移动,此时view在 父view 上的位置会发生改变,即frame的(x,y)发生改变;记住:1、view的左上角和右下角的对折线,对折线向右下角方向的延伸可找到锚点原点(0,0),以 view 为参照物;2、锚点的改变不会改变position的坐标位置;3、锚点在view上的位置是固定的中心点,在 父view 上的位置会根据设置的锚点值或者view.frame的改变而改变;4、锚点anchorPoint的修改,会对frame造成修改;*//**// 场景二:修改 位置 + 结构框架,即 layer.position + layer.frameNSLog(@"初始化后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));aView.layer.position = CGPointMake(25, 25);NSLog(@"修改layer.position后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));// 修改frame的本质其实是修改layer.frame,所以修改layer.frame就是修改frameaView.layer.frame = CGRectMake(50, 50, 100, 100);NSLog(@"接着修改frame后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));aView.layer.position = CGPointMake(0, 0);NSLog(@"再次修改layer.position后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));*//**输出:2023-01-06 15:08:19.506259+0800 Demo[8428:1407276] 初始化后,aView.layer的frame值:{{50, 50}, {50, 50}},aView.layer的anchorPoint值:{0.5, 0.5},aView.layer的position值:{75, 75},2023-01-06 15:08:19.506564+0800 Demo[8428:1407276] 修改layer.position后,aView.layer的frame值:{{0, 0}, {50, 50}},aView.layer的anchorPoint值:{0.5, 0.5},aView.layer的position值:{25, 25},2023-01-06 15:08:19.506714+0800 Demo[8428:1407276] 接着修改frame后,aView.layer的frame值:{{50, 50}, {100, 100}},aView.layer的anchorPoint值:{0.5, 0.5},aView.layer的position值:{100, 100},2023-01-06 15:08:19.506824+0800 Demo[8428:1407276] 再次修改layer.position后,aView.layer的frame值:{{-50, -50}, {100, 100}},aView.layer的anchorPoint值:{0.5, 0.5},aView.layer的position值:{0, 0},关于position,根据输出结果,描述如下:1、确定好frame后,当前view的中心点,在 父view 上的坐标,即为position的坐标值;2、设置position坐标(比如设置为(25,25)),都是中心点带动view在 父view 上移动,以旧的position坐标(75,75)开始向新的position坐标(25,25)移动,此时view在 父view 上的位置会发生改变,即frame的(x,y)发生改变;3、如果view的frame发生变化,position的值会改变但还是中心点,此时中心点在 父view 上的坐标,即为position的新的坐标值;4、再次设置position坐标(比如设置为(0,0)),即旧的position坐标(100,100)开始向新的position坐标(0,0)移动,此时view在 父view 上的位置会发生改变,即frame的(x,y)发生改变;记住:(不修改锚点anchorPoint的前提下)1、position的坐标值是view的中心点在 父view 上的位置,以 父view 为坐标系;2、frame的改变会修改position的坐标值,但依然是中心点在 父view 上的坐标值;3、position的修改,会对frame造成修改,但不会修改锚点的值;*/// 场景三:探究修改 锚点 + 结构框架,即 layer.position + layer.frame 后,对 layer.position的影响NSLog(@"初始化后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));aView.layer.anchorPoint = CGPointMake(1.5, 1.5);NSLog(@"修改layer.anchorPoint后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));// 修改frame的本质其实是修改layer.frame,所以修改layer.frame就是修改frameaView.layer.frame = CGRectMake(50, 50, 100, 100);NSLog(@"接着修改frame后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));//    aView.layer.position = CGPointMake(25, 25);
//    NSLog(@"修改layer.position后,aView.layer的frame值:%@,aView.layer的anchorPoint值:%@,aView.layer的position值:%@,", NSStringFromCGRect(aView.layer.frame), NSStringFromCGPoint(aView.layer.anchorPoint), NSStringFromCGPoint(aView.layer.position));UIView *cView = [[UIView alloc] initWithFrame:CGRectMake(150, 150, 100, 100)];cView.backgroundColor = [UIColor blueColor];[bView.layer addSublayer:cView.layer];NSLog(@"初始化后,cView.layer的frame值:%@,cView.layer的anchorPoint值:%@,cView.layer的position值:%@,", NSStringFromCGRect(cView.layer.frame), NSStringFromCGPoint(cView.layer.anchorPoint), NSStringFromCGPoint(cView.layer.position));/**输出:2023-01-06 16:23:09.769934+0800 Demo[8469:1412907] 初始化后,aView.layer的frame值:{{50, 50}, {50, 50}},aView.layer的anchorPoint值:{0.5, 0.5},aView.layer的position值:{75, 75},2023-01-06 16:23:09.770143+0800 Demo[8469:1412907] 修改layer.anchorPoint后,aView.layer的frame值:{{0, 0}, {50, 50}},aView.layer的anchorPoint值:{1.5, 1.5},aView.layer的position值:{75, 75},2023-01-06 16:23:09.770258+0800 Demo[8469:1412907] 接着修改frame后,aView.layer的frame值:{{50, 50}, {100, 100}},aView.layer的anchorPoint值:{1.5, 1.5},aView.layer的position值:{200, 200},2023-01-06 16:23:09.770406+0800 Demo[8469:1412907] 初始化后,cView.layer的frame值:{{150, 150}, {100, 100}},cView.layer的anchorPoint值:{0.5, 0.5},cView.layer的position值:{200, 200},关于修改 锚点 + 结构框架,即 layer.position + layer.frame 后,对 layer.position的影响,根据输出结果,描述如下:1、确定好frame后,当前view的中心点,就是view的默认锚点(0.5,0.5),也是position的坐标值;2、设置锚点(比如设置为(1.5,1.5)),此时view在 父view 上的位置会发生改变,即frame的(x,y)发生改变,但position的坐标值未改变,依然是默认锚点(0.5,0.5)对应的坐标值;3、view的frame改变,锚点的值(1.5,1.5)不会改变且还是中心点,但position的坐标值发生了改变,取得是view当前位置下,根据中心点,也就是新锚点(1.5,1.5)找到默认锚点(0.5,0.5)对应的坐标值;4、根据cView的输出结果,得到第3条的验证;记住:1、position的坐标值是跟默认锚点(0.5,0.5)一一对应的,即两者可以互相得到彼此的位置;2、如果先改变锚点值,再改变frame,需要先确定当前新锚点(即中心点)位置下,默认锚点(0.5,0.5)的位置,即可确认position的坐标值;3、锚点anchorPoint、position的修改,都会对frame造成修改;4、position的位置在哪儿,默认锚点(0.5,0.5)的位置就在哪儿,或者默认锚点(0.5,0.5)的位置就在哪儿,position的位置在哪儿;5、锚点anchorPoint指的就是view的中心点,position指的是默认锚点(0.5,0.5)的位置,position这个点不一定在 view 上;6、锚点anchorPoint、position都是一个点,带动整个view在路线上运动;*/// 添加横分割线for (int i = 0; i < 12; i++) {UIView *hengLineV = [[UIView alloc] initWithFrame:CGRectMake(0, i*50, [UIScreen mainScreen].bounds.size.width, 1)];hengLineV.backgroundColor = [UIColor lightGrayColor];[self.view addSubview:hengLineV];}// 添加竖分割线for (int i = 0; i < 8; i++) {UIView *shuLineV = [[UIView alloc] initWithFrame:CGRectMake(i*50, 0, 1, [UIScreen mainScreen].bounds.size.height)];shuLineV.backgroundColor = [UIColor lightGrayColor];[self.view addSubview:shuLineV];}

Demo样式图:

 


http://chatgpt.dhexx.cn/article/F1stUIkl.shtml

相关文章

anchorPoint

OS开发UI篇—CAlayer层的属性 一、position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性&#xff1a;position和anchorPoint property CGPoint position; 用来设置CALayer在父层中的位置 以父层的左上角为原点(0, 0) property CGPoint anchorPoint; 称为“定位点”、“…

iOS动画小课堂:定点缩放弹窗(利用锚点anchorPoint进行实现)包含完整demo

文章目录 前言I 基础知识 (CALayer)1.1 anchorPoint1.2 positionII iOS开发中常用的动画(定点缩放弹窗)2.1 核心代码2.2 完整demo源码see also前言 iOS开发中常用的动画(定点缩放弹窗)的应用场景: 会员详情的右侧下拉操作菜单 浏览器的右侧下拉菜单

UIView的bounds、frame、center/position、anchorPoint的关系

视图的frame&#xff0c;bounds和center属性仅仅是存取方法&#xff0c;当操纵视图的frame&#xff0c;实际上是在改变位于视图下方CALayer的frame&#xff0c;不能够独立于图层之外改变视图的frame。 对于视图或者图层来说&#xff0c;frame并不是一个非常清晰的属性&#xff…

彻底理解position与anchorPoint

原文 http://www.cnblogs.com/benbenzhu/p/3615516.html 引言 相信初接触到CALayer的人都会遇到以下几个问题&#xff1a; 为什么修改anchorPoint会移动layer的位置&#xff1f; CALayer的position点是哪一点呢? anchorPoint与position有什么关系&#xff1f; 我也迷惑过&…

彻底弄清 anchorPoint 和 position

最近在研读《iOS Core Animation Advanced Techniques》这一本书&#xff0c;想系统地学习下关于 CALayer、Transition、以及动画等知识点。大家可以在 gitbook 上面找到该书的翻译版本。 传送门 在读到图层几何学这一章的时候&#xff0c;了解到了两个概念&#xff1a;anc…

Cocos2dx学习笔记9:cocos2dx锚点(Anchor Point)

锚点(AnchorPoint)是相对坐标&#xff0c;通常用来定义物体内部的点&#xff0c;在cocos2dx中&#xff0c;一般都是以加载精灵来实现游戏元素的表现&#xff0c;而精灵一般都是对应的一张图片资源。 我们在设置精灵位置的时候&#xff0c;要设置精灵中的锚点来和我们的坐标点相…

Anchorpoints学习笔记:

Anchor Detr学习笔记&#xff1a; 文章目录 Anchor Detr学习笔记&#xff1a;1.首先介绍下什么叫锚点&#xff08;Anchor point&#xff09;2.再来介绍下什么叫DETR3.Anchor Detr 1.首先介绍下什么叫锚点&#xff08;Anchor point&#xff09; ​   Anchor point就类似一张钉…

数学篇(三)向量的基本运算

1.平面向量 1.1平面向量的加法运算 两个向量&#xff0c;&#xff1b; 向量满足四边形法则&#xff1b; 1.2平面向量的乘法运算 两个向量&#xff0c;&#xff1b; 向量乘表示为 ; 相比于向量加运算&#xff0c;向量乘运算要复杂点&#xff0c;很难看明白向量乘的几何意…

2. 数据类型、向量、向量索引、向量修改、向量运算

b站课程视频链接&#xff1a;https://www.bilibili.com/video/BV19x411X7C6?p1 腾讯课堂(最新&#xff0c;但是要花钱&#xff0c;我花99元&#x1f622;&#x1f622;买了&#xff0c;感觉不错&#xff09;&#xff1a;https://ke.qq.com/course/3707827#term_id103855009 &a…

matlab 向量的基本运算

本文主要参考&#xff1a;王沫然编著的MATLAB与科学计算&#xff08;第2版&#xff09; 博客文章&#xff1a;点击打开链接 1、向量生成 1.1、直接输入 1.2、 xx0:step:xn 1.3、线性等分向量—linespace 1.4、对数等分向量—logspace 2、向量运算 21、加&#xff08;减&#x…

向量复习(一):定义、求解、四则运算、点积和叉积

向量复习&#xff08;一&#xff09; 1. 向量的定义2. 向量的表示3. 向量的求解4. 向量的四则运算4.1 加法4.2 减法4.3 乘法和除法 5. 点积和叉积5.1 点积5.2 叉积 6. 模的求解7. 附录&#xff1a;代码8. 免责声明 首先&#xff0c;我们先来复习一下二维空间几何求交涉及的向量…

向量的基本运算专题

关于向量 高中数学必修 4 4 4说: 几何向量是线性空间中有大小与方向的量。 放图理解一下&#xff1a; 如上图所示&#xff0c;向量可以形象的用一根箭头表示。箭头所指代表向量的方向&#xff0c;线段的长度代表向量的大小。 在 O I OI OI中&#xff0c;我们简化了一下向量的…

向量加减法

常用向量&#xff1a; 2D向量 v < x , y > 3D向量 v < x , y , z > 4D向量 v < x , y , z , w > (也称作齐次坐标) 向量加减法&#xff0c;各维度都是类似的。 向量加法&#xff1a; 向量加法的和就是以两个向量的边作为平行四边形长边的对角线表示 …

两个向量的点乘和叉乘怎么算_数学基础 —— 向量运算:点乘和叉乘

向量的点乘:a * b 公式&#xff1a;a * b |a| * |b| * cosθ 点乘又叫向量的内积、数量积&#xff0c;是一个向量和它在另一个向量上的投影的长度的乘积&#xff1b;是标量。 点乘反映着两个向量的“相似度”&#xff0c;两个向量越“相似”&#xff0c;它们的点乘越大。 向量…

向量的运算

向量 有大小&#xff0c;有方向的量&#xff0c;记为 a ⃗ \vec{a} a 基本运算 向量的加法 首尾相连法则(当然还有其他名字:平行四边形法则、三角形法则) 如图 a ⃗ b ⃗ \vec{a}\vec{b} a b 就相当于将 b ⃗ \vec{b} b 的起点平移到 a ⃗ \vec{a} a 的终点( a ⃗ 、 b ⃗…

数学基础 —— 向量运算(叉乘)

向量的叉乘&#xff0c;即求同时垂直两个向量的向量&#xff0c;即c垂直于a&#xff0c;同时c垂直于b&#xff08;a与c的夹角为90&#xff0c;b与c的夹角为90&#xff09; c ab &#xff08;a.y*b.z-b.y*a.z , b.x*a.z-a.x*b.z , a.x*b.y-b.x*a.y&#xff09; 以上图为例a…

向量化运算

向量化运算OLAP Clickhouse、dorisDB(starrocks)、spark(2.x以后)、 hive&#xff08;0.13.0以后&#xff09;、presto SIMD SIMD全称Single Instruction Multiple Data&#xff0c;单指令多数据流&#xff0c;能够复制多个操作数&#xff0c;并把它们打包在大型寄存器的一组…

常用的几种向量运算法则

a ⋅ b b ⋅ a ab ba a⋅bb⋅a a ( b ⋅ c ) ≠ ( a ⋅ b ) c a(bc)≠(ab)c a(b⋅c)​(a⋅b)c ( a b ) ⋅ c a ⋅ c b ⋅ c (ab)c acbc (ab)⋅ca⋅cb⋅c a b − b a ab - ba ab−ba ( r a ) b a ( r b ) r ( a b ) , 其 中 r 是 标 量 (ra)ba(rb)r(ab),其中r是…

空间向量及其运算

平面内任意向量 p \boldsymbol{p} p都可以用两个不共线的向量 a \boldsymbol{a} a b \boldsymbol{b} b来表示&#xff0c;这是平面向量的基本定理。类似的我们定义&#xff0c;如果三个向量不共面&#xff0c;那么对空间中的任一向量 p \boldsymbol{p} p&#xff0c;存在有序实…

数学-向量运算

1、外积&#xff08;差乘&#xff09; 定义&#xff1a;向量a与b的外积ab是一个向量&#xff0c;其长度等于|ab| |a||b|sin∠(a,b)&#xff0c;其方向正交于a与b。并且&#xff0c;(a,b,ab)构成右手系。 特别地&#xff0c;0a a0 0.此外&#xff0c;对任意向量a&#xff0c…