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

article/2025/10/22 23:36:01

视图的frame,bounds和center属性仅仅是存取方法,当操纵视图的frame,实际上是在改变位于视图下方CALayerframe,不能够独立于图层之外改变视图的frame

对于视图或者图层来说,frame并不是一个非常清晰的属性,它其实是一个虚拟属性,是根据bounds,position和transform计算而来,所以当其中任何一个值发生改变,frame都会变化。相反,改变frame的值同样会影响到他们当中的值

基础属性frame、bounds、center/position

  • frame指的是:该view在父view坐标系统中的位置和大小。(参照点是父亲的坐标系统)
  • bounds指的是:该view在本身坐标系统中的位置和大小。(参照点是本身坐标系统)
  • center/position指的是:该view的锚点anchorPoint在父view坐标系统中的位置。(参照点是父亲的坐标系统)
  • 示例代码:显示橙色View的属性
    在这里插入图片描述
    NSLog(@"frame.size.width:%f",self.View2.frame.size.width);NSLog(@"frame.size.height:%f",self.View2.frame.size.height);NSLog(@"frame.origin.x:%f",self.View2.frame.origin.x);NSLog(@"frame.origin.y:%f",self.View2.frame.origin.y);NSLog(@"bounds.size.width:%f",self.View2.bounds.size.width);NSLog(@"bounds.size.height:%f",self.View2.bounds.size.height);NSLog(@"bounds.origin.x:%f",self.View2.bounds.origin.x);NSLog(@"bounds.origin.y:%f",self.View2.bounds.origin.y);NSLog(@"center.x:%f",self.View2.center.x);NSLog(@"center.y:%f",self.View2.center.y);
  • 输出结果:
2022-02-15 14:45:57.793675+0800 Music[10381:151978] frame.size.width:240.000000
2022-02-15 14:45:57.793755+0800 Music[10381:151978] frame.size.height:128.000000
2022-02-15 14:45:57.793816+0800 Music[10381:151978] frame.origin.x:174.000000
2022-02-15 14:45:57.793870+0800 Music[10381:151978] frame.origin.y:272.000000
2022-02-15 14:45:57.793908+0800 Music[10381:151978] bounds.size.width:240.000000
2022-02-15 14:45:57.793950+0800 Music[10381:151978] bounds.size.height:128.000000
2022-02-15 14:45:57.793998+0800 Music[10381:151978] bounds.origin.x:0.000000
2022-02-15 14:45:57.794027+0800 Music[10381:151978] bounds.origin.y:0.000000
2022-02-15 14:45:57.794070+0800 Music[10381:151978] center.x:294.000000
2022-02-15 14:45:57.794108+0800 Music[10381:151978] center.y:336.000000

在这里插入图片描述

UIView属性是CALayer属性的映射

  • center其实就是映射CALayerposittion
  • framebounds分别映射CALayerframebounds
UIView属性CALayer属性属性说明
frameframeview在父view坐标系统中的位置和大小。(参照点是父亲的坐标系统)
boundsboundsbounds指的是:该view在本身坐标系统中的位置和大小。(参照点是本身坐标系统)
centerpositionview的中心点在父view坐标系统中的位置。(参照点是父亲的坐标系统)

在这里插入图片描述

anchorPoint是独立的

@property CGPoint position;	  // 位置 设置anchorPoint在父控件的位置
@property CGPoint anchorPoint;// 定位点 以本身坐标系为核心// 取值范围(0-1)默认(0.5,0.5)为中心

anchorPoint、position、frame之间的关系:

  • framepositionanchorPoint(还有transform)影响,修改任意一个都使frame改变
  • positionframe影响,两者相关绑定
  • anchorPoint不受任何因素影响
	frame.origin.x = position.x - anchorPoint.x * bounds.size.width;  frame.origin.y = position.y - anchorPoint.y * bounds.size.height; 

修改anchorPoint后,视图保持不变的解决方法

  	方法1// 保存旧oldFrame的数值CGRect oldFrame = view.frame;// 修改锚点view.layer.anchorPoint = newAnchorPoint;// 这个时候position不变,anchorPoint改变,Frame改变,视图改变// 把frame重置到原来的值,position跟着修改到新的位置,视图保持不变view.frame = oldFrame;
	方法2// 可以直接修改position到正确的位置CGPoint oldOrigin = view.frame.origin;view.layer.anchorPoint = anchorPoint;CGPoint newOrigin = view.frame.origin;// 计算出position在x、y上的移动CGPoint transition;transition.x = newOrigin.x - oldOrigin.x;transition.y = newOrigin.y - oldOrigin.y;// position抵消掉x、y上的移动view.center = CGPointMake (view.center.x - transition.x, view.center.y - transition.y);

transform使用的坑

  • framepositionanchorPointboundtransform影响,修改任意一个都使frame改变
  • frame是一个动态属性,不要在视图变形(指的是transform)之后继续使用frame,因为它不能正确反映视图的实际位置,改为使用bounds + center
  • 官方文档是这么说的👇
    在这里插入图片描述

参考资料

这将是你最后一次纠结position与anchorPoint
iOS动画-CALayer布局属性详解


http://chatgpt.dhexx.cn/article/2nxRgF4v.shtml

相关文章

彻底理解position与anchorPoint

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

彻底弄清 anchorPoint 和 position

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

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

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

Anchorpoints学习笔记:

Anchor Detr学习笔记: 文章目录 Anchor Detr学习笔记:1.首先介绍下什么叫锚点(Anchor point)2.再来介绍下什么叫DETR3.Anchor Detr 1.首先介绍下什么叫锚点(Anchor point) ​   Anchor point就类似一张钉…

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

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

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

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

matlab 向量的基本运算

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

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

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

向量的基本运算专题

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

向量加减法

常用向量&#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…

向量

向量对数学家是数字列表 向量对程序员是数组 数学上区分向量和标量 速度和位移是向量&#xff0c;速率和长度是标量 向量的维度&#xff1a;数的个数 写法&#xff1a;横着写行向量&#xff0c;竖着写列向量 几何意义 大小&#xff1a;向量的长度 方向&#xff1a;空间中的…

MATLAB——向量的运算

文章目录 一.向量的定义&#xff1a;***向量的生成方法&#xff1a;直接输入法、冒号法和利用MATLAB函数创建三种方法。*** 二.向量元素的引用&#xff1a;三.向量的定义与赋值&#xff1a;四.向量的点积运算&#xff1a;向量的叉积&#xff1a;向量的混合积&#xff1a; 一.向…

【math】 向量运算:叉乘

文章目录 1 定义2 几何意义3 拓展应用 1 定义 cab 向量的叉乘&#xff0c;即求同时垂直两个向量的向量&#xff0c;即c垂直于a&#xff0c;且c垂直于b。 假设向量a(a.x,a.y,a.z),b(b.x,b.y,b.z),c(c.x,c.y,c.z)&#xff0c; 则cab(a.x,a.y,a.z)(b.x,b.y,b.z)(a.y * b.z - a…