Graph rendering method and device, equipment and storage medium

Abstract

The embodiment of the invention relates to a graph rendering method and device, equipment and a storage medium. The method provided by the invention comprises the following steps: acquiring a content source of a graph to be rendered from a platform layer; in the primary layer, analyzing the content source to determine graph description information corresponding to the to-be-rendered graph; in the primary layer, generating a group of processing instructions based on the graph description information; executing the generated group of processing instructions by using a canvas component in the platform layer to generate a graphic file; and rendering the graphic file by using the rendering node in the platform layer. Therefore, according to the embodiment of the invention, the analysis process for the content source of the to-be-rendered graph can be realized on the primary layer which does not depend on the platform layer, so that the development cost is reduced, and consistent rendering experience of different platform layers is ensured.

Description

Technical Field

[0001] Example embodiments of the present disclosure generally relate to the field of computers, and more particularly to a graphics rendering method, apparatus, device, and computer-readable storage medium. Background Art

[0002] SVG (Scalable Vector Graphics) is a vector graphics format based on XML (Extensible Markup Language) for displaying high-quality, scalable graphics in web pages and applications. Due to its flexibility and powerful functions, SVG has become an important part of modern web applications. Its ability to handle complex graphics and dynamic interactions makes it a preferred choice. How to develop a library to process such SVG files at low cost and high quality is currently a focus of attention. Summary of the invention

[0003] In a first aspect of the present disclosure, a graphics rendering method is provided. The method comprises: obtaining a content source of a graphics to be rendered from a platform layer; parsing the content source in a native layer to determine graphics description information corresponding to the graphics to be rendered; generating a set of processing instructions in the native layer based on the graphics description information; executing the generated set of processing instructions using a canvas component in the platform layer to generate a graphics file; and rendering the graphics file using a rendering node in the platform layer.

[0004] In a second aspect of the present disclosure, a device for graphics rendering is provided. The device includes: an acquisition module configured to acquire a content source of a graphics to be rendered from a platform layer; a parsing module configured to parse the content source in a native layer to determine graphics description information corresponding to the graphics to be rendered; a generation module configured to generate a set of processing instructions in the native layer based on the graphics description information; an execution module configured to execute the generated set of processing instructions using a canvas component in the platform layer to generate a graphics file; and a rendering module configured to render the graphics file using a rendering node in the platform layer.

[0005] In a third aspect of the present disclosure, an electronic device is provided. The device includes at least one processing unit; and at least one memory, the at least one memory is coupled to the at least one processing unit and stores instructions for execution by the at least one processing unit. When the instructions are executed by the at least one processing unit, the device executes the method of the first aspect, the second aspect, or the third aspect.

[0006] In a fourth aspect of the present disclosure, a computer-readable storage medium is provided, wherein a computer program is stored on the computer-readable storage medium, and the computer program can be executed by a processor to implement the method of the first aspect, the second aspect, or the third aspect.

[0007] It should be understood that the contents described in this content section are not intended to limit the key features or important features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0008] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. In the accompanying drawings, the same or similar reference numerals represent the same or similar elements, wherein:

[0009] Figure 1 A schematic diagram showing an example environment in which embodiments according to the present disclosure may be implemented;

[0010] Figure 2 A schematic diagram showing an example framework for graphics rendering according to some embodiments of the present disclosure;

[0011] Figure 3 A schematic diagram illustrating an example parsing process for graphics rendering according to some embodiments of the present disclosure;

[0012] Figure 4 A schematic diagram showing an example node mapping process for graphics rendering according to some embodiments of the present disclosure;

[0013] Figure 5 A flowchart illustrating an example process of graphics rendering according to some embodiments of the present disclosure;

[0014] Figure 6 A schematic structural block diagram of an example apparatus for graphics rendering according to some embodiments of the present disclosure is shown; and

[0015] Figure 7 A block diagram of an electronic device capable of implementing various embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0016] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments set forth herein. On the contrary, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0017] It should be noted that the titles of any sections / subsections provided herein are not restrictive. Various embodiments are described throughout this article, and any type of embodiment may be included under any section / subsection. In addition, the embodiments described in any section / subsection may be combined in any manner with any other embodiments described in the same section / subsection and / or different sections / subsections.

[0018] In the description of the embodiments of the present disclosure, the term "including" and similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "based at least in part on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may be included below. The terms "first", "second", etc. may refer to different or the same objects. Other explicit and implicit definitions may be included below.

[0019] The embodiments of the present disclosure may involve user data, data acquisition and / or use, etc. These aspects are subject to the corresponding laws, regulations and relevant provisions. In the embodiments of the present disclosure, all data collection, acquisition, processing, processing, forwarding, use, etc. are carried out on the premise that the user knows and confirms. Accordingly, when implementing each embodiment of the present disclosure, the type, scope of use, usage scenario, etc. of the data or information that may be involved should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with the relevant laws and regulations. The specific notification and / or authorization method can vary according to the actual situation and application scenario, and the scope of the present disclosure is not limited in this respect.

[0020] In this specification and the embodiments, if personal information processing is involved, it will be processed on the premise of having a legal basis (such as obtaining the consent of the subject of personal information, or it is necessary to perform a contract, etc.), and will only be processed within the scope of regulations or agreements. If a user refuses to process personal information other than the necessary information for basic functions, it will not affect the user's use of basic functions.

[0021] As mentioned above, SVG is an XML-based vector graphics format. Due to the limitations of the code and logic supported by the platform, traditional technologies have designed different SVG libraries for different platforms to achieve the parsing of SVG files and corresponding graphics rendering on different platforms. This approach requires a high development cost to develop such an SVG library. For example, in some scenarios, when users such as developers have the need to process SVG files across platforms, they need to perform multiple code developments on multiple platforms. The development process is cumbersome and costly, and consistent rendering effects cannot be guaranteed.

[0022] The embodiments of the present disclosure propose a solution for graphics rendering. According to the solution, the content source of the graphics to be rendered can be obtained from the platform layer. Further, the content source can be parsed in the native layer to determine the graphics description information corresponding to the graphics to be rendered; further, a set of processing instructions can be generated in the native layer based on the graphics description information; further, the canvas component in the platform layer can be used to execute the generated set of processing instructions to generate a graphics file; additionally, the rendering node in the platform layer can be used to render the graphics file.

[0023] Based on this approach, the embodiments of the present disclosure can implement the parsing process for the content source of the graphics to be rendered in a native layer (native layer, also called C++ layer) that is independent of the platform layer, thereby making the development of the parsing process universal across platforms, thereby reducing the development cost of the platform layer. Furthermore, since multiple platforms can use the same parsing process to parse the content source across platforms and the parsing logic is consistent, the embodiments of the present disclosure can ensure a consistent rendering experience at different platform layers.

[0024] Therefore, the embodiments of the present disclosure can implement the parsing process for the content source of the graphics to be rendered in a native layer that is independent of the platform layer, thereby reducing development costs and ensuring a consistent rendering experience on different platform layers.

[0025] Various example implementations of the solution are described in detail below in conjunction with the accompanying drawings.

[0026] Example Environment

[0027] Figure 1 A schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented is shown. In the example environment 100, an electronic device 110 can run a rendering library 120 that supports SVG rendering capabilities to render data 130 (e.g., SVG files) to be rendered and obtain corresponding rendering results 140.

[0028] The electronic device 110 may include any computing system with computing capabilities, such as various computing devices / systems, terminal devices, server devices, etc. The terminal device may be any type of mobile terminal, fixed terminal or portable terminal, including a mobile phone, a desktop computer, a laptop computer, a notebook computer, a netbook computer, a tablet computer, a media computer, a multimedia tablet, a handheld computer, a portable game terminal, a VR / AR device, a personal communication system (PCS) device, a personal navigation device, a personal digital assistant (PDA), an audio / video player, a digital camera / camcorder, a positioning device, a television receiver, a radio broadcast receiver, an e-book device, a game device, or any combination of the foregoing, including accessories and peripherals of these devices or any combination thereof. In some embodiments, the terminal device can also support any type of interface for the user (such as a "wearable" circuit, etc.).

[0029] The server device may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content distribution networks, and big data and artificial intelligence platforms. The server device may include, for example, a computing system / server, such as a mainframe, an edge computing node, a computing device in a cloud environment, and the like. The server device may provide background services for the rendering capabilities of the rendering library 120 in the electronic device 110.

[0030] A communication connection may be established between the server device and the terminal device. The communication connection may be established in a wired manner or a wireless manner. The communication connection may include, but is not limited to, a Bluetooth connection, a mobile network connection, a Universal Serial Bus (USB) connection, a Wireless Fidelity (WiFi) connection, etc., and the embodiments of the present disclosure are not limited in this respect. In the embodiments of the present disclosure, the server device and the terminal device may implement signaling interaction through the communication connection between the two.

[0031] It should be understood that the structure and function of the various elements in the environment 100 are described for exemplary purposes only and do not imply any limitation on the scope of the present disclosure.

[0032] Some example embodiments of the present disclosure will be described below with continued reference to the accompanying drawings.

[0033] Example rendering process

[0034] The following will refer to Figure 2 The following describes some example graphics rendering frameworks according to embodiments of the present disclosure. Figure 2 A schematic diagram showing an example framework of graphics rendering according to some embodiments of the present disclosure is shown. The framework 200 may be implemented in, for example, Figure 1 At the electronic device 110 shown.

[0035] like Figure 2 As shown, the rendering library 140 may include at least a platform layer 202 and a native layer (native layer, also called C++ layer) 204. The electronic device 110 may generate data to be rendered 218 (for example, including a content source of graphics to be rendered) through such a platform layer, and send such data to be rendered 218 to the native layer 204. Further, the electronic device 110 may parse such data to be rendered 218 through such a native layer 204, and generate a corresponding set of processing instructions 238 (for example, including drawing instructions, rendering instructions, etc.) and return them to the platform layer. Thus, the platform layer may render a graphic file 244 corresponding to the data to be rendered 218 based on such a set of processing instructions 238, for example, such a graphic file 244 is an SVG image. The following will be combined with Figure 2 The illustrated architecture 200 describes in detail the graphics drawing method provided by the embodiment of the present disclosure.

[0036] In some embodiments, the electronic device 110 can create an SVG rendering node 206 through such a platform layer, and obtain a content source of a graphic to be rendered (e.g., a scalable vector graphic SVG), such a content source can be a content source in a variety of data formats, such as source code data (e.g., data 246), string stream data, etc. To ensure the rendering effect, if the content source of the graphic to be rendered received by the electronic device 110 is source code data, the electronic device 110 can use the resource loader 212 to convert the format of such source code data, thereby obtaining corresponding string stream data (e.g., data 248).

[0037] In some embodiments, such content sources (e.g., string stream data, source code data, etc.) may be written or uploaded by a user in a platform interface supported by the electronic device 110, or may be sent to the electronic device 110 by other devices through a connection with the electronic device 110. Thus, the electronic device 110 may update such content sources based on the user's property update operation, layout update operation, etc. in the platform interface 210.

[0038] As an example, the electronic device 110 may utilize the attribute update component 214 to update some graphics description information in the content source, such as attribute information, such attribute information may include the shape, color, etc. of the graphics to be rendered. As an example, the electronic device 110 may utilize the layout update component to update other graphics description information in the content source, such as the layout information of the graphics to be rendered, such layout information may include the size, position, etc. of the graphics. Thus, the electronic device 110 may generate data 218 to be rendered based on these updates to the content source. As an example, such data 218 to be rendered may include such content source, layout information, attribute information, parsing instructions, etc. As an example, such parsing instructions may instruct the native layer 204 to parse such data 218 to be rendered.

[0039] In some embodiments, the electronic device 110 sends such data to be rendered 218 to the native layer 204 through the platform layer 202. Such a native layer 204 may include an SVG rendering engine 208 that matches the SVG rendering node 206, so that the embodiments of the present disclosure can ensure the accuracy of rendering of the data to be rendered 218. Further, such a native layer 204 may include an XML parser 220. Such an XML parser 220 may be configured to parse such data to be rendered 218 and obtain a parsed tree corresponding to the data to be rendered 218, for example, a DOM (Document Object Model) tree.

[0040] Furthermore, the electronic device 110 may obtain structured data corresponding to such a content source, and then the electronic device 110 may parse such structured data using the XML parser 220 to construct a document object model DOM tree corresponding to the graphics to be rendered, and such a DOM tree may include a group of DOM nodes for indicating graphics description information. As an example, such a group of DOM nodes' graphics description information may include node tag names, associations between nodes, node attributes, the number of node attributes, node types, and the like.

[0041] As an example, the following will be combined with the attached Figure 3 To further describe the parsing process of some embodiments of the present disclosure. Figure 3 FIG. 1 is a schematic diagram showing an example parsing process of graphics rendering according to some embodiments of the present disclosure. Figure 3 As shown, such structured data may include Figure 3 The structured data 328 shown:

[0042]

[0043]

[0044] The first layer of data in such structured data 328 is " <svg>", then the first-level nodes in such a DOM tree include node 302" <svg>". For another example, the first layer of data in such structured data 328 is " <svg>The second layer of data under " is" <defs>”、"<rect fill="url(#lg-0)" / >”、" <g>", then the child nodes of node 302 in such a DOM tree may include node 304" <defs>"、Node 306" <rect>"、Node 308" <g>". For example, the second layer data in the structured data 328 is " <defs>The third layer of data under "includes"<path id='p-0' / > ”、"<path id='p-1' / > ”、"<path id='p-2' / > ”、"<linearGradient id="lg-0"> ", then in such a DOM tree node 304" <defs>" can include node 310" <path-0>"、Node 312" <path-1>"、Node 314" <path-2>"、Node 316" <lineargradient>"And such structured data 328 data"<linearGradient id="lg-0"> The next layer of data includes " <stop / > ", then in such a DOM tree node 316" <lineargradient>" can include node 324" <stop-0>"、Node 326" <stop-1>" ". Similarly, based on the data in structured data 328" <g>"The next layer of data"<use xlink:href='#p-0' / > ”、"<use xlink:href='#p-1' / > ”、"<use xlink:href='#p-2' / > ", you can determine the node 308 in the DOM tree" <g>"'s child nodes include node 318" <use-0>"、Node 320" <use-1>"、Node 322" <use-2>”.

[0045] Therefore, the embodiments of the present disclosure can use such a DOM tree to accurately express all defined graphic elements and their graphic description information in the graphics to be rendered.

[0046] In some embodiments, such a DOM tree includes nodes that conform to the document flow order, but cannot drive subsequent rendering. Thus, the electronic device 110 can determine the type of a set of DOM nodes in such a DOM tree in the native layer 204, and then generate a more accurate DOM tree based on the type of such a set of DOM nodes.

[0047] As an example, such native layer 204 also includes a rendering node manager 224. Such a rendering node manager 224 is configured to render the parsed tree generated by the XML parser 220. For example, such a rendering node manager 224 may include a node mapping component 226 and an attribute parsing component 228. Thus, the electronic device 110 can determine the type of a group of DOM nodes in such a DOM tree through such a node mapping component 226, and then use such an attribute parsing component 228 to further construct such a DOM tree 230.

[0048] As an example, such node mapping can be implemented by a node mapping function, and such a node mapping function can parse the attributes of such a node to determine the type of the parsed node. Further, the electronic device 110 can complete the node mapping of each child node by recursively calling such a node mapping function.

[0049] In some embodiments, the types of such a group of DOM nodes may include rendering nodes, container nodes, or style nodes. The electronic device 110 may map DOM nodes to rendering nodes, container nodes, or style nodes based on the node attributes of the DOM nodes through the native layer 204. As an example, such a rendering node may indicate that the corresponding DOM node includes elements to be rendered, such a container node may indicate that the corresponding DOM node is used to manage the logical structure of such graphics to be rendered, and such a style node may indicate that the corresponding DOM is used to describe the rendering style of the element. As an example, such a rendering node, container node, or style node can be implemented by inheriting a specified function (e.g., a specified shape parsing function, etc.), thereby reducing the redundancy of the code in the native layer, thereby reducing the memory usage of the graphics rendering implementation logic provided in the embodiments of the present disclosure.

[0050] As an example, the following Figure 4 To describe such a node mapping process. Figure 4 A schematic diagram of an example node mapping process for graphics rendering according to some embodiments of the present disclosure is shown. As an example, Figure 4 As shown, such a rendering node may include node 406. <rect>"、Node 410" <path-0>"、Node 412" <path-1>"、Node 414" <path-2>"、Node 418" <use-0>"、Node 420" <use-1>"、Node 422" <use-2>". Such a node 410" <path-0>" can indicate node 418" <use-0>"The corresponding path, such node 412" <path-1>" can indicate node 420" <use-1>"The corresponding path, such node 414" <path-2>" can indicate node 422" <use-2>"The path corresponding to the node. As an example, such a container node may include node 402" <svg>"、Node 404" <defs>"、Node 408" <g>As an example, such a style node may include node 416" <lineargradient>"、Node 424" <stop-0>"、Node 426" <stop-1>”.

[0051] In some embodiments, returning to Figure 2 , such a native layer 204 may also include an instruction generation component 232, thereby, the electronic device 110 may use such an instruction generation component 232 to more accurately generate a set of processing instructions based on such a DOM tree 230. As an example, such an instruction generation component 232 may be a rendering pipeline in the native layer, and such a rendering pipeline may include a path factory 234 and a rendering component 236. Thus, the electronic device 110 may generate a path corresponding to the graphics to be rendered in such a path factory 234, and then use the rendering component 236 to generate such a set of processing instructions corresponding to such a path.

[0052] Further, such a set of processing instructions may include a set of processing instructions 238, and such a set of processing instructions 238 may include some drawing instructions (also known as image drawing instructions), some path instructions (also known as path generation instructions), etc. Such image drawing instructions can be used to draw specified graphics (for example, shape graphics of graphics to be rendered). As an example, such image drawing instructions may include rectangle drawing instructions, circle drawing instructions, polygon drawing instructions, polyline drawing instructions, straight line drawing instructions, ellipse drawing instructions, etc. Such path generation instructions can generate a path of a specified shape (for example, the shape of graphics to be rendered). Based on this, the embodiments of the present disclosure generate such a set of processing instructions in the native layer, so that such a set of processing instructions can be independent of such a platform layer, and thus such a set of processing instructions can be independent of the target platform corresponding to the platform layer (for example, operating system, etc.). As an example, such a set of processing instructions can be defined, declared or called in such a native layer. Thus, such a set of processing instructions can be independent of the target platform corresponding to the platform layer, for example, the definition, declaration, calling method, etc. of such a set of processing instructions can be independent of the target platform corresponding to such a platform layer. Therefore, in the embodiments of the present disclosure, each platform under the cross-platform can use the same set of processing instructions and can implement asynchronous rendering, thereby ensuring the consistency of platform-level graphics rendering and optimizing the performance of the target platform.

[0053] Further, the electronic device 110 can send such a set of generated processing instructions to the platform layer 202 through the native layer 204. Further, the electronic device 110 can use the canvas component 240 in the platform layer 202 to execute such a set of processing instructions to draw (242) the graphic file 244. Thus, the electronic device 110 can use the SVG rendering node 206 to render such a graphic file in the platform interface, and then the user can view the rendering result of such a graphic file in the platform interface.

[0054] In this way, the embodiments of the present disclosure can implement the parsing process for the content source of the graphics to be rendered in a native layer (native layer, also called C++ layer) that is independent of the platform layer, thereby making the development of the parsing process universal across platforms, thereby reducing the development cost of the platform layer. Furthermore, since multiple platforms can use the same parsing process to parse the content source across platforms and the parsing logic is consistent, the embodiments of the present disclosure can ensure a consistent rendering experience at different platform layers.

[0055] Therefore, the embodiments of the present disclosure can implement the parsing process for the content source of the graphics to be rendered in a native layer that is independent of the platform layer, thereby reducing development costs and ensuring a consistent rendering experience on different platform layers.

[0056] Example Process

[0057] Figure 5 5 is a flowchart showing an example process of graphics rendering according to some embodiments of the present disclosure. Process 500 may be implemented at electronic device 110. Figure 1 Process 500 is described.

[0058] like Figure 5 As shown, at box 510, the electronic device 110 obtains the content source of the graphics to be rendered from the platform layer.

[0059] At block 520 , the electronic device 110 parses the content source in a native layer to determine graphics description information corresponding to the graphics to be rendered.

[0060] At block 530 , the electronic device 110 generates a set of processing instructions in a native layer based on the graphics description information.

[0061] At block 540 , the electronic device 110 executes the generated set of processing instructions using the canvas component in the platform layer to generate a graphics file.

[0062] At block 550 , the electronic device 110 renders the graphics file using a rendering node in the platform layer.

[0063] In some embodiments, parsing the content source in the native layer includes: obtaining structured data corresponding to the content source; and parsing the structured data to construct a document object model DOM tree corresponding to the graphics to be rendered, the DOM tree including a set of DOM nodes for indicating graphics description information.

[0064] In some embodiments, in the native layer, generating a set of drawing instructions based on the graphics description information includes: determining types of a set of DOM nodes in the DOM tree; and generating a set of drawing instructions based on the types of the set of DOM nodes.

[0065] In some embodiments, determining the types of a group of DOM nodes in a DOM tree includes: mapping the DOM nodes to rendering nodes, container nodes, or style nodes based on node attributes of the DOM nodes, wherein the rendering node indicates that the DOM node includes elements to be rendered, the container node indicates that the DOM node is used to manage the logical structure of the graphics to be rendered, and the style node indicates that the DOM is used to describe the rendering style of the element.

[0066] In some embodiments, a set of processing instructions includes: path generation instructions for generating a path of a specified shape; and / or image drawing instructions for drawing a specified graphic.

[0067] In some embodiments, in the native layer, generating a set of processing instructions based on the graphics description information includes: utilizing a rendering pipeline in the native layer to generate a set of processing instructions based on the graphics description information.

[0068] In some embodiments, a set of processing instructions is independent of a target platform corresponding to a platform layer.

[0069] In some embodiments, the graphics to be rendered are scalable vector graphics (SVG).

[0070] Example devices and equipment

[0071] The embodiments of the present disclosure also provide corresponding devices for implementing the above methods or processes. Figure 6 A schematic structural block diagram of an example apparatus 600 for graphics rendering according to some embodiments of the present disclosure is shown. The apparatus 600 may be implemented as or included in the electronic device 110. Each module / component in the apparatus 600 may be implemented by hardware, software, firmware, or any combination thereof.

[0072] like Figure 6 As shown, the device 600 includes an acquisition module 610, which is configured to acquire the content source of the graphics to be rendered from the platform layer; a parsing module 620, which is configured to parse the content source in the native layer to determine the graphics description information corresponding to the graphics to be rendered; a generation module 630, which is configured to generate a set of processing instructions in the native layer based on the graphics description information; an execution module 640, which is configured to use the canvas component in the platform layer to execute the generated set of processing instructions to generate a graphics file; and a rendering module 650, which is configured to use the rendering node in the platform layer to render the graphics file.

[0073] In some embodiments, parsing the content source in the native layer includes: obtaining structured data corresponding to the content source; and parsing the structured data to construct a document object model DOM tree corresponding to the graphics to be rendered, the DOM tree including a set of DOM nodes for indicating graphics description information.

[0074] In some embodiments, the generation module 630 is further configured to: determine the types of a set of DOM nodes in the DOM tree; and generate a set of drawing instructions based on the types of the set of DOM nodes.

[0075] In some embodiments, the generation module 630 is further configured to: map the DOM node to a rendering node, a container node or a style node based on the node attributes of the DOM node, the rendering node indicates that the DOM node includes the element to be rendered, the container node indicates that the DOM node is used to manage the logical structure of the graphics to be rendered, and the style node indicates that the DOM is used to describe the rendering style of the element.

[0076] In some embodiments, a set of processing instructions includes: path generation instructions for generating a path of a specified shape; and / or image drawing instructions for drawing a specified graphic.

[0077] In some embodiments, the generation module 630 is further configured to: utilize the rendering pipeline in the native layer to generate a set of processing instructions based on the graphics description information.

[0078] In some embodiments, a set of processing instructions is independent of a target platform corresponding to a platform layer.

[0079] In some embodiments, the graphics to be rendered are scalable vector graphics (SVG).

[0080] The modules included in the device 600 can be implemented in various ways, including software, hardware, firmware, or any combination thereof. In some embodiments, one or more units can be implemented using software and / or firmware, such as machine executable instructions stored on a storage medium. In addition to or as an alternative to machine executable instructions, some or all of the modules in the device 600 can be implemented at least in part by one or more hardware logic components. As an example and not limitation, exemplary types of hardware logic components that can be used include field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0081] Figure 7 1 shows a block diagram of an electronic device 700 in which one or more embodiments of the present disclosure may be implemented. It should be understood that Figure 7 The electronic device 700 shown is merely exemplary and should not constitute any limitation on the functionality and scope of the embodiments described herein. Figure 7 The electronic device 700 shown can be used to implement Figure 1 Electronic device 110 or Figure 6 Device 600.

[0082] like Figure 7 As shown, the electronic device 700 is in the form of a general electronic device. The components of the electronic device 700 may include, but are not limited to, one or more processors or processing units 710, a memory 720, a storage device 730, one or more communication units 740, one or more input devices 750, and one or more output devices 760. The processing unit 710 may be an actual or virtual processor and is capable of performing various processes according to a program stored in the memory 720. In a multi-processor system, multiple processing units execute computer executable instructions in parallel to improve the parallel processing capability of the electronic device 700.

[0083] The electronic device 700 typically includes a plurality of computer storage media. Such media can be any available media accessible to the electronic device 700, including but not limited to volatile and non-volatile media, removable and non-removable media. The memory 720 can be a volatile memory (e.g., register, cache, random access memory (RAM)), a non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory) or some combination thereof. The storage device 730 can be a removable or non-removable medium, and can include a machine-readable medium, such as a flash drive, a disk, or any other medium, which can be used to store information and / or data and can be accessed within the electronic device 700.

[0084] The electronic device 700 may further include additional removable / non-removable, volatile / non-volatile storage media. Figure 7 As shown in , a disk drive for reading or writing from a removable, non-volatile disk (e.g., a "floppy disk") and an optical drive for reading or writing from a removable, non-volatile optical disk may be provided. In these cases, each drive may be connected to the bus (not shown) by one or more data media interfaces. The memory 720 may include a computer program product 725 having one or more program modules that are configured to perform various methods or actions of various embodiments of the present disclosure.

[0085] The communication unit 740 implements communication with other electronic devices through a communication medium. Additionally, the functions of the components of the electronic device 700 can be implemented with a single computing cluster or multiple computing machines that can communicate through a communication connection. Therefore, the electronic device 700 can operate in a networked environment using a logical connection with one or more other servers, a network personal computer (PC), or another network node.

[0086] The input device 750 may be one or more input devices, such as a mouse, a keyboard, a tracking ball, etc. The output device 760 may be one or more output devices, such as a display, a speaker, a printer, etc. The electronic device 700 may also communicate with one or more external devices (not shown) through the communication unit 740 as needed, such as a storage device, a display device, etc., communicate with one or more devices that allow a user to interact with the electronic device 700, or communicate with any device that allows the electronic device 700 to communicate with one or more other electronic devices (e.g., a network card, a modem, etc.). Such communication may be performed via an input / output (I / O) interface (not shown).

[0087] According to an exemplary implementation of the present disclosure, a computer-readable storage medium is provided, on which computer-executable instructions are stored, wherein the computer-executable instructions are executed by a processor to implement the method described above. According to an exemplary implementation of the present disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, and the computer-executable instructions are executed by a processor to implement the method described above.

[0088] Various aspects of the present disclosure are described herein with reference to the flowcharts and / or block diagrams of the methods, devices, equipment, and computer program products implemented according to the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer-readable program instructions.

[0089] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processing unit of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0090] Computer-readable program instructions can be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operational steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, so that the instructions executed on the computer, other programmable data processing apparatus, or other device implement the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0091] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the system, method and computer program product according to multiple implementations of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of a module, program segment or instruction includes one or more executable instructions for realizing the logical function of the specification. In some implementations as replacements, the function marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous square boxes can actually be executed substantially in parallel, and they can sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be realized by a special hardware-based system that performs the function or action of the specification, or can be realized by a combination of special hardware and computer instructions.

[0092] The above descriptions of various implementations of the present disclosure are exemplary, non-exhaustive, and not limited to the disclosed implementations. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described implementations. The selection of terms used herein is intended to best explain the principles of the implementations, practical applications, or improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the various implementations disclosed herein. < / lineargradient> < / g> < / defs> < / svg> < / rect> < / g> < / g> < / lineargradient> < / lineargradient> < / defs> < / defs> < / g> < / rect> < / defs> < / g> < / defs> < / svg> < / svg> < / svg>

Claims

1. A graphics rendering method, comprising: Obtain the content source of the graphics to be rendered from the platform layer; In the native layer, parsing the content source to determine the graphics description information corresponding to the graphics to be rendered; In the native layer, a set of processing instructions is generated based on the graphics description information; Utilizing the canvas component in the platform layer, executing the generated set of processing instructions to generate a graphic file; as well as The graphics file is rendered using a rendering node in the platform layer.

2. The method of claim 1, wherein parsing the content source in a native layer comprises: Acquire structured data corresponding to the content source; as well as The structured data is parsed to construct a document object model DOM tree corresponding to the graphic to be rendered, wherein the DOM tree includes a group of DOM nodes for indicating the graphic description information.

3. The method according to claim 2, wherein in the native layer, generating a set of drawing instructions based on the graphics description information comprises: Determining types of the set of DOM nodes in the DOM tree; as well as Based on the types of the set of DOM nodes, the set of drawing instructions is generated.

4. The method of claim 3, wherein determining the types of the set of DOM nodes in the DOM tree comprises: Based on the node attributes of the DOM node, the DOM node is mapped to a rendering node, a container node or a style node, The rendering node indicates that the DOM node includes the element to be rendered, the container node indicates that the DOM node is used to manage the logical structure of the graphic to be rendered, and the style node indicates that the DOM is used to describe the rendering style of the element.

5. The method of claim 1, wherein the set of processing instructions comprises: Path generation instructions, used to generate a path of a specified shape; and / or Image drawing instructions are used to draw specified graphics.

6. The method according to claim 1, wherein in the native layer, generating a set of processing instructions based on the graphics description information comprises: A set of processing instructions is generated based on the graphics description information using a rendering pipeline in the native layer. The method of claim 1 , wherein the set of processing instructions is independent of a target platform corresponding to the platform layer. The method according to claim 1 , wherein the graphics to be rendered are scalable vector graphics (SVG).

9. A device for graphics rendering, comprising: An acquisition module, configured to acquire a content source of the graphics to be rendered from the platform layer; A parsing module, configured to parse the content source in a native layer to determine graphic description information corresponding to the graphic to be rendered; A generation module, configured to generate a set of processing instructions in the native layer based on the graphic description information; An execution module, configured to execute the generated set of processing instructions using the canvas component in the platform layer to generate a graphic file; as well as The rendering module is configured to render the graphic file using the rendering nodes in the platform layer.

10. An electronic device comprising: at least one processing unit; as well as At least one memory, the at least one memory being coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method according to any one of claims 1 to 8 when executed by the at least one processing unit.

11. A computer-readable storage medium having a computer program stored thereon, wherein the computer program implements the method according to any one of claims 1 to 8 when executed by a processor.

Images