Vector graphics processing method and device, computer device and storage medium

Abstract

The application relates to a vector graphics processing method and device, computer equipment and a storage medium. The method comprises the following steps: acquiring a scalable vector graphics (SVG) file; parsing the SVG file, setting a first rendering parameter according to a parsing result; performing triangle division on the SVG file to obtain a second rendering parameter; and rendering the SVG file onto a canvas according to the first rendering parameter and the second rendering parameter. The scheme mainly comprises the following steps: firstly, parsing the SVG file; secondly, setting the rendering parameter according to different element types parsed out; and thirdly, performing triangle division on a complex shape and then rendering, so that the image processing efficiency of the vector graph can be effectively improved.

Description

Technical Field

[0001] This application relates to the field of image processing technology, and in particular to a method, apparatus, computer device, and storage medium for processing vector graphics. Background Technology

[0002] Compared to bitmaps, vector graphics store the color information of each pixel, offering a clear advantage when dealing with complex and colorful images. However, bitmaps consume more disk space. Vector graphics, on the other hand, feature simple lines, fewer colors, require less disk space, are easier to edit, and maintain clear line outlines even when magnified. Scalable Vector Graphics (SVG) is a two-dimensional vector and vector / raster graphics described using an XML-defined language. When comparing SVG and bitmaps at magnification, bitmaps show noticeable pixelation and distortion.

[0003] Although SVG has the advantages of scaling without distortion and small storage space, there are some limitations in 2D graphics processing engines such as Skia and Cario. For example, when Skia creates a graphics processor context, its console is not associated with the display system, so it cannot be directly rendered to the screen. An additional memory copy is required after the drawing is completed, which makes it unsuitable for real-time rendering.

[0004] Therefore, improving the processing efficiency of SVG files is a technical problem that urgently needs to be solved. Summary of the Invention

[0005] This application provides a method, apparatus, computer device, and computer-readable storage medium for processing vector graphics, which can effectively improve the processing efficiency of SVG files and can directly render them to the screen, achieving real-time rendering.

[0006] In a first aspect, a method for processing vector graphics is provided, comprising: acquiring a scalable vector graphics SVG file; parsing the SVG file and setting a first rendering parameter based on the parsing result; triangulating the primitives parsed from the SVG file to obtain a second rendering parameter; and rendering the SVG file onto a canvas based on the first and second rendering parameters.

[0007] In the technical solution of this application, the rendering parameters are set based on the parsing results after parsing the SVG file, and the rendering parameters are set after triangulation of complex graphics. Therefore, the image processing efficiency of vector graphics can be effectively improved.

[0008] In conjunction with the first aspect, in some implementations of the first aspect, when rendering an SVG file onto a canvas, the following operations can be performed: selecting a first rendering method for rendering or selecting a second rendering method for rendering; the first rendering method is to directly render using a graphics processor based on the first rendering parameters and the second rendering parameters; the second rendering method includes: obtaining third rendering parameters of the texture image of the SVG file using a general-purpose central processing unit, and rendering based on the third rendering parameters.

[0009] The flexible choice between the two rendering methods allows users to select the appropriate method based on their device specifications or personal preferences. Furthermore, the first rendering method leverages the high efficiency of the graphics processing unit (GPU) in image processing, effectively improving rendering speed. The second rendering method addresses the lack of a GPU, utilizing a general-purpose CPU for high-efficiency rendering, maintaining high processing efficiency compared to traditional methods that directly use a general-purpose CPU.

[0010] In conjunction with the first aspect, in some implementations of the first aspect, when selecting a first rendering method or a second rendering method for rendering, it may include: selecting the first rendering method or the second rendering method based on the load state of the graphics processor and / or the general-purpose central processing unit.

[0011] In conjunction with the first aspect, in some implementations of the first aspect, when parsing an SVG file and setting the first rendering parameters based on the parsing results, the following operations can be performed: load the SVG file, parse the SVG elements of the SVG file, the types of SVG elements include text, path and image; set the first rendering parameters according to the type.

[0012] In conjunction with the first aspect, in some implementations of the first aspect, when setting the first rendering parameter according to the type, the following operation can be adopted:

[0013] When the type is text, convert the text to a path, and then set the first rendering parameters according to the path's parsing parameters; or

[0014] When the type is path, set the first rendering parameter according to the path's parsing parameters; or

[0015] When the type is image, set the first rendering parameters according to the image.

[0016] In conjunction with the first aspect, in some implementations of the first aspect, the first rendering parameters include rendering engine state parameters and image texture parameters.

[0017] In conjunction with the first aspect, in some implementations of the first aspect, the second rendering parameters include vertex shader input variables and fragment shader input variables.

[0018] The second aspect provides a vector graphics processing apparatus, which includes units capable of implementing the first aspect and any of its implementations.

[0019] A third aspect provides a computer device, including a memory and a processor, the memory storing a computer program, and the processor executing the computer program being able to implement the method of the first aspect and any of its implementations.

[0020] The fourth aspect provides a computer-readable storage medium having a computer program stored thereon, the computer program being executed by a processor to implement the method of the first aspect and any of its implementations.

[0021] Fifthly, this application provides a chip including a processor. The processor is configured to read and execute a computer program stored in a memory to perform the methods in the first aspect or any possible implementation thereof.

[0022] Optionally, the chip further includes a memory, which is connected to the processor via a circuit or wire.

[0023] Alternatively, the chip may further include a communication interface.

[0024] Sixthly, this application provides a computer program product comprising computer program code that, when executed on a computer, causes the computer to perform the method of the first aspect or any possible implementation thereof.

[0025] The above-mentioned vector graphics processing methods, devices, computer equipment, and storage media mainly improve the image processing efficiency of vector graphics by first parsing the SVG file, then setting the rendering parameters based on the parsing results, and by performing triangulation on complex graphics before setting the rendering parameters. Attached Figure Description

[0026] Figure 1 This is a schematic flowchart illustrating a vector graphics processing method according to an embodiment of this application.

[0027] Figure 2 This is a schematic flowchart illustrating the SVG file parsing method according to an embodiment of this application.

[0028] Figure 3 yes Figure 2 A schematic flowchart illustrating an example of the parsing method.

[0029] Figure 4 This is a schematic diagram of the triangular subdivision result of an embodiment of this application.

[0030] Figure 5 This is a schematic flowchart of the rendering process in an embodiment of this application.

[0031] Figure 6 This is a schematic flowchart illustrating a vector graphics processing method according to an embodiment of this application.

[0032] Figure 7 This is a schematic diagram of the structure of a vector graphics processing apparatus according to an embodiment of this application.

[0033] Figure 8 This is a schematic diagram of the structure of a computer device according to an embodiment of this application.

[0034] Figure 9 This is a schematic diagram of the structure of another computer device according to an embodiment of this application. Detailed Implementation

[0035] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0036] Figure 1 This is a schematic flowchart illustrating a vector graphics processing method according to an embodiment of this application. The following describes... Figure 1 The steps shown are described below. The solution in this application supports multiple platforms, including iOS, Android, and web browser platforms.

[0037] 101. Obtain the SVG file.

[0038] Optionally, the data stream of the SVG file can be obtained from a storage unit, from an external source, or from a network via a data interface, communication interface, or reading device. For example, the SVG file can be loaded from the storage unit of a terminal device via a data interface.

[0039] 102. Parse the SVG file and set the first rendering parameters based on the parsing results.

[0040] An SVG file can include at least one type of graphic object, such as vector graphics, text, or images. The SVG file is parsed to obtain the corresponding type of graphic object, and then the corresponding rendering parameters are set for that graphic object, serving as the first rendering parameter.

[0041] 103. Perform triangulation on the primitives parsed from the SVG file to obtain the second rendering parameters.

[0042] Triangulation refers to dividing a complex polygon into multiple triangles. Triangles are obtained by parsing primitives from an SVG file, and then rendering based on the triangle vertices or textures yields the second rendering parameters.

[0043] 104. Render the graphics of the SVG file onto the canvas according to the first rendering parameters and the second rendering parameters.

[0044] Alternatively, rendering can be performed using OpenGL ES tools, such as OpenGL ES 2.0. Currently, the Open Vector Graphics (OpenVG) standard lacks an effective, practical rendering solution for SVG graphics. TM OpenVG is a license-free, cross-platform application programming interface (API) that provides a low-level hardware-accelerated interface for vector graphics algorithm libraries such as Flash and SVG. Its initial target audience is primarily portable handheld devices requiring high-quality vector graphics algorithm acceleration technology to achieve captivating user interfaces and text display effects on small-screen devices, and to support hardware acceleration for smooth interactive performance at extremely low processor power levels. Several software implementations of OpenVG exist, including ShivaVG, AmanithVG, and MonkVG. However, existing OpenVG software either does not support mobile devices, is outdated, or is closed-source or incomplete in functionality; therefore, a practical OpenVG implementation is still lacking.

[0045] In the technical solution of this application, OpenGL ES or WebGL can be used to execute the steps of the above-mentioned SVG graphics processing method to achieve real-time and efficient rendering. For example, OpenGL ES 2.0 can be used. The vector graphics drawing method based on OpenGL ES can achieve fast drawing, reduce CPU load, and improve user experience.

[0046] exist Figure 1 The proposed solution primarily improves the image processing efficiency of vector graphics by first parsing the SVG file and then setting the rendering parameters based on the parsing results, as well as by using triangulation to first divide the complex graphic before setting the rendering parameters.

[0047] In some implementations of step 102, an SVG file can be loaded, parsed, and then the first rendering parameters can be set based on the types of SVG elements in the parsing results. The types of SVG elements include text, paths, and images.

[0048] To make it easier to understand, we will first introduce the three types of graphic objects in SVG.

[0049] As mentioned above, SVG allows three types of graphic objects: vector graphics (e.g., paths composed of lines and curves), images, and text, which may be referred to as paths, images, and text respectively in this application. Graphic objects can also be called SVG elements. These types can also be called tags. Graphic objects can be pre-grouped, formatted, transformed, and composited into rendered objects. Features include nested transformations, path clipping, transparency masks, filter effects, and stencil objects.

[0050] The basic shape elements in SVG include rectangles, circles, ellipses, lines, polylines, polygons, and paths. Basic shapes contain shading attributes, including fill and stroke. Shading methods can use a single color, gradient colors (linear and radial gradients), and pattern fills. Paths are perhaps the most common shape in SVG and also the most powerful basic shape element in the SVG library. Therefore, the path element can be used to draw rectangles (right-angled or rounded rectangles), circles, ellipses, polylines, polygons, and other shapes such as Bézier curves and quadratic curves. Paths contain many drawing primitives, such as: M = moveto, L = lineto, H = horizontal lineto, V = vertical lineto, C = curveto, S = smooth curveto, Q = quadratic Belzier curve, T = smooth quadratic Belzier curveto, A = elliptical Arc, and Z = closepath. For example,<path d="M250 150 L150 350 L350 350 Z" / > A path is defined that starts at position (250, 150), reaches position (150, 350), then continues from there to (350, 350), and finally closes at (250, 150).

[0051] SVG text is a combination of shapes of text symbols. <text>The element is used to define text.

[0052] An SVG image is a rectangular frame containing a set of pixels with specific colors and transparency. The `<image>` element is used to embed bitmap images within SVG images. SVG image format conversion software supports JPEG and PNG formats; in SVG, the `image` element can also embed any raster image. Within a raster image, SVG filters, masks, rotations, clippings, and all other tools can be applied to the content.

[0053] SVG uses styles to define a wide variety of styles, such as how objects are colored (e.g., fill color, line width), and text type and size.

[0054] TinyXML can be used to parse SVG files because SVG files are essentially XML files, and this library can efficiently parse the various elements within an SVG. Additionally, when SVG files contain nested tags, they need to be processed recursively, layer by layer. The parsed variables will be stored in the attributes of their respective objects and applied to a vector rendering library based on the OpenVG standard and using OpenGL ES as its backend.

[0055] To facilitate understanding of the above analysis process, the following will combine... Figure 2 Let me introduce it.

[0056] Figure 2 This is a schematic flowchart illustrating the SVG file parsing method according to an embodiment of this application.

[0057] 201. Load the SVG file, parse the SVG elements in the SVG file, and obtain the type of the SVG elements.

[0058] For nested SVG files, a recursive parsing method can be used, and the parsing results, namely the parsed elements (image objects) and their types, can be stored in the structure of different type objects.

[0059] 202. Set rendering parameters according to the type of SVG element.

[0060] In one possible implementation, step 202 may include steps 202A and 202B.

[0061] 202A. Determine the element type.

[0062] 202B. When the type is text, convert the text to a path, and then set the first rendering parameters according to the path's parsing parameters; or

[0063] When the type is a path, the first rendering parameter is set according to the path's parsing parameters; or

[0064] When the type is an image, the first rendering parameters are set according to the image.

[0065] Optionally, the first rendering parameters may include rendering engine state parameters and texture parameters, wherein text and paths can generate rendering engine state parameters, and images can generate texture parameters.

[0066] Optionally, when the type is text, in addition to the method of converting text to a path described above, font mapping can also be used for rendering. However, converting text to a path results in higher rendering efficiency. That is, for text rendering, either font mapping or the method described above of converting text to a path and then setting the first rendering parameters based on the path's parsing parameters can be used. Using the method of converting text to a path and then setting the first rendering parameters based on the path's parsing parameters further improves rendering efficiency.

[0067] It should be understood that the above is only one implementation of step 202, and this implementation processes different types of elements in different ways. This method is easy to implement and achieves good results. However, those skilled in the art can also use other methods to implement the function of step 202, as long as the parameters are set according to the element type. For example, when rendering text, either font mapping can be used, or the text can be converted into a path, and then the first rendering parameter can be set according to the path's parsing parameters. In other words, the specific implementation methods can differ, and they will not be listed here.

[0068] 203. Determine whether all tags in the SVG file have been parsed. If the result is "yes", the process ends; if the result is "no", proceed to the step of parsing SVG elements.

[0069] from Figure 2 As can be seen from the method shown, the embodiments of this application handle different types of SVG elements differently. Specifically, for text elements, they are first converted into paths, and then processed using the same method as paths. If it is a path type, the first step is to parse the path's drawing parameters, such as fill color, fill method, stroke color, and stroke method, and then set the rendering engine's state parameters according to the parsed parameters. If it is an image type, the texture parameters are set directly according to the texture drawing method. Converting text drawing into paths before processing can improve drawing efficiency and reduce drawing complexity.

[0070] Figure 3 yes Figure 2 A schematic flowchart illustrating an example of the parsing method is shown below. Figure 3 The steps shown will be explained.

[0071] 301. Initialization.

[0072] 302. Load the SVG file.

[0073] After initialization, the SVG stream is read in.

[0074] 303. Parse SVG elements.

[0075] The combination of steps 302 and 303 is an example of step 201.

[0076] 304. Determine if the element type is text. If the result is "yes", proceed to step 305. If the result is "no", proceed to step 306.

[0077] 305. Determine if the element type is a path. If the result is "yes", proceed to step 307. If the result is "no", proceed to step 308.

[0078] 306. Convert text to a path.

[0079] 307. Parse path parameters.

[0080] 308. Determine if the type is an image. If the result is "yes", proceed to step 309. If the result is "no", proceed to step 310.

[0081] 309. Set rendering parameters.

[0082] Steps 304-309 are an example of step 202, specifically, examples of steps 202A-202B.

[0083] Steps 304-309 involve different processing methods for different parsed element types. Generally, there are three categories: The first category determines if it's text. If it's text, it's first converted to a path type using the methods described above, and then processed according to path processing methods. If it's a path type, the first step is to parse the path's drawing parameters, such as fill color, fill method, stroke color, and stroke method, and then set the rendering engine's state parameters according to the parsed parameters. If it's an image type, the texture parameters are set directly using texture drawing methods.

[0084] 310. Determine whether parsing is complete. If the result is "yes", the process ends; if the result is "no", proceed to step 302. Step 310 is an example of step 203.

[0085] In other words, Figure 3 In the method shown, the type of each SVG element is determined sequentially, and the corresponding processing method is selected to obtain the rendering parameters.

[0086] The following section describes the triangulation in step 103. Vector graphics paths can form closed shapes using different drawing primitives such as `moveto`, `lineto`, and `curveto`. However, the OpenGL ES rendering backend uses points, lines, triangles, quadrilaterals, or convex polygons as basic primitives, which does not support polygons with holes or concave shapes. Therefore, it is necessary to perform triangulation on complex polygons, such as... Figure 4 As shown. Figure 4 This is a schematic diagram of the triangular partitioning result according to an embodiment of this application. From... Figure 4 As can be seen, complex polygons can be divided into multiple triangles, for example... Figure 4 The figure in (a) is divided into two triangles. Figure 4 (b) in the middle is divided into multiple triangles.

[0087] Subdivision of surfaces can be achieved using tessellation objects. Tessellation objects are similar to quadratic equation state objects and need to be created and destroyed.

[0088] The basic process of tessellation involves sending all vertices of a non-convex polygon to a tessellator instead of directly to the OpenGL rendering pipeline. The polygon is then tessellated using the tessellator. Finally, once tessellation is complete, the tessellator renders the tessellated polygon using OpenGL commands or performs user-defined operations via a user-defined callback routine.

[0089] The triangle subdivision algorithm for outlining is similar to that for filling. The main principle is to construct triangles between adjacent nodes with different outlining widths, and then render the triangles using OpenGL to achieve the outlining effect.

[0090] By subdividing the polygon, we can obtain the vertices of the triangle. By setting the parameters of the path, we can obtain the settings for the triangle rendering, such as fill and stroke. Finally, we can use tools such as OpenGL ES to draw it on the canvas.

[0091] In other words, in this embodiment, complex polygons are triangulated. Specifically, for path drawing, a triangulation step is performed to obtain triangle vertices and set vertex shader input variables; for texture drawing, texture states are set and fragment shader input variables are set. In short, the SVG file is triangulated to obtain the second rendering parameters. The second rendering parameters include vertex shader input variables and fragment shader input variables.

[0092] The rendering process in step 104 will be described in detail below.

[0093] In some implementations, the Graphics Processing Unit (GPU) can be used for rendering, that is, the GPU is used to draw the SVG file onto the canvas. This type of implementation fully leverages the advantages of the GPU in terms of fast processing speed and high efficiency in image processing, thereby effectively improving the processing efficiency of vector graphics rendering.

[0094] In other implementations, either a first rendering method or a second rendering method can be selected for rendering. The first rendering method involves directly rendering using the GPU based on the first rendering parameters and the second rendering parameters. The second rendering method includes obtaining third rendering parameters of the texture image of the SVG file using a general-purpose central processing unit (CPU), and rendering based on the third rendering parameters.

[0095] It should be understood that the above selection of two rendering methods allows for the automatic selection of either the first or second rendering method under load balancing, thereby improving rendering efficiency. It also allows users to choose the rendering method based on device specifications or personal preferences.

[0096] The first rendering method mainly utilizes the GPU's high efficiency in processing image-related operations, which can effectively improve rendering efficiency.

[0097] Optionally, in the second rendering method, rendering can be further performed using either the CPU or the GPU. The combination of CPU and GPU in the second rendering method achieves higher rendering efficiency compared to the traditional method of rendering directly using the CPU.

[0098] Rendering employs different methods for different types of drawing objects. For example, for gradient shading, including linear or radial gradients, the conventional approach is to first draw the raster image on the CPU and then render it using OpenGL ES via texture mapping. This method is inefficient because the CPU's prior texture drawing slows down the processing speed. In this application's technical solution, the rendering engine is selected based on the load, choosing either the GPU or CPU, which significantly improves rendering efficiency. Furthermore, the rendering method for SVG image elements also utilizes texture mapping. For text objects, this design converts them into path-based rendering, as text characters are also a special type of polygon. For basic shapes such as rectangles, these objects can be converted into path representations, and paths support drawing under various conditions, such as absolute and relative paths, and subpaths.

[0099] In some implementations, when selecting one of two rendering methods, a judgment condition can be set to determine which rendering method to choose. For example, the first rendering method or the second rendering method can be selected based on the load status of the GPU and / or the CPU.

[0100] For example, the GPU load can be used to select the rendering mode. When the GPU load is low or idle, rendering operations can be performed quickly, so the first rendering mode is chosen. When the GPU load is high or fully loaded, rendering operations are either unavailable or require a longer time, so the second rendering mode is chosen. Similarly, the CPU load can be used. When the CPU load is low or idle, rendering operations can be performed quickly, so the second rendering mode is chosen. When the CPU load is high or fully loaded, rendering operations are either unavailable or require a longer time, so the first rendering mode is chosen. Furthermore, since the GPU's graphics processing power is far superior to the CPU's, it can be prioritized. Therefore, the GPU and CPU load can be used to select the rendering mode. When the GPU load is low or idle, the second rendering mode is preferred. When the GPU load is high or fully loaded while the CPU is idle, the first rendering mode is chosen. Additionally, as mentioned above, the specific rendering operations of the second rendering mode can be preset to be performed by either the CPU or the GPU. For example, rendering can be performed by the GPU. In both the first and second rendering methods, the specific rendering steps are executed by the GPU. However, the first rendering method is entirely performed by the GPU, while the second rendering method is a combination of GPU and CPU. Specifically, the CPU first generates texture parameters, and then the GPU performs the rendering. In this case, both rendering methods can leverage the GPU's image processing capabilities to effectively improve rendering efficiency. Alternatively, rendering can be performed by the CPU. In this case, the first rendering method is entirely performed by the GPU, while the second rendering method is entirely performed by the CPU. In this case, the two rendering methods are flexibly selected to effectively improve rendering efficiency.

[0101] In some implementations, rendering quality can be improved by increasing the precision of the second rendering parameter when the CPU and / or GPU load is low; or smoothness can be ensured by decreasing the precision of the second rendering parameter when the CPU and / or GPU load is high. In other words, the second rendering parameter can be adjusted according to the GPU and / or CPU load to achieve higher rendering quality or faster rendering speed.

[0102] In other words, step 104 determines whether to enable extended functionality and selects a processing method. Enabling extended functionality can be achieved by setting OpenGL variable states, supporting user-defined rendering objects and methods through extended default methods. If extended functionality is enabled, OpenGL state parameters are directly set, and the rendering result is obtained through GPU rendering. If extended functionality is not enabled, the CPU first calculates the texture image, then the rendering parameters are designed, and rendering is performed through texture mapping. The following section combines... Figure 5 Let me introduce it.

[0103] Figure 5 This is a schematic flowchart of the rendering process in an embodiment of this application.

[0104] 501. Initialization.

[0105] 502. Determine whether the extended function is enabled. If the result is "yes", proceed to step 504. If the result is "no", proceed to step 503.

[0106] Optionally, the judgment condition (basis) can be the load status, that is, determining whether to enable the extended function based on the load status. For example, the first rendering method or the second rendering method can be selected based on the load status of the GPU and / or the CPU. For example, the GPU can be selected first when it is idle, and the CPU can be selected when the GPU is occupied, that is, the judgment condition is whether the GPU is idle.

[0107] Optionally, the judgment condition can also be the estimation of the workload. For example, for complex graphics and large graphics rendering processes that require more computation, the GPU is preferred, while for simple graphics and small graphics rendering processes that require less computation, the CPU is preferred.

[0108] It should be understood that there are many other judgment conditions, and there may be other implementations for judging based on load conditions, and there may also be other implementations for judging based on task volume estimation. For the sake of brevity, they will not be listed one by one.

[0109] 503. Use the CPU to obtain the texture image of the SVG file.

[0110] 504. Set extended function rendering parameters.

[0111] It should be noted that the extended rendering parameters here can be understood as either the first rendering parameter, the second rendering parameter, or even the third rendering parameter.

[0112] The first and second rendering parameters are OpenGL state parameters. When the extended functionality is enabled, the GPU is used to perform rendering based on the first and second rendering parameters. If the extended functionality is not enabled, step 504 is executed, and the CPU is used to generate the texture image of the SVG file. The third rendering parameter is the parameter corresponding to this texture image, and the GPU is used to perform rendering based on the third rendering parameter.

[0113] 505. Rendering using the GPU.

[0114] 506. End.

[0115] exist Figure 5 The rendering process shown implements a flexible selection of two rendering modes. The first rendering mode corresponds to the case where the extended function is enabled, i.e., steps 502, 504, and 505 are executed. One example of the second rendering mode (CPU and GPU combined) corresponds to the case where the extended function is not enabled, i.e., steps 502, 503, 504, and 505 are executed.

[0116] As described above, the method in this application embodiment can utilize OpenGL. For ease of understanding, the following is combined with... Figure 6 To reiterate. Figure 6 This is a schematic flowchart illustrating a vector graphics processing method according to an embodiment of this application. Figure 6 It can be seen as Figure 1 A concrete example, specifically, is the implementation using OpenGL. Figure 1 An example of the method shown.

[0117] 601. System initialization.

[0118] In this step, initialization mainly completes the OpenGL context initialization, such as setting the canvas width and height, initializing variables, and initializing states.

[0119] 602. SVG file parsing.

[0120] This step mainly involves reading the SVG stream, recursively parsing the SVG file tags (elements), and setting the rendering engine state parameters. Step 602 can be seen as an example of steps 101 and 102.

[0121] 603. Triangle partitioning.

[0122] This step includes triangulating the SVG file to obtain triangle vertices, and setting vertex shader input variables based on the triangle vertices.

[0123] In some implementations, step 603 may also include texture drawing, i.e., setting texture parameters based on image elements, such as setting fragment shader input variables.

[0124] 604. Render to the canvas using OpenGL ES.

[0125] The execution of step 604 can refer to the relevant description in step 104 above.

[0126] 605. End.

[0127] Optionally, step 605 can be performed by destroying variables and pointers, etc.

[0128] The process of the vector graphics processing method according to the embodiments of this application has been described above with reference to the accompanying drawings. The vector graphics processing apparatus according to the embodiments of this application will now be described with reference to the accompanying drawings. It should be understood that the vector graphics processing apparatus described below can execute each process of the vector graphics processing method according to the embodiments of this application, and repeated descriptions will be appropriately omitted when describing the vector graphics processing apparatus below.

[0129] Figure 7 This is a schematic diagram of a vector graphics processing apparatus according to an embodiment of this application. Figure 7 As shown, the processing device 2000 includes an acquisition unit 2001 and a processing unit 2002.

[0130] The processing device 2000 can be used to execute the steps performed in the methods described in the embodiments of this application. For example, the acquisition unit 2001 can be used to execute... Figure 1 In step 101 of the processing method shown, the processing unit 2002 can be used to execute... Figure 1 Steps 102 to 104 in the processing method shown. For example, the acquisition unit 2001 can be used to execute... Figure 2 In step 201 of the method shown, the processing unit 2002 can be used to execute... Figure 2 Steps 202 and 203 in the method shown. For example, the acquisition unit 2001 can be used to execute... Figure 3 In step 302 of the method shown, the portion where the SVG stream is read is processed by the processing unit 2002. Figure 3 The method shown includes steps 301, 303, and 304, as well as the file parsing portion in step 302. For example, the acquisition unit 2001 can be used to execute... Figure 6 In step 602 of the method shown, the portion where the SVG stream is read is processed by the processing unit 2002. Figure 6 The method shown includes steps 601, 603-605, and the file parsing portion in step 602. Furthermore, the processing unit 2002 can also be used to execute... Figure 5 The steps in the method shown.

[0131] Figure 7 The acquisition unit 2001 in the illustrated apparatus 2000 can be a unit for real-time acquisition of SVG files. For example, the acquisition unit 2001 can acquire the user's SVG file (e.g., an input SVG file) in real time. Furthermore, the acquisition unit 2001 can also be equivalent to... Figure 8 The communication interface in the device 3000 shown can be used to obtain SVG files, or the acquisition unit 2001 can also be equivalent to... Figure 8 The processor in the illustrated device 3000 can retrieve SVG files from memory or from an external source via a communication interface. The communication interface 3003 can also retrieve SVG files from a terminal device or network.

[0132] Figure 7 The acquisition unit 2001 in the processing device 2000 shown can be equivalent to Figure 8 or Figure 9 The communication interface and processing unit 2002 in the computer device 3000 shown can be equivalent to Figure 8 or Figure 9 The processor in the device 5000 shown.

[0133] The modules in the aforementioned vector graphics processing device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0134] It should be noted that the vector graphics processing method of this application embodiment can be applied to computer devices capable of vector graphics rendering, such as terminal devices and network devices. The possible applications of these two types of devices are described below by way of example.

[0135] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 8 As shown, this computer device includes a processor, memory, input / output interfaces (I / O), and a communication interface. The processor, memory, and I / O interfaces are connected via a system bus, and the communication interface is also connected to the system bus via the I / O interfaces. The processor provides computational and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and a database. The internal memory provides the environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The database stores SVG files, intermediate results during vector graphics processing, and processing results. The I / O interfaces are used for exchanging information between the processor and external devices. The communication interface is used for communication with external terminals via a network connection. When the computer program is executed by the processor, it implements a vector graphics processing method according to any of the above-described implementations.

[0136] In another embodiment, a computer device is provided, which may be a terminal device, and its internal structure diagram may be as follows: Figure 9 As shown, the computer device includes a processor, memory, input / output interface, communication interface, display unit, and input device. The processor, memory, and input / output interface are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interface. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The input / output interface is used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a vector graphics processing method according to any of the above-described implementations. The display unit is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0137] Those skilled in the art will understand that Figure 8 and Figure 9 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0138] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, or optical storage, etc. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc.

[0139] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0140] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.< / text>

Claims

1. A method for processing vector graphics, characterized in that, include: Obtain scalable vector graphics SVG files; The SVG file is parsed, and a first rendering parameter is set based on the parsing result. This includes: loading the SVG file, parsing the SVG elements of the SVG file to obtain the type of the SVG elements, wherein the type of the SVG elements includes at least one of text, path, or image; when the type is text, the text is converted into a path, and then the first rendering parameter is set based on the path parsing parameters; or when the type is a path, the first rendering parameter is set based on the path parsing parameters, wherein the first rendering parameter includes rendering engine status parameters, which are generated based on the text and the path. Triangulation is performed on the primitives parsed from the SVG file to obtain the second rendering parameters, including: sending all vertices of the non-convex polygons in the primitives parsed from the SVG file to the tessellation device, tessell the polygons through the tessellation device, and when the tessellation is completed, the tessellation device renders the tessellated polygons using OpenGL commands or performs user-defined operations through a user-defined callback function routine. Rendering the SVG file onto a canvas according to the first rendering parameters and the second rendering parameters includes: selecting a first rendering method for rendering or selecting a second rendering method for rendering; the second rendering method includes: using a general-purpose central processing unit (CPU) to obtain a third rendering parameter of the texture image of the SVG file, and using the GPU to render according to the third rendering parameter.

2. The method according to claim 1, characterized in that, The first rendering method is to use the graphics processing unit (GPU) to directly render based on the first rendering parameters and the second rendering parameters.

3. The method according to claim 2, characterized in that, The step of selecting a first rendering method or a second rendering method includes: Based on the load status of the GPU and / or the CPU, select the first rendering method or the second rendering method.

4. The method according to claim 1, characterized in that, The method further includes: When the type is an image, the first rendering parameters are set according to the image.

5. The method according to any one of claims 1 to 4, characterized in that, The first rendering parameter also includes image texture parameters.

6. The method according to any one of claims 1 to 4, characterized in that, The second rendering parameters include vertex shader input variables and fragment shader input variables.

7. An image processing apparatus, characterized in that, include: The acquisition unit is used to acquire scalable vector graphics SVG files; A processing unit is configured to parse the SVG file and set first rendering parameters based on the parsing results, including: loading the SVG file, parsing the SVG elements of the SVG file to obtain the type of the SVG elements, wherein the type of the SVG elements includes at least one of text, path, or image; when the type is text, converting the text into a path, and then setting the first rendering parameters based on the path parsing parameters; or when the type is a path, setting the first rendering parameters based on the path parsing parameters, wherein the first rendering parameters include rendering engine status parameters, which are generated based on the text and the path; The processing unit is further configured to perform triangulation on the primitives parsed from the SVG file to obtain the second rendering parameters, including: sending all vertices of the non-convex polygons in the primitives parsed from the SVG file to the tessellation unit, tessell the polygons through the tessellation unit, and when the tessellation is completed, the tessellation unit renders the tessellated polygons using OpenGL commands or performs user-defined operations through a user-defined callback function routine. The processing unit is further configured to render the SVG file onto a canvas according to the first rendering parameters and the second rendering parameters, including: selecting a first rendering method for rendering or selecting a second rendering method for rendering; the second rendering method includes: using a general-purpose central processing unit (CPU) to obtain a third rendering parameter of the texture image of the SVG file, and using the GPU to render according to the third rendering parameter.

8. A computer device, characterized in that, The computer device includes a memory and a processor, the memory storing a computer program, characterized in that the processor executes the computer program to implement the steps of the method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

Images