CN102737117B

CN102737117B - 图片展示方法及系统

Info

Publication number: CN102737117B
Application number: CN201210171990.6A
Authority: CN
Inventors: 孙亮
Original assignee: Beijing Shenzhou Taiyue Software Co Ltd
Current assignee: Beijing Shenzhou Taiyue Software Co Ltd
Priority date: 2012-05-30
Filing date: 2012-05-30
Publication date: 2015-07-08
Anticipated expiration: 2032-05-30
Also published as: CN102737117A

Abstract

本发明公开了一种图片展示方法，涉及互联网技术领域，包括以下步骤：S1：将N张图片分别绘制在一段圆弧上的N个点的位置；S2：将每张图片分别旋转角度α_i，α_i为第i张图片所在点处的圆弧的切线与通过所述圆弧的两端点的直线所成的夹角。还公开了一种图片展示系统。本发明使得图片呈拱形展示，且更具有层次感和立体感，提升了用户体验。

Description

图片展示方法及系统

技术领域

本发明涉及互联网技术领域，特别涉及一种图片展示方法及系统。

背景技术

网络相册是网站为用户提供的个人相片展示、存放的平台。随着互联网技术的飞速发展，网络相册已经在网上随处可见，大家在浏览一个相册内容时，一个相册的图片可能很多，所以大家在纵观相册内容时，会看到图片的缩小图，整齐排列在你眼前，如同图片的目录一般。

传统相册图片的排列方式，大多是整齐平面的排列，很显然，传统排列方式太过单调，千篇一律，无层次感、立体感，观看效果不够，用户体验差。

发明内容

（一）要解决的技术问题

本发明要解决的技术问题是：如何实现一种具有层次感和立体感的图片展示方式，以提高用户体验。

（二）技术方案

为解决上述技术问题，本发明提供了一种图片展示方法，包括以下步骤：

S1：将N张图片分别绘制在一段圆弧上的N个点的位置；

S2：将每张图片分别旋转角度α _i，α _i为第i张图片所在点处的圆弧的切线与通过所述圆弧的两端点的直线所成的夹角。

其中，所述N个点将所述圆弧划分成N﹣1个长度相等的圆弧。

其中，所述图片的宽度小于所述圆弧上N个点中相邻两个点的距离。

其中，所述图片为缩略图。

其中，所述步骤S1之前还包括：计算所述圆弧上N个点的坐标的步骤。

其中，若展示多行或多列图片，则在图片的显示界面确定多条圆弧，每条圆弧展示一行或一列图片。

其中，若展示多行图片，以所述显示界面的水平中线为界，位于所述水平中线上方的圆弧的圆心在其对应圆弧的上方，位于所述水平中线下方的圆弧的圆心在其对应圆弧的下方；若展示多列图片，以所述显示界面的竖直中线为界，位于所述竖直中线左方的圆弧的圆心在其对应圆弧的左方，位于所述竖直中线右方的圆弧的圆心在其对应圆弧的右方。

其中，若展示多行图片，所述多条圆弧以所述水平中线对称；若展示多列图片，所述多条圆弧以所述竖直中线对称。

本发明还提供了一种图片展示系统，包括：

图片绘制模块，用于将N张图片分别绘制在一段圆弧上的N个点的位置；

图片变形模块，用于将每张图片分别旋转角度α _i，α _i为第i张图片所在点处的圆弧的切线与通过所述圆弧的两端点的直线所成的夹角。

其中，所述系统还包括：

坐标计算模块，用于计算所述圆弧上N个点的坐标。

（三）有益效果

本发明的图片展示方法将图片的展示位置用圆弧上的坐标来确定，并将图片相应的旋转，使图片呈沿圆弧的一行或一列展示，尤其是在展示多行或多列图片时，使得图片呈拱形展示，且更具有层次感和立体感，提升了用户体验。

附图说明

图1是本发明实施例的一种图片展示方法流程图；

图2是图1中步骤S201中划分圆弧，获取图片排列时的位置示意图；

图3是采用本发明的图片展示方法展示图片的示意图。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

如图1所示，本发明实施的图片展示方法包括：

步骤S201，将N张图片分别绘制在一段圆弧上的N个点的位置。具体地，在图片的显示界面上确定一段圆弧，将圆弧分成N﹣1段，该N﹣1段圆弧确定出圆弧上的N个点（包括圆弧的起始点和终止点）。在图片的显示界面上确定该圆弧时已经获得了圆心坐标、半径、圆心角、起始点坐标（或终止点坐标），将圆弧分段时能够获得每段对应的长度或是圆心角β _j（j=1,2，…,N﹣1），从而根据现有的几何运算可以计算得到第i（i=1,2，…,N）张图片所在第i点的坐标及该点处的圆弧的切线与通过该圆弧的两端点的直线所成的夹角α _i。将第i张图片绘制在第i点的位置，绘制时可以将图片上的任一点（如图片左上角的点或中心点）与第i点重合，。

步骤S202，将每张图片分别旋转角度α _i，以实现对该圆弧上的图片拱形展示。

进一步地，为了使拱形展示图片更均匀，在步骤S201中将圆弧划分成长度相等的N﹣1段，即每段对应的圆心角β _j都相等，这样根据圆心角及切线与通过该圆弧的两端点的直线所成的夹角的角度关系很容易计算出第i点处的圆弧的切线与通过该圆弧的两端点的直线所成的夹角α _i，从而也简化了计算复杂度。下面以展示一行图片（5张图片）为例来说明。

如图2所示，将圆弧分成相等的4段，该4段圆弧确定出圆弧上的5个点A、B、C、D和E（图为俯视图，纵轴为z轴，横轴为x轴）。每段弧对应的圆心角为α，则可知点B切线和通过该圆弧的两端点的直线（即直线AE）所成的夹角为﹣α，点A切线和直线AE所成的夹角为﹣2α，C点切线和直线AE所成的夹角是0，D点切线和直线AE所成的夹角是α，E点切线和直线AE所成的夹角是2α，如果为更多个点的情况，以此类推（数值上为3α,4α……）。本实施例中由于是在显示界面上水平展示一行图片，直线AE也是水平线。

已知角度关系，只需要给出圆弧所对应的圆心角和圆的半径r，即可算出每个点的坐标。如起始点A的坐标为（0，0），α的弧度形式为len。通过角度关系可以推导出其余四个点的坐标：

B： x=2 × sin(len / 2) ×cos(1.5 × len) × r

z=2 × sin(len / 2) × sin(1.5 × len) × r;

C： x=2 × sin(len) × cos(len) × r

z=2 × sin(len) × sin(len) × r;

D： x=2 × sin(len) × cos(len) × r + (2 × sin(len) × cos(len) × r - 2 × sin(len / 2) × cos(1.5 × len) × r)

z=2 × sin(len / 2) × sin(1.5 × len) × r;

E：x=4 × sin(len) × cos(len) × r;

z=0。

进一步地，为了避免图片之间相互重叠，图片的宽度小于等于圆弧上绘制图片的N个点中相邻两点间的距离。

若展示多行或多列图片，则在图片的显示界面确定多条圆弧，以每条圆弧上的绘制图片的点为基准按上述方法展示一行或一列图片。进一步地，为了使整个图片显示界面的图片呈拱形排列，以显示界面的水平中线为界，位于水平中线上方的圆弧的圆心在其对应圆弧的上方，位于水平中线下方的圆弧的圆心在其对应圆弧的下方。若展示多列图片，以显示界面的竖直中线为界，位于竖直中线左方的圆弧的圆心在其对应圆弧的左方，位于竖直中线右方的圆弧的圆心在其对应圆弧的右方。更进一步地，为了使图片展示更均匀，若展示多行图片，在确定多条圆弧时，多条圆弧以水平中线对称；若展示多列图片，在确定多条圆弧时，多条圆弧以竖直中线对称。最终展示效果如图3所示。

本发明还提供了一种图片展示系统，包括：图片绘制模块，用于将N张图片分别绘制在一段圆弧上的N个点的位置；图片变形模块，用于将每张图片分别旋转角度α _i，α _i为第i张图片所在点处的圆弧的切线与通过所述圆弧的两端点的直线所成的夹角。该系统还包括：标计算模块，用于计算所述圆弧上N个点的坐标。

本发明的方法和系统可广泛用于计算机、移动终端等显示界面上的图片展示，尤其是对缩略图的展示。其展示效果具有层次感和立体感，提高了用户体验。

以上实施方式仅用于说明本发明，而并非对本发明的限制，有关技术领域的普通技术人员，在不脱离本发明的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本发明的范畴，本发明的专利保护范围应由权利要求限定。

Claims

1.一种图片展示方法，其特征在于，包括以下步骤：

S1：将N张图片分别绘制在一段圆弧上的N个点的位置，所述N个点将所述圆弧划分成N﹣1个长度相等的圆弧；

S2：将每张图片分别沿所述圆弧的水平方向旋转角度α_i，α_i为第i张图片所在点处的圆弧的切线与通过所述圆弧的两端点的直线所成的夹角；

其中，步骤S1还包括：确定该圆弧的圆心坐标、半径、圆心角、起始点坐标或终止点坐标，将圆弧分段时获得每段对应的长度或是圆心角β_j，j＝1、2、…、N﹣1，计算得到第i张图片所在第i点的坐标及该点处的圆弧的切线与通过该圆弧的两端点的直线所成的夹角α_i；将第i张图片绘制在第i点的位置，绘制时将该张图片上的任一点与第i点重合，所述图片的宽度小于所述圆弧上N个点中相邻两个点的距离。

2.如权利要求1所述的图片展示方法，其特征在于，所述图片为缩略图。

3.如权利要求1所述的图片展示方法，其特征在于，所述步骤S1之前还包括：获取所述圆弧上N个点的坐标的步骤。

4.如权利要求1～3中任一项所述的图片展示方法，其特征在于，若展示多行或多列图片，则在图片的显示界面确定多条圆弧，每条圆弧展示一行或一列图片。

5.如权利要求4所述的图片展示方法，其特征在于，若展示多行图片，以所述显示界面的水平中线为界，位于所述水平中线上方的圆弧的圆心在其对应圆弧的上方，位于所述水平中线下方的圆弧的圆心在其对应圆弧的下方；若展示多列图片，以所述显示界面的竖直中线为界，位于所述竖直中线左方的圆弧的圆心在其对应圆弧的左方，位于所述竖直中线右方的圆弧的圆心在其对应圆弧的右方。

6.如权利要求5所述的图片展示方法，其特征在于，若展示多行图片，所述多条圆弧以所述水平中线对称；若展示多列图片，所述多条圆弧以所述竖直中线对称。

7.一种图片展示系统，其特征在于，包括：

图片绘制模块，用于将N张图片分别绘制在一段圆弧上的N个点的位置，所述N个点将所述圆弧划分成N﹣1个长度相等的圆弧；

图片变形模块，用于将每张图片分别沿所述圆弧的水平方向旋转角度α_i，α_i为第i张图片所在点处的圆弧的切线与通过所述圆弧的两端点的直线所成的夹角；

图片绘制模块还包括：确定该圆弧的圆心坐标、半径、圆心角、起始点坐标或终止点坐标，将圆弧分段时获得每段对应的长度或圆心角β_j，j＝1、2、…、N﹣1，计算得到第i张图片所在第i点的坐标及该点处的圆弧的切线与通过该圆弧的两端点的直线所成的夹角α_i；将第i张图片绘制在第i点的位置，绘制时将图片上的任一点与第i点重合；所述图片的宽度小于所述圆弧上N个点中相邻两个点的距离。

8.如权利要求7所述的图片展示系统，其特征在于，所述系统还包括：

坐标计算模块，用于计算所述圆弧上N个点的坐标。