CN110738713A - type solar system navigation creating method and device - Google Patents
type solar system navigation creating method and device Download PDFInfo
- Publication number
- CN110738713A CN110738713A CN201911029838.2A CN201911029838A CN110738713A CN 110738713 A CN110738713 A CN 110738713A CN 201911029838 A CN201911029838 A CN 201911029838A CN 110738713 A CN110738713 A CN 110738713A
- Authority
- CN
- China
- Prior art keywords
- planet
- sun
- image
- orbit
- setting
- 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.)
- Withdrawn
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Navigation (AREA)
Abstract
The embodiment of the invention discloses a method and a device for creating -type solar system navigation, and the method comprises the steps of setting a sun image, taking the sun image as a center, creating a plurality of running orbits surrounding the sun image, setting and positioning a corresponding planet image on each running orbit, and setting animation for the sun image, the planet image and the running orbits so as to enable stars in the whole solar system navigation to move, wherein each planet serves as module inlets in the system navigation, and the sun is used for indicating a system name.
Description
Technical Field
The embodiment of the invention relates to a system navigation design technology, in particular to a creation method and a device for -type solar system navigation.
Background
The systems have navigation parts, and the current navigation parts have various designs, but have no characteristics and cannot give good visual experience to users.
Disclosure of Invention
The embodiment of the invention provides a method and a device for creating -type solar system navigation, which can create cool and individual system navigation and improve the visual experience of a user.
To achieve the object of the embodiment of the present invention, the embodiment of the present invention provides a method for creating navigation of an -kind solar system, where the method may include:
setting a sun image;
taking the sun image as a center, creating a plurality of running tracks surrounding the sun image;
setting and positioning a corresponding planet image on each orbit;
and animation is set for the sun image, the planet image and the orbit so as to make the stars in the whole solar system navigation system move, wherein each planet star is used as module entries in the system navigation system, and the sun is used for indicating the system name.
In an exemplary embodiment of the present invention, the setting of the sun image may include:
setting the attribute of a picture representing the sun through a cascading style sheet css at a preset position to form a sun image; the attributes of the picture representing the sun include: size, shape and degree of tilt.
In an exemplary embodiment of the present invention, the creating a plurality of orbits around the sun image centering on the sun image may include:
setting a plurality of circles surrounding the sun image according to a circle-radius attribute in a layer div in a cascading style sheet; wherein the width of each circle is the radius of the configurable running track, and the height of each circle is zero.
In an exemplary embodiment of the present invention, the border-radius is set to 50%.
In an exemplary embodiment of the present invention, the setting and positioning of the corresponding planetary image on each orbit may include:
calculating the position of each planet on the corresponding running track through a preset algorithm;
divs were placed at the center of each location;
setting attributes of each planet; the attributes of each planet include: size and shape.
In an exemplary embodiment of the present invention, the calculating the position of each planet on the corresponding orbit by the preset algorithm may include:
calculating the top percentage value of the planet relative to the orbit by the relation as follows, namely positionTop ═ (r-r × Math.sin (deg/180 × Math.PI))/(r × 2) × 100;
calculating the left percentage value of the planet relative to the orbit by the following second relation: positionLeft ═ r-r × math.sin (deg/180 × math.pi))/(r × 2) × 100;
and the value of the circumference ratio is Math.PI, r is the radius of the current running orbit, and deg is the included angle between the connecting line of the planet and the sun and the X axis when the connecting line is positioned at the second quadrant.
In an exemplary embodiment of the present invention, the animating the sun image, the planet image, and the orbit may include:
setting patterns for the sun image, the planet image and the outer layer div of the operation orbit;
adding a reverse rotation angle to the sun image;
animations are added for the sun image, the planet image, and the orbit using css 3.
In an exemplary embodiment of the invention, the method may further comprise adding a click event to each star for entering each star in the solar system navigation system as module entries, wherein the click event is used for configuring parameters of the current star.
In an exemplary embodiment of the present invention, the method may further comprise specifying under what circumstances (if any) and/or which stars are targeted for the click event via a pointer-events attribute in css.
An embodiment of the present invention further provides an apparatus for creating a navigation system of a solar-like system, which may include a processor and a computer-readable storage medium, where the computer-readable storage medium stores instructions, and when the instructions are executed by the processor, the method for creating a navigation system of a solar-like system described in any item above is implemented.
The method comprises the steps of setting a sun image, taking the sun image as a center, creating a plurality of running orbits surrounding the sun image, setting and positioning a corresponding planet image on each running orbit, and setting animation for the sun image, the planet image and the running orbits so as to enable stars in the whole solar system-like system navigation to move, wherein each planet star is used as module inlets in the system navigation, the sun is used for indicating a system name.
Additional features and advantages of the invention will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. The objectives and other advantages of the invention will be realized and attained by the structure particularly pointed out in the written description and claims hereof as well as the appended drawings.
Drawings
The accompanying drawings are included to provide a further understanding of the present invention and constitute a part of this specification, serve to explain the present invention with example of the present application and do not constitute a limitation on the present invention.
FIG. 1 is a flowchart of a method for creating a navigation system of a solar-like system according to an embodiment of the present invention;
FIG. 2 is a schematic view of a navigation interface of a solar-like system according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of a calculation method for the positioning of a planetary ball on a running orbit according to an embodiment of the invention;
fig. 4 is a block diagram of a creating apparatus for solar system like system navigation according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, embodiments of the present invention will be described in detail below with reference to the accompanying drawings. It should be noted that the embodiments and features of the embodiments in the present application may be arbitrarily combined with each other without conflict.
The steps illustrated in the flowchart of the figure may be performed in a computer system such as sets of computer-executable instructions and, although a logical order is illustrated in the flowchart, in some cases, the steps illustrated or described may be performed in an order different than that illustrated herein.
To achieve the object of the embodiment of the present invention, the embodiment of the present invention provides a method for creating -type solar system navigation, as shown in fig. 1 and fig. 2, the method may include S101-S104:
and S101, setting a sun image.
In an exemplary embodiment of the present invention, the setting of the sun image may include:
setting the attribute of a picture representing the sun through a cascading style sheet css at a preset position to form a sun image; the attributes of the picture representing the sun include: size, shape and degree of tilt.
In an exemplary embodiment of the present invention, the sun may be located at the center of this solar-like system, and the size, pattern, and inclination of the sun may be set by css.
And S102, taking the sun image as a center, and creating a plurality of running tracks surrounding the sun image.
In an exemplary embodiment of the present invention, the creating a plurality of orbits around the sun image centering on the sun image may include:
setting a plurality of circles surrounding the sun image according to a circle-radius attribute in a layer div in a cascading style sheet; wherein the width of each circle is the radius of the configurable running track, and the height of each circle is zero.
In an exemplary embodiment of the present invention, the border-radius may be set to 50%.
In an exemplary embodiment of the invention, the running track may be made into a large or small circle with a width, i.e., a configurable track radius, of 0 height by div plus a border radius of 50%.
In an exemplary embodiment of the invention, the orbit is the movement trajectory of the planet.
And S103, setting and positioning a corresponding planet image on each running track.
In an exemplary embodiment of the present invention, the setting and positioning of the corresponding planetary image on each orbit may include:
calculating the position of each planet on the corresponding running track through a preset algorithm;
divs were placed at the center of each location;
setting attributes of each planet; the attributes of each planet include: size and shape.
In an exemplary embodiment of the present invention, the calculating the position of each planet on the corresponding orbit by the preset algorithm may include:
calculating the top percentage value of the planet relative to the orbit by the relation as follows, namely positionTop ═ (r-r × Math.sin (deg/180 × Math.PI))/(r × 2) × 100;
calculating the left percentage value of the planet relative to the orbit by the following second relation: positionLeft ═ r-r × math.sin (deg/180 × math.pi))/(r × 2) × 100;
and the value of the circumference ratio is Math.PI, r is the radius of the current running orbit, and deg is the included angle between the connecting line of the planet and the sun and the X axis when the connecting line is positioned at the second quadrant.
In an exemplary embodiment of the invention, as shown in fig. 3, the planet ball may be made to be on orbit by calculation, and in order to make the planet on orbit, the following position calculation may be made:
the angle deg (e.g. θ in the figure) can be calculated from the second quadrant at the upper left corner, and as can be seen from observing fig. 3, the percentage top value of the planet relative to the orbit can be: positionTop ═ (r-r × math.sin (deg/180 × math.pi))/(r × 2) × 100;
the left percentage value of the planet relative to the orbit may be: position left ═ r-r × math.sin (deg/180 × math.pi))/(r × 2) × 100.
In an exemplary embodiment of the present invention, the length is defined using various units (%, px, rem, em, etc.) at will for greater convenience, so a percentage calculation can be performed for the above-mentioned locations.
In an exemplary embodiment of the present invention, after the position of the planet is defined, divs may be given inside the planet position and then defined to the center point of each position.
And S104, setting animation for the sun image, the planet image and the orbit so as to move the stars (represented by the sun image and the planet image) in the whole solar system navigation system, wherein each planet acts as module entries in the system navigation system, and the central star (such as the sun) indicates the system name.
In an exemplary embodiment of the present invention, the animating the sun image, the planet image, and the orbit may include:
setting patterns for the sun image, the planet image and the outer layer div of the operation orbit;
adding a reverse rotation angle to the sun image;
animations are added for the sun image, the planet image, and the orbit using css 3.
In an exemplary embodiment of the invention, after the position of the central planet and the position of the planet on the orbit are set, the whole solar system can be rotated a certain angle to make the whole solar system flat, where the outer layer div can be loaded with the sample:
transform-style:preserve-3d；
transform:rotateX(68deg)rotateY(-6deg)。
in an exemplary embodiment of the present invention, in order to make the central sphere upright at this time, the rotation angle of the inverse term may be added:
transform:rotateX(-68deg)rotateY(6deg)。
in an exemplary embodiment of the invention, after the initial position is set, the entire solar system planet can be made to move, using the animation method of css3, the animation is set:
adding animation on the track:
animation-name:orbit；
animation-duration:100s；
animation-iteration-count:infinite；
animation-timing-function:linear；
adding animation on the star position:
animation-name:invert；
animation-duration:100s；
animation-iteration-count:infinite；
animation-timing-function:linear。
in an exemplary embodiment of the present invention, the revolution speed for each planet is different, and a different speed may be configured for each star.
In an exemplary embodiment of the present invention, to adapt to usage habits, the star stops rotating after the mouse hovers over the star, that is, the effects of mouse hovering and mouse leaving can be increased on the track, the hovering planet stops revolving, and the mouse leaves the planet to continue revolving.
In an exemplary embodiment of the invention, the method may further comprise adding a click event to each star for entering each star in the solar system navigation system as module entries, wherein the click event is used for configuring parameters of the current star.
In an exemplary embodiment of the present invention, since each planet sphere is module entries, a click event is added to each sphere (i.e. a star or a planet sphere), the click event can be configured to do operations as needed, there are two parameters, is the data of the name, position, size, etc. of the current orbit and planet sphere, and is the current index.
In an exemplary embodiment of the present invention, the method may further comprise specifying under what circumstances (if any) and/or which stars are targeted for the click event via a pointer-events attribute in css.
Since all orbits overlap and each planet sphere is only on each orbit, not all orbits, even after tilting, it can click on when the planet sphere makes a revolution to the lower part, because the upper orbit obscures the lower orbit and the planet sphere, so css attribute-pointer-events can be used.
The pointer-events attribute of css may specify under what circumstances (if any) a particular graphical element may become the target of a mouse event.
In an exemplary embodiment of the invention, patterns may be added on all running tracks: point-events is none; patterns can be added on all the planet spheres: pointer-events auto; the planet ball has penetration ability and can be clicked.
In an exemplary embodiment of the present invention, a cool backdrop may also be added to the above design.
In an exemplary embodiment of the invention, the entire designed assembly may be packaged and uploaded to the package administration tool npm, and may be installed directly for use using an npm insert ml-solar-system.
In an exemplary embodiment of the present invention, the component calling method may include:
the whole effect is realized as components, the parameters can be directly called by installing and passing, and the parameter list can be as follows:
description of the parameters:
event(s)
In an exemplary embodiment of the invention, the entire component may implement the code using vue.
An embodiment of the present invention further provides a apparatus 1 for creating a navigation system of a sun-like system, as shown in fig. 4, which may include a processor 11 and a computer-readable storage medium 12, where the computer-readable storage medium 12 stores instructions, and when the instructions are executed by the processor 11, the method for creating a navigation system of a sun-like system according to any above is implemented.
It will be understood by those of ordinary skill in the art that all or some of the steps of the methods disclosed above, functional modules/units in systems, devices may be implemented as software, firmware, hardware, and suitable combinations thereof, in a hardware implementation, the division between functional modules/units mentioned in the above description is not a division corresponding to physical components, e.g., physical components may have multiple functions, or functions or steps may be performed cooperatively by several physical components.
Claims (10)
1, A method of creating a solar system navigation, the method comprising:
setting a sun image;
taking the sun image as a center, creating a plurality of running tracks surrounding the sun image;
setting and positioning a corresponding planet image on each orbit;
and animation is set for the sun image, the planet image and the orbit so as to make the stars in the whole solar system navigation system move, wherein each planet star is used as module entries in the system navigation system, and the sun is used for indicating the system name.
2. The method of claim 1, wherein the setting a sun image comprises:
setting the attribute of a picture representing the sun through a cascading style sheet css at a preset position to form a sun image; the attributes of the picture representing the sun include: size, shape and degree of tilt.
3. The method for creating a solar-like system navigation system according to claim 1, wherein the creating a plurality of orbits around the sun image with the sun image as a center comprises:
setting a plurality of circles surrounding the sun image according to a circle-radius attribute in a layer div in a cascading style sheet; wherein the width of each circle is the radius of the configurable running track, and the height of each circle is zero.
4. The method of claim 3, wherein a bird-radius setting is 50%.
5. The method of claim 1, wherein the positioning and locating a respective planetary image on each orbit comprises:
calculating the position of each planet on the corresponding running track through a preset algorithm;
divs were placed at the center of each location;
setting attributes of each planet; the attributes of each planet include: size and shape.
6. The method for creating a solar-like system navigation system according to claim 5, wherein the calculating the position of each planet on the corresponding orbit by a preset algorithm comprises:
calculating the top percentage value of the planet relative to the orbit by the relation as follows, namely positionTop ═ (r-r × Math.sin (deg/180 × Math.PI))/(r × 2) × 100;
calculating the left percentage value of the planet relative to the orbit by the following second relation: positionLeft ═ r-r × math.sin (deg/180 × math.pi))/(r × 2) × 100;
and the value of the circumference ratio is Math.PI, r is the radius of the current running orbit, and deg is the included angle between the connecting line of the planet and the sun and the X axis when the connecting line is positioned at the second quadrant.
7. The method for creating a solar-like system navigation according to claim 1, wherein the setting animation for the sun image, the planet image and the orbit comprises:
setting patterns for the sun image, the planet image and the outer layer div of the operation orbit;
adding a reverse rotation angle to the sun image;
animations are added for the sun image, the planet image, and the orbit using css 3.
8. The method for creating a solar system navigation system as recited in claim 1, further comprising adding a click event to each star for entering each star in the solar system navigation system as module entries, wherein the click event is used for configuring parameters of the current star.
9. The method of claim 8, further comprising specifying under what circumstances (if any) and/or which stars are targeted for the click event via a pointer-events attribute in css.
10, apparatus for creating a navigation system of the sun-like type, comprising a processor and a computer readable storage medium, wherein instructions are stored in the computer readable storage medium, characterized in that when the instructions are executed by the processor, the method for creating a navigation system of the sun-like type according to any of claims 1-9 is implemented.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911029838.2A CN110738713A (en) | 2019-10-28 | 2019-10-28 | type solar system navigation creating method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911029838.2A CN110738713A (en) | 2019-10-28 | 2019-10-28 | type solar system navigation creating method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110738713A true CN110738713A (en) | 2020-01-31 |
Family
ID=69271629
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911029838.2A Withdrawn CN110738713A (en) | 2019-10-28 | 2019-10-28 | type solar system navigation creating method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110738713A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140347368A1 (en) * | 2013-05-21 | 2014-11-27 | Telenav, Inc. | Navigation system with interface modification mechanism and method of operation thereof |
| US20150143294A1 (en) * | 2013-11-21 | 2015-05-21 | UpTo, Inc. | System and method for presenting a responsive multi-layered ordered set of elements |
| CN107291333A (en) * | 2017-06-22 | 2017-10-24 | 环球智达科技（北京）有限公司 | The processing method of terminal interface navigation information |
| CN107832051A (en) * | 2017-09-26 | 2018-03-23 | 五八有限公司 | The page navigation processing method and processing device of application program |
-
2019
- 2019-10-28 CN CN201911029838.2A patent/CN110738713A/en not_active Withdrawn
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140347368A1 (en) * | 2013-05-21 | 2014-11-27 | Telenav, Inc. | Navigation system with interface modification mechanism and method of operation thereof |
| US20150143294A1 (en) * | 2013-11-21 | 2015-05-21 | UpTo, Inc. | System and method for presenting a responsive multi-layered ordered set of elements |
| CN107291333A (en) * | 2017-06-22 | 2017-10-24 | 环球智达科技（北京）有限公司 | The processing method of terminal interface navigation information |
| CN107832051A (en) * | 2017-09-26 | 2018-03-23 | 五八有限公司 | The page navigation processing method and processing device of application program |
Non-Patent Citations (2)
| Title |
|---|
| "会编程的银猪": ""使用css3的动画模拟太阳系行星公转"", 《博客园》 * |
| 71-73页: ""HTML5网页设计课程的CSS3教学拓展"", 《现代计算机(专业版)》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP0702330B1 (en) | Layout of node-link structure in space with negative curvature | |
| CN101925874B (en) | Projection of graphical objects on interactive irregular displays | |
| US20130127850A1 (en) | Graphical user interface, computing device, and method for operating the same | |
| EP0694878A2 (en) | A method and apparatus for increasing the displayed detail of a tree structure | |
| US9436673B2 (en) | Automatic application of templates to content | |
| US10529145B2 (en) | Touch gestures for navigation and interacting with content in a three-dimensional space | |
| CN110741229B (en) | Dynamically changing visual attributes of indicators on digital maps | |
| CN107807659A (en) | A kind of UAV Flight Control method and device | |
| WO2013166322A1 (en) | Overhead image viewing systems and methods | |
| JPH07302336A (en) | Method and apparatus for making feature of image ambiguous | |
| US20170091901A1 (en) | Method and system for recognizing poi outside map screen | |
| US9070210B1 (en) | Computing devices and methods for navigating around a surface of three-dimensional (3D) coordinate system representations of 3D objects | |
| US8570329B1 (en) | Subtle camera motions to indicate imagery type in a mapping system | |
| CN102937843B (en) | Touch-screen selects visual feedback | |
| CN110221722A (en) | Image processing method, electronic equipment and storage medium | |
| TW201319767A (en) | Holographic display | |
| CN107050859B (en) | Unity 3D-based method for dragging camera to displace in scene | |
| CN110738713A (en) | type solar system navigation creating method and device | |
| US20140325477A1 (en) | Method and system for visualization of large codebases | |
| CN103677528A (en) | Method and electronic device for processing information | |
| Danyluk et al. | Look-from camera control for 3D terrain maps | |
| KR20180134391A (en) | Interactive Geo-Context Navigation Tool | |
| CN112991526A (en) | Method and device for marking three-dimensional posture of image, electronic equipment and medium | |
| US20220156896A1 (en) | System and method for image inpainting based on layout-guided pre-processing attention mechanism | |
| CN109493423A (en) | The calculation method and device of the midpoint of three-dimensional earth model surface two o'clock |
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 | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20200131 |
|
| WW01 | Invention patent application withdrawn after publication |