[go: up one dir, main page]

CN110598150A - 一种用于web页面3D动态展示文字的方法 - Google Patents

一种用于web页面3D动态展示文字的方法 Download PDF

Info

Publication number
CN110598150A
CN110598150A CN201910794420.4A CN201910794420A CN110598150A CN 110598150 A CN110598150 A CN 110598150A CN 201910794420 A CN201910794420 A CN 201910794420A CN 110598150 A CN110598150 A CN 110598150A
Authority
CN
China
Prior art keywords
text
area
web page
display
math
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.)
Pending
Application number
CN201910794420.4A
Other languages
English (en)
Inventor
张福军
鲍碧波
陈浩
刘福林
罗豪
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Green Man Technology Co Ltd
Original Assignee
Green Man Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Green Man Technology Co Ltd filed Critical Green Man Technology Co Ltd
Priority to CN201910794420.4A priority Critical patent/CN110598150A/zh
Publication of CN110598150A publication Critical patent/CN110598150A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及web设计技术领域，尤其是一种用于web页面3D动态展示文字的方法，其步骤为：(1)在指定区域内，以指定点为中心设定指定距离为透视距离：(2)为每一个需要显示的文本语句计算其以设定好的中心点的显示位置；(3)以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值；(4)以设定好的旋转角度和旋转速度旋转整体显示内容；(5)在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见，本发明文本大小、文本之间的间距、移动的方向、移动的速率和3D视点的距离都可以以参数的形式进行不同的配置，以达到不同的视觉效果。

Description

一种用于web页面3D动态展示文字的方法
技术领域
本发明涉及web设计技术领域，具体领域为一种用于web页面3D动态展示文字的方法。
背景技术
在已有的实现中有在web页面指定大小区域中2D展示随机字体大小的文本，也有在指定大小区域内3D展示文本，也有在指定大小区域内动态移动文本的。但是在web页面中的指定大小区域内要可以随机的展示文本语句，并且要动态的3D视角的流畅的切换文本的位置的实现并未全部满足。
发明内容
本发明的目的在于提供一种用于web页面3D动态展示文字的方法，以解决现有技术中在web页面中的指定大小区域内要可以随机的展示文本语句，并且要动态的3D视角的流畅的切换文本的位置的实现并未全部满足的问题。
为实现上述目的，本发明提供如下技术方案：一种用于web页面3D动态展示文字的方法，其步骤为：
(1)在指定区域内，以指定点为中心设定指定距离为透视距离：
(2)为每一个需要显示的文本语句计算其以设定好的中心点的显示位置；
(3)以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值；
(4)以设定好的旋转角度和旋转速度旋转整体显示内容；
(5)在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见。
优选的，根据步骤(3)，以避免正面的文本语句与反面的文本语句发生重叠影响视觉效果。
优选的，根据步骤(4)，在旋转的过程中需要实时重新计算处于反面的文本语句的透明渐变值。
优选的，根据步骤(5)，使用translate3D技术调用GPU计算渲染来保证动画的流畅性。
优选的，文本语句的显示位子需要根据设定好的文本大小和文本语句的设定间距来计算。
优选的，位置计算公式：
单个文本的三维坐标：
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
其中radius为半径，theta和phi为处理过的随机值。
优选的，单个文本的相对显示区域左上角的位置：
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
其中item为单个文本，area为显示区域。
与现有技术相比，本发明的有益效果是：在各种web内容显示设备上，设定的大小显示区域内，动态的获取限量的文本语句，以3D的形式随机的显示其内，以每秒指定的位移移动。并且文本大小、文本之间的间距、移动的方向、移动的速率和3D视点的距离都可以以参数的形式进行不同的配置，以达到不同的视觉效果。
附图说明
图1为本发明的流程图；
图2为本发明的文本位置侧面显示示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1，本发明提供一种技术方案：一种用于web页面3D动态展示文字的方法，其步骤为：
(1)在指定区域内，以指定点为中心设定指定距离为透视距离：
(2)为每一个需要显示的文本语句计算其以设定好的中心点的显示位置；
(3)以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值；
(4)以设定好的旋转角度和旋转速度旋转整体显示内容；
(5)在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见。
根据步骤(3)，以避免正面的文本语句与反面的文本语句发生重叠影响视觉效果。
根据步骤(4)，在旋转的过程中需要实时重新计算处于反面的文本语句的透明渐变值。
根据步骤(5)，使用translate3D技术调用GPU计算渲染来保证动画的流畅性。
文本语句的显示位子需要根据设定好的文本大小和文本语句的设定间距来计算。
位置计算公式：
单个文本的三维坐标：
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
其中radius为半径，theta和phi为处理过的随机值。
单个文本的相对显示区域左上角的位置：
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
其中item为单个文本，area为显示区域。
通过本技术方案，具体的实现如下：
在指定区域内，以指定点为中心设定指定距离为透视距离，为每一个需要显示的文本语句计算其以设定好的中心点的显示位置，如此而形成一个3D的立体显示效果。在此基础上，以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值，以避免正面的文本语句与反面的文本语句发生重叠影响视觉效果。
然后以设定好的旋转角度和旋转速度旋转整体显示内容，在旋转的过程中需要实时重新计算处于反面的文本语句的透明渐变值，在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见。除此之外，
使用translate3D技术调用GPU计算渲染来保证动画的流畅性。
其中文本语句的显示位子需要根据设定好的文本大小和文本语句的设定间距来计算，其位置侧面显示示意图如图2：
位置计算公式：
单个文本的三维坐标(radius为半径，theta和phi为处理过的随机值)：
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
单个文本的相对显示区域左上角的位置(item为单个文本，area为显示区域)：
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
在各种web内容显示设备上，设定的大小显示区域内，动态的获取限量的文本语句，以3D的形式随机的显示其内，以每秒指定的位移流畅地移动。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (7)

1.一种用于web页面3D动态展示文字的方法，其特征在于：其步骤为：
(1)在指定区域内，以指定点为中心设定指定距离为透视距离：
(2)为每一个需要显示的文本语句计算其以设定好的中心点的显示位置；
(3)以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值；
(4)以设定好的旋转角度和旋转速度旋转整体显示内容；
(5)在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见。
2.根据权利要求1所述的一种用于web页面3D动态展示文字的方法，其特征在于：根据步骤(3)，以避免正面的文本语句与反面的文本语句发生重叠影响视觉效果。
3.根据权利要求1所述的一种用于web页面3D动态展示文字的方法，其特征在于：根据步骤(4)，在旋转的过程中需要实时重新计算处于反面的文本语句的透明渐变值。
4.根据权利要求1所述的一种用于web页面3D动态展示文字的方法，其特征在于：根据步骤(5)，使用translate3D技术调用GPU计算渲染来保证动画的流畅性。
5.根据权利要求1所述的一种用于web页面3D动态展示文字的方法，其特征在于：文本语句的显示位子需要根据设定好的文本大小和文本语句的设定间距来计算。
6.根据权利要求5所述的一种用于web页面3D动态展示文字的方法，其特征在于：位置计算公式：
单个文本的三维坐标：
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
其中radius为半径，theta和phi为处理过的随机值。
7.根据权利要求6所述的一种用于web页面3D动态展示文字的方法，其特征在于：单个文本的相对显示区域左上角的位置：
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
其中item为单个文本，area为显示区域。
CN201910794420.4A 2019-08-27 2019-08-27 一种用于web页面3D动态展示文字的方法 Pending CN110598150A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910794420.4A CN110598150A (zh) 2019-08-27 2019-08-27 一种用于web页面3D动态展示文字的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910794420.4A CN110598150A (zh) 2019-08-27 2019-08-27 一种用于web页面3D动态展示文字的方法

Publications (1)

Publication Number Publication Date
CN110598150A true CN110598150A (zh) 2019-12-20

Family

ID=68855794

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910794420.4A Pending CN110598150A (zh) 2019-08-27 2019-08-27 一种用于web页面3D动态展示文字的方法

Country Status (1)

Country Link
CN (1) CN110598150A (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020158905A1 (en) * 2001-03-14 2002-10-31 Giovanni Bazzoni System for the creation, visualisation and management of three-dimensional objects on web pages and a relative method
CN1609913A (zh) * 2003-10-20 2005-04-27 Lg电子有限公司 在三维地图中显示多级文本数据的方法
CN102163340A (zh) * 2011-04-18 2011-08-24 宁波万里电子科技有限公司 计算机系统中实现三维动态几何图形数据信息标注的方法
US20120042284A1 (en) * 2010-08-11 2012-02-16 International Business Machines Corporation 3d tag clouds for visualizing federated cross-system tags
CN103534732A (zh) * 2011-05-20 2014-01-22 松下电器产业株式会社 再现装置
CN103729878A (zh) * 2013-12-19 2014-04-16 江苏锐天信息科技有限公司 一种基于wpf的三维图形实现方法及三维文字实现方法
US9589384B1 (en) * 2014-11-26 2017-03-07 Amazon Technologies, Inc. Perspective-enabled linear entertainment content
US20180225885A1 (en) * 2013-10-01 2018-08-09 Aaron Scott Dishno Zone-based three-dimensional (3d) browsing

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020158905A1 (en) * 2001-03-14 2002-10-31 Giovanni Bazzoni System for the creation, visualisation and management of three-dimensional objects on web pages and a relative method
CN1609913A (zh) * 2003-10-20 2005-04-27 Lg电子有限公司 在三维地图中显示多级文本数据的方法
US20120042284A1 (en) * 2010-08-11 2012-02-16 International Business Machines Corporation 3d tag clouds for visualizing federated cross-system tags
CN102163340A (zh) * 2011-04-18 2011-08-24 宁波万里电子科技有限公司 计算机系统中实现三维动态几何图形数据信息标注的方法
CN103534732A (zh) * 2011-05-20 2014-01-22 松下电器产业株式会社 再现装置
US20180225885A1 (en) * 2013-10-01 2018-08-09 Aaron Scott Dishno Zone-based three-dimensional (3d) browsing
CN103729878A (zh) * 2013-12-19 2014-04-16 江苏锐天信息科技有限公司 一种基于wpf的三维图形实现方法及三维文字实现方法
US9589384B1 (en) * 2014-11-26 2017-03-07 Amazon Technologies, Inc. Perspective-enabled linear entertainment content

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
CHOKCOCO: "【CSS3进阶】酷炫的3D旋转透视", 《HTTPS://WWW.CNBLOGS.COM/COCO1S/P/5414153.HTML》 *
WAXES: "解析3D标签云，其实很简单", 《HTTPS://WWW.CNBLOGS.COM/AXES/P/3501424.HTML》 *
WHXAXES: "3Dtag", 《HTTPS://GITHUB.COM/WHXAXES/CANVAS-TEST/BLOB/GH-PAGES/SRC/3D-DEMO/3DTAG.HTML》 *
刘耀 等: "《信息资源挖掘与发现关键技术研究》", 28 February 2018 *

Similar Documents

Publication Publication Date Title
JP2023138738A5 (zh)
MX2019006567A (es) Sistemas metodos y medios para mostrar presentaciones interactivas de realidad aumentada.
US11887255B2 (en) Method and system for rendering boundary of map area within game map, and computer-readable storage medium
TW201730846A (zh) 色彩補間動畫的實現方法和裝置
JP2015536500A5 (zh)
JP2017525056A5 (zh)
CN117765204B (zh) 曲面细分方法、装置和图形处理单元
WO2019055096A3 (en) Three-dimensional graphics image processing
CN110598150A (zh) 一种用于web页面3D动态展示文字的方法
CN107833227B (zh) 一种圆形裁剪区域的绘制方法及其系统
CN107436765A (zh) 视图控件的处理方法和装置
CN105718233B (zh) 一种平显多线宽三角形无失真的绘制方法
US20020075276A1 (en) Rendering a silhouette edge
JP2015521302A5 (zh)
Lengyel Gpu-centered font rendering directly from glyph outlines
CN104346046A (zh) 三维仿真翻页方法及系统
KR101646945B1 (ko) Gpu 기반 벡터 그래픽을 위한 메쉬 생성 장치, 방법 및 컴퓨터 프로그램
CN103324606A (zh) 排版方法和排版装置
US20250041727A1 (en) Method for preventing model penetration, electronic device and storage medium
CN102541826B (zh) 文字块内容重组方法及装置
CN107481301A (zh) 一种实现数字图像扇形遮罩的方法及其应用
CN107481194B (zh) 基于相册应用的相框内照片旋转自适应缩放的方法
CN106708450B (zh) 画面显示方法、装置和终端设备
WO2015173885A1 (ja) 描画装置及び描画方法及び描画プログラム
ES2424886T3 (es) Procedimiento y dispositivo para la especificación de un límite de corredor alrededor de un corredor que establece un área de permanencia y programa informático para la realización del procedimiento

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20191220

RJ01 Rejection of invention patent application after publication