Graphic image rendering method and device adaptive to different rendering interfaces

Abstract

The embodiment of the invention provides a graphic image rendering method adaptive to different rendering interfaces. The graphic image rendering method comprises the following steps: firstly, identifying a platform graphic library and reading a graphic drawing and image rendering interface of the platform graphic library; the 2D rendering engine receives the rendering task and then sends the rendering task to the basic layer, analyzes the type of the layer structure and judges the type; when the graphic layer is a graphic layer, the base layer is converted into a rendering task through a general plane 2D graphic rendering library interface, and a graphic rendering interface of the graphic layer analyzes a graphic type and then calls a graphic drawing interface of an adaptive graphic library for rendering to obtain a graphic result; and when the image layer is an image layer, the base layer is also converted into a rendering task through the general plane 2D graphic rendering library interface, and the image rendering interface borrows the image information through the reference layer and then calls the image rendering interface matched with the image library to render to obtain an image result. Cross-platform adaptation of different graphic image rendering interfaces and graphic image rendering are achieved, the rendering problem caused by platform differences is effectively solved, and the universality and compatibility of graphic image rendering in a multi-platform environment are improved.

Description

Technical Field

[0001] Embodiments of the present disclosure relate to the field of graphics and image rendering technology and related technical fields, and in particular, to a graphics and image rendering method and apparatus adapted to different rendering interfaces. Background Art

[0002] With the continuous advancement of Internet technology, the application of online graphic design software is becoming increasingly widespread. These software support multiple rendering scenarios to adapt to different operating environments and requirements. However, in existing technologies, the graphics rendering interfaces relied on by various rendering scenarios vary, such as WebGL, Canvas2D, and SVG on the web platform, and node-canvas or SKIA in server environments. Under the traditional software development model, graphics rendering interfaces for different platform environments are usually developed and deployed independently, and developers will agree on a set of standard data formats or process specifications to ensure the consistency of business logic.

[0003] However, while this development model avoids compatibility issues, it introduces numerous challenges. First, technical R&D costs are high, as each graphics rendering interface requires the same business logic to be implemented. This not only increases the R&D workload but also potentially impacts project stability. Second, data format specification maintenance is expensive, and team communication costs also increase. Because different platforms use different technology stacks to implement the same business logic, the software must maintain consistency in the end result, which is particularly inefficient in the rapidly iterative development process.

[0004] Therefore, there is an urgent need for a universal flat 2D rendering engine architecture to solve the image rendering interface and image rendering interface adaptation problems in different platform environments. Summary of the Invention

[0005] The embodiments described herein provide a method and apparatus for rendering graphics images that are adaptable to different rendering interfaces, thereby solving the problems existing in the prior art.

[0006] According to a first aspect of the present disclosure, a graphics image rendering method adapted to different rendering interfaces is provided, comprising:

[0007] Identify the graphics library configured in the current platform environment, and read the graphics drawing interface and image rendering interface of the graphics library respectively;

[0008] The 2D rendering engine receives rendering tasks and sends them to the base layer;

[0009] Parsing the rendering task to obtain a layer structure, and determining the type of the layer structure;

[0010] If it is the graphics layer, the base layer sends the rendering task to the graphics layer through the universal planar 2D graphics rendering library interface. The graphics rendering interface of the graphics layer parses the graphics type and calls the adapted graphics drawing interface of the graphics library to perform the graphics rendering operation and generate a graphics rendering result.

[0011] If it is the image layer, the base layer sends the rendering task to the image layer through the general planar 2D graphics rendering library interface. The image rendering interface of the image layer obtains the image and information to be rendered through the reference layer, and calls the adapted image rendering interface of the graphics library to perform the image rendering operation and generate the image rendering result.

[0012] In some embodiments of the present disclosure, the base layer includes a sublayer, an independent coordinate system transformation matrix, and a layer rendering interface layer, and the sublayer includes the image layer and the graphics layer;

[0013] The base layer is used to describe the basic information of the nodes in the model tree, and rendering is achieved by dispatching rendering tasks to the sub-layers;

[0014] The model tree includes all layers to be rendered, each node is declared as a base layer, and the graphics layer or the image layer to be used is specified when defining a node.

[0015] In some embodiments of the present disclosure, before the step of identifying the graphics library and image library configured in the current platform environment, the following steps are included:

[0016] The universal plane 2D graphics rendering library interface is created in the basic layer. The interface is used to adapt the graphics drawing interface of the graphics layer and the image rendering interface of the image layer based on the structure of the model tree when rendering plane 2D graphics.

[0017] In some embodiments of the present disclosure, before the step of identifying the graphics library and image library configured in the current platform environment, the following steps are included:

[0018] A graphics rendering interface is created for the graphics layer, which is used to handle rendering operations of common graphics types in the graphics layer, as well as closed graphics filling and path segment filling operations, so that graphics libraries on different platforms can achieve graphics type rendering by implementing these abstract methods. Among them, the common graphics types include straight lines, quadratic Bezier curves, cubic Bezier curves, arcs, rectangles, rounded rectangles, circles, and ellipses.

[0019] In some embodiments of the present disclosure, before the step of identifying the graphics library and image library configured in the current platform environment, the following steps are included:

[0020] Creating an image rendering interface for the image layer, which is used to process operations related to the resource layer, reference layer, and model layer in the image layer;

[0021] The resource layer includes image resources, image size and image upload interface, and achieves cross-platform compatibility through a specific renderer interface;

[0022] The reference layer points to the image resource and describes the sampling space;

[0023] The model layer adds image resources to the model tree and defines the transformation matrix.

[0024] In some embodiments of the present disclosure, for image rendering adaptation in a Web environment, a canvas plane graphics library and a Web graphics library are used for adaptation. In the canvas plane graphics library, an image drawing method is used to realize image drawing on the canvas. In the Web graphics library, image resources are first uploaded through the resource layer upload method, and then the two-dimensional texture image is uploaded to the GPU using the texture setting method. During rendering, a vector array drawing method is executed.

[0025] In some embodiments of the present disclosure, for graphics rendering interface adaptation in a Web environment, a canvas plane graphics library is used for adaptation, and the graphics rendering interface of the graphics layer is aligned with the graphics drawing interface of the canvas plane graphics library to achieve adaptation.

[0026] According to a second aspect of the present disclosure, a graphics image rendering device adapted to different rendering interfaces is provided, comprising:

[0027] An identification and reading module is used to identify the graphics library configured in the current platform operating environment and read the graphics drawing interface and image rendering interface of the graphics library respectively;

[0028] A receiving and forwarding module is used to receive rendering requests in the 2D rendering engine and send them to the base layer;

[0029] A parsing and judging module, configured to parse the layer structure in the rendering request and determine the type of the layer structure;

[0030] A first processing module is configured to, when the type of the layer structure is the graphics layer, cause the base layer to send the rendering task to the graphics layer through the universal planar 2D graphics rendering library interface; the graphics rendering interface of the graphics layer to parse the graphics type, and call the adapted graphics drawing interface of the graphics library to perform a graphics rendering operation and generate a graphics rendering result;

[0031] The second processing module is used to, when the type of the layer structure is the image layer, send the rendering task to the image layer through the general planar 2D graphics rendering library interface of the base layer, and the image rendering interface of the image layer obtains the image and information to be rendered through the reference layer, and calls the adapted image rendering interface of the graphics library to perform the image rendering operation and generate the image rendering result.

[0032] In some embodiments of the present disclosure, the base layer includes a sublayer, an independent coordinate system transformation matrix, and a layer rendering interface layer, and the sublayer includes the image layer and the graphics layer;

[0033] The base layer is used to describe the basic information of the nodes in the model tree, and rendering is achieved by dispatching rendering tasks to the sub-layers;

[0034] The model tree includes all layers to be rendered, each node is declared as a base layer, and the graphics layer or the image layer to be used is specified when defining a node.

[0035] In some embodiments of the present disclosure, further comprising:

[0036] A creation module 200 is used to create the general planar 2D graphics rendering library interface in the basic layer. The interface is used to adapt the graphics drawing interface of the graphics layer and the image rendering interface of the image layer based on the structure of the model tree when rendering planar 2D graphics.

[0037] In some embodiments of the present disclosure, the creation module 200 is also used to create a graphics rendering interface for the graphics layer for the graphics layer, which is used to process rendering operations of common graphics types in the graphics layer, as well as closed graphics filling and path segment filling operations, so that graphics libraries on different platforms can achieve graphics type rendering by implementing these abstract methods, wherein the common graphics types include straight lines, quadratic Bezier curves, cubic Bezier curves, arcs, rectangles, rounded rectangles, circles, and ellipses.

[0038] In some embodiments of the present disclosure, the creation module 200 is also used to create an image rendering interface for the image layer, which is used to process operations related to the resource layer, reference layer and model layer in the image layer; the resource layer includes image resources, image size and image upload interface, and achieves cross-platform compatibility through a specific renderer interface; the reference layer points to the image resource and describes the sampling space; the model layer adds the image resource to the model tree and defines the transformation matrix.

[0039] In some embodiments of the present disclosure, further comprising:

[0040] The adaptation module is used to adapt image rendering in the Web environment. It uses the canvas plane graphics library and the Web graphics library for adaptation. The image drawing method is used in the canvas plane graphics library to realize image drawing on the canvas. In the Web graphics library, the image resource is first uploaded through the resource layer upload method, and then the two-dimensional texture image is uploaded to the GPU using the texture setting method. The vector array drawing method is executed during rendering.

[0041] In some embodiments of the present disclosure, the adaptation module is also used to adapt the graphics rendering interface in the Web environment, using the canvas plane graphics library for adaptation, and aligning the graphics rendering interface of the graphics layer with the graphics drawing interface of the canvas plane graphics library to achieve adaptation.

[0042] According to a third aspect of the present disclosure, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the steps of the method in any one of the above embodiments are implemented.

[0043] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method in any one of the above embodiments are implemented.

[0044] The graphics image rendering method adapted to different rendering interfaces provided by the disclosed embodiment first identifies the platform graphics library and reads its graphics drawing and image rendering interface; then the 2D rendering engine receives the rendering task and sends it to the base layer, parses the layer structure type and determines the type; when it is a graphics layer, the base layer transfers the rendering task via the universal plane 2D graphics rendering library interface, and the graphics rendering interface of the graphics layer parses the graphics type and calls the graphics drawing interface of the adapted graphics library to render the graphics result; when it is an image layer, the base layer also transfers the rendering task via the universal plane 2D graphics rendering library interface, and the image rendering interface obtains the image information by referencing the layer and then calls the image rendering interface of the adapted image library to render the image result. This realizes the adaptation of different graphics image rendering interfaces and graphics image rendering across platforms, effectively solves the rendering problems caused by platform differences, and improves the versatility and compatibility of graphics image rendering in a multi-platform environment. By deeply analyzing the characteristics of graphics libraries on different platforms and building a universal standard interface, developers can focus on business logic. The graphics library can be flexibly switched according to the platform, successfully solving the problem of graphics image rendering interface adaptation, achieving multi-platform compatibility, multi-core rendering switching and consistency of rendering effects in multiple business scenarios, ensuring that business code runs seamlessly in any environment and platform, reducing R&D costs, improving project quality and stability, and accelerating the R&D process.

[0045] The above description is only an overview of the technical solution of the embodiment of the present application. In order to more clearly understand the technical means of the embodiment of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the embodiment of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings of the embodiments will be briefly described below. It should be noted that the drawings described below only relate to some embodiments of the present disclosure and are not intended to limit the present disclosure.

[0047] Figure 1 This is a flowchart of a method for rendering graphics images adapted to different rendering interfaces provided by an embodiment of the present disclosure;

[0048] Figure 2 This is a structural diagram of a graphics image rendering device adapted to different rendering interfaces provided by an embodiment of the present disclosure;

[0049] Figure 3 It is a structural diagram of a computer device provided by an embodiment of the present disclosure.

[0050] In the drawings, reference numerals having the same last two digits correspond to the same elements. It should be noted that the elements in the drawings are schematic and not drawn to scale. DETAILED DESCRIPTION

[0051] In order to make the purpose, technical solutions and advantages of the embodiments of the present disclosure more clear, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the described embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without creative work also fall within the scope of protection of the present disclosure.

[0052] References to "embodiments" herein mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase "embodiment" in various places in the specification does not necessarily refer to the same embodiment, nor does it necessarily refer to independent or alternative embodiments that are mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0053] The term "and / or" in this document simply describes a relationship between related objects, indicating that three possible relationships exist. For example, "A and / or B" can mean: A exists, A and B exist, and B exists. Additionally, the character " / " in this document generally indicates that the related objects are in an "or" relationship.

[0054] Furthermore, in all embodiments of the present disclosure, terms such as “first” and “second” are used only to distinguish one component (or a portion of a component) from another component (or another portion of a component).

[0055] In the description of this application, unless otherwise specified, "plurality" means more than two (including two), and similarly, "multiple groups" means more than two (including two).

[0056] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0057] Glossary:

[0058] A rendering engine, also known as a browser kernel, is a software component that converts markup languages ​​(such as HTML and XML) and style information (such as CSS) into visual images or document formats and presents them to users on the screen.

[0059] The Image Rendering Interface is a software interface used to control and execute image rendering operations. It provides a series of functions and methods that allow developers to convert raw image data (such as pixel arrays) or higher-level image descriptions (such as vector graphics) into final visual images.

[0060] The graphics drawing interface is a set of tools for creating, manipulating, and presenting various geometric shapes. It consists of a series of functions, methods, and corresponding parameters. It is designed to help developers accurately draw various basic graphic elements such as points, lines, polygons, curves, etc. in a specific graphics environment (such as the screen, drawing area, etc.), and can further combine them to construct complex graphics scenes.

[0061] Under the traditional software development model, graphics rendering interfaces for different platform environments are typically developed and deployed independently. Developers agree on a set of standard data formats or process specifications to ensure consistency in business logic. While this development model avoids compatibility issues, it introduces numerous challenges. First, technical R&D costs are high, as each graphics rendering interface requires the same business logic to be implemented. This not only increases the R&D workload but can also impact project stability. Second, data format specification maintenance is expensive, and team communication costs also increase. This is because different platforms use different technology stacks to implement the same business logic, requiring the software to maintain consistency in the final results. This is particularly inefficient in a rapidly iterative development process.

[0062] Based on the problems existing in the existing technology, Figure 1 This is a flow chart of a method for rendering graphics images adapted to different rendering interfaces provided by an embodiment of the present disclosure. Figure 1 As shown, the specific process of the graphics image rendering method adapted to different rendering interfaces includes:

[0063] S110 , identifying a graphics library configured in the current platform environment, and reading a graphics drawing interface and an image rendering interface of the graphics library respectively.

[0064] During the specific implementation process, it is necessary to identify the graphics library configured by the current platform environment to meet the diverse graphics and image rendering requirements. Different operating environments and platforms often configure different graphics libraries by default, or vary according to the user's installation and settings. Then, it is necessary to read the graphics drawing interface and image rendering interface of the graphics library. The graphics drawing interface is the key channel provided by the graphics library to external developers. Through them, various functions within the graphics library can be called to implement graphics drawing operations. During the development of graphics rendering applications, graphics layers are pre-created based on a certain general graphics model. These graphics layers have their own defined graphics drawing interfaces, which are used to describe various attributes and drawing methods of the graphics. The image rendering interface usually covers multiple important functional modules. Among them, the reference layer is responsible for reading image data from various storage media (such as hard disks, networks, etc.) and converting it into an internal format that the image library can handle. Different graphics libraries provide different drawing methods and parameter settings.

[0065] The base layer includes a sublayer, an independent coordinate system transformation matrix and a layer rendering interface layer, and the sublayer includes the image layer and the graphic layer;

[0066] The base layer is used to describe the basic information of the nodes in the model tree, and rendering is achieved by dispatching rendering tasks to the sub-layers. The base layer model is only an independent coordinate system space and has no rendering entity. The graphics layer and the image layer are derived from the base layer; the base layer is used to describe the basic information of the nodes in the model tree. Each layer has a transformation matrix of an independent coordinate system and can contain sub-layers. Given that the base layer nodes are abstract and have no entities to render, its rendering method is mainly to dispatch rendering to the sub-layers, and the rendering of the entities is completed by the sub-layers or derived types of models.

[0067] The model tree includes all layers to be rendered, each node is declared as a base layer, and the graphics layer or the image layer to be used is specified when defining a node.

[0068] In addition, before implementing step S110, the following steps may also be included:

[0069] S1001, creating the universal plane 2D graphics rendering library interface in the base layer, which is used to adapt the graphics drawing interface of the graphics layer and the image rendering interface of the image layer based on the structure of the model tree when rendering plane 2D graphics.

[0070] Specifically, the general flat 2D graphics rendering library interface plays a key role in the flat 2D graphics rendering process. It uses graphics and images as the only minimum rendering units. The remaining layer structure types are all composed of combinations or cascades of these two basic types. The basic nodes generated on the model tree are defined as basic layers. All types are derived from the basic layers. After defining the basic layer structure, the focus is on adapting the graphics rendering interface and image rendering interface.

[0071] S1002, creating a graphics rendering interface for the graphics layer, which is used to process rendering operations of common graphics types in the graphics layer, as well as closed graphics filling and path segment filling operations, so that graphics libraries on different platforms can achieve graphics type rendering by implementing these abstract methods, wherein the common graphics types include straight lines, quadratic Bezier curves, cubic Bezier curves, arcs, rectangles, rounded rectangles, circles, and ellipses.

[0072] Specifically, the core of the graphics rendering interface is to abstract and encapsulate graphics libraries of different platforms. After a lot of analysis, the graphics types that need to be covered by the general graphics rendering interface of the flat 2D rendering engine are summarized. In addition, the flat 2D rendering engine usually has the functions of filling closed graphics and path segments. Based on this, the graphics rendering interface is created, and its role is to construct the above-mentioned general graphics types and their corresponding rendering methods. It also covers closed graphics filling and path segment filling methods, thereby enabling graphics libraries of different platforms to successfully complete the rendering of various types of graphics by implementing these abstract methods, and ultimately achieve effective graphics rendering effects.

[0073] S1003, creating an image rendering interface for the image layer, which is used to process operations related to the resource layer, reference layer, and model layer in the image layer;

[0074] The resource layer includes image resources, image size and image upload interface, and achieves cross-platform compatibility through a specific renderer interface; Renderer is an interface of a specific rendering library, which can achieve compatibility of image resources under different platforms.

[0075] The reference layer points to the image resource and describes the sampling space; an image resource can be referenced multiple times, and the sampling spaces of each reference are independent of each other.

[0076] The model layer adds image resources to the model tree and defines the transformation matrix. Only nodes in the model tree can be rendered. At the same time, the image model, like other nodes in the model tree, has an independent layer coordinate system space, and the transformation matrix of the current layer can be freely defined.

[0077] Specifically, the image layer interface abstracts a complete image rendering layer into three layers: the resource layer BaseTexture is used to present an image resource; the reference layer Texture is responsible for referencing the image resource (or defining a sampling space); and the model layer Sprite specifies how an image resource reference is rendered in the canvas. The core design of the resource layer is that different image upload methods can be executed for different platform environments, with Renderer serving as a specific rendering library interface to achieve compatibility of image resources on different platforms. The function of the reference layer is to point to an image resource and describe the sampling space for rendering the image resource. An image resource can be referenced multiple times, and the sampling spaces of each reference are independent of each other. The role of the model layer is to add images to the model tree of the rendering engine, because only nodes in the model tree will be rendered, and the image model, like other nodes in the model tree, is in an independent layer coordinate system space, and the transformation matrix of the current layer can be freely set.

[0078] Through the above method, a universal rendering interface layer is constructed. The layer nodes on the model tree all use this interface layer to perform rendering operations, and the specific environment graphics library bridged by the back end of this interface layer has free configuration characteristics. To achieve this goal, it is necessary to build and implement corresponding rendering interfaces for different graphics libraries for different operating environments. In this process, the interface-oriented programming design pattern is used. The layer instance using the rendering interface only needs to focus on the interface function without knowing the specific platform environment conditions behind it. It can effectively realize the separation design of the rendering interface layer and the layer model tree, and let business research and development focus on model tree assembly. At the same time, the rendering interface layer can flexibly adapt to the project operating environment, improving the efficiency and maintainability of graphics rendering related business development.

[0079] S120, receiving the rendering task in the 2D rendering engine and sending it to the base layer;

[0080] In a specific implementation, during the operation of the 2D rendering engine, it receives rendering tasks from all parties. When there is a rendering demand, such as an update to the user interface, a change in elements in the game scene, etc., the 2D rendering engine will quickly capture these rendering tasks. Then, it will accurately send the received rendering tasks to the base layer based on the layer architecture it has built. As an important foundation of the entire rendering system, the base layer has the ability to perform preliminary processing on various graphics and image elements. It will start a series of processing processes based on the parameters in the rendering task, such as coordinate information, graphic style, color settings, etc.

[0081] S130: parse the rendering task to obtain a layer structure, and determine the type of the layer structure.

[0082] In a specific embodiment, after parsing the layer structure from the rendering task, the parsed layer structure is judged based on pre-set judgment criteria and logical rules. It is determined whether it is a graphic layer composed of various geometric elements such as lines and shapes, or an image layer containing complete image data such as bitmaps and icons.

[0083] S140. If it is the graphics layer, the base layer sends the rendering task to the graphics layer through the general planar 2D graphics rendering library interface. The graphics rendering interface of the graphics layer parses the graphics type and calls the adapted graphics drawing interface of the graphics library to perform the graphics rendering operation and generate a graphics rendering result.

[0084] In a specific embodiment, within the 2D rendering engine's workflow, once the layer structure is determined to be a graphics layer, the base layer transfers the rendering task to the graphics layer's graphics rendering interface via the general planar 2D graphics rendering library interface. At this point, the graphics layer's graphics rendering interface initiates a parsing task, extracting key graphic type information from the complex rendering task, such as specific categories like lines, circles, and polygons. Based on the parsed graphic type, the engine selects the corresponding one from its numerous graphics drawing interfaces and then calls the graphics drawing interface of the corresponding graphics library. Through precise calculations, coordinate positioning, and style rendering, the engine ultimately successfully generates a graphics rendering result that meets the requirements.

[0085] S150. If it is the image layer, the base layer sends the rendering task to the image layer through the general planar 2D graphics rendering library interface. The image rendering interface of the image layer obtains the image and information to be rendered through the reference layer, and calls the adapted image rendering interface of the graphics library to perform the image rendering operation and generate the image rendering result.

[0086] In a specific embodiment, within the 2D rendering engine's workflow, once the layer structure is determined to be an image layer, the base layer first transmits the received rendering task to the image layer's image rendering interface via the universal planar 2D graphics rendering library interface. Upon receiving the rendering task, the image layer's image rendering interface quickly interacts with the reference layer. Through the reference layer, it locates and retrieves the image to be rendered and its associated reference information, including key elements such as the image's storage location, format type, and reference relationships within the layer structure. After obtaining sufficient image information, the image rendering interface uses its own adaptation rules to find the most compatible image rendering interface among the various graphics libraries. It then initiates a call, triggering the selected graphics library's image rendering interface to initiate the core image rendering process. Within the graphics library, a series of complex calculations and processing operations, including image decoding, color space conversion, and pixel processing, are performed based on multiple factors, including image characteristics, rendering requirements, and hardware environment. Ultimately, this series of processes generates an image rendering result.

[0087] The following is an explanation using a specific example.

[0088] Creating the general planar 2D graphics rendering library interface in the base layer;

[0089] Creating a graphics rendering interface for the graphics layer;

[0090] Creating an image rendering interface for the image layer;

[0091] Adapt the 2D rendering engine to any environment where it can run. Since the smallest renderable units are only graphics and images, only these two categories need to be adapted. Use the Canvs2D graphics library and WebGL graphics library in the Web environment for adaptation.

[0092] Image rendering interface adaptation:

[0093] The Canvas2D graphics library uses the CanvasRenderingContext2D.drawImage() method of the Canvas2D API, which provides the ability to draw images on the canvas.

[0094] In the WebGL graphics library, you can use the upload method of the resource layer BaseTexture mentioned above to upload image resources, specify the two-dimensional texture image to upload to the GPU through the WebGLRenderingContext.texImage2D() method of the WebGL API, and then execute the WebGLRenderingContext.drawArrays() method in the WebGL API during rendering to draw primitives from the vector array.

[0095] Graphics rendering interface adaptation:

[0096] The way to adapt the Canvas2D graphics library is relatively simple, because the interface of the Canvas2D graphics library is consistent with the graphics rendering interface designed by this invention, so we only need to align the rendering interface:

[0097] The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API is used to start a new subpath at a given (x, y) coordinate.

[0098] The lineTo() method of the CanvasRenderingContext2D interface of the Canvas 2D API connects the last point of the current subpath to the specified (x, y) coordinates with a straight line segment, thereby adding a straight line segment to the current subpath.

[0099] The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API is used to create a quadratic Bézier curve path. It requires two points: the first is the control point, and the second is the end point. The starting point is the most recent point on the path—you can change it using the moveTo() method before creating the quadratic Bézier curve.

[0100] The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API is used to add a cubic Bézier curve to the current subpath. This method requires three points: the first two are control points, and the third is the end point. The starting point is the last point of the current path. Before drawing the Bézier curve, you can modify it by calling moveTo().

[0101] The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API is used to add an arc to the current subpath using a given control point and radius. If necessary, for example, if the starting point and the control point are on a straight line, the arc is automatically connected to the last point of the path with a straight line.

[0102] The CanvasRenderingContext2D.arc() method of the Canvas 2D API is used to add an arc to the current subpath.

[0103] The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.

[0104] The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API is used to add an elliptical arc to the current subpath.

[0105] Adapting to the WebGL graphics library interface is relatively complex. Using rasterization capabilities to render graphics requires differential sampling of vector graphics and splitting the graphics into triangles for filling.

[0106] Other graphics library adaptation:

[0107] The above only takes two graphics library adaptation methods as examples, but is not limited to the aforementioned two graphics libraries. Other solutions that use the methods of the embodiments of this disclosure to implement abstract rendering interfaces and adapt image libraries according to specific platform environments are all within the scope of protection of this disclosure.

[0108] For example, in a NodeJS runtime environment, you can adapt the node-canvas graphics library, which runs the Canavs2D graphics interface in the NodeJS environment. You can also adapt the C++ graphics library SKIA, which can be linked using the WebAssembly technology solution. In a web runtime environment, you can also adapt WebGPU, the latest web graphics rendering interface. These specific adaptations can be customized according to business needs.

[0109] The graphics image rendering method adapted to different rendering interfaces provided by the disclosed embodiment first identifies the platform graphics library and reads its graphics drawing and image rendering interface; then the 2D rendering engine receives the rendering task and sends it to the base layer, parses the layer structure type and determines the type; when it is a graphics layer, the base layer transfers the rendering task via the universal plane 2D graphics rendering library interface, and the graphics rendering interface of the graphics layer parses the graphics type and calls the graphics drawing interface of the adapted graphics library to render the graphics result; when it is an image layer, the base layer also transfers the rendering task via the universal plane 2D graphics rendering library interface, and the image rendering interface obtains the image information by referencing the layer and then calls the image rendering interface of the adapted image library to render the image result. This realizes the adaptation of different graphics image rendering interfaces and graphics image rendering across platforms, effectively solves the rendering problems caused by platform differences, and improves the versatility and compatibility of graphics image rendering in a multi-platform environment.

[0110] On the basis of the above embodiments, the present disclosure also provides a graphics image rendering device adapted to different rendering interfaces, such as Figure 2 As shown, the graphics image rendering device adapted to different rendering interfaces includes:

[0111] Identification and reading module 210, used to identify the graphics library configured in the current platform operating environment, and read the graphics drawing interface and image rendering interface of the graphics library respectively;

[0112] A receiving and forwarding module 220 is configured to receive a rendering request in a 2D rendering engine and send it to a base layer;

[0113] The parsing and judging module 230 is used to parse the layer structure in the rendering request and determine the type of the layer structure;

[0114] A first processing module 240 is configured to, when the type of the layer structure is the graphics layer, cause the base layer to send the rendering task to the graphics layer through the universal planar 2D graphics rendering library interface; the graphics rendering interface of the graphics layer to parse the graphics type, and call the adapted graphics drawing interface of the graphics library to perform a graphics rendering operation and generate a graphics rendering result;

[0115] The second processing module 250 is used to, when the type of the layer structure is the image layer, send the rendering task to the image layer through the general planar 2D graphics rendering library interface, and the image rendering interface of the image layer obtains the image and information to be rendered through the reference layer, and calls the adapted image rendering interface of the graphics library to perform the image rendering operation and generate the image rendering result.

[0116] In a specific embodiment, the base layer includes a sublayer, an independent coordinate system transformation matrix and a layer rendering interface layer, and the sublayer includes the image layer and the graphic layer;

[0117] The base layer is used to describe the basic information of the nodes in the model tree, and rendering is achieved by dispatching rendering tasks to the sub-layers;

[0118] The model tree includes all layers to be rendered, each node is declared as a base layer, and the graphics layer or the image layer to be used is specified when defining a node.

[0119] In a specific embodiment, it also includes:

[0120] A creation module 200 is used to create the general planar 2D graphics rendering library interface in the basic layer. The interface is used to adapt the graphics drawing interface of the graphics layer and the image rendering interface of the image layer based on the structure of the model tree when rendering planar 2D graphics.

[0121] In a specific embodiment, the creation module 200 is also used to create a graphics rendering interface for the graphics layer, which is used to process rendering operations of common graphics types in the graphics layer. The common graphics types include straight lines, quadratic Bezier curves, cubic Bezier curves, arcs, rectangles, rounded rectangles, circles, ellipses, and closed graphics filling and path segment filling operations, so that graphics libraries on different platforms can achieve graphics type rendering by implementing these abstract methods.

[0122] In a specific embodiment, the creation module 200 is also used to create an image rendering interface for the image layer, which is used to process operations related to the resource layer, reference layer and model layer in the image layer; the resource layer includes image resources, image size and image upload interface, and achieves cross-platform compatibility through a specific renderer interface; the reference layer points to the image resource and describes the sampling space; the model layer adds the image resource to the model tree and defines the transformation matrix.

[0123] In a specific implementation, an adaptation module 260 is also included, which is used to adapt image rendering in a Web environment, and adopts a canvas plane graphics library and a Web graphics library for adaptation. In the canvas plane graphics library, an image drawing method is used to realize image drawing on the canvas. In the Web graphics library, image resources are first uploaded through the resource layer upload method, and then the two-dimensional texture image is uploaded to the GPU using the texture setting method. The vector array drawing method is executed during rendering.

[0124] In a specific implementation, the adaptation module 260 is also used to adapt the graphics rendering interface in the Web environment, using the canvas plane graphics library for adaptation, and aligning the graphics rendering interface of the graphics layer with the graphics drawing interface of the canvas plane graphics library to achieve adaptation.

[0125] The graphics image rendering device adapted to different rendering interfaces provided by the embodiments of the present disclosure realizes cross-platform adaptation and graphics image rendering of different graphics image rendering interfaces, effectively solves the rendering problems caused by platform differences, and improves the versatility and compatibility of graphics image rendering in a multi-platform environment.

[0126] For the device embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to the partial description of the method embodiments. The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present invention. A person of ordinary skill in the art can understand and implement the present invention without inventive work.

[0127] The present application also provides a computer device. Figure 3 , Figure 3 This is a basic structural block diagram of the computer device in this embodiment.

[0128] The computer device includes a memory 310 and a processor 320 that are interconnected and communicate with each other via a system bus. It should be noted that the figure only shows a computer device having components 310-320, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0129] Computer devices can be desktop computers, laptops, PDAs, cloud servers, etc. Computer devices can interact with users through keyboards, mice, remote controls, touchpads, or voice control devices.

[0130] The memory 310 includes at least one type of readable storage medium, including non-volatile memory or volatile memory, such as flash memory, hard disk, multimedia card, card-type memory (such as SD or DX memory), random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic storage, magnetic disk, optical disk, etc. The RAM may include static RAM or dynamic RAM. In some embodiments, the memory 310 may be an internal storage unit of a computer device, such as a hard disk or memory of the computer device. In other embodiments, the memory 310 may also be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) card, or a Flash Card equipped on the computer device. Of course, the memory 310 may also include both the internal storage unit of the computer device and its external storage device. In this embodiment, the memory 310 is generally used to store the operating system and various application software installed on the computer device, such as the program code of the above-mentioned method. In addition, the memory 310 may also be used to temporarily store various types of data that have been output or are about to be output.

[0131] The processor 320 is generally used to perform the overall operation of the computer device. In this embodiment, the memory 310 is used to store program code or instructions, which include computer operating instructions. The processor 320 is used to execute the program code or instructions stored in the memory 310 or process data, such as the program code for running the above method.

[0132] In this document, a bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. This bus system can be divided into address buses, data buses, and control buses. For ease of illustration, the figure uses only one thick line, but this does not mean that there is only one bus or only one type of bus.

[0133] Another embodiment of the present application further provides a computer-readable medium, which may be a computer-readable signal medium or a computer-readable medium. A processor in a computer reads the computer-readable program code stored in the computer-readable medium, enabling the processor to execute the functional actions specified in each step or combination of steps in the above method, and to generate a device that implements the functional actions specified in each block or combination of blocks in the block diagram.

[0134] Computer-readable media include but are not limited to electronic, magnetic, optical, electromagnetic, infrared memory or semiconductor systems, devices or apparatuses, or any appropriate combination of the foregoing, the memory is used to store program codes or instructions, the program codes include computer operating instructions, and the processor is used to execute the program codes or instructions of the above-mentioned methods stored in the memory.

[0135] For the definitions of memory and processor, please refer to the description of the aforementioned computer device embodiment and will not be repeated here.

[0136] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of modules or units is only a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0137] Each functional unit or module in each embodiment of the present application may be integrated into a processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The above-mentioned integrated units may be implemented in the form of hardware or software functional units.

[0138] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) or a processor to execute all or part of the steps of the various embodiments of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0139] Unless the context clearly indicates otherwise, as used herein and in the appended claims, the singular includes the plural, and vice versa. Thus, when referring to the singular, the plural of the corresponding term is generally included. Similarly, the words "include" and "comprising" are to be interpreted as inclusive rather than exclusive. Likewise, the terms "include" and "or" should be interpreted as inclusive unless such interpretation is expressly prohibited herein. Where the term "example" is used herein, particularly when it follows a group of terms, the "example" is merely exemplary and illustrative and should not be considered exclusive or comprehensive.

[0140] Further aspects and scope of adaptability become apparent from the description provided herein. It should be understood that various aspects of the present application can be implemented individually or in combination with one or more other aspects. It should also be understood that the description and specific embodiments herein are intended to be illustrative only and are not intended to limit the scope of the present application.

[0141] Several embodiments of the present disclosure have been described in detail above, but it is obvious that those skilled in the art can make various modifications and variations to the embodiments of the present disclosure without departing from the spirit and scope of the present disclosure. The scope of protection of the present disclosure is defined by the appended claims.

Claims

1. A graphics image rendering method adapted to different rendering interfaces, characterized in that: include: Identify the graphics library configured in the current platform environment, and read the graphics drawing interface and image rendering interface of the graphics library respectively; The 2D rendering engine receives rendering tasks and sends them to the base layer; Parsing the rendering task to obtain a layer structure, and determining a type of the layer structure; If it is the graphics layer, the base layer sends the rendering task to the graphics layer through the general planar 2D graphics rendering library interface, the graphics rendering interface of the graphics layer parses the graphics type, and calls the adapted graphics drawing interface of the graphics library to perform the graphics rendering operation and generate a graphics rendering result; If it is the image layer, the base layer sends the rendering task to the image layer through the general planar 2D graphics rendering library interface. The image rendering interface of the image layer obtains the image and information to be rendered through the reference layer, and calls the adapted image rendering interface of the graphics library to perform the image rendering operation and generate the image rendering result.

2. The method according to claim 1, characterized in that: The base layer includes a sub-layer, an independent coordinate system transformation matrix and a layer rendering interface layer, and the sub-layer includes the image layer and the graphic layer; The base layer is used to describe the basic information of the nodes in the model tree, and rendering is achieved by dispatching rendering tasks to the sub-layers; The model tree includes all layers to be rendered, each node is declared as a base layer, and the graphic layer or the image layer to be used is specified when defining a node.

3. The method according to claim 2, characterized in that Before the step of identifying the graphics library and image library configured in the current platform environment, the method includes: The universal plane 2D graphics rendering library interface is created in the base layer, and the interface is used to adapt the graphics drawing interface of the graphics layer and the image rendering interface of the image layer based on the structure of the model tree when rendering plane 2D graphics.

4. The method according to claim 2, characterized in that: Before the step of identifying the graphics library and image library configured in the current platform environment, the method includes: A graphics rendering interface is created for the graphics layer, which is used to process rendering operations of common graphics types in the graphics layer, as well as closed graphics filling and path segment filling operations, so that graphics libraries on different platforms can achieve graphics type rendering by implementing these abstract methods. The common graphics types include straight lines, quadratic Bezier curves, cubic Bezier curves, arcs, rectangles, rounded rectangles, circles, and ellipses.

5. The method according to claim 1, characterized in that Before the step of identifying the graphics library and image library configured in the current platform environment, the method includes: Creating an image rendering interface for the image layer, which is used to process operations related to the resource layer, reference layer and model layer in the image layer; The resource layer includes image resources, image size and image upload interface, and realizes cross-platform compatibility through a specific renderer interface; The reference layer points to the image resource and describes the sampling space; The model layer adds image resources to the model tree and defines the transformation matrix.

6. The method according to claim 1, characterized in that For image rendering adaptation in the Web environment, the canvas plane graphics library and the Web graphics library are used for adaptation. In the canvas plane graphics library, the image drawing method is used to realize image drawing on the canvas. In the Web graphics library, the image resource is first uploaded through the resource layer upload method, and then the two-dimensional texture image is uploaded to the GPU using the texture setting method. The vector array drawing method is executed during rendering.

7. The method according to claim 1, characterized in that For the adaptation of the graphics rendering interface in the Web environment, the canvas plane graphics library is used for adaptation, and the graphics rendering interface of the graphics layer is aligned with the graphics drawing interface of the canvas plane graphics library to achieve adaptation.

8. A graphics image rendering device adapted to different rendering interfaces, characterized in that: include: An identification and reading module is used to identify the graphics library configured by the current platform operating environment, and read the graphics drawing interface and image rendering interface of the graphics library respectively; A receiving and forwarding module is used to receive a rendering request in a 2D rendering engine and send it to a base layer; A parsing and judging module, used for parsing the layer structure in the rendering request and judging the type of the layer structure; A first processing module, configured to, when the type of the layer structure is the graphics layer, send the rendering task from the base layer to the graphics layer through the general planar 2D graphics rendering library interface, parse the graphics type through the graphics rendering interface of the graphics layer, and call the adapted graphics drawing interface of the graphics library to perform graphics rendering operations and generate graphics rendering results; The second processing module is used for, when the type of the layer structure is the image layer, the base layer sends the rendering task to the image layer through the general plane 2D graphics rendering library interface, the image rendering interface of the image layer obtains the image and information to be rendered through the reference layer, and calls the adapted image rendering interface of the graphics library to perform image rendering operations and generate image rendering results.

9. A computer device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 7.

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

Images