CN102737117B - 图片展示方法及*** - Google Patents
图片展示方法及*** Download PDFInfo
- Publication number
- CN102737117B CN102737117B CN201210171990.6A CN201210171990A CN102737117B CN 102737117 B CN102737117 B CN 102737117B CN 201210171990 A CN201210171990 A CN 201210171990A CN 102737117 B CN102737117 B CN 102737117B
- Authority
- CN
- China
- Prior art keywords
- circular arc
- picture
- point
- pictures
- coordinate
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
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 (8)
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个点的坐标。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210171990.6A CN102737117B (zh) | 2012-05-30 | 2012-05-30 | 图片展示方法及*** |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210171990.6A CN102737117B (zh) | 2012-05-30 | 2012-05-30 | 图片展示方法及*** |
Publications (2)
Publication Number | Publication Date |
---|---|
CN102737117A CN102737117A (zh) | 2012-10-17 |
CN102737117B true CN102737117B (zh) | 2015-07-08 |
Family
ID=46992618
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201210171990.6A Active CN102737117B (zh) | 2012-05-30 | 2012-05-30 | 图片展示方法及*** |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102737117B (zh) |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1635546A (zh) * | 2003-12-31 | 2005-07-06 | 财团法人工业技术研究院 | 弧形屏幕的实时影像反扭曲呈像方法 |
CN1910577A (zh) * | 2004-01-15 | 2007-02-07 | 松下电器产业株式会社 | 图像文件一览显示装置 |
CN101539942A (zh) * | 2009-04-30 | 2009-09-23 | 北京瑞汛世纪科技有限公司 | 一种展示互联网内容的方法及装置 |
-
2012
- 2012-05-30 CN CN201210171990.6A patent/CN102737117B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1635546A (zh) * | 2003-12-31 | 2005-07-06 | 财团法人工业技术研究院 | 弧形屏幕的实时影像反扭曲呈像方法 |
CN1910577A (zh) * | 2004-01-15 | 2007-02-07 | 松下电器产业株式会社 | 图像文件一览显示装置 |
CN101539942A (zh) * | 2009-04-30 | 2009-09-23 | 北京瑞汛世纪科技有限公司 | 一种展示互联网内容的方法及装置 |
Also Published As
Publication number | Publication date |
---|---|
CN102737117A (zh) | 2012-10-17 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN104661011B (zh) | 立体图像显示方法及手持终端 | |
JP2013519952A5 (zh) | ||
KR102208183B1 (ko) | 컬러 트윈 애니메이션을 실현하는 방법 및 장치 | |
CN104350487B (zh) | 3d网页的绘制方法和使用该方法的终端 | |
US20160119615A1 (en) | Three dimensional data visualization | |
CN104408754B (zh) | 一种图标合成方法 | |
CN106527915A (zh) | 一种信息处理方法及电子设备 | |
CN104679391B (zh) | 智能手表的图标显示方法及装置 | |
EP2843626B1 (en) | Image rendering method using layers | |
CN105787163A (zh) | 纺织用花型文件的生成***及生成方法 | |
CN103826114B (zh) | 一种立体显示方法及自由立体显示装置 | |
CN103123623B (zh) | 一种提供网页层级信息的方法及装置 | |
CN107767411A (zh) | 一种基于样图的纹理合成方法 | |
CN102737117B (zh) | 图片展示方法及*** | |
CN105812881A (zh) | 一种用户界面的窗口处理方法、***及电视机 | |
CN106131533A (zh) | 一种图像显示方法和终端 | |
CN102117501B (zh) | 一种3d线条绘制方法及装置 | |
Buckingham Shum et al. | Proceedings of the 2nd International Conference on Learning Analytics and Knowledge | |
CN103426419B (zh) | 一种刷新区域的方法及装置 | |
CN103984724B (zh) | 基于空间优化树布局的可视化交互方法 | |
WO2015143939A1 (zh) | 一种坐标系生成方法 | |
CN103676176A (zh) | 一种立体显示装置及其成像方法 | |
CN106406702A (zh) | 一种图片显示方法及装置 | |
CN204101862U (zh) | 触摸光栅盒和触摸立体显示装置 | |
CN110991050B (zh) | Cad叠图方法及相关产品 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant | ||
CP02 | Change in the address of a patent holder |
Address after: Room 818, 8 / F, 34 Haidian Street, Haidian District, Beijing 100080 Patentee after: BEIJING ULTRAPOWER SOFTWARE Co.,Ltd. Address before: 100107 Beijing city Haidian District wanquanzhuang Road No. 28 Wanliu new building 6 storey block A Room 601 Patentee before: BEIJING ULTRAPOWER SOFTWARE Co.,Ltd. |
|
CP02 | Change in the address of a patent holder |