当前位置: 首页 > news >正文

UGUI Canvas为Overlay模式下的UI元素的position和localPosition

Transform有position和localPosition属性,这两个分别代表在世界空间的绝对位置和相对于父级物体的相对位置,RectTransform也一样,对于下图中的红色Image,Canvas的分辨率为1125x2436

1. 锚点聚拢且和轴点都在中心点

在这里插入图片描述
在这里插入图片描述

打印其position和localPosition属性
在这里插入图片描述
输出
在这里插入图片描述
分析其原因
因为在当前Canvas为overlay模式的情况下,position就是屏幕坐标,所以坐标系原点在Canvas左下角
而对于localPosition,是相对于父亲的坐标,当前这张Image的父亲是Canvas,而Canvas的中心点和Image重合,所以是(0,0,0)

2. 锚点聚拢在中心,轴点不在

在这里插入图片描述

在这里插入图片描述
输出
在这里插入图片描述

从这里可以看出,X,Y都减去了50,即Image的宽度的一半,说明 这两个坐标的最终计算看的是元素Pivot所在的位置

3. 锚点分开,轴点在中心

在这里插入图片描述
在这里插入图片描述

输出
在这里插入图片描述
和锚点聚拢时的情况一样

4. 锚点分开,轴点不在中心

在这里插入图片描述
在这里插入图片描述

输出
在这里插入图片描述

发现此时的输出和锚点聚拢时不一样,原因在于当在锚点切换面板将锚点从聚拢在中心切换到四角分散时,Image的宽度被改变成了101,即1125 - 512(Left) - 512(Right)=101,打印此时的rect.width也可以发现
在这里插入图片描述
在这里插入图片描述
说明此时Image被自动拉伸了
将Left和Right改回正确的值
在这里插入图片描述
输出
在这里插入图片描述
依旧保持一致

5. 总结

综上所述,在Canvas为Overlay模式下,position是以屏幕左下角为原点,到元素Pivot的向量
在这里插入图片描述

localposition是以父物体的中心为原点,到元素Pivot的向量
在这里插入图片描述

相关文章:

  • 2月14日笔记
  • 安装OpenJDK21(linux、macos)
  • 站群服务器和普通服务器有哪些不同之处?
  • 【分布式理论9】分布式协同:分布式系统进程互斥与互斥算法
  • 软著申请(一)实名认证【2025年最新版】
  • 在本地校验密码或弱口令 (windows)
  • 汽车 OTA 升级:提升下载与升级速度,优化用户体验
  • iOS主要知识点梳理回顾-4-运行时类和实例的操作
  • MAC 系统关屏幕后电量消耗极快 Wake Requests
  • 服务器中部署大模型DeepSeek-R1 | 本地部署DeepSeek-R1大模型 | deepseek-r1部署详细教程
  • Win10环境借助DockerDesktop部署Open web UI集成DeepSeek
  • 【二叉树学习7】
  • 【NLP 21、实践 ③ 全切分函数切分句子】
  • webpack打包优化策略
  • SpringMVC环境搭建
  • 数据库——韩顺平(每日进行更新,直至更完)
  • 【Git】三、远程管理
  • Java 大视界 -- 深度洞察 Java 大数据安全多方计算的前沿趋势与应用革新(52)
  • MySQL数据库误删恢复_mysql 数据 误删
  • 物联网领域的MQTT协议,优势和应用场景
  • 浙江官宣:五一假期,没电、没气、没油车辆全部免费拖离高速
  • 王毅:携手做世界和平与发展事业的中流砥柱
  • 解放日报头版聚焦“人民城市”:共建共享展新卷
  • 吕国范任河南省人民政府副省长
  • 国家发改委:是否进口美国饲料粮、油料不会影响我国粮食供应
  • 国家发改委答澎湃:将建立和实施育儿补贴制度,深入实施提振消费专项行动