基础
滚动视图,水平方向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都是一样的处理。非常巧妙。