UI坐标变换/转换

简介:



InverseTransformPoint

Transform.InverseTransformPoint :相对于谁的坐标。如果是相对2D UI,请使用localposition,如果是3D场景,请使用position

文档

http://www.ceeger.com/Script/Transform/Transform.InverseTransformPoint.html

 

UI结构

imageimage

UIRoot/PanelRoot/Center/Battle/BuffsOnHero/BuffIconTemplate  (这是buff图标)

UIRoot/PanelRoot/Center/Battle/BuffDetail  (这是buff详细信息窗口)

 

UI坐标变换需求

BuffDetail的坐标和BuffIconTemplate顶对齐,就是按住不同的图标,弹出窗口的Y和图标的Y相同。

image

 

思路分析

BuffDetail  和BuffIconTemplate  的父节点,同级(这一点很重要)

1、获得BuffIconTemplate的UI坐标的Y设置成BuffDetail的Y

涉及到UI坐标的转换。

 

实现方法

//获取图标相对于父节点的UI坐标
var
localPos = transform.InverseTransformPoint(BuffIconTemplate.transform.position); //窗体和Buff图标的坐标顶对齐,和buffTable的右侧有一个offset var offX = localPos.x - BuffWinBg.width * 0.5f - 70;
BuffDetailWindow.localPosition = new Vector3(offX, localPos.y, localPos.z);

解释:Transform.InverseTransformPoint 相当于把buffIconTemplate从父节点拉出来,获取它在UI上的localposition,如下图所示

image

 

附加资料

UICamera下的gameobject 使用localpostion

SceneCamera下的gameobject 使用wordpostion


本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/4167187.html,如需转载请自行联系原作者

相关文章
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
304 0
【Three.js入门】图形用户界面GUI、BufferGeometry创建矩形、随机生成多个随机颜色的三角形
【Three.js入门】图形用户界面GUI、BufferGeometry创建矩形、随机生成多个随机颜色的三角形
251 0
|
编译器 API 图形学
【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
157 0
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系
384 0
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系
|
Windows
Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小
上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。
|
定位技术
Threejs使用Shapes实现不规则几何体,自定义绘图
Threejs使用Shapes实现不规则几何体,自定义绘图
1066 0
Threejs使用Shapes实现不规则几何体,自定义绘图
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
案例分享:Qt+OSG三维点云引擎(支持原点,缩放,单独轴或者组合多轴拽拖旋转,支持导入点云文件)
|
计算机视觉
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
|
存储 缓存 Serverless
六、OpenGL 渲染技巧:深度测试、多边形偏移、 混合
OpenGL 渲染技巧:深度测试、多边形偏移、 混合
356 0
六、OpenGL 渲染技巧:深度测试、多边形偏移、 混合
|
机器学习/深度学习
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(一)
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(一)
1426 0
【MATLAB】三维图形绘制 ( 绘制球面 | sphere 函数 | 设置光源 | light 函数 | 相机视线 | view 函数 )(一)

热门文章

最新文章