Vector graph page rendering method and system

Abstract

The embodiment of the invention discloses a vector graphic page rendering method and system, a storage medium and electronic equipment. The method comprises the following steps: creating a webpage canvas element as a user-defined rendering canvas; obtaining vector graphic data needing to be rendered, and processing the vector graphic data; executing a rendering function corresponding to the vector graphic element, and rendering the vector graphic element to the user-defined rendering canvas; and adjusting the user-defined rendering canvas according to the interaction format and data of the user and the operation layer on the user-defined rendering canvas. By the adoption of the technical scheme, the performance of vector graph page rendering can be improved, memory occupation is reduced, and therefore the operation experience of a user is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and system for rendering a vector graphics page, as well as a storage medium and an electronic device. Background Art

[0002] Currently, the conventional way to render vector graphics pages based on browsers is to use the Document Object Model (DOM). DOM is a programming interface for HTML and XML documents. HTML DOM defines standard methods for accessing and manipulating HTML documents, including Scalable Vector Graphics (SVG) technology. SVG uses XML to define graphics, just like using HTML tags and styles to define DIV. The design ideas of the two are the same. The essence of SVG is a DOM element.

[0003] When the browser renders a page, DOM elements are rendered as vector graphics. The margins of each element need to be processed separately, and the browser needs to process them all into pixels before outputting them to the screen, which requires a lot of calculations. When there is a lot of content on the page and there are a large number of DOM elements, the rendering speed of these contents will become very slow.

[0004] Therefore, when using SVG to render a large number of elements, the performance is poor, the latency is high, it is easy to freeze, and it takes up a lot of memory. At the same time, different browsers have different implementation standards and poor compatibility. Summary of the invention

[0005] In order to solve the above technical problems, the present invention proposes a method and system for vector graphics page rendering, as well as a storage medium and an electronic device, which can improve the performance of vector graphics page rendering and reduce memory usage, thereby improving the user's operating experience.

[0006] The method for rendering a vector graphics page provided by an embodiment of the present invention comprises the following steps:

[0007] Create a web canvas element as a custom rendering canvas;

[0008] Acquire vector graphics data to be rendered, and process the vector graphics data;

[0009] Execute a rendering function corresponding to a vector graphics element, and render the vector graphics element onto the custom rendering canvas;

[0010] The custom rendering canvas is adjusted according to the format and data of the user's interaction with the operation layer on the custom rendering canvas.

[0011] Optionally, the step of creating a web page canvas element as a custom rendering canvas further includes the following steps:

[0012] Creating other document object model elements as operation layers on the custom rendering canvas;

[0013] According to the frequency of rendering adjustment operations and the hierarchical relationship of display, the custom rendering canvas is divided into a background layer and an element layer.

[0014] Optionally, the step of obtaining the vector graphics data to be rendered and processing the vector graphics data further comprises the following steps:

[0015] Obtaining vector graphics data to be rendered, and classifying the type and data of the vector graphics;

[0016] Separate the frequency of rendering adjustment operations and displayed low-level vector graphics into the background layer of the custom rendering canvas;

[0017] The frequency of rendering adjustment operations and the high-level vector graphics to be displayed are divided into element layers of the custom rendering canvas.

[0018] Optionally, executing a rendering function corresponding to the vector graphic element and rendering the vector graphic element onto the custom rendering canvas further comprises the following steps:

[0019] Initialize the custom rendering canvas according to the vector graphics data;

[0020] Render the vector graphics divided into the background layer to the background layer using the corresponding rendering function;

[0021] Render the vector graphics divided into the element layer to the element layer using the corresponding rendering function;

[0022] The operation layer is initialized according to the vector graphics data.

[0023] Optionally, adjusting the custom rendering canvas according to the format and data of the user's interaction with the operation layer on the custom rendering canvas further comprises the following steps:

[0024] Acquire the format and data of the user's interaction with the operation layer on the custom rendering canvas;

[0025] Convert the data into data of the custom rendering canvas;

[0026] Determining the vector graphics range that needs to be adjusted, as well as the adjusted vector graphics data and vector graphics attributes according to the data of the custom rendering canvas;

[0027] According to the range of the vector graphics that needs to be adjusted, the corresponding part of the custom rendering canvas is cleared, and the corresponding rendering function is used to re-render the vector graphics of the part.

[0028] Optionally, the initialization processing of the operation layer according to the vector graphic data further includes processing of a vector data modification layer, a graphic attribute modification layer and a preview operation layer.

[0029] The system for rendering a vector graphics page provided by an embodiment of the present invention includes a generating unit, a processing unit and a rendering unit, wherein:

[0030] The generating unit is used to create a web page canvas element as a custom rendering canvas;

[0031] The processing unit is used to obtain vector graphics data that needs to be rendered and process the vector graphics data;

[0032] The rendering unit is used to execute a rendering function corresponding to the vector graphic element, and render the vector graphic element onto the custom rendering canvas.

[0033] Optionally, the rendering unit is further configured to adjust the custom rendering canvas according to a format and data of user interaction with an operation layer on the custom rendering canvas.

[0034] The computer-readable storage medium provided by the embodiment of the present invention stores a computer program, and when the computer program is executed by a processor, the method for rendering a vector graphics page is implemented.

[0035] An electronic device provided by an embodiment of the present invention includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, the above-mentioned vector graphics page rendering method is implemented.

[0036] In the above technical solution, since a rendering canvas is used, vector graphics data is pre-processed and allocated, and rendering and operation are separated, the performance of vector graphics page rendering is improved, and memory usage is reduced, thereby improving the user's operating experience.

[0037] The technical solution of the present invention is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] The above and other purposes, features and advantages of the present invention will become more apparent by describing the embodiments of the present invention in more detail in conjunction with the accompanying drawings. The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation of the present invention. In the accompanying drawings, the same reference numerals generally represent the same components or steps.

[0039] Figure 1 It is a schematic diagram of the process of rendering a vector graphics page in an embodiment of the present invention.

[0040] Figure 2 It is a structural diagram of a vector graphics page rendering system in an embodiment of the present invention.

[0041] Figure 3 Schematic diagram of the structure of an electronic device in an embodiment of the present invention. DETAILED DESCRIPTION

[0042] Below, the exemplary embodiments according to the present invention will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments of the present invention, and it should be understood that the present invention is not limited to the exemplary embodiments described here.

[0043] It should be noted that the relative arrangement of components and steps, the numerical expressions and numerical values ​​set forth in these embodiments do not limit the scope of the present invention unless specifically stated otherwise.

[0044] Those skilled in the art can understand that the terms "first" and "second" in the embodiments of the present invention are only used to distinguish different steps, devices or modules, etc., and neither represent any specific technical meaning nor indicate the necessary logical order between them.

[0045] It should also be understood that, in the embodiments of the present invention, “plurality” may refer to two or more than two, and “at least one” may refer to one, two or more than two.

[0046] It should also be understood that any component, data or structure mentioned in the embodiments of the present invention can generally be understood as one or more, unless explicitly limited or otherwise indicated in the context.

[0047] Figure 1 Schematic diagram of the process of rendering a vector graphics page in an embodiment of the present invention. Figure 1 As shown, the process of rendering the vector graphics page includes the following steps:

[0048] Step 101: Create a web page canvas element as a custom rendering canvas.

[0049] Web page canvas is the canvas of the browser. Canvas has two properties, width and height. It creates a canvas of fixed size. All rendering operations are performed on this canvas. If the width and height of the canvas are not specified, the default width is 300px and the default height is 150px.

[0050] Step 102: Create other Document Object Model (DOM) elements as operation layers on the custom rendering canvas.

[0051] Step 103: According to the frequency of rendering adjustment operations and the hierarchical relationship of display, the custom rendering canvas is divided into a background layer and an element layer.

[0052] In this embodiment, the operation layer is independent of the rendering canvas, thereby achieving separation of rendering and operation.

[0053] Step 104: Obtain vector graphics data to be rendered, and process the vector graphics data.

[0054] This step further includes the following steps:

[0055] Get the vector graphics data that needs to be rendered and classify the type and data of the vector graphics.

[0056] Separate the frequency of rendering adjustment operations and the display of low-level vector graphics into the background layer of the custom rendering canvas.

[0057] Separate the frequency of rendering adjustment operations and the high-level vector graphics displayed into the element layer of the custom rendering canvas.

[0058] Step 105: Execute the rendering function corresponding to the vector graphic element, and render the vector graphic element onto the custom rendering canvas.

[0059] The custom rendering canvas is initialized according to the vector graphics data, the vector graphics divided into the background layer are rendered into the background layer using the corresponding rendering function, and the vector graphics divided into the element layer are rendered into the element layer using the corresponding rendering function.

[0060] At the same time, the operation layer on the custom rendering canvas is initialized according to the vector graphics data, including the processing of the vector data modification layer, the graphics attribute modification layer and the preview operation layer.

[0061] Step 106: Adjust the custom rendering canvas according to the format and data of the user's interaction with the operation layer on the custom rendering canvas.

[0062] In this step, the format and data of the user's interaction with the operation layer on the custom rendering canvas are first obtained, and the above data is converted into the data of the custom rendering canvas.

[0063] Then, according to the data of the custom rendering canvas, the vector graphics range that needs to be adjusted, as well as the adjusted vector graphics data and vector graphics attributes are determined.

[0064] Finally, according to the range of the vector graphics that needs to be adjusted, the corresponding part of the custom rendering canvas is cleared, and the corresponding rendering function is used to re-render the vector graphics of the corresponding part.

[0065] In order to implement the above process, another embodiment of the present invention proposes a vector graphics page rendering system. Figure 2 It is a structural diagram of a vector graphics page rendering system in an embodiment of the present invention.

[0066] like Figure 2 As shown, the vector graphics page rendering system includes a generating unit 201 , a processing unit 202 and a rendering unit 203 .

[0067] The generation unit creates a web page canvas element as a custom rendering canvas. The generation unit also creates other document object model elements as operation layers on the custom rendering canvas, and divides the custom rendering canvas into a background layer and an element layer according to the frequency of rendering adjustment operations and the hierarchical relationship of the display.

[0068] The processing unit obtains the vector graphics data to be rendered and processes the vector graphics data.

[0069] The processing unit obtains the vector graphics data to be rendered, classifies the types and data of the vector graphics, classifies the vector graphics with a high frequency of rendering adjustment operations and a low display level into the background layer of the custom rendering canvas, and classifies the vector graphics with a high frequency of rendering adjustment operations and a high display level into the element layer of the custom rendering canvas.

[0070] The rendering unit executes the rendering function corresponding to the vector graphics element and renders the vector graphics element onto the custom rendering canvas.

[0071] The rendering unit initializes the custom rendering canvas according to the vector graphics data, renders the vector graphics divided into the background layer to the background layer using the corresponding rendering function, and renders the vector graphics divided into the element layer to the element layer using the corresponding rendering function.

[0072] At the same time, the operation layer on the custom rendering canvas is initialized according to the vector graphics data, including the processing of the vector data modification layer, the graphics attribute modification layer and the preview operation layer.

[0073] In addition, the rendering unit adjusts the custom rendering canvas according to the format and data of the user's interaction with the operation layer on the custom rendering canvas.

[0074] The rendering unit first obtains the format and data of the user's interaction with the operation layer on the custom rendering canvas, and converts the above data into the data of the custom rendering canvas; then, based on the data of the custom rendering canvas, determines the vector graphics range that needs to be adjusted, as well as the adjusted vector graphics data and vector graphics attributes; finally, based on the vector graphics range that needs to be adjusted, clears the corresponding part of the custom rendering canvas, and uses the corresponding rendering function to re-render the vector graphics of the corresponding part.

[0075] The vector graphics page rendering system in this embodiment has the characteristics of high performance, low latency, moderate memory usage, and high consistency across different browsers.

[0076] Another embodiment of the present invention provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the above-mentioned vector graphics page rendering process is implemented.

[0077] Another embodiment of the present invention provides an electronic device, Figure 3 Schematic diagram of the structure of the electronic device in the embodiment of the present invention. Figure 3 As shown, the electronic device 30 includes a memory 301, a processor 302, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the above-mentioned vector graphics page rendering process is implemented.

[0078] The electronic device further includes an input device 303 and an output device 304, which are used for inputting and outputting information respectively.

[0079] In the above embodiment, since a rendering canvas is used, the vector graphics data is pre-processed and allocated, and rendering and operation are separated, the performance of vector graphics page rendering is improved, and memory usage is reduced, thereby improving the user's operating experience.

[0080] The basic principles of the present disclosure are described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, effects, etc. mentioned in the present disclosure are only examples and not limitations, and it cannot be considered that these advantages, strengths, effects, etc. are required by each embodiment of the present disclosure. In addition, the specific details disclosed above are only for the purpose of illustration and ease of understanding, and are not limitations. The above details do not limit the present disclosure to the necessity of adopting the above specific details to be implemented.

[0081] Each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0082] The block diagrams of the devices, apparatuses, equipment, and systems involved in this disclosure are only illustrative examples and are not intended to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As will be appreciated by those skilled in the art, these devices, apparatuses, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including," "comprising," "having," and the like are open words, referring to "including but not limited to," and can be used interchangeably therewith. The words "or" and "and" used herein refer to the words "and / or," and can be used interchangeably therewith, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to," and can be used interchangeably therewith.

[0083] The method and apparatus of the present disclosure may be implemented in many ways. For example, the method and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above order of steps for the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above, unless otherwise specifically stated. In addition, in some embodiments, the present disclosure may also be implemented as a program recorded in a recording medium, which includes machine-readable instructions for implementing the method according to the present disclosure. Therefore, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.

[0084] It should also be noted that in the apparatus, equipment and method of the present disclosure, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be regarded as equivalent schemes of the present disclosure. The above description of the disclosed aspects is provided to enable any technician in the field to make or use the present disclosure. Various modifications to these aspects are very obvious to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown here, but to the widest scope consistent with the principles and novel features disclosed herein.

[0085] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.

Claims

1. A method for rendering a vector graphics page, characterized in that: The following steps are involved: Create a web canvas element as a custom rendering canvas; Acquire vector graphics data to be rendered, and process the vector graphics data; Execute a rendering function corresponding to a vector graphics element, and render the vector graphics element onto the custom rendering canvas; The custom rendering canvas is adjusted according to the format and data of the user's interaction with the operation layer on the custom rendering canvas.

2. The method for rendering a vector graphics page according to claim 1, characterized in that: The step of creating a web page canvas element as a custom rendering canvas further includes the following steps: Creating other document object model elements as operation layers on the custom rendering canvas; According to the frequency of rendering adjustment operations and the hierarchical relationship of display, the custom rendering canvas is divided into a background layer and an element layer.

3. The method for rendering a vector graphics page according to claim 1 or 2, characterized in that: The step of obtaining the vector graphics data to be rendered and processing the vector graphics data further comprises the following steps: Obtaining vector graphics data to be rendered, and classifying the type and data of the vector graphics; Separate the frequency of rendering adjustment operations and displayed low-level vector graphics into the background layer of the custom rendering canvas; The frequency of rendering adjustment operations and the high-level vector graphics to be displayed are divided into element layers of the custom rendering canvas.

4. The method for rendering a vector graphics page according to claim 3, characterized in that: The executing of the rendering function corresponding to the vector graphic element and rendering the vector graphic element onto the custom rendering canvas further comprises the following steps: Initialize the custom rendering canvas according to the vector graphics data; Render the vector graphics divided into the background layer to the background layer using the corresponding rendering function; Render the vector graphics divided into the element layer to the element layer using the corresponding rendering function; The operation layer is initialized according to the vector graphics data.

5. The method for rendering a vector graphics page according to claim 4, characterized in that: The step of adjusting the custom rendering canvas according to the format and data of the user's interaction with the operation layer on the custom rendering canvas further comprises the following steps: Acquire the format and data of the user's interaction with the operation layer on the custom rendering canvas; Convert the data into data of the custom rendering canvas; Determining the vector graphics range that needs to be adjusted, as well as the adjusted vector graphics data and vector graphics attributes according to the data of the custom rendering canvas; According to the range of the vector graphics that needs to be adjusted, the corresponding part of the custom rendering canvas is cleared, and the corresponding rendering function is used to re-render the vector graphics of the part.

6. The method for rendering a vector graphics page according to claim 4, characterized in that: The initialization processing of the operation layer according to the vector graphic data further includes processing of the vector data modification layer, the graphic attribute modification layer and the preview operation layer.

7. A system for rendering a vector graphics page, characterized in that: It includes a generation unit, a processing unit and a rendering unit, wherein: The generating unit is used to create a web page canvas element as a custom rendering canvas; The processing unit is used to obtain vector graphics data that needs to be rendered and process the vector graphics data; The rendering unit is used to execute a rendering function corresponding to the vector graphic element, and render the vector graphic element onto the custom rendering canvas.

8. The vector graphics rendering system according to claim 7, characterized in that: The rendering unit is further configured to adjust the custom rendering canvas according to the format and data of the user's interaction with the operation layer on the custom rendering canvas.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for rendering a vector graphics page according to any one of claims 1 to 6 is implemented.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method for rendering a vector graphics page described in any one of claims 1 to 6 is implemented.

Images