UGUI 滚动视图结构

基础

滚动视图,水平方向0是左边,垂直方向0是底部。

如图所示,滚动位置是(0,0)的时候,content的底边和viewport的底边重合,content的左边和viewport的底边重合。滚动时候,viewport的位置不变,是content的位置改变,挪动content的位置来实现视图滚动。

xMaxDist 和 yMaxDist 就是最大移动距离。

(移动的距离x, 移动的距离y) / (xMaxDist, yMaxDist) = normalizedPosition

如图所示,现在要把三角形从ContentPos移动到ViewportPos那里。为了方便计算,把viewport和content左下角重合放在一起,先把坐标都转换为相对于左下角(0,0)的坐标。这样一来,

MoveDir = ViewportPos - ContentPos

最后:

normalizedPosition.x = -MoveDir .x / xMaxDist

normalizedPosition.y = -MoveDir .y / yMaxDist

最后要加一个负号,因为前面算出来是个负数,如果是正数不需要移动。如果用MoveDir = ContentPos - ViewportPos,就不用加负号了,这里为了理解方便用的ViewportPos - ContentPos。

如果Content移动了,Content左下角和Viewport左下角不重合,Content内点的位置依旧使用相对于左下角的位置,然后按照MoveDir = ViewportPos - ContentPos计算移动向量,最后计算出normalizedPosition。

NGUI就没有这么严格,视口和内容在同时动,定位是按滚动距离来搞的,没有这个方便。

对齐

就是水平对齐和垂直对齐方式的控制。将content对齐到viewport 对应 content的pivot位置实现,也是设置的normalizedPosition值。

比如水平居中、垂直居上这种效果,content的pivot是(0.5,1),那么就将content对齐到viewport的(0.5, 1)处,也就是将normalizedPosition设置为(0.5,1) 就实现了。

当content 填满viewprot和 未填满 viewport都是一样的处理。非常巧妙。

相关推荐
神码编程2 个月前
【Unity】 HTFramework框架(七十)MultiChoiceDropdown可多选的下拉菜单
unity·游戏引擎·ugui·dropdown·下拉菜单
小贺儿开发4 个月前
Unity3D 图片循环查看器
unity·工具·图片·列表·循环·ugui·互动
小贺儿开发5 个月前
Unity UGUI 可视化热区编辑与交互系统
unity·编辑器·游戏引擎·交互·工具·适配·ugui
君莫愁。6 个月前
【Unity】解决UGUI的Button无法点击/点击无反应的排查方案
unity·c#·游戏引擎·解决方案·ugui·按钮·button
一只一只9 个月前
Unity之UGUI Button按钮组件详细使用教程
unity·游戏引擎·ugui·button·ugui button
wonder1357910 个月前
UGUI重建流程和优化
unity·游戏开发·ugui
wonder1357910 个月前
RectTransform位置计算方法和UI自适应
ui·unity·ugui
scott.cgi10 个月前
「Unity3D」TextMeshPro的TMP_InputField在Android上使用返回键关闭虚拟键盘,会清空文本或恢复上次内容的问题
ugui·textmeshpro·tmp_inputfield·android返回键·虚拟键盘返回·ugui虚拟键盘·inputfield返回键
wonder1357910 个月前
UGUI合批分析和优化方法整理
unity·ugui