CN110555123B - Method and device for processing curvilinear motion of interface elements and computer equipment - Google Patents
Method and device for processing curvilinear motion of interface elements and computer equipment Download PDFInfo
- Publication number
- CN110555123B CN110555123B CN201910667195.8A CN201910667195A CN110555123B CN 110555123 B CN110555123 B CN 110555123B CN 201910667195 A CN201910667195 A CN 201910667195A CN 110555123 B CN110555123 B CN 110555123B
- Authority
- CN
- China
- Prior art keywords
- coordinate
- coordinate point
- path diagram
- curve path
- vector
- 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
Images
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/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/56—Information retrieval; Database structures therefor; File system structures therefor of still image data having vectorial format
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The application relates to a processing method and device for curvilinear motion of interface elements, computer equipment and a storage medium. Based on terminal operation experience optimization, drawing a vector curve path diagram based on an SVG technology by obtaining an SVG technology, obtaining an SVG path object and a circle object of the vector curve path diagram through a document object, calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram; analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram. And determining the point coordinates required by the curvilinear motion of the interface elements by the document object and calling a preset analysis script, thereby improving the extraction efficiency of coordinate points.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for processing interface element curvilinear motion, a computer device, and a storage medium.
Background
With the development of internet technology, the functions of application programs are more and more, in order to enable a user to frequently access the application programs, a check-in function is set in the application programs, the user logs in the application programs by using an account, and the check-in function can receive corresponding rewards and the like.
The functions of checking in and getting daily gift packages are designed for the application, such as: a function of checking in and getting a daily gift bag is designed in the game application A, one month is taken as a check-in period, and the maximum limit of checking in is 31 days of check-in. In order to enable visualization of a user and experience of the user, a check-in path of the user is displayed in a check-in interface, check-in interface elements in the check-in process are displayed, and if the check-in icon changes in the interface, the check-in icon moves linearly once a day. Currently, a check-in interface with icons moving linearly is generally adopted, such as: once signed in, an icon for marking the signed-in position moves a position linearly, 31 signed-in points need to be arranged on a preset linear track, a section of interval is needed between the signed-in points and the signed-in points, the interval is wider, all the signed-in interfaces can be seen only by sliding the interfaces for many times, the interval is dense, and the interfaces are too dense. Therefore, 31 check-in points can be arranged on the curve track, so that the icon performs curve motion to the next check-in point, the utilization rate of the check-in interface is increased, but a plurality of coordinate points are required to be arranged for deviation in the curve motion, and the efficiency of the current coordinate point extraction mode is low.
Disclosure of Invention
In view of the above, it is necessary to provide a method, an apparatus, a computer device, and a storage medium for processing curvilinear motion of an interface element, which improve the efficiency of coordinate point extraction.
A method of processing curvilinear movement of an interface element, the method comprising:
acquiring a vector curve path diagram drawn based on an SVG technology;
obtaining an SVG path object and a circle object of the vector curve path diagram through a document object;
calling a preset analysis script, and extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object to obtain each coordinate point of the path track in the vector curve path diagram;
analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points;
and performing curvilinear motion on the interface element in the vector curve path diagram according to the coordinate value of each coordinate point.
In one embodiment, the step of obtaining the vector curve path diagram drawn based on the SVG technology includes:
acquiring a curve path diagram editing instruction based on an SVG technology;
setting canvas according to the canvas setting parameters in the curve path diagram editing instruction to obtain the canvas;
aligning the drawing board and the canvas according to a preset mutual alignment mode;
and drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain the vector curve path diagram.
In one embodiment, the step of calling the preset parsing script, extracting coordinate points of a path trajectory in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path trajectory in the vector curve path diagram includes:
the animateMotion of the SVG path object moves along the path track of the vector curve path diagram according to the circle object to obtain the total movement completion time;
carrying out time length segmentation on the total movement completion time length according to preset segmentation time length, and determining a coordinate point extraction interval;
and calling the preset analysis script, and extracting each coordinate point of the path track in the vector curve path diagram according to the coordinate point extraction interval.
In one embodiment, the step of performing a curvilinear motion of the interface element in the vector curve path diagram according to the coordinate value of each coordinate point includes:
in the vector curve path diagram, determining a starting coordinate point of the curvilinear motion according to a coordinate point where the interface element is located;
determining a terminal coordinate point of the curvilinear motion according to the starting coordinate point and a preset moving track;
according to the coordinate value of each coordinate point, carrying out distance analysis on the coordinate points between the starting coordinate point and the ending coordinate point to obtain the distance between the adjacent coordinate points;
and moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
In one embodiment, the step of determining a starting coordinate point of the curvilinear motion according to the coordinate point where the interface element is located in the vector curvilinear path diagram includes:
analyzing the vector curve path diagram according to the characteristics of the interface elements, and determining the positions of the interface elements in the vector curve path diagram;
analyzing the position of the interface element in the vector curve path diagram, and determining a coordinate point of the interface element;
and taking the coordinate point where the interface element is as a starting coordinate point of curvilinear motion.
In one embodiment, the step of analyzing a distance between coordinate points between the start coordinate point and the end coordinate point according to the coordinate value of each coordinate point to obtain a distance between adjacent coordinate points includes:
acquiring all coordinate points between the starting coordinate point and the end coordinate point and on the preset moving track through the preset analysis script;
and analyzing adjacent coordinate points in all coordinate points on the preset moving track by taking pixels as units through the preset analysis script to obtain the distance between the adjacent coordinate points.
A device for processing curvilinear movement of an interface element, the device comprising:
the path diagram acquisition module is used for acquiring a vector curve path diagram drawn based on the SVG technology;
the object acquisition module is used for acquiring the SVG path object and the circle object of the vector curve path diagram through the document object;
the coordinate point determining module is used for calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram;
a coordinate value module, configured to perform coordinate value analysis on each coordinate point based on the document object, and determine a coordinate value of each coordinate point;
and the curve motion module is used for enabling the interface element to perform curve motion in the vector curve path diagram according to the coordinate value of each coordinate point.
In one embodiment, the path map obtaining module includes:
the instruction acquisition unit is used for acquiring a curve path diagram editing instruction based on the SVG technology;
the canvas setting unit is used for setting the canvas according to the canvas setting parameters in the curve path diagram editing instruction to obtain the canvas;
the canvas adjusting unit is used for aligning the drawing board and the canvas according to a preset mutual alignment mode;
and the curve path graph drawing unit is used for drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain the vector curve path graph.
A computer device comprising a memory storing a computer program and a processor implementing the steps of the method when executing the computer program.
A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method.
According to the processing method, device, computer equipment and storage medium for the curvilinear motion of the interface element, a vector curve path diagram is drawn based on an SVG technology, an SVG path object and a circle object of the vector curve path diagram are obtained through a document object, a preset analysis script is called, and according to the SVG path object and the circle object, coordinate points of a path track in the vector curve path diagram are extracted to obtain each coordinate point of the path track in the vector curve path diagram; analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram. And determining the point coordinates required by the curvilinear motion of the interface elements by the document object and calling a preset analysis script, thereby improving the extraction efficiency of coordinate points.
Drawings
FIG. 1 is a diagram illustrating an exemplary scenario for processing a curvilinear movement of an interface element;
FIG. 2 is a schematic flow chart diagram illustrating a method for handling curvilinear movement of interface elements in one embodiment;
FIG. 3 is a block diagram of a processing device for processing the curvilinear movement of the interface element according to an embodiment;
FIG. 4 is a diagram illustrating an internal structure of a computer device according to an embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.
The processing method for the curvilinear motion of the interface element can be applied to the application environment shown in fig. 1. Wherein the terminal 102 communicates with the server 104 via a network. The server 104 acquires a vector curve path diagram drawn based on the SVG technology through the terminal 102; obtaining an SVG path object and a circle object of the vector curve path diagram through the document object; calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram; analyzing coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram. The terminal 102 may be, but not limited to, various personal computers, notebook computers, smart phones, tablet computers, and portable wearable devices, and the server 104 may be implemented by an independent server or a server cluster formed by a plurality of servers.
In one embodiment, as shown in fig. 2, a method for processing curvilinear movement of an interface element is provided, which is exemplified by applying the method to the server in fig. 1, and includes step S220 and step S320:
and step S220, acquiring a vector curve path diagram drawn based on the SVG technology.
The SVG technology refers to a technology for drawing SVG, and SVG can be drawn by using a tool such as Inkscape (open source vector graphics editing software) or Sketch (software for drawing a Sketch). SVG refers to Scalable Vector Graphics (Scalable Vector Graphics), which is a Graphics format based on the extensible markup language (a subset of the standard universal markup language) for describing two-dimensional Vector Graphics. The vector curve path diagram is a scalable vector graph drawn according to a curve path formed by a motion trajectory of an interface element performing a curve motion on an interface, the vector curve path diagram is drawn with the curve path, and the motion trajectory can be designed according to interface requirements, for example: the curve is formed by bending and winding like a spiral road.
Step S240, obtaining the SVG path object and the circle object of the vector curve path diagram through the document object.
In the browser, the document object is a relatively important object, and the document object can be used for checking, modifying or adding contents to an HTML document and processing events inside the document. On a Web page, the document object may be referenced by the document attribute of the window object, or directly. The SVG path object refers to an SVG path instance loaded in the memory by the SVG path class. The circle object refers to a circle instance loaded in a memory by a circle class, and is attached to the SVG path object.
Step S260, calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram;
the preset analysis script can be a JavaScript script, and the coordinate values of the coordinate points are obtained by embedding the preset analysis script in HTML to analyze the vector curve path diagram. The coordinate points of the path trajectory refer to all points on the path trajectory in the vector curve roadmap. The vector curve path diagram is directly embedded in the HTML content, and each coordinate point of the path track in the vector curve path diagram can be extracted by calling a preset analysis script. The path trajectory refers to a motion trajectory of a curved path in a vector curved path diagram. The motion trajectory is realized based on each point, which is each coordinate point.
In step S280, coordinate value analysis is performed on each coordinate point based on the document object, and the coordinate value of each coordinate point is determined.
And the coordinate value of the position of the coordinate point in the vector curve path diagram is the coordinate value of the coordinate point. And determining the coordinate value of each coordinate point through analysis of the document object. In the document object, there is a coordinate value of each pixel point of the vector curve path diagram, and the coordinate value of each coordinate point can be obtained by corresponding each coordinate point in the vector curve path diagram to the pixel point in the vector curve path diagram.
And step S300, enabling the interface element to perform curvilinear motion in the vector curve path diagram according to the coordinate values of the coordinate points.
The interface element refers to a series of elements which meet the interaction requirements of a user and are included in a software or system interface which can meet the interaction requirements, the interface element can be a movable icon, the icon can be one or more, the interface element is embedded in a vector curve path diagram, the interface element can perform curvilinear motion in the vector curve path diagram according to a path track, and when the interface element is to be moved currently, a coordinate point corresponding to the position where the interface element is located is a starting coordinate point of the curvilinear motion.
In the vector curve path diagram, a starting coordinate point and an end point coordinate point are determined according to a coordinate point where the interface element is located, and the interface element is subjected to curve motion according to the starting coordinate point and the end point coordinate point. And performing displacement operation of the coordinate point through a displacement transform () function of the CSS3 technology and a displacement transform () function of the transform of the CSS3 technology, and finishing the curvilinear path motion according to the coordinates of the starting coordinate point of the interface element and smooth transition in a certain time interval according to a preset attribute value. Thereby moving the interface element from the start coordinate point to the end coordinate point. The CSS3 technology is an upgraded version of the CSS (cascading style sheet) technology, is a computer language used to express file styles such as HTML (an application of standard universal markup language) or XML (a subset of standard universal markup language), can statically modify a web page, can dynamically format each element of the web page in cooperation with various scripting languages, can precisely control the layout of element positions in the web page at a pixel level, supports almost all font size styles, and has the ability to edit web page objects and model styles. The basic meaning of the shift transform (x, y) function is to shift the display position of an element by x and y. transform refers to the deformation property of CSS3 technology, including the following: rotation (rotate), skew (skew), scale (scale) and shift (translate), and matrix warping (matrix), among others.
In the processing method for the curvilinear motion of the interface element, a vector curve path diagram is drawn by obtaining an SVG technology, an SVG path object and a circle object of the vector curve path diagram are obtained through a document object, a preset analysis script is called, and according to the SVG path object and the circle object, coordinate points of a path track in the vector curve path diagram are extracted to obtain each coordinate point of the path track in the vector curve path diagram; analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram. The coordinate of the point required by the curvilinear motion of the interface element is determined by the document object and the preset analysis script, so that the extraction efficiency of the coordinate point is improved.
In one embodiment, the step of obtaining the vector curve path diagram drawn based on the SVG technology includes: acquiring a curve path diagram editing instruction based on an SVG technology; setting the canvas according to the canvas setting parameters in the curve path diagram editing instruction to obtain the canvas; aligning the drawing board and the canvas according to a preset mutual alignment mode; and drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain a vector curve path diagram.
The curve-path diagram editing instruction can be sent by a user through a terminal, the user can trigger the curve-path diagram editing instruction based on tools such as inskcape, Sketch and the like installed on the terminal, after receiving the curve-path diagram editing instruction, the user enters a drawing interface of the tools such as inskcape, Sketch and the like, canvas setting is carried out in the drawing interface of the tools such as inskcape, Sketch and the like, and corresponding canvas parameters are adjusted, for example: the canvas size is 200px200px and the canvas size is 100px100px, then you draw a line with a length of 10 (not possible with units) inside, the actual length is 20 px. The preset mutual alignment mode can align the drawing board and the canvas according to the habit of a user or the requirement of the vector curve path diagram. The preset mutual alignment mode can be that the canvas is moved to the right frame of the drawing board, so that the right frame of the canvas and the right frame of the drawing board are overlapped, and the canvas can also be moved to the center position of the drawing board. The preset d-attribute may be set according to the shape length of the desired curve, and the like. The path tag is used to define a path, which corresponds to a pen controlled by a command. The vector curve path diagram is constructed by the SVG technology, so that the working efficiency is improved, the quality of the curve diagram is improved, and the processing of the curve path motion is simplified by the vector curve path diagram.
In one embodiment, the step of calling a preset analysis script, extracting coordinate points of a path track in a vector curve path diagram according to an SVG path object and a circle object, and obtaining each coordinate point of the path track in the vector curve path diagram comprises: performing motion according to a path track of a circle object along a vector curve path diagram by using animateMotion of the SVG path object to obtain the total time length of the motion completion; carrying out time length segmentation on the total movement completion time length according to a preset segmentation time length, and determining a coordinate point extraction interval; and calling a preset analysis script to extract each coordinate point of the path track in the vector curve path diagram according to the coordinate point extraction interval.
Here, animateMotion refers to a combination of animate + transform, and is an element of an animation operation on the svg element transform. The total movement completion time duration refers to the time duration of the circle object moving from the starting point of the path track to the end point of the path track at a constant speed on the path track, one end of the path track is the starting point, and the other end of the path track is the end point. The preset segmentation duration can be set according to actual needs, and the preset segmentation duration can be 1ms, 2ms and the like. The coordinate point extraction interval refers to how often coordinate points are extracted. Such as: assuming that the preset segmentation time length is 1ms, assuming that the total time length for completing the movement is 1 minute, coordinate points are required to be extracted within 1ms-1000ms, the coordinate point extraction interval is 1ms, the coordinate points are required to be extracted once when the circle object moves for 1ms, the coordinate points are extracted once when the circle object moves for 1ms through a preset analysis script, and all coordinate points of the path track in the vector curve path diagram are extracted. The coordinate point extraction from the SVG curve is time-saving and labor-saving compared with the traditional manual dotting.
In one embodiment, in the vector curve path diagram, a starting coordinate point of the curve motion is determined according to a coordinate point where the interface element is located; determining a terminal coordinate point of the curvilinear motion according to the starting coordinate point and a preset moving track; analyzing the distance between the coordinate points of the starting coordinate point and the terminal coordinate point according to the coordinate values of the coordinate points to obtain the distance between the adjacent coordinate points; and moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
The preset moving track is preset according to interface requirements, the moving track can be determined according to the length of a curve path or the moving duration, the preset moving track refers to a preset moving track, and the preset moving track can be a plurality of different moving tracks or the same moving track of each moving. A plurality of coordinate points exist on the track between the starting coordinate point and the terminal coordinate point, all the coordinate points are connected in sequence to form a motion track, and the straight-line distance from each coordinate point to the adjacent coordinate point is the same.
For example: when the interface is used for displaying a check-in process and recording check-in times, a check-in period is assumed to be performed once every 1 day, one month is a check-in period, and one month is 30 days, check-in marks of 30 days need to be displayed in the interface, the check-in marks from the 1 st day to the 30 th day are correspondingly distributed in a curve path of a vector curve path diagram in sequence, a check-in path is formed by corresponding points of the 30 marks in the vector curve path diagram, an interface element moves on the check-in path, the interface element is assumed to be at the position of a check-in point of the 1 st day (the check-in point refers to the corresponding point of the check-in mark in the vector curve path diagram), the moving track of the next interface element is that the check-in point of the 1 st day moves to the check-in point of the 2 nd day, the check-in point of the 1 st day is a starting coordinate point, and the check-in point of the 2 nd day is an end coordinate point. There are 3 points (coordinate points) used for making the interface element move between the check-in point of the 1 st day and the check-in point of the 2 nd day, and assume the check-in point of the 1 st day as point a, the check-in point of the 2 nd day as point e, and point a as the starting point, point e as the terminal point, and there are point b, point c, point d between point a and point e, and the positions on the motion orbit are: a → b → c → d → e, the adjacent coordinate points are: a, b, c, d and e, and analyzing the distance between the coordinate points of the starting coordinate point and the ending coordinate point to obtain the distance between the adjacent coordinate points as follows: the distance between a and b, the distance between b and c, the distance between c and d, and the distance between d and e.
The distance between adjacent coordinate points and the coordinate value corresponding to each coordinate point are assigned to a displacement translate () function of a CSS3 technology through a CSS3 technology, the displacement operation of the coordinate points is carried out through a transform displacement translate () function of a CSS3 technology, the movement (for example, the offset movement is carried out by 8px (which can be manually adjusted) step length) is carried out according to the coordinates of the starting coordinate point of the interface element and the given left (x coordinate) and top (y coordinate) position parameters (the coordinate value of each coordinate point and the distance between the adjacent coordinate points), and the curve path movement is completed through smooth transition in a certain time interval according to the preset attribute value. Thereby moving the interface element from the start coordinate point to the end coordinate point.
In one embodiment, in the vector curve path diagram, the step of determining a starting coordinate point of the curvilinear motion according to the coordinate point where the interface element is located includes: analyzing the vector curve path diagram according to the characteristics of the interface elements, and determining the positions of the interface elements in the vector curve path diagram; analyzing the position of the interface element in the vector curve path diagram, and determining a coordinate point of the interface element; and taking the coordinate point of the interface element as a starting coordinate point of the curvilinear motion.
The interface element may be an icon, and the characteristics of the interface element may be a shape, a color, and the like. And identifying interface elements in the vector curve path diagram, corresponding to coordinates according to positions of the interface elements in the vector curve path diagram, and taking points corresponding to the interface elements as coordinate points where the interface elements are located, namely starting coordinate points of curvilinear motion. And based on the coordinate point where the interface element is located, the starting coordinate point of the curvilinear motion is determined, so that the working efficiency is improved.
In one embodiment, the step of analyzing the distance between the coordinate points of the starting coordinate point and the ending coordinate point according to the coordinate values of the coordinate points to obtain the distance between the adjacent coordinate points includes: acquiring all coordinate points between the starting coordinate point and the end coordinate point on a preset moving track through a preset analysis script; and analyzing adjacent coordinate points in all coordinate points on a preset moving track by taking pixels as units through a preset analysis script to obtain the distance between the adjacent coordinate points.
Where a pixel refers to a minimum unit in an image represented by a sequence of numbers. When the curvilinear path motion is processed, time is not needed to be spent on calculating and determining the distance between the adjacent coordinate points, and the working efficiency is improved.
It should be understood that, although the steps in the flowchart of fig. 2 are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least some of the steps in fig. 2 may include multiple sub-steps or multiple stages that are not necessarily performed at the same time, but may be performed at different times, and the order of performing the sub-steps or stages is not necessarily sequential, but may be performed alternately or alternately with other steps or at least some of the sub-steps or stages of other steps.
In one embodiment, as shown in fig. 3, there is provided a processing apparatus for processing curvilinear motion of an interface element, including: a roadmap acquisition module 310, an object acquisition module 320, a coordinate point determination module 330, a coordinate point value module 340, and a curvilinear motion module 350, wherein:
a path diagram obtaining module 310, configured to obtain a vector curve path diagram drawn based on an SVG technology; an object obtaining module 320, configured to obtain an SVG path object and a circle object of the vector curve path diagram through a document object; a coordinate point determining module 330, configured to invoke a preset parsing script, extract coordinate points of a path trajectory in the vector curve path diagram according to the SVG path object and the circle object, and obtain each coordinate point of the path trajectory in the vector curve path diagram; a coordinate value module 340, configured to perform coordinate value analysis on each coordinate point based on the document object, and determine a coordinate value of each coordinate point; and a curve motion module 350, configured to perform a curve motion on the interface element in the vector curve path according to the coordinate value of each coordinate point.
In one embodiment, the path map obtaining module 310 includes: the command acquisition unit is used for acquiring a curve path diagram editing command based on the SVG technology; the canvas setting unit is used for setting the canvas according to the canvas setting parameters in the curvilinear path diagram editing instruction to obtain the canvas; the canvas adjusting unit is used for aligning the drawing board and the canvas according to a preset mutual alignment mode; and the curve path graph drawing unit is used for drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain the vector curve path graph.
In one embodiment, the coordinate point determination module 330 is configured to: performing motion according to a path track of a circle object along a vector curve path diagram by using animateMotion of the SVG path object to obtain the total time length of the motion completion; carrying out time length segmentation on the total movement completion time length according to a preset segmentation time length, and determining a coordinate point extraction interval; and calling a preset analysis script to extract each coordinate point of the path track in the vector curve path diagram according to the coordinate point extraction interval.
In one embodiment, the curvilinear motion module 350 includes: the starting coordinate point determining unit is used for determining a starting coordinate point of curvilinear motion according to a coordinate point where the interface element is located in the vector curve path diagram; the terminal point coordinate point determining unit is used for determining a terminal point coordinate point of the curvilinear motion according to the starting coordinate point and a preset moving track; the distance analysis unit is used for carrying out distance analysis on coordinate points between the starting coordinate point and the end point coordinate point according to the coordinate values of the coordinate points to obtain the distance between the adjacent coordinate points; and the curve motion unit is used for moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
In one embodiment, the starting coordinate point determination unit is configured to: analyzing the vector curve path diagram according to the characteristics of the interface elements, and determining the positions of the interface elements in the vector curve path diagram; analyzing the position of the interface element in the vector curve path diagram, and determining a coordinate point of the interface element; and taking the coordinate point of the interface element as a starting coordinate point of the curvilinear motion.
In one embodiment, the distance analysis unit is configured to: acquiring all coordinate points between the starting coordinate point and the end coordinate point on a preset moving track through a preset analysis script; and analyzing adjacent coordinate points in all coordinate points on a preset moving track by taking pixels as units through a preset analysis script to obtain the distance between the adjacent coordinate points.
For the specific limitation of the processing device for the interface element curvilinear motion, reference may be made to the above limitation on the processing method for the interface element curvilinear motion, and details are not described here. The modules in the processing device for the curvilinear motion of the interface element can be wholly or partially realized by software, hardware and a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a server, the internal structure of which may be as shown in fig. 4. The computer device includes a processor, a memory, and a network interface connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a method for processing curvilinear motion of an interface element.
It will be appreciated by those skilled in the art that the configuration shown in fig. 4 is a block diagram of only a portion of the configuration associated with the present application, and is not intended to limit the computing device to which the present application may be applied, and that a particular computing device may include more or fewer components than shown, or may combine certain components, or have a different arrangement of components.
In one embodiment, there is provided a computer device comprising a memory storing a computer program and a processor implementing the following steps when the processor executes the computer program:
acquiring a vector curve path diagram drawn based on an SVG technology; obtaining an SVG path object and a circle object of the vector curve path diagram through the document object; calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram; analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram.
In one embodiment, the processor, when executing the computer program, further performs the steps of: acquiring a curve path diagram editing instruction based on an SVG technology; setting canvas according to canvas setting parameters in the curve path diagram editing instruction to obtain the canvas; aligning the drawing board and the canvas according to a preset mutual alignment mode; and drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain a vector curve path diagram.
In one embodiment, the processor, when executing the computer program, further performs the steps of: performing motion according to a path track of a circle object along a vector curve path diagram by using animateMotion of the SVG path object to obtain the total time length of the motion completion; carrying out time length segmentation on the total movement completion time length according to a preset segmentation time length, and determining a coordinate point extraction interval; and calling a preset analysis script, and extracting each coordinate point of the path track in the vector curve path diagram according to the coordinate point extraction interval.
In one embodiment, the processor, when executing the computer program, further performs the steps of: in the vector curve path diagram, determining a starting coordinate point of the curvilinear motion according to a coordinate point where the interface element is located; determining a terminal coordinate point of curvilinear motion according to the starting coordinate point and a preset moving track; analyzing the distance between the coordinate points of the starting coordinate point and the terminal coordinate point according to the coordinate values of the coordinate points to obtain the distance between the adjacent coordinate points; and moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
In one embodiment, the processor, when executing the computer program, further performs the steps of: analyzing the vector curve path diagram according to the characteristics of the interface elements, and determining the positions of the interface elements in the vector curve path diagram; analyzing the position of the interface element in the vector curve path diagram, and determining a coordinate point of the interface element; and taking the coordinate point of the interface element as a starting coordinate point of the curvilinear motion.
In one embodiment, the processor, when executing the computer program, further performs the steps of: acquiring all coordinate points between the starting coordinate point and the end coordinate point on a preset moving track through a preset analysis script; and analyzing adjacent coordinate points in all coordinate points on a preset moving track by taking pixels as units through a preset analysis script to obtain the distance between the adjacent coordinate points.
In one embodiment, a computer-readable storage medium is provided, having a computer program stored thereon, which when executed by a processor, performs the steps of:
acquiring a vector curve path diagram drawn based on an SVG technology; obtaining an SVG path object and a circle object of the vector curve path diagram through the document object; calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram; analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram.
In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring a curve path diagram editing instruction based on an SVG technology; setting canvas according to canvas setting parameters in the curve path diagram editing instruction to obtain the canvas; aligning the drawing board and the canvas according to a preset mutual alignment mode; and drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain a vector curve path diagram.
In one embodiment, the computer program when executed by the processor further performs the steps of: performing motion according to a path track of a circle object along a vector curve path diagram by using animateMotion of the SVG path object to obtain the total time length of the motion completion; carrying out time length segmentation on the total movement completion time length according to preset segmentation time length, and determining a coordinate point extraction interval; and calling a preset analysis script, and extracting each coordinate point of the path track in the vector curve path diagram according to the coordinate point extraction interval.
In one embodiment, the processor, when executing the computer program, further performs the steps of: in the vector curve path diagram, determining a starting coordinate point of the curvilinear motion according to a coordinate point where the interface element is located; determining a terminal coordinate point of curvilinear motion according to the starting coordinate point and a preset moving track; analyzing the distance between the coordinate points of the starting coordinate point and the terminal coordinate point according to the coordinate values of the coordinate points to obtain the distance between the adjacent coordinate points; and moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
In one embodiment, the computer program when executed by the processor further performs the steps of: analyzing the vector curve path diagram according to the characteristics of the interface elements, and determining the positions of the interface elements in the vector curve path diagram; analyzing the position of the interface element in the vector curve path diagram, and determining a coordinate point of the interface element; and taking the coordinate point of the interface element as a starting coordinate point of the curvilinear motion.
In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring all coordinate points between the starting coordinate point and the end coordinate point on a preset moving track through a preset analysis script; and analyzing adjacent coordinate points in all coordinate points on a preset moving track by taking pixels as units through a preset analysis script to obtain the distance between the adjacent coordinate points.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (10)
1. A method of processing curvilinear movement of an interface element, the method comprising:
acquiring a vector curve path diagram drawn based on an SVG technology;
obtaining an SVG path object and a circle object of the vector curve path diagram through a document object;
the animateMotion of the SVG path object moves along the path track of the vector curve path diagram according to the circle object to obtain the total movement completion time length, performs time length segmentation on the total movement completion time length according to the preset segmentation time length, determines a coordinate point extraction interval, calls a preset analysis script, and extracts each coordinate point of the path track in the vector curve path diagram according to the coordinate point extraction interval;
based on the document object, corresponding each coordinate point in the vector curve path diagram to a pixel point in the vector curve path diagram to obtain a coordinate value of each coordinate point, wherein the document object comprises the coordinate value of each pixel point of the vector curve path diagram;
according to the coordinate value of each coordinate point, the interface element makes curvilinear motion in the vector curve path diagram;
the preset analysis script is embedded in HTML, and the vector curve path diagram is nested in the content of the HTML.
2. The method according to claim 1, wherein the step of obtaining a vector curve path diagram drawn based on SVG technology comprises:
acquiring a curve path diagram editing instruction based on an SVG technology;
setting canvas according to the canvas setting parameters in the curve path diagram editing instruction to obtain the canvas;
aligning the drawing board and the canvas according to a preset mutual alignment mode;
and drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain the vector curve path diagram.
3. The method of claim 1, wherein said step of imparting a curvilinear motion to said interface element in said vector curvilinear path diagram based on said coordinate values of each of said coordinate points comprises:
in the vector curve path diagram, determining a starting coordinate point of the curvilinear motion according to a coordinate point where the interface element is located;
determining a terminal coordinate point of the curvilinear motion according to the starting coordinate point and a preset moving track;
according to the coordinate value of each coordinate point, carrying out distance analysis on the coordinate points between the starting coordinate point and the ending coordinate point to obtain the distance between the adjacent coordinate points;
and moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
4. The method according to claim 3, wherein the step of determining a starting coordinate point of the curvilinear motion according to the coordinate point of the interface element in the vector curvilinear path diagram comprises:
analyzing the vector curve path diagram according to the characteristics of the interface elements, and determining the positions of the interface elements in the vector curve path diagram;
analyzing the position of the interface element in the vector curve path diagram, and determining a coordinate point of the interface element;
and taking the coordinate point where the interface element is located as a starting coordinate point of curvilinear motion.
5. The method of claim 3, wherein the step of analyzing a distance between coordinate points between the start coordinate point and the end coordinate point according to the coordinate value of each coordinate point to obtain a distance between adjacent coordinate points comprises:
acquiring all coordinate points between the starting coordinate point and the end coordinate point and on the preset moving track through the preset analysis script;
and analyzing adjacent coordinate points in all coordinate points on the preset moving track by taking pixels as units through the preset analysis script to obtain the distance between the adjacent coordinate points.
6. An apparatus for processing curvilinear movement of an interface element, the apparatus comprising:
the path diagram acquisition module is used for acquiring a vector curve path diagram drawn based on the SVG technology;
the object acquisition module is used for acquiring the SVG path object and the circle object of the vector curve path diagram through the document object;
a coordinate point determination module, configured to enable an animateMotion of the SVG path object to move according to a path trajectory of the circle object along the vector curve path diagram to obtain a total movement completion duration, perform duration segmentation on the total movement completion duration according to a preset segmentation duration, determine a coordinate point extraction interval, call a preset parsing script, and extract each coordinate point of the path trajectory in the vector curve path diagram according to the coordinate point extraction interval;
a coordinate point value module, configured to, based on the document object, map each coordinate point in the vector curve path diagram to a pixel point in the vector curve path diagram to obtain a coordinate value of each coordinate point, where the document object includes a coordinate value of each pixel point of the vector curve path diagram;
and the curve motion module is used for enabling the interface element to perform curve motion in the vector curve path diagram according to the coordinate value of each coordinate point.
7. The apparatus of claim 6, wherein the road map acquisition module comprises:
the command acquisition unit is used for acquiring a curve path diagram editing command based on the SVG technology;
the canvas setting unit is used for setting the canvas according to the canvas setting parameters in the curve path diagram editing instruction to obtain the canvas;
the canvas adjusting unit is used for aligning the drawing board and the canvas according to a preset mutual alignment mode;
the curve path graph drawing unit is used for drawing a curve path on the canvas by using a path label according to a preset d attribute to obtain the vector curve path graph;
the preset analysis script is embedded in HTML, and the vector curve path diagram is nested in the content of the HTML.
8. The apparatus of claim 6, wherein the curvilinear motion module comprises:
the starting coordinate point determining unit is used for determining a starting coordinate point of curvilinear motion according to a coordinate point where the interface element is located in the vector curve path diagram;
the terminal coordinate point determining unit is used for determining a terminal coordinate point of the curvilinear motion according to the starting coordinate point and a preset moving track;
the distance analysis unit is used for carrying out distance analysis on coordinate points between the starting coordinate point and the end coordinate point according to the coordinate values of the coordinate points to obtain the distance between the adjacent coordinate points;
and the curve motion unit is used for moving the interface element from the starting coordinate point to the end coordinate point according to the distance between the adjacent coordinate points and the coordinate value corresponding to each coordinate point.
9. A computer device comprising a memory and a processor, the memory storing a computer program, wherein the processor implements the steps of the method of any one of claims 1 to 5 when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910667195.8A CN110555123B (en) | 2019-07-23 | 2019-07-23 | Method and device for processing curvilinear motion of interface elements and computer equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910667195.8A CN110555123B (en) | 2019-07-23 | 2019-07-23 | Method and device for processing curvilinear motion of interface elements and computer equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110555123A CN110555123A (en) | 2019-12-10 |
| CN110555123B true CN110555123B (en) | 2022-09-02 |
Family
ID=68735887
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910667195.8A Active CN110555123B (en) | 2019-07-23 | 2019-07-23 | Method and device for processing curvilinear motion of interface elements and computer equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110555123B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111047668A (en) * | 2019-12-17 | 2020-04-21 | 支付宝(杭州)信息技术有限公司 | Information display method, device and equipment |
| CN114201566B (en) * | 2021-12-10 | 2024-06-04 | 重庆中科云从科技有限公司 | Static track playing method, system and device of moving object |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105160696A (en) * | 2015-08-25 | 2015-12-16 | 杭州施强网络科技有限公司 | Computer image drawing optimization method |
| CN106294474A (en) * | 2015-06-03 | 2017-01-04 | 阿里巴巴集团控股有限公司 | The processing method of video data, Apparatus and system |
| CN108228043A (en) * | 2016-12-14 | 2018-06-29 | 北京国双科技有限公司 | The moving method and device of image data |
| CN109002293A (en) * | 2018-07-27 | 2018-12-14 | 珠海金山网络游戏科技有限公司 | A kind of UI element methods of exhibiting, device, electronic equipment and storage medium |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8487941B2 (en) * | 2008-12-15 | 2013-07-16 | Leonovus Usa Inc. | Media action script acceleration apparatus |
| US8471814B2 (en) * | 2010-02-26 | 2013-06-25 | Microsoft Corporation | User interface control using a keyboard |
| JP5210466B1 (en) * | 2011-06-17 | 2013-06-12 | 楽天株式会社 | Information processing apparatus, information processing method, information processing program, and recording medium on which information processing program is recorded |
| CN102298787A (en) * | 2011-08-08 | 2011-12-28 | 深圳市万兴软件有限公司 | Control method and control system for animation object motion |
| CN106204694B (en) * | 2016-07-14 | 2019-06-28 | 天脉聚源(北京)传媒科技有限公司 | A kind of method and device of mobile target object |
| CN106780684B (en) * | 2017-01-09 | 2021-08-31 | 腾讯科技（深圳）有限公司 | Animation effect realization method and device |
-
2019
- 2019-07-23 CN CN201910667195.8A patent/CN110555123B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106294474A (en) * | 2015-06-03 | 2017-01-04 | 阿里巴巴集团控股有限公司 | The processing method of video data, Apparatus and system |
| CN105160696A (en) * | 2015-08-25 | 2015-12-16 | 杭州施强网络科技有限公司 | Computer image drawing optimization method |
| CN108228043A (en) * | 2016-12-14 | 2018-06-29 | 北京国双科技有限公司 | The moving method and device of image data |
| CN109002293A (en) * | 2018-07-27 | 2018-12-14 | 珠海金山网络游戏科技有限公司 | A kind of UI element methods of exhibiting, device, electronic equipment and storage medium |
Non-Patent Citations (2)
| Title |
|---|
| Extracting data from vector figures in scholarly articles;Hartgerink，H et al;《arXiv:1709.02261V3》;20180312;全文 * |
| 基于ASP的SVG交互技术在电子地图中的应用;杜飞等;《电脑知识与技术》;20081005;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110555123A (en) | 2019-12-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110555123B (en) | Method and device for processing curvilinear motion of interface elements and computer equipment | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| CN105630939B (en) | A kind of general painting canvas input interface design method and device | |
| US20220366711A1 (en) | Method for processing text in image, electronic device, and storage medium | |
| WO2014047553A1 (en) | Method and system for providing animated font for character | |
| CN111898411A (en) | Text image labeling system, method, computer device and storage medium | |
| WO2018107720A1 (en) | Method and device for processing data of electronic book, and mobile terminal | |
| US20110149115A1 (en) | Electronic device and method for operating a presentation application file | |
| CN105279251A (en) | Virtual gift display method and device | |
| CN111208998A (en) | Method and device for automatically laying out data visualization large screen and storage medium | |
| CN111694493B (en) | Webpage screenshot method, computer equipment and readable storage medium | |
| CN109658485B (en) | Webpage animation drawing method, device, computer equipment and storage medium | |
| CN111399831A (en) | Page display method and device, storage medium and electronic device | |
| CN112346725B (en) | Page design method, device, equipment and storage medium | |
| CN109636885A (en) | A kind of sequence frame animation method and system for the H5 page | |
| CN109656652B (en) | Webpage chart drawing method, device, computer equipment and storage medium | |
| CN112445400A (en) | Visual graph creating method, device, terminal and computer readable storage medium | |
| JP2021182441A (en) | Method for processing image, device, apparatus, medium, and program | |
| CN114580350A (en) | Text character labeling method and device, computer equipment and storage medium | |
| CN110162301B (en) | Form rendering method, form rendering device and storage medium | |
| CN110728736A (en) | Picture labeling method and device, computer equipment and storage medium | |
| CN116311120A (en) | Video annotation model training method, video annotation method, device and equipment | |
| CN115878935A (en) | Local refreshing method, system, device, equipment and medium of chart | |
| CN113408387A (en) | Method for generating handwritten text data for complex writing scene and computer product | |
| US11354379B2 (en) | Display control method and display control apparatus |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210127 Address after: 518066 Room 201, building A, No. 1, Qian Wan Road, Qianhai Shenzhen Hong Kong cooperation zone, Shenzhen, Guangdong (Shenzhen Qianhai business secretary Co., Ltd.) Applicant after: Shenzhen saiante Technology Service Co.,Ltd. Address before: 1-34 / F, Qianhai free trade building, 3048 Xinghai Avenue, Mawan, Qianhai Shenzhen Hong Kong cooperation zone, Shenzhen, Guangdong 518000 Applicant before: Ping An International Smart City Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |