cocos2dx 实现gallery (二)

来源:互联网 发布:信用卡账单生成软件 编辑:程序博客网 时间:2024/05/21 18:40

        我们先把前面的模型简化,我们最后要看到的是这样:

        

        这个图上,构成这个效果的主要因素有3个。

        一、x方向的位置,就是图上绿点标记的地方,锚点0.5。(这里我不需要Y方向的变化,需要的也可以自己类推)

        二、大小,有了大小的差别,就有了远近的差别

        三、zorder,这个是决定遮挡关系,然后我们就会产生一种立体的错觉

        (PS:其实图上,每个item的图片还用了投影。。。但是这是美工的事情)


        我们再来看决定上面3个因素的东西(俯视图):

        

        按标准坐标系,x轴正方向为0度,x轴负方向为180度。

        图上的x,决定的是x方向的位置,图上的Y,是距离我们的距离,距离越远,自然就应该越小。而且距离我们越远,也就应该越靠后,zorder越低。


        然后就应该补习下透视相关的东西了。请参考这里,只需要知道视椎体就行了。然后我们看侧面图:

        

        为了方便,直接取Y轴所在平面为视平面,所做连线与Y轴的焦点,就是实际显示大小。这里涉及3个变量。物体距视点的距离d,视点到视平面之间的距离d1,视平面到物体的距离dx。设物体高度为L,物体显示高度为L'。通过相似三角形,可以轻易的得出L'的长度,但是我们其实只需要scale就够了,所以:

                                  scale =  d1 / (d1+dx)

        但是这个d1和dx又怎么去获取,根据视椎体,有如下:

        

        斜着的那个,就是上面侧面图我们要求的那个。根据相似三角形,又可以轻易得出:

                              scale = d‘ / (d' + dx ')

        这个d'和dx',可以通过俯视图,就是上面一个圆圈圈,那个图算出来。要算这个,涉及3个变量还未知。一是角度,二是圆圈半径,3是上图的d',也就是视点到视平面的距离。简单的说,这3个值只能自己试。。。。不过是有一定规律的

        角度是根据想看多少自己来分布,实际能看到的部分,只有整个园的前半圆,一共180度,加入我想一共放5个,我就按45度分布就行了。

        半径可以推测,比如我想看我全部的半圆,那么直径就是窗口的大小。

        最后一个,主要是涉及一个缩放比例,通过公式可以看出,如果d'越大,那么最前面的item和最后面的item,大小差距就越大,反之差距就越小。




        然后就开始写代码了。。。

        

0 0
原创粉丝点击