Vector graphics display method, device and computer equipment for Web side

Abstract

The present invention provides a method, device and computer equipment for displaying vector graphics on a Web side. The display method comprises: obtaining a set of graphic elements of a vector graphics to be displayed, wherein the vector graphics comprises a plurality of graphic element sets, the graphic element set comprises a plurality of graphic elements, and each graphic element in the graphic element set can be drawn using the same WebGL drawing command; determining the WebGL drawing command corresponding to the graphic element set; and calling the WebGL drawing command to draw each graphic element in the graphic element set. Through the present invention, the fast display of vector graphics on a Web side can be realized.

Description

Technical Field

[0001] The present invention relates to the technical field of vector graphics processing, and in particular to a vector graphics display method, device and computer equipment for a Web terminal. Background Art

[0002] Vector graphics is a drawing format that can be scaled and interacted with. Compared with picture format or PDF format, vector drawings can be infinitely scaled, which allows users to accurately view every detail of the drawings. The most famous vector drawing software in the industry is Autodesk's AutoCAD product, whose file format is DWG. This software is a graphic design software that allows users to freely create and edit various basic graphics. AutoCAD software also provides a display function to display the designed graphics in the software graphical interface. However, since the AutoCAD software was developed very early, the display optimization for large models was not considered, and some drawings with large amounts of data have poor opening and interactive performance in AutoCAD. For users, the intuitive feeling is that the opening and use of large models with large amounts of data are not smooth.

[0003] In order to solve the display efficiency problem of large models (including display based on opening operations and interactive operations such as zooming, translating and rotating), especially the display efficiency problem of large models based on web pages, the inventor has conducted the following research on existing web page rendering technologies: In the prior art, the mainstream technologies for web page rendering graphics include Canvas, WebGL, Three.js and other technologies. In terms of efficiency, Canvas has a relatively general display efficiency because its rendering method is related to the hardware platform, and its rendering API encapsulates the underlying rendering interface layer by layer. Therefore, the inventor has further studied the display technology based on WebGL and Three.js. WebGL and Three.js usually use GPU directly for rendering. For the method of rendering using GPU, it is necessary to call the drawing command when rendering each primitive, and each call of the drawing command will have a large overhead, because it not only calls the final drawing behavior, but also requires a lot of preliminary preparation work, such as preparing data, transmitting data and setting display status. Therefore, the resource overhead caused by calling the drawing command has become an obstacle to further improving the rendering efficiency of large models based on web pages.

[0004] In summary, how to further improve the rendering efficiency of vector graphics, especially vector graphics of large models, has become a technical problem that urgently needs to be solved in this field. Summary of the invention

[0005] The purpose of the present invention is to provide a method, device, computer equipment and readable storage medium for displaying vector graphics on a Web side, so as to solve the technical problem of low rendering efficiency of vector graphics on a Web side in the prior art.

[0006] On the one hand, to achieve the above-mentioned purpose, the present invention provides a vector graphics display method for a Web terminal.

[0007] The vector graphics display method for a Web terminal includes: obtaining a graphic element set of a vector graphics to be displayed, wherein the vector graphics includes a plurality of graphic element sets, the graphic element set includes a plurality of graphic elements, and each graphic element in the graphic element set can be drawn using the same WebGL drawing command; determining the WebGL drawing command corresponding to the graphic element set; and calling the WebGL drawing command to draw each graphic element in the graphic element set.

[0008] Furthermore, the graphic elements in the graphic element set are located in the same layer, have the same color and belong to the same type.

[0009] Furthermore, the primitive set includes primitive data and attribute data, wherein the attribute data includes the layer where the primitive in the primitive set is located and the color and type of the primitive; the step of determining the WebGL drawing command corresponding to the primitive set includes: parsing the attribute data, and determining the WebGL drawing command according to the color and type of the primitive obtained by the analysis; the step of calling the WebGL drawing command to draw each primitive in the primitive set is specifically: calling the WebGL drawing command to draw the primitive data on the layer where the primitive is located obtained by the analysis.

[0010] Furthermore, the primitive set includes primitive data, and the name of the primitive set includes the identifier of the primitive set and the layer where the primitives in the primitive set are located; the step of determining the WebGL drawing command corresponding to the primitive set includes: obtaining a pre-stored correspondence table between the identifier and the WebGL drawing command, parsing the name of the primitive set, and in the correspondence table, searching for the corresponding WebGL drawing command according to the identifier of the primitive set obtained by the parsing; the step of calling the WebGL drawing command to draw each primitive in the primitive set is specifically: calling the WebGL drawing command to draw the primitive data on the layer where the primitive is located obtained by the parsing.

[0011] Furthermore, the vector graphics display method for the Web terminal also includes: receiving a layer hiding command, determining the layer to be hidden indicated by the layer hiding command, and judging whether the graphics in the graphics set are located in the layer to be hidden; the step of calling the WebGL drawing command to draw each graphics element in the graphics set is specifically: when the layer where the graphics element in the graphics set is located is different from the layer to be hidden, calling the WebGL drawing command to draw each graphics element in the graphics set.

[0012] Furthermore, the step of obtaining a set of graphic elements of a vector image to be displayed includes: sending a vector image request to the cloud, wherein the cloud returns a storage address of a graphic element data packet corresponding to the vector image after receiving the request, wherein the vector image corresponds to multiple graphic element data packets, and the graphic element data packet includes several of the graphic element sets; downloading the graphic element data packet according to the storage address; and parsing the graphic element set from the graphic element data packet.

[0013] Furthermore, the step of parsing the primitive set from the primitive data packet includes: reading a pre-stored data configuration file corresponding to the vector map, wherein the data configuration file includes a data packet identifier, a data starting position and a data size corresponding to the primitive set; determining the primitive data packet indicated by the data packet identifier to obtain a target primitive data packet; starting from the data starting position in the target primitive data packet, reading data of the data size to obtain the primitive set.

[0014] On the other hand, to achieve the above-mentioned purpose, the present invention provides a vector graphics display device for a Web terminal.

[0015] The vector graphics display device for a Web terminal includes: an acquisition module, used to acquire a graphic element set of a vector graphics to be displayed, wherein the vector graphics includes a plurality of graphic element sets, the graphic element set includes a plurality of graphic elements, and each graphic element in the graphic element set can be drawn using the same WebGL drawing command; a determination module, used to determine the WebGL drawing command corresponding to the graphic element set; and a drawing module, used to call the WebGL drawing command to draw each graphic element in the graphic element set.

[0016] To achieve the above objectives, the present invention also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above method when executing the computer program.

[0017] To achieve the above object, the present invention also provides a computer-readable storage medium on which a computer program is stored, and the computer program implements the steps of the above method when executed by a processor.

[0018] The present invention provides a method, device, computer equipment and readable storage medium for displaying vector graphics on a Web side. The vector graphics to be displayed include several sets of graphics elements. The graphics elements in the graphics element sets can be drawn using the same WebGL drawing command. When the vector graphics are displayed on the Web side, the graphics element sets of the vector graphics are first obtained, and then the WebGL drawing command corresponding to each graphics element set is determined. For a graphics element set, each of the graphics elements therein is drawn using the determined WebGL drawing command corresponding to the graphics element set. The graphics elements in each graphics element set of the vector graphics are all drawn using the determined WebGL drawing command, thereby realizing the display of the vector graphics on the Web side. According to the display method, device, computer equipment and readable storage medium provided by the present invention, for the display of the vector graphics on the Web side, the graphics elements merged into the same graphics element set use only one drawing call when drawing. For the vector graphics model with a large number of graphics elements in the original file of the vector graphics, the drawing calls can be greatly reduced when displayed, thereby improving the display efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0020] Figure 1 A flowchart of a method for displaying a vector diagram on a Web terminal provided in the first embodiment of the present invention;

[0021] Figure 2 A block diagram of a vector graphics display device for a Web terminal provided in Embodiment 2 of the present invention;

[0022] Figure 3 This is a hardware structure diagram of a computer device provided in Embodiment 3 of the present invention. DETAILED DESCRIPTION

[0023] In order to make the purpose, technical scheme and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0024] In order to improve the rendering efficiency of vector graphics on the Web, especially the rendering efficiency of vector graphics of large models, the present invention provides a vector graphics display method, device, computer equipment and readable storage medium for the Web. In the vector graphics display method for the Web provided by the present invention, for the vector graphics to be displayed on the Web, the graphics elements included therein are merged according to the WebGL drawing commands used during display, that is, the graphics elements that can be drawn using the same WebGL drawing commands are merged into a graphics element set, so that the vector graphics includes several graphics element sets, and the graphics element set includes several graphics elements. Based on this, when the vector graphics is displayed on the Web, the graphics element set of the vector graphics to be displayed is first obtained, and for a graphics element set, the WebGL drawing command corresponding to the graphics element set is determined, and then the WebGL drawing command is called, and each graphics element in the graphics element set is drawn by the WebGL drawing command, and the drawing of the graphics element set included in the vector graphics is completed, thereby completing the rendering of the vector graphics. It can be seen from this that when displaying a vector graphics on the Web, only one WebGL drawing command needs to be called for a set of graphics elements. That is, only one WebGL drawing command needs to be called for the graphics elements included in the graphics set. Compared with the prior art in which a WebGL drawing command needs to be called once when drawing each graphics element, the resource overhead required for drawing calls is reduced. In particular, for larger models with a large number of graphics elements, the drawing calls can be greatly reduced during display, thereby significantly improving rendering efficiency.

[0025] Specific embodiments of the method, apparatus, computer device, and readable storage medium for displaying vector graphics on a Web side provided by the present invention will be described in detail below.

[0026] Embodiment 1

[0027] The embodiment of the present invention provides a vector graphics display method for a Web terminal. Optionally, the vector graphics display method for a Web terminal is applied to a web page terminal, and the vector graphics are rendered based on WebGL technology, and the rendering is performed using a GPU. Specifically, the drawing is performed by calling an OpenGL drawing command in a WebGL drawing command. Through this method, the number of calls of the drawing command can be reduced, and the display efficiency can be improved. When the display method responds to a user's browsing operation, the web page terminal can quickly open a model selected by the user. When the display method responds to a user's interactive operation, such as operations such as scaling, zooming out, and panning the model, the web page terminal can achieve infinite size and position changes, thereby improving the user experience. Specifically, Figure 1 The flowchart of the method for displaying a vector diagram on a Web side provided in the first embodiment of the present invention is as follows: Figure 1 As shown, the vector graphics display method for a Web terminal provided in this embodiment includes the following steps S101 to S103.

[0028] Step S101: Obtain a set of graphic elements of a vector image to be displayed.

[0029] The vector image includes a number of graphic element sets, and the graphic element set includes a number of graphic elements. Each graphic element in the graphic element set can be drawn using the same drawing command.

[0030] Specifically, a vector image includes multiple primitives, and a primitive has multiple attributes, such as the layer where the primitive is located, the color of the primitive display, the type of the primitive, and the material of the primitive, etc. Among them, if the attribute that can affect the drawing command used when drawing the primitive is called the drawing command determined attribute, when different primitives have the same drawing command determined attribute, these primitives can be drawn using the same drawing command. Based on this, the present invention proposes the concept of a primitive set, and each primitive in the primitive set can be drawn using the same drawing command. Then, the primitives included in the vector image are merged, specifically, the primitives with the same drawing command determined attribute are merged into one or more primitive sets. The vector image includes several primitive sets. In this step S101, the primitive set of the vector image to be displayed is obtained, and the primitives of the vector image to be displayed can be obtained.

[0031] Optionally, the drawing command determines the attributes including the layer where the primitive is located, the color of the primitive display, and the type of the primitive, wherein the type of the primitive is specifically a point primitive type, a line primitive type, or a network primitive type. That is, the primitives in the primitive set are located in the same layer, have the same color, and belong to the same type.

[0032] Step S102: Determine the WebGL drawing command corresponding to the primitive set.

[0033] For the acquired primitive set, through step S102, the WebGL drawing commands that need to be called when drawing the primitives therein are determined.

[0034] Optionally, a suitable WebGL drawing command may be configured for each primitive set, and then in step S102, the WebGL drawing command corresponding to the primitive set may be determined according to the configuration; or, the WebGL drawing command corresponding to the primitive set may be determined according to the WebGL drawing command determination attribute of the primitive set.

[0035] Step S103: calling the WebGL drawing command to draw each primitive in the primitive set.

[0036] After determining the WebGL drawing command corresponding to a primitive set, the WebGL drawing command is called in step S103 to draw each primitive in the primitive set. By calling the WebGL drawing command once, the drawing of all primitives in the primitive set is realized. After the primitive set corresponding to the vector image to be displayed is drawn, the display of the vector image is realized.

[0037] For example, a vector image has eight line segment primitives that are located on the same layer and have the same color. According to the traditional drawing method, eight WebGL drawing commands need to be called. However, through the vector image display method for the Web terminal provided by this embodiment, the above eight line segment primitives are merged into one primitive set, and the eight line segments can be drawn by calling one WebGL drawing command.

[0038] In the vector graphics display method for the Web terminal provided in this embodiment, the vector graphics to be displayed includes several primitive sets, and the primitives in the primitive sets can be drawn using the same WebGL drawing command. When displaying the vector graphics, the primitive sets of the vector graphics are first obtained, and then the WebGL drawing commands corresponding to each primitive set are determined. For a primitive set, each primitive in it is drawn by the determined WebGL drawing command corresponding to it, and the primitives in each primitive set of the vector graphics are drawn by the determined WebGL drawing command to realize the display of the vector graphics. It can be seen from this that the primitives merged into the same primitive set will only use one drawing call when drawing. For a vector graphics model with a large number of primitives in the original file of the vector graphics, the drawing calls can be greatly reduced when displaying, thereby improving the display efficiency.

[0039] Optionally, in one embodiment, the primitive set includes primitive data and attribute data, wherein the attribute data includes the layer where the primitive in the primitive set is located and the color and type of the primitive; the step of determining the WebGL drawing command corresponding to the primitive set includes: parsing the attribute data, and determining the WebGL drawing command according to the color and type of the primitive obtained by the parsing; the step of calling the WebGL drawing command to draw each primitive in the primitive set is specifically: calling the WebGL drawing command to draw the primitive data on the layer where the primitive obtained by the parsing is located.

[0040] Specifically, primitive data refers to the original data displayed by the primitives, such as the primitive index data and geometric data, and attribute data refers to the attributes determined by the above-mentioned WebGL drawing commands. When determining the WebGL drawing command corresponding to the primitive set, the attribute data in the primitive set is parsed to parse the layer where the primitive in the primitive set is located and the color and type of the primitive. When the color and / or type of the primitive is different, the WebGL drawing command called during drawing is different. Therefore, the WebGL drawing command can be determined based on the color and type of the primitive obtained by parsing. At the same time, primitives in the same layer with the same color and type can be drawn by calling a WebGL drawing command once. Therefore, when drawing each primitive in the primitive set through a WebGL drawing command, the primitive data is drawn on the parsed layer using the determined WebGL drawing command, so that all primitives in the primitive set can be drawn at one time.

[0041] Optionally, in one embodiment, a primitive set includes primitive data, and the name of the primitive set includes an identifier of the primitive set and a layer in which the primitives in the primitive set are located; the step of determining the WebGL drawing command corresponding to the primitive set includes: obtaining a pre-stored correspondence table between identifiers and WebGL drawing commands, parsing the name of the primitive set, and searching the correspondence table for the corresponding WebGL drawing command according to the identifier of the primitive set obtained by parsing; the step of calling the WebGL drawing command to draw each primitive in the primitive set is specifically: calling the WebGL drawing command to draw the primitive data on the layer in which the parsed primitive is located.

[0042] Specifically, when naming a primitive set, it is named according to the identifier and the layer where the primitive is located. That is to say, the identifier of the primitive set and the layer where the primitive is located in the primitive set can be determined through the name of the primitive set. At the same time, a correspondence table between the identifier and the WebGL drawing command is preset. Under the premise of knowing the identifier of the primitive set, the WebGL drawing command corresponding to the primitive set can be queried through the correspondence table. When determining the WebGL drawing command corresponding to the primitive set, the correspondence table is obtained, and the name of the primitive set is parsed, which can parse the identifier of the primitive set and the layer where the primitive is located in the primitive set. Then, the WebGL drawing command corresponding to the primitive set can be queried in the correspondence table using the identifier of the primitive set obtained by parsing as the query condition; when drawing each primitive in the primitive set through the WebGL drawing command, the queried WebGL drawing command is used to draw the primitive data on the parsed layer, so as to achieve one-time drawing of all primitives in the primitive set.

[0043] Optionally, in one embodiment, the vector graphics display method for the Web terminal also includes: receiving a layer hiding command, determining the layer to be hidden indicated by the layer hiding command, and judging whether the graphics in the graphics element set is located in the layer to be hidden; the step of calling the WebGL drawing command to draw each graphics element in the graphics element set is specifically: when the layer where the graphics element in the graphics element set is located is different from the layer to be hidden, calling the WebGL drawing command to draw each graphics element in the graphics element set.

[0044] Specifically, during the interaction process, the user will select one or several layers of the model based on viewing needs and perform a hiding operation. When the user selects a layer to be hidden, the web page receives a layer hiding command, which indicates which layers need to be hidden. Therefore, the layer to be hidden can be determined through the layer hiding command. Before drawing each element in the element set through the WebGL drawing command, first determine whether the element in the element set is located in the layer to be hidden. For example, the layer where the element in the element set is located is obtained by parsing the attribute data of the element set, and then determine whether the layer obtained by parsing is consistent with the layer to be hidden; for another example, the layer where the element in the element set is located is obtained by parsing the name of the element set, and then determine whether the layer obtained by parsing is consistent with the layer to be hidden. When the element in the element set is located in the layer to be hidden, there is no need to draw the element in the element set. Only when the layer where the element in the element set is located is different from the layer to be hidden, the element in the element set is drawn through the WebGL drawing command. Therefore, while achieving one-time drawing of the primitives in the primitive set, the layer can be hidden conveniently without traversing the layer of each primitive.

[0045] Optionally, in one embodiment, the step of obtaining a graphic element set of a vector image to be displayed includes: sending a vector image request to the cloud, wherein the cloud returns a storage address of a graphic element data packet corresponding to the vector image after receiving the request, wherein the vector image corresponds to multiple graphic element data packets, and the graphic element data packet includes several graphic element sets; downloading the graphic element data packet according to the storage address; parsing the graphic element set from the graphic element data packet.

[0046] Specifically, in a cloud scenario, when storing vector graphics, the cloud storage system stores them in the form of graphic element data packets. Each vector graphics corresponds to multiple graphic element data packets, and a graphic element data packet includes one or more graphic element sets. Optionally, the size of the graphic element data packet can be limited within a preset size range to avoid the graphic element data packet being too large and affecting the transmission speed. The cloud stores the identification information of the vector graphics and the storage address of the graphic element data packet corresponding to the vector graphics. The storage address is the address of the graphic element data packet in the storage system. When the Web end needs to display the vector graphics, it can send a vector graphics request to the cloud according to the identification information of the vector graphics. After receiving the request, the cloud determines the storage address of the graphic element data packet corresponding to the vector graphics according to the identification information, returns the storage address to the Web end, and then the Web end downloads the graphic element data packet to the storage address, and then parses the graphic element set from the graphic element data packet, and then determines the WebGL drawing command corresponding to the graphic element set and draws it. It can be seen from this that through the form of graphic element data packets, it can use an asynchronous method to download more smoothly when requesting graphic element data.

[0047] Optionally, in one embodiment, the step of parsing a primitive set from a primitive data packet includes: reading a data configuration file corresponding to a pre-stored vector graph, wherein the data configuration file includes a data packet identifier, a data starting position and a data size corresponding to the primitive set; determining the primitive data packet indicated by the data packet identifier to obtain a target primitive data packet; starting from the data starting position in the target primitive data packet, reading data of the data size to obtain the primitive set.

[0048] Specifically, a data configuration file corresponding to a vector graphics image is preconfigured, in which a data packet identifier corresponding to a graphic element set is set, that is, an identifier of a graphic element data packet where the graphic element set is located; a data starting position is set, that is, a starting position of a graphic element set in a graphic element data packet where the graphic element set is located; a data size is set, that is, a size occupied by a graphic element set in a graphic element data packet, and the data configuration file is pre-stored. In the data preparation stage for displaying a vector graphics image, when parsing a graphic element set from a downloaded graphic element data packet, the above data configuration file is read to obtain a data packet identifier, a data starting position, and a data size corresponding to each graphic element set of the vector graphics image. For a graphic element set, the graphic element data packet indicated by the data packet identifier is the graphic element data packet where the graphic element set is located, which is defined as a target graphic element data packet. After determining the target graphic element data packet, the data indicated by the data size is read from the position indicated by the data starting position in the target graphic element data packet, and the data read is the graphic element set. Optionally, on the Web side, a graphic element data packet is first requested, and a graphic element set is parsed from the graphic element data packet, and finally the graphic element is rendered by WebGL rendering technology to realize the rendering of the vector graphics image on the Web.

[0049] Embodiment 2

[0050] Corresponding to the above-mentioned embodiment 1, the second embodiment of the present invention provides a vector graphics display device for a Web terminal. The relevant technical features and corresponding technical effects can be referred to the above-mentioned embodiment 1, which will not be described in detail here. Figure 2 A block diagram of a vector graphics display device for a Web terminal provided in the second embodiment of the present invention, such as Figure 2 As shown, the device includes an acquisition module 201, a first determination module 202 and a drawing module 203:

[0051] The acquisition module 201 is used to obtain a set of graphic elements of a vector image to be displayed, wherein the vector image includes a plurality of graphic element sets, each graphic element set includes a plurality of graphic elements, and each graphic element in the graphic element set can be drawn using the same WebGL drawing command; the first determination module 202 is used to determine the WebGL drawing command corresponding to the graphic element set; and the drawing module 203 is used to call the WebGL drawing command to draw each graphic element in the graphic element set.

[0052] Optionally, in one embodiment, the graphics elements in the graphics element set are located in the same layer, have the same color, and are of the same type.

[0053] Optionally, in one embodiment, the primitive set includes primitive data and attribute data, wherein the attribute data includes the layer where the primitive in the primitive set is located and the color and type of the primitive; the first determination module 202 includes a first parsing unit and a determination unit, wherein the first parsing unit is used to parse the attribute data, and the determination unit is used to determine the WebGL drawing command according to the color and type of the primitive obtained by parsing; the drawing module 203 is also used to call the WebGL drawing command to draw the primitive data on the layer where the parsed primitive is located.

[0054] Optionally, in one embodiment, the primitive set includes primitive data, and the name of the primitive set includes the identifier of the primitive set and the layer where the primitives in the primitive set are located; the first determination module 202 includes an acquisition unit, a second parsing unit and a search unit, wherein the acquisition unit is used to obtain a correspondence table between a pre-stored identifier and a WebGL drawing command, the second parsing unit is used to parse the name of the primitive set, and the search unit is used to search for the corresponding WebGL drawing command in the correspondence table according to the identifier of the primitive set obtained by parsing; the drawing module 203 is also used to call the WebGL drawing command to draw the primitive data on the layer where the parsed primitive is located.

[0055] Optionally, in one embodiment, the vector graphics display device for the Web terminal also includes: a receiving module, a second determination module and a judgment module, wherein the receiving module is used to receive a layer hiding command, the second determination module is used to determine the layer to be hidden indicated by the layer hiding command, and the judgment module is used to determine whether the graphics element in the graphics element set is located in the layer to be hidden; the drawing module 203 is also used to call the WebGL drawing command to draw each graphics element in the graphics element set when the layer where the graphics element in the graphics element set is located is different from the layer to be hidden.

[0056] Optionally, in one embodiment, the acquisition module 201 includes: a sending unit, a downloading unit and a third parsing unit, wherein the sending unit is used to send a vector graphics request to the cloud, wherein the cloud returns the storage address of a graphic element data packet corresponding to the vector graphics after receiving the request, wherein the vector graphics corresponds to multiple graphic element data packets, and the graphic element data packet includes several graphic element sets; the downloading unit is used to download the graphic element data packet according to the storage address; and the parsing unit is used to parse the graphic element set from the graphic element data packet.

[0057] Optionally, in one embodiment, when the parsing unit parses a primitive set from a primitive data packet, the specific steps performed include: reading a data configuration file corresponding to a pre-stored vector graph, wherein the data configuration file includes a data packet identifier, a data starting position, and a data size corresponding to the primitive set; determining the primitive data packet indicated by the data packet identifier to obtain a target primitive data packet; starting from the data starting position in the target primitive data packet, reading data of the data size to obtain a primitive set.

[0058] Embodiment 3

[0059] This embodiment also provides a computer device, such as a smart phone, tablet computer, laptop computer, desktop computer, rack server, blade server, tower server or cabinet server (including an independent server or a server cluster composed of multiple servers) that can execute programs. Figure 3 As shown, the computer device 01 of this embodiment includes at least but is not limited to: a memory 011 and a processor 012 which can be interconnected through a system bus. Figure 3 It should be pointed out that Figure 3 Only a computer device 01 having components memory 011 and processor 012 is shown, but it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0060] In this embodiment, the memory 011 (i.e., readable storage medium) includes flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 011 can be an internal storage unit of the computer device 01, such as a hard disk or memory of the computer device 01. In other embodiments, the memory 011 can also be an external storage device of the computer device 01, such as a plug-in hard disk equipped on the computer device 01, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. Of course, the memory 011 can also include both the internal storage unit of the computer device 01 and its external storage device. In this embodiment, the memory 011 is generally used to store the operating system and various application software installed on the computer device 01, such as the program code of the display device of the vector diagram in the second embodiment. In addition, the memory 011 can also be used to temporarily store various types of data that have been output or are to be output.

[0061] In some embodiments, the processor 012 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 012 is generally used to control the overall operation of the computer device 01. In this embodiment, the processor 012 is used to run the program code stored in the memory 011 or process data, such as a vector graphics display method for a Web terminal.

[0062] Embodiment 4

[0063] This embodiment also provides a computer-readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a disk, an optical disk, a server, an App application store, etc., on which a computer program is stored, and the program realizes corresponding functions when executed by a processor. The computer-readable storage medium of this embodiment is used for storing a display device for a vector image, and when executed by a processor, the vector image display method for a Web terminal of embodiment 1 is realized.

[0064] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0065] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0066] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method.

[0067] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A vector graphics display method for a Web terminal, characterized in that: include: Obtaining a set of graphic primitives for a vector image to be displayed, wherein the vector image includes a plurality of said graphic primitive sets, each of said graphic primitive sets includes a plurality of graphic primitives, and each graphic primitive in said graphic primitive set can be drawn using the same WebGL drawing command, and is located in the same layer, has the same color, and belongs to the same type; Determining the WebGL drawing command corresponding to the primitive set; Receive layer hide command; Determine the layer to be hidden indicated by the layer hiding command; Determining whether the graphic element in the graphic element set is located in the layer to be hidden; and When the layer where the graphics elements in the graphics element set are located is different from the layer to be hidden, the WebGL drawing command is called to draw each graphics element in the graphics element set.

2. The method for displaying vector graphics on a Web terminal according to claim 1, characterized in that: The primitive set includes primitive data and attribute data, wherein the attribute data includes the layer where the primitive in the primitive set is located and the color and type of the primitive; The step of determining the WebGL drawing command corresponding to the primitive set includes: parsing the attribute data, and determining the WebGL drawing command according to the color and type of the primitive obtained by the parsing; The step of calling the WebGL drawing command to draw each primitive in the primitive set is specifically: calling the WebGL drawing command to draw the primitive data on the layer where the primitive is located obtained by parsing.

3. The method for displaying vector graphics on a Web terminal according to claim 1, wherein: The graphic element set includes graphic element data, and the name of the graphic element set includes an identifier of the graphic element set and a layer where the graphic element in the graphic element set is located; The step of determining the WebGL drawing command corresponding to the primitive set includes: obtaining a pre-stored correspondence table between identifiers and WebGL drawing commands, parsing the name of the primitive set, and searching the correspondence table for the WebGL drawing command corresponding to the identifier of the primitive set obtained by parsing; The step of calling the WebGL drawing command to draw each primitive in the primitive set is specifically: calling the WebGL drawing command to draw the primitive data on the layer where the primitive is located obtained by parsing.

4. The method for displaying vector graphics on a Web terminal according to claim 1, wherein: The steps for obtaining the primitive set of the vector image to be displayed include: Sending a vector graphics request to the cloud, wherein the cloud returns the storage address of a graphic primitive data packet corresponding to the vector graphics after receiving the request, wherein the vector graphics corresponds to multiple graphic primitive data packets, and the graphic primitive data packets include several graphic primitive sets; Downloading the graphic element data packet according to the storage address; The primitive set is parsed from the primitive data package.

5. The method for displaying a vector diagram on a Web terminal according to claim 4, wherein: The step of parsing the primitive set from the primitive data packet comprises: Reading a pre-stored data configuration file corresponding to the vector map, wherein the data configuration file includes a data packet identifier, a data starting position, and a data size corresponding to a graphic element set; Determine the graphic primitive data packet indicated by the data packet identifier to obtain a target graphic primitive data packet; Starting from the data starting position in the target primitive data packet, data of the data size is read to obtain the primitive set.

6. A vector graphics display device for a Web terminal, characterized in that: include: an acquisition module, configured to acquire a set of graphic elements of a vector image to be displayed, wherein the vector image includes a plurality of graphic element sets, each of which includes a plurality of graphic elements, and each graphic element in the graphic element set can be drawn using the same WebGL drawing command, and is located in the same layer, has the same color, and is of the same type; A determination module, configured to determine a WebGL drawing command corresponding to the primitive set; A receiving module, used for receiving a layer hiding command; A second determining module, configured to determine the layer to be hidden indicated by the layer hiding command; A judgment module, configured to judge whether a graphic element in the graphic element set is located in the layer to be hidden; and The drawing module is used for calling the WebGL drawing command to draw each primitive in the primitive set when the layer where the primitive in the primitive set is located is different from the layer to be hidden.

7. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 5 are implemented.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

Images