CN110598150A - Method for web page 3D dynamic display of characters - Google Patents
Method for web page 3D dynamic display of characters Download PDFInfo
- 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
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
The invention relates to the technical field of web design, in particular to a method for dynamically displaying characters on a web page in a 3D mode, which comprises the following steps: (1) in the designated area, a designated distance is set as a perspective distance by taking a designated point as a center: (2) calculating the display position of each text sentence to be displayed with a set central point; (3) setting a transparent gradual change value of the text outwards in the radial direction by taking the central point of the reverse side opposite to the front side as a starting point; (4) rotating the whole display content at the set rotation angle and rotation speed; (5) in the whole process, the length and the size of the displayed text need to be controlled to ensure that the text sentence is normally displayed and clearly visible in the area.
Description
Technical Field
The invention relates to the technical field of web design, in particular to a method for dynamically displaying characters on a web page in a 3D mode.
Background
In the existing implementation, texts with random font sizes are displayed in a specified size area of a web page in a 2D mode, texts are displayed in a specified size area in a 3D mode, and texts are dynamically moved in the specified size area. However, text sentences can be randomly displayed in a specified size area in a web page, and the realization of smooth text switching position from a dynamic 3D view is not fully satisfied.
Disclosure of Invention
The invention aims to provide a method for dynamically displaying characters in a web page in a 3D mode, and the method is used for solving the problems that text sentences can be randomly displayed in a specified size area in the web page and the realization of smooth text position switching of a dynamic 3D view angle is not completely met in the prior art.
In order to achieve the purpose, the invention provides the following technical scheme: a method for web page 3D dynamic display text, the steps are:
(1) in the designated area, a designated distance is set as a perspective distance by taking a designated point as a center:
(2) calculating the display position of each text sentence to be displayed with a set central point;
(3) setting a transparent gradual change value of the text outwards in the radial direction by taking the central point of the reverse side opposite to the front side as a starting point;
(4) rotating the whole display content at the set rotation angle and rotation speed;
(5) in the whole process, the length and the size of the displayed text need to be controlled to ensure that the text sentence is normally displayed and clearly visible in the area.
Preferably, according to the step (3), the front text sentence is prevented from overlapping with the back text sentence, so that the visual effect is prevented from being influenced.
Preferably, according to step (4), the transparent gradient value of the text sentence on the reverse side needs to be recalculated in real time during the rotation.
Preferably, according to step (5), a translate3D technology is used to call the GPU to calculate the rendering so as to ensure the fluency of the animation.
Preferably, the display position of the text sentence is calculated according to the set text size and the set distance of the text sentence.
Preferably, the position calculation formula:
three-dimensional coordinates of a single text:
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
where radius is the radius and theta and phi are the treated random values.
Preferably, the position of the relative display area upper left corner of the single text:
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
where item is a single text and area is a display area.
Compared with the prior art, the invention has the beneficial effects that: on various web content display devices, within a display area of a set size, a limited number of text sentences are dynamically acquired and randomly displayed in a 3D manner within the display area, moving at a specified displacement per second. And the text size, the space between texts, the moving direction, the moving speed and the distance of the 3D viewpoint can be configured differently in the form of parameters so as to achieve different visual effects.
Drawings
FIG. 1 is a flow chart of the present invention;
FIG. 2 is a schematic diagram of a text position side display according to the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, the present invention provides a technical solution: a method for web page 3D dynamic display text, the steps are:
(1) in the designated area, a designated distance is set as a perspective distance by taking a designated point as a center:
(2) calculating the display position of each text sentence to be displayed with a set central point;
(3) setting a transparent gradual change value of the text outwards in the radial direction by taking the central point of the reverse side opposite to the front side as a starting point;
(4) rotating the whole display content at the set rotation angle and rotation speed;
(5) in the whole process, the length and the size of the displayed text need to be controlled to ensure that the text sentence is normally displayed and clearly visible in the area.
And (4) according to the step (3), avoiding the influence on the visual effect caused by the overlapping of the text sentences on the front side and the text sentences on the back side.
According to the step (4), the transparent gradient value of the text sentence on the reverse side needs to be recalculated in real time in the rotation process.
According to the step (5), the GPU is called to calculate rendering by using translate3D technology to ensure the fluency of the animation.
The display position of the text sentence needs to be calculated according to the set text size and the set distance of the text sentence.
The position calculation formula:
three-dimensional coordinates of a single text:
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
where radius is the radius and theta and phi are the treated random values.
Position of the upper left corner of the relative display area of a single text:
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
where item is a single text and area is a display area.
Through the technical scheme, the specific implementation is as follows:
in the designated area, a designated distance is set as a perspective distance by taking a designated point as a center, and the display position of the text sentence to be displayed by the set center point is calculated for each text sentence to be displayed, so that a 3D stereoscopic display effect is formed. On the basis, the central point of the reverse side opposite to the front side is taken as a starting point, and transparent gradual change values of the text are radially arranged outwards, so that the phenomenon that the text sentences on the front side and the text sentences on the reverse side are overlapped to influence the visual effect is avoided.
And then, rotating the whole display content at a set rotation angle and rotation speed, recalculating the transparent gradual change value of the text sentence on the reverse side in real time in the rotating process, and controlling the length and the size of the displayed text in the whole process to ensure that the text sentence is normally displayed and clearly visible in the area. In addition to this, the present invention is,
the GPU is called to calculate rendering by using translate3D technology to ensure the fluency of the animation.
The display bits of the text statements need to be calculated according to the set text size and the set distance of the text statements, and the schematic diagram of the position side face is shown in fig. 2:
the position calculation formula:
three-dimensional coordinates of the individual text (radius is the radius, theta and phi are the processed random values):
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
position of the upper left corner of the relative display area of the single text (item is the single text, area is the display area):
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
on various web content display devices, within a display area of a set size, a limited number of text sentences are dynamically captured and randomly displayed in a 3D manner, moving smoothly at a specified displacement per second.
Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.
Claims (7)
1. A method for dynamically displaying characters on a web page in a 3D mode is characterized in that: the method comprises the following steps:
(1) in the designated area, a designated distance is set as a perspective distance by taking a designated point as a center:
(2) calculating the display position of each text sentence to be displayed with a set central point;
(3) setting a transparent gradual change value of the text outwards in the radial direction by taking the central point of the reverse side opposite to the front side as a starting point;
(4) rotating the whole display content at the set rotation angle and rotation speed;
(5) in the whole process, the length and the size of the displayed text need to be controlled to ensure that the text sentence is normally displayed and clearly visible in the area.
2. The method for 3D dynamic display of text on a web page according to claim 1, wherein: and (4) according to the step (3), avoiding the influence on the visual effect caused by the overlapping of the text sentences on the front side and the text sentences on the back side.
3. The method for 3D dynamic display of text on a web page according to claim 1, wherein: according to the step (4), the transparent gradient value of the text sentence on the reverse side needs to be recalculated in real time in the rotation process.
4. The method for 3D dynamic display of text on a web page according to claim 1, wherein: according to the step (5), the GPU is called to calculate rendering by using translate3D technology to ensure the fluency of the animation.
5. The method for 3D dynamic display of text on a web page according to claim 1, wherein: the display position of the text sentence needs to be calculated according to the set text size and the set distance of the text sentence.
6. The method for 3D dynamic display of text on a web page according to claim 5, wherein: the position calculation formula:
three-dimensional coordinates of a single text:
x＝radius*Math.cos(theta)*Math.sin(phi)；
y＝radius*Math.sin(theta)*Math.sin(phi)；
z＝radius*Math.cos(phi)；
where radius is the radius and theta and phi are the treated random values.
7. The method for 3D dynamic display of text on a web page according to claim 6, wherein: position of the upper left corner of the relative display area of a single text:
left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；
top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；
where item is a single text and area is a display area.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910794420.4A CN110598150A (en) | 2019-08-27 | 2019-08-27 | Method for web page 3D dynamic display of characters |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910794420.4A CN110598150A (en) | 2019-08-27 | 2019-08-27 | Method for web page 3D dynamic display of characters |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110598150A true CN110598150A (en) | 2019-12-20 |
Family
ID=68855794
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910794420.4A Pending CN110598150A (en) | 2019-08-27 | 2019-08-27 | Method for web page 3D dynamic display of characters |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110598150A (en) |
Citations (8)
| 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 (en) * | 2003-10-20 | 2005-04-27 | Lg电子有限公司 | Method for displaying multi-level text data in three-dimensional map |
| CN102163340A (en) * | 2011-04-18 | 2011-08-24 | 宁波万里电子科技有限公司 | Method for labeling three-dimensional (3D) dynamic geometric figure data information in computer system |
| US20120042284A1 (en) * | 2010-08-11 | 2012-02-16 | International Business Machines Corporation | 3d tag clouds for visualizing federated cross-system tags |
| CN103534732A (en) * | 2011-05-20 | 2014-01-22 | 松下电器产业株式会社 | Reproduction device |
| CN103729878A (en) * | 2013-12-19 | 2014-04-16 | 江苏锐天信息科技有限公司 | Three-dimensional graph implementation method based on WPF and three-dimensional character implementation method based on 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 |
-
2019
- 2019-08-27 CN CN201910794420.4A patent/CN110598150A/en active Pending
Patent Citations (8)
| 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 (en) * | 2003-10-20 | 2005-04-27 | Lg电子有限公司 | Method for displaying multi-level text data in three-dimensional map |
| US20120042284A1 (en) * | 2010-08-11 | 2012-02-16 | International Business Machines Corporation | 3d tag clouds for visualizing federated cross-system tags |
| CN102163340A (en) * | 2011-04-18 | 2011-08-24 | 宁波万里电子科技有限公司 | Method for labeling three-dimensional (3D) dynamic geometric figure data information in computer system |
| CN103534732A (en) * | 2011-05-20 | 2014-01-22 | 松下电器产业株式会社 | Reproduction device |
| US20180225885A1 (en) * | 2013-10-01 | 2018-08-09 | Aaron Scott Dishno | Zone-based three-dimensional (3d) browsing |
| CN103729878A (en) * | 2013-12-19 | 2014-04-16 | 江苏锐天信息科技有限公司 | Three-dimensional graph implementation method based on WPF and three-dimensional character implementation method based on WPF |
| US9589384B1 (en) * | 2014-11-26 | 2017-03-07 | Amazon Technologies, Inc. | Perspective-enabled linear entertainment content |
Non-Patent Citations (4)
| 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 |
|---|---|---|
| CN104966312B (en) | A kind of rendering intent, device and the terminal device of 3D models | |
| CN103745501B (en) | The threedimensional model coloring of stl file form and colouring information access method | |
| TW201730846A (en) | Method and device for realizing color tween animation | |
| CN103247064B (en) | A kind of generation method of three-dimensional dynamic graphical, device and mobile terminal | |
| JP2006260537A5 (en) | ||
| US20140005819A1 (en) | Method and System for Detouring Around Features Cut From Sheet Materials with a Laser Cutter According to a Pattern | |
| US9251607B1 (en) | Anti-aliasing techniques | |
| JP2017525056A5 (en) | ||
| CN111508053A (en) | Model rendering method and device, electronic equipment and computer readable medium | |
| CN106652004A (en) | Method and apparatus for rendering virtual reality on the basis of a head-mounted visual device | |
| CN110598150A (en) | Method for web page 3D dynamic display of characters | |
| CN106297536B (en) | Method and device for determining labeling position of planar graphic element name in electronic map | |
| CN107833227B (en) | Drawing method and system for circular cutting area | |
| Mullineux | CAD: Computational Concepts and Methods: computational concepts and methods | |
| EP4235381A3 (en) | Virtual paper | |
| CN102117501B (en) | Method and device for rendering three-dimensional lines | |
| CN106599175B (en) | Webpage element display processing method and device | |
| US20020075276A1 (en) | Rendering a silhouette edge | |
| CN103310409B (en) | A kind of Tile-based renders the fast triangle block method of framework GPU | |
| CN103489153B (en) | Make the device and method of seamless spliced unit | |
| Lengyel | Gpu-centered font rendering directly from glyph outlines | |
| CN104346046A (en) | Three-dimensional simulation page turning method and system | |
| KR101646945B1 (en) | Apparatus, method and computer program for generating mesh for vector graphics based on graphic processing unit | |
| CN107481301A (en) | A kind of method and its application for realizing digital picture sector shade | |
| CN107481194B (en) | Photo rotation self-adaptive scaling method in photo frame based on photo album application |
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 |