Graph processing method, electronic equipment and computer readable storage medium

Abstract

A graph processing method, an electronic device and a computer readable storage medium, the method comprising: obtaining description data of a target vector graph, the description data being defined by a tree structure, the tree structure comprising at least one symbol distance field (SDF) basic primitive and at least one SDF operator, the at least one SDF basic primitive being defined by the at least one SDF basic primitive and the at least one SDF operator being defined by the at least one SDF basic primitive; the SDF basic primitive is a leaf node of the description data, the SDF operator is a non-leaf node of the description data, and the SDF operator is used for representing a method for processing the SDF basic primitive; and drawing the target vector graph according to the description data. The method can reduce the number of drawing instructions, reduce the calculation complexity and improve the rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to methods for graphics processing, electronic devices, and computer-readable storage media. Background Technology

[0002] Vector graphics are an image type relative to traditional bitmaps. Because vector graphics are graphics that describe graphic elements based on mathematical equations and geometric paths, their image quality remains unchanged regardless of whether they are enlarged or reduced, and they do not exhibit the blurring or pixelation that occurs with bitmaps. Vector graphics are typically used to represent images with clear lines and simple colors, such as logos, icons, and illustrations.

[0003] Current vector graphics are generally implemented based on paths; a path is a vector description method based on contour modeling, which defines the shape and boundaries of the graphic. Typically, each path includes at least one line segment and / or curve; these line segments or curves can be represented by parametric equations to accurately describe the shape and boundaries of the vector graphics. For simple vector graphics (such as rectangles), the drawing process is concise and efficient, requiring only a few drawing instructions, and has little impact on rendering performance. However, for complex vector graphics (such as finely designed icons or illustrations), due to the detailed description of a large number of line segments and / or curves, the drawing stage needs to handle a huge number of drawing instructions, which not only increases the computational load but also seriously affects rendering performance. Summary of the Invention

[0004] Therefore, this application provides a graphics processing method, an electronic device, and a computer-readable storage medium that can reduce the number of drawing instructions, reduce computational complexity, and improve rendering efficiency.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] Firstly, a method for graphics processing is provided, which can be executed by an electronic device, by a module applied in the electronic device (e.g., a processor, chip, or chip system), or by a logic module or software capable of implementing all or part of the functions of the electronic device; the method includes:

[0007] Obtain the description data of the target vector graphic. The description data is defined by a tree structure, which includes at least one signed distance field (SDF) primitive and at least one SDF operator. The SDF primitive is the leaf node of the description data, and the SDF operator is the non-leaf node of the description data. The SDF operator is used to represent the method of processing the SDF primitive. Draw the target vector graphic based on the description data.

[0008] Traditional path methods for describing vector graphics are limited by their complexity, numerous drawing commands, and low rendering efficiency. This application uses a tree structure composed of SDF primitives and SDF operators to describe the target vector graphics. This not only provides a clear hierarchy but also facilitates management and modification. For example, by adjusting a node in the tree structure (such as an SDF primitive or SDF operator), it is easy to achieve local or global adjustments to the entire vector graphics. Furthermore, since SDF is a shape-based modeling method, it allows developers to more intuitively understand and perceive the global structure of the graphics, thus helping them better grasp the overall style and detail processing during the design process. Simultaneously, due to the flexibility of SDF, developers can easily adjust the shape, size, and other attributes of the vector graphics to meet different design needs. For complex vector graphics, traditional path description methods may require a large number of drawing commands and complex calculations. This application, however, uses a tree structure description method, which reduces the complexity of describing vector graphics by optimizing the tree structure and reducing unnecessary nodes, thereby reducing the number of drawing commands and improving rendering efficiency.

[0009] In one possible implementation, the SDF basic primitives include at least one of the following: straight line graphics, curved graphics, or polyline graphics.

[0010] Because SDF's basic primitives are centered on shapes, they can accurately represent the outlines and boundaries of graphics. Linear, curved, and polyline graphics, which form the basis of the graphics, can be combined to create a variety of complex vector graphics, enabling diverse graphic designs. Furthermore, due to SDF's inherent characteristics, such as smooth boundaries and efficient rendering capabilities, vector graphics built using SDF primitives exhibit better visual effects and higher rendering efficiency during rendering.

[0011] In one possible implementation, straight-line graphics include single-line graphics, intersecting line graphics, and parallel line graphics; curved graphics include circular, elliptical, spiral, and parabolic graphics; and broken-line graphics include polygons.

[0012] SDF basic primitives such as single-line graphics, intersecting lines, circles, and polygons can be used to describe a wide range of complex shapes and patterns. These SDF basic primitives can be used individually or in combination to describe more complex and diverse vector graphics. In addition, since a variety of SDF basic primitives are provided, users can flexibly select and use them according to their needs, thereby meeting different design or modeling requirements.

[0013] In one possible implementation, the SDF operator includes at least one of the following: rounded corner operator, hollow operator, Boolean operator, or smoothing operator.

[0014] By introducing features such as rounded corner operators and hollow operators, SDF operators can express more diverse and refined graphics (or shapes). For example, rounded corner operators can smooth edges and corners, making graphics (or shapes) look more natural and fluid; hollow operators can create graphics (or shapes) with empty interiors or specific holes, increasing the diversity and layering of designs. The introduction of Boolean operators (such as union, intersection, and difference) can greatly simplify the calculation steps in graphics processing; for example, Boolean operators can quickly generate complex shapes through logical operations without manually drawing or editing every graphic detail, thus improving graphics drawing efficiency. Furthermore, features such as smoothing operators can improve the smoothness and visual effect of graphics; in scenarios such as graphics rendering and animation production, smooth curves and shapes are crucial for enhancing the overall visual effect.

[0015] In one possible implementation, the Boolean operator includes at least one of the following: intersection operator, union operator, difference operator, or XOR operator, and the smoothing operator includes at least one of the following: smoothing intersection operator, smoothing union operator, or smoothing difference operator.

[0016] By introducing different types of operators, users' graphics processing needs in different scenarios can be met. For example, by performing logical operations such as intersection, union, difference, and XOR on graphics, graphics with precise boundaries and shapes can be quickly constructed without manual drawing or editing, greatly improving the efficiency and accuracy of graphics operations. Furthermore, by using operators such as smooth intersection, the visual effect of graphics can be improved, making the generated graphics more natural and smooth.

[0017] In one possible implementation, the tree structure further includes: a transformation function, which is located at the same node in the tree structure as the first SDF basic primitive, and is used to control the change of the graphic state of the first SDF basic primitive over time, wherein the first SDF basic primitive is one of at least one SDF basic primitive; or, a transformation function, which is located at the same node in the tree structure as the first SDF operator, and is used to control the change of the graphic corresponding to the first SDF operator over time, wherein the first SDF operator is one of at least one SDF operator.

[0018] In some scenarios, vector graphics can be dynamically controlled over time by introducing transformation functions into some (or all) nodes of a tree structure. This not only enhances the dynamic interactivity of the graphics but also allows users to experience more vivid graphic changes. In a tree structure, each node (such as an SDF primitive or SDF operator) can be considered an independent control unit. Associating transformation functions with specific nodes (such as SDF primitives or SDF operators) allows for fine-grained control over different parts or levels of the target vector graphics. Furthermore, the hierarchical and modular nature of tree structures makes graphic design easy to adjust. For example, when it is necessary to modify or expand a graphic, operations can be performed on specific nodes without affecting other parts. Therefore, introducing transformation functions into a tree structure also makes adjusting the target vector graphics more direct and simple.

[0019] In one possible implementation, the transformation function includes: a shape transformation function and / or a position transformation function, wherein the shape transformation function is used to control the shape of the first SDF basic primitive to change over time, and the position transformation function is used to control the position of the graphic corresponding to the first SDF basic primitive to change over time; or, the shape transformation function is used to control the shape of the first SDF operator to change over time, and the position transformation function is used to control the position of the graphic corresponding to the first SDF operator to change over time.

[0020] In some scenarios, the transformation functions that control the animation effects of target vector graphics can include shape transformation functions and / or position transformation functions. Different transformation functions can be used to independently adjust the shape and position of the graphics, which not only enhances the flexibility and dynamic performance of the graphics, but also enables developers to easily achieve complex animation effects, such as shape gradation and movement path adjustment, without having to redraw the entire graphic.

[0021] In one possible implementation, the tree structure further includes: a first transformation function and a second transformation function. The first transformation function is located at the same node in the tree structure as the first SDF basic primitive and is used to control the change of the graphic state of the first SDF basic primitive over time. The first SDF basic primitive is one of at least one SDF basic primitive. The second transformation function is located at the same node in the tree structure as the first SDF operator and is used to control the change of the graphic corresponding to the first SDF operator over time. The first SDF operator is one of at least one SDF operator.

[0022] In some scenarios, by embedding different transformation functions into different SDF primitives and SDF operators, the state changes of different parts of the target vector graphics can be independently controlled. This hierarchical control strategy enables the target vector graphics to exhibit richer and more diverse dynamic effects over time, improving the expressiveness of the graphics. For example, developers can select appropriate transformation functions for different parts of the graphics according to actual needs, and achieve precise control over the changes in the graphics by adjusting the parameters of the transformation functions. Combining multiple transformation functions with SDF primitives and SDF operators respectively can achieve various animation effects during the rendering process. In addition, since the transformation functions are defined on the nodes of the tree structure, the transformation functions can be optimized for specific parts of the graphics to reduce unnecessary computation and thus improve rendering performance.

[0023] In one possible implementation, the first transformation function includes: a first shape transformation function and / or a first position transformation function, wherein the first shape transformation function is used to control the shape of the first SDF basic primitive to change over time, and the first position transformation function is used to control the position of the graphic corresponding to the first SDF basic primitive to change over time; the second transformation function includes: a second shape transformation function and / or a second position transformation function, wherein the second shape transformation function is used to control the shape of the first SDF operator to change over time, and the second position transformation function is used to control the position of the graphic corresponding to the first SDF operator to change over time.

[0024] In some scenarios, the transformation functions (such as the first transformation function and the second transformation function) that control the animation effects of the target vector graphics can include shape transformation functions (such as the first shape transformation function and the second shape transformation function) and / or position transformation functions (such as the first position transformation function and the second position transformation function). The shape and position transformation functions can be used to independently adjust the shape and position of the graphics. This not only enhances the flexibility and dynamic performance of the graphics, but also enables developers to easily implement complex animation effects, such as shape gradation and movement path adjustment, without having to redraw the entire graphics.

[0025] In one possible implementation, drawing a target vector graphic based on description data includes: extracting shape information and drawing information of the target vector graphic based on description data; and drawing the target vector graphic based on the shape information and drawing information.

[0026] Traditional vector graphics rendering processes are cumbersome, involving multiple steps such as surface subdivision, triangulation, lighting processing, and texture mapping, which are not only time-consuming but may also introduce precision loss. In contrast, this application uses a tree structure constructed from SDF primitives and SDF operators to describe the target vector graphics. This allows electronic devices to directly extract shape and drawing information from the description data of the target vector graphics without the need for complex processing steps in traditional rendering methods. Due to the characteristics of SDF and the directness of the tree structure, the graphics can maintain high precision during the rendering process, reducing the precision loss that may be caused by the increase in processing steps. In addition, the electronic device directly draws based on the extracted shape and drawing information, which not only simplifies the rendering process but also avoids unnecessary intermediate steps and improves rendering efficiency.

[0027] Secondly, a method for vector cursor processing is provided. This method can be executed by an electronic device, by a module applied in the electronic device (such as a processor, chip, or chip system), or by a logic module or software capable of implementing all or part of the functions of the electronic device. The method includes:

[0028] Obtain the description data of the vector cursor graphic. The description data is defined through a tree structure, which describes the construction and transformation process of the vector cursor graphic. The description data includes the starting graphic data, intermediate SDF operators, and ending graphic data. The starting graphic data is used to define the starting graphic of the vector cursor graphic. The intermediate SDF operators are used to calculate the intermediate graphics of the vector cursor graphic during the transformation process. The intermediate SDF operators are the root node of the tree structure. The ending graphic data is used to define the ending graphic of the vector cursor graphic. Draw the vector cursor graphic based on the description data.

[0029] Traditional path methods for describing vector cursor graphics are limited by their complexity, numerous drawing commands, and low rendering efficiency. This application uses a tree structure to describe the starting, intermediate, and ending shapes of a vector cursor graphic during its transformation process. This not only provides a clear hierarchy but also facilitates management and modification of the shapes in different states. For example, adjusting a node in the tree structure easily allows for local or global adjustments to the entire vector cursor graphic. Furthermore, for complex vector cursor graphics, traditional path methods may require a large number of drawing commands and complex calculations. This application, however, uses a tree structure, which reduces the complexity of describing vector cursor graphics by optimizing the tree structure and reducing unnecessary nodes, thereby reducing the number of drawing commands and improving rendering efficiency.

[0030] In one possible implementation, the initial graphic data includes a first SDF primitive set, a first SDF operator set, and a first transformation function set; the ending graphic data includes a second SDF primitive set, a second SDF operator set, and a second transformation function set; wherein, each SDF primitive in the first and second SDF primitive sets is a leaf node of the describing data, each SDF operator in the first and second SDF operator sets is a non-leaf node in the describing data other than the root node, and each transformation function in the first and second transformation function sets is located at a leaf node or a non-leaf node of the describing data.

[0031] In some scenarios, a tree structure composed of SDF primitives and SDF operators is used to describe the initial, intermediate, and final shapes of a vector cursor during its transformation process. This not only provides a clear hierarchy but also facilitates the management and modification of the shape of the cursor in different states. For example, by adjusting a node in the tree structure (such as a specific SDF primitive or SDF operator), it is easy to achieve local or global adjustments to the entire vector cursor. Furthermore, since SDF is a shape-based modeling approach, it allows developers to more intuitively understand and perceive the global structure of the graphic, thus helping them to better grasp the overall style and detail processing of the cursor during the design process. At the same time, due to the flexibility of SDF, developers can easily adjust the shape, size, and other attributes of the vector cursor to meet different design requirements.

[0032] In one possible implementation, the starting graphic is a question mark graphic, the middle SDF operator is a smoothing operator, and the ending graphic is a cross graphic. The first SDF primitive set includes circles and question mark graphics, the first SDF operator set includes a first Boolean operator and a rounded corner operator, the second SDF primitive set includes circles and cross graphics, and the second SDF operator set includes a second Boolean operator and a rounded corner operator.

[0033] In one possible implementation, the first Boolean operator and the second Boolean operator are both difference operators, and the smoothing operator is a smooth union operator.

[0034] In one possible implementation, the starting graphic is a double-arrow graphic, the middle SDF operator is a first smoothing operator, and the ending graphic is a double-arrow arc. The first SDF primitive set includes a first arrow graphic and a second arrow graphic, the first SDF operator set includes a rounded corner operator and a third Boolean operator, the second SDF primitive set includes a partial ring, a third arrow graphic, and a fourth arrow graphic, and the second SDF operator set includes a fourth Boolean operator and a second smoothing operator.

[0035] In one possible implementation, the third and fourth Boolean operators are both union operators, and the first and second smoothing operators are both smoothing union operators.

[0036] In one possible implementation, drawing a vector cursor graphic based on description data includes: drawing a starting graphic based on starting graphic data; processing the starting graphic data and ending graphic data through an intermediate SDF operator in response to an operation event to obtain an intermediate graphic; and drawing an ending graphic based on the ending graphic data.

[0037] In practical applications, electronic devices can change their shape or display different graphic states in real time as the vector cursor moves across a given area. For example, if the vector cursor is stationary in area A, the electronic device can draw a starting graphic (or an ending graphic) based on the starting graphic data and display it in area A. As the vector cursor moves to another area B, i.e., when it switches from area A to area B, the electronic device can respond to operation events by processing the starting and ending graphic data using intermediate SDF operators to obtain an intermediate graphic. This allows the vector cursor to dynamically change during its movement, thus meeting the user's visual needs.

[0038] Thirdly, embodiments of this application provide an electronic device, which includes a processor and a memory. The memory is used to store a computer program, and the processor is used to call and run the computer program from the memory, causing the electronic device to perform the methods described in the first aspect and various possible implementations of the first aspect, or to cause the electronic device to perform the methods described in the second aspect and various possible implementations of the second aspect.

[0039] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, causes the processor to perform the methods described in the first aspect and various possible implementations of the first aspect, or causes the processor to perform the methods described in the second aspect and various possible implementations of the second aspect.

[0040] Fifthly, embodiments of this application provide a computer program product comprising: computer program code, which, when executed by an electronic device, causes the electronic device to perform the methods described in the first aspect and various possible implementations thereof, or causes the electronic device to perform the methods described in the second aspect and various possible implementations thereof.

[0041] In a sixth aspect, embodiments of this application provide a chip system, which includes a processing circuit and a storage medium storing computer program instructions; when the computer program instructions are executed by the processing circuit, they implement the methods described in the first aspect and various possible implementations of the first aspect, or when the computer program instructions are executed by the processing circuit, they implement the methods described in the second aspect and various possible implementations of the second aspect.

[0042] Optionally, the processing circuitry in the above-mentioned chip system can be replaced by a processor, and the storage medium can be replaced by a memory. Optionally, the chip system may also include a communication interface for enabling communication between the chip system and a receiving device.

[0043] The beneficial effects of the technical solutions in the third to sixth aspects of this application can be the same as the beneficial effects of the technical solutions in the first or second aspects, and will not be repeated here. Attached Figure Description

[0044] Figures 1A to 1B This application provides a schematic diagram of a graphic processing process.

[0045] Figure 2 A schematic diagram of the hardware structure of an electronic device 100 provided in an embodiment of this application;

[0046] Figure 3 A schematic diagram of the software architecture of an electronic device 100 provided in an embodiment of this application;

[0047] Figures 4A to 4B This application provides a schematic diagram of the software architecture of a terminal device.

[0048] Figure 5 Schematic diagrams of several application scenarios provided in the embodiments of this application;

[0049] Figure 6A A schematic flowchart of a graphics processing method 600A provided in an embodiment of this application;

[0050] Figure 6B A flowchart illustrating a vector cursor processing method 600B provided in an embodiment of this application;

[0051] Figures 7A to 7C A schematic diagram of the basic SDF primitives provided in the embodiments of this application;

[0052] Figures 8A to 8C A schematic diagram of a tree-structured vector graphic describing a target, provided in an embodiment of this application;

[0053] Figures 9A to 9B A schematic diagram illustrating yet another tree-structured description of a target vector graphic provided in an embodiment of this application;

[0054] Figures 10A to 10B A schematic diagram illustrating another tree-structured description of a target vector graphic provided in an embodiment of this application;

[0055] Figures 11A to 11B A schematic diagram illustrating yet another tree-structured description of a target vector graphic provided in an embodiment of this application;

[0056] Figures 12A to 12B A schematic diagram illustrating another tree-structured description of a target vector graphic provided in an embodiment of this application;

[0057] Figures 13A to 13B A schematic diagram illustrating yet another tree-structured description of a target vector graphic provided in an embodiment of this application;

[0058] Figures 14A to 14B A schematic diagram illustrating the process steps for drawing a target vector graphic, provided in an embodiment of this application;

[0059] Figures 15A to 15B This is a schematic diagram of a static processing scenario provided in an embodiment of this application;

[0060] Figures 15C to 15D This application provides an illustration of an application scenario for a vector cursor graphic.

[0061] Figures 16A to 16B This application provides an illustration of an application scenario for target vector graphics design.

[0062] Figures 17A to 17B This is a schematic diagram illustrating another application scenario for target vector graphics design provided in the embodiments of this application;

[0063] Figures 18A to 18B This is a schematic diagram illustrating another application scenario for target vector graphics design provided in the embodiments of this application;

[0064] Figures 19A to 19B This is a schematic diagram illustrating another application scenario for target vector graphics design provided in the embodiments of this application;

[0065] Figures 20A to 20B This is a schematic diagram illustrating another application scenario for target vector graphics design provided in the embodiments of this application;

[0066] Figure 21 This is a schematic diagram of the structure of an electronic device 2100 provided in an embodiment of this application. Detailed Implementation

[0067] To clearly describe the technical solutions of the embodiments of this application, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be noted that the embodiments described in this application are only some embodiments of this application, and not all embodiments.

[0068] In the description of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B. In the description of this application, "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. "At least one" means one or more, and "more" means two or more. The terms "first" and "second," etc., in the specification and claims of this application are used to distinguish different objects or to distinguish different treatments of the same object, not to describe a specific order of objects. For example, "first terminal" and "second terminal," etc., are used to distinguish different terminal devices, not to describe a specific order of terminal devices. Those skilled in the art will understand that the words "first," "second," etc., do not limit the quantity or execution order, and that "first," "second," etc., do not necessarily imply difference.

[0069] It should be noted that, in this application, the terms "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner. The terms "comprising," "including," "having," and variations thereof all mean "including but not limited to," unless otherwise specifically emphasized.

[0070] To facilitate understanding of this application, some of the technical terms involved in this application are explained below.

[0071] 1. Vector graphics (VG)

[0072] Vector graphics, also known as vector graphics or vector images, are a graphical representation of graphic elements (such as points, lines, and surfaces) based on mathematical equations and paths. Unlike bitmap graphics (or raster graphics or pixel graphics), vector graphics are not represented by pixels, but by straight lines and curves defined by a series of mathematical equations or algorithms. These mathematical equations define attributes such as the shape, size, position, and color of the graphic, allowing for unlimited scaling, rotation, distortion, and deformation without loss of clarity and detail. Compared to bitmap files containing a large amount of pixel information, vector graphics files are typically smaller because they only store the mathematical description of the graphic, not pixel data. Because vector graphics are not represented by a fixed number of pixels, they can maintain their clarity at any resolution. Furthermore, bitmaps are typically used to represent images with rich colors and details, while vector graphics are typically used to represent images with clean lines and simple colors, such as logos, icons, and illustrations.

[0073] 2. Scalable Vector Graphics (SVG)

[0074] SVG is a vector graphics format based on Extensible Markup Language (XML). SVG files are stored as text and can be searched, indexed, scripted, and compressed. Applications of SVG include, but are not limited to: creating vector icons, creating data visualization charts (such as line charts, pie charts, and bar charts), creating various dynamic effects (such as loading animations and page transitions), drawing maps (such as marking geographical locations, drawing map boundaries, and depicting geographical features), and creating interactive user interface elements (such as buttons, sliders, and interactive charts).

[0075] 3. Lottie

[0076] Lottie is an open-source animation library developed by Airbnb, compatible with the World Wide Web, Android, iOS (internetworking operating system - Cisco), HarmonyOS, and Windows. Using Lottie, developers can implement complex animation effects in their applications without writing extensive animation code. For example, Lottie can export animations created in After Effects (AE) as JSON files via the BodyMotion plugin. These JSON files contain all the animation's keyframes, attributes, and other information, and can be played on multiple platforms supported by Lottie (HarmonyOS, Windows, etc.) (e.g., locally rendered animations).

[0077] 4. Signed distance fields (SDF)

[0078] SDF, also known as the sign distance function, oriented distance function, or two-dimensional (2D) distance field function, is an implicit graphical representation method. Curves or surfaces can be implicitly represented as a level set of distance field functions. SDF defines the shape of a graph by calculating the nearest distance from each point on the graph boundary to the interior of the graph (and marking the sign of the distance). In some scenarios, SDF can process the received 2D coordinate positions and return a distance value d, which represents the distance from the current point to the nearest geometric edge.

[0079] Applications of SDF include, but are not limited to: generating smooth contour edges (e.g., calculating the distance between each point and the shape surface to achieve anti-aliasing), collision detection (e.g., determining whether a point is inside or outside a shape to determine if a collision has occurred), calculating the intersection of light rays with the object surface (e.g., determining how light rays propagate inside or outside an object), creating and editing complex geometries (e.g., changing the surface of a shape by changing the definition of SDF), terrain generation, character animation, and physical effects.

[0080] 5. Surface subdivision / triangulation

[0081] Tessellation refers to the process of dividing the faces of a model into more smaller faces to improve model accuracy and rendering quality. This process can be performed in a central processing unit (CPU) or a graphics processing unit (GPU) using tessellation shaders to reduce the CPU load and improve performance. Tessellation shaders consist of tessellation control shaders and tessellation evaluation shaders. The control shaders determine the level of tessellation, while the evaluation shaders run on the vertices generated after tessellation to produce the final vertex data.

[0082] Triangulation is the process of converting polygons or other shapes into triangular meshes. Triangulation can be achieved through various algorithms, such as scanline method and triangulation method. Since triangles are the most basic drawing unit in computer graphics and can be directly used for rendering and processing, triangulation can improve the processing efficiency and compatibility of GPUs.

[0083] It's important to note that tessellation and triangulation can be performed independently or in combination. For example, during the modeling phase, the model can be triangulated to generate a triangular mesh; then, during the rendering phase, the triangular mesh can be tessellated to improve the rendering effect. Alternatively, in real-time rendering, a tessellation shader can be used to further subdivide an already triangulated model to improve rendering quality while maintaining rendering performance.

[0084] 6. Rasterization

[0085] Rasterization is a process in computer graphics that converts geometric shapes (such as triangles) into pixels. This process includes coordinate transformation and geometric discretization, with the aim of determining which pixels are covered by geometric units and assigning color, depth, and texture data to these pixels. In short, rasterization is the process of converting the vertex information of a 3D model into a 2D image on the screen.

[0086] 7. Drawing commands (drawcall)

[0087] Drawing instructions, also known as rendering instructions or drawing call instructions, refer to the operations in which the CPU calls the graphics programming interface (such as DirectX or OpenGL) to command the GPU to perform rendering during graphics processing. Specifically, a drawcall is an instruction sent by the CPU to the GPU to instruct the GPU to start drawing an object or a group of objects. Typically, the CPU is responsible for preparing the data and instructions required for rendering and sending this data and instructions to the GPU through a drawcall. When the GPU receives a drawcall, it can perform calculations based on the rendering state (such as materials, textures, shaders, etc.) and all input vertex data, and finally output the pixels displayed on the screen. This process is also known as the rendering pipeline. Since each drawcall requires the CPU to perform a lot of preparation work and send a lot of data to the GPU, too many drawcalls can lead to CPU overload, which in turn affects the rendering efficiency and smoothness of applications (such as games).

[0088] 8. Shader

[0089] Shaders are used to implement image rendering, replacing editable programs with fixed rendering pipelines. Shaders are typically small programs that execute on the graphics processing unit (GPU) to control different aspects of graphics, such as color, lighting, texture mapping, and projection. During image rendering, shaders are used to process the geometry of the scene and calculate the final color or attributes for each pixel or vertex. Shaders generally consist of two types: vertex shaders and fragment shaders. Vertex shaders are primarily responsible for calculations related to the geometric relationships of vertices, such as calculating the final position, color, and normals of each vertex; they can also perform coordinate transformations, lighting calculations, and vertex animations. Fragment shaders, also known as pixel shaders, are primarily responsible for calculations such as fragment color; for example, fragment shaders can process each pixel to calculate its final color; they can also perform texture sampling, lighting calculations, and shadow calculations to generate the final image.

[0090] 9. GPU

[0091] A GPU, also known as a graphics processing unit, is a microprocessor specifically designed for performing image and graphics-related computations in personal computers, workstations, game consoles, and some mobile devices (such as tablets and smartphones). GPUs reduce the reliance of graphics cards on the CPU and perform some of the tasks that were originally handled by the CPU, especially in 3D graphics processing. The core technologies used by GPUs include hardware T&L (geometry transformation and lighting processing), cubic environment mapping and vertex blending, texture compression and bump mapping, and a dual-texture four-pixel 256-bit rendering engine.

[0092] 10. Vector Graphics Rendering Process

[0093] Since vector graphics use mathematical equations to describe their shapes, a complete graphics pipeline is required to perform a series of operations on vector graphics, such as surface subdivision, triangulation, rendering, compositing, and display. There are generally two rendering methods for vector graphics: CPU-based rendering and GPU-based rendering. GPU-based rendering, which can greatly improve rendering efficiency by utilizing the parallel computing capabilities of the GPU, is currently the mainstream rendering method for vector graphics.

[0094] for example, Figure 1A This illustrates the process by which a GPU processes and displays vector graphics through a rasterization pipeline; the process includes the following steps: (1) Primitive representation: The GPU performs surface subdivision and triangulation on the vector graphics to obtain 100,000 mesh spheres; a two-dimensional schematic diagram of the 100,000 mesh spheres is shown below. Figure 1A(2) The drawing process includes vertex processing, rasterization and fragment processing. Vertex processing: The GPU performs vertex processing on 100,000 meshed spheres, such as vertex shading; Rasterization: The vertex processing results are converted into pixels on the screen, such as determining the pixel area covered by primitives; Fragment processing: The fragments (i.e., candidate pixels) generated by rasterization are further processed, including fragment shading (such as calculating the final color of the pixel), color mixing, etc.; (3) Multi-pass includes: shadow pass, lighting pass, etc. The process includes a shadow stage (pass) and a postprocess pass stage (postprocess pass). The shadow stage is used to calculate shadows or occlusion culling; the lighting stage is used to calculate lighting and color; the postprocess pass stage can perform filter and anti-aliasing processing to improve image quality and visual effects. For example, filter processing can be used to further modify and enhance the image to achieve the expected visual effect, and anti-aliasing processing can be used to eliminate or reduce jagged artifacts at the edges of the image; (4) Display stage: The GPU outputs the rendered image to the display device (such as a monitor, projector, etc.); for example, the GPU sends the image data in the rendered frame buffer to the display device; the display device converts these image data into a visible image and displays it.

[0095] The above has introduced the technical terms that may be involved in this application. The following section, in conjunction with a practical application scenario, introduces the technical problems that this application needs to solve.

[0096] Path is a vector graphics description method based on contour modeling; it parametrically represents the complete contour of a vector graphic using a series of basic curves (such as line segments and arcs). For simple vector graphics, such as rectangles and hexagons, the number of curves required for contour description is limited, and the number of drawing commands involved in the drawing phase is relatively small, thus the impact on rendering performance is negligible. However, the situation is quite different for complex vector graphics. Since complex vector graphics often require a large number of basic curves to describe their contours, the drawing phase needs to process a huge set of drawing commands; this surge in the number of drawing commands inevitably has a significant impact on rendering speed, becoming a performance bottleneck.

[0097] For example, such as Figure 1BAs shown, a simple vector graphic—rectangle 101—is described using a path. First, A(x1,y1) on the canvas is used as the top-left corner of the rectangle. Then, a line segment is drawn to the right to the top-right corner B(x2,y1), where x2 is the end point of the rectangle's width. Next, a line segment is drawn vertically downwards from the top-right corner B(x2,y1) to the bottom-right corner C(x2,y2), where y2 is the end point of the rectangle's height. Finally, a line segment is drawn from the bottom-right corner C(x2,y2) to the left to the bottom-left corner D(x1,y2), and then back from the bottom-left corner D(x1,y2) to the top-left corner A(x1,y1). The entire rectangle overlay process requires only 4 line segments, resulting in a very small number of drawing commands. Therefore, the rendering speed is very fast, and the impact on performance is negligible.

[0098] For example, such as Figure 1B As shown, a complex vector graphic—a flower pattern 102—is described using a path. The outline of the flower pattern 102 may consist of hundreds or thousands of curve segments, including but not limited to straight line segments, arcs, Bézier curves, etc. Each petal may be precisely depicted by multiple arcs and Bézier curves to depict the undulations and curves of its edges. The stamen may include smaller circles or irregular shapes, each requiring a separate path description. In addition, the entire flower pattern 102 may also include shadow effects, which usually require additional layered paths and transparency to achieve, further increasing the complexity of the drawing instructions. Furthermore, since the construction of complex vector graphics using paths may involve a large number of basic curve definitions and drawing instructions, when electronic devices process these drawing instructions, they need to calculate the position, color, transparency, and other attributes of each point, which will increase the computational burden and affect rendering performance.

[0099] In view of this, this application proposes a graphics processing method that can reduce the number of drawing instructions, reduce computational complexity, and improve rendering efficiency.

[0100] In this graphics processing method, the electronic device can obtain the description data of the target vector graphics from the target vector file imported by the software design tool, and extract shape information and drawing information from the description data during the drawing stage. Then, the target vector graphics can be drawn according to the shape information and drawing information without the need for multiple processing such as surface subdivision and triangulation. This method not only simplifies the drawing process, but also avoids unnecessary intermediate steps and improves rendering efficiency.

[0101] It should be noted that the above-described graphics processing method can be executed by an electronic device, or by a module within the electronic device (such as a processor, chip, or chip system), or by a logic module or software capable of implementing all or part of the functions of the electronic device. In some scenarios, the electronic device can refer to a server, such as a computing server or graphics processing server, or it can refer to a terminal device (or user equipment, UE). The terminal device can be a mobile phone, watch, in-vehicle infotainment system, smart screen, smart TV, tablet computer, wearable device, virtual reality (VR) device, augmented reality (AR) device, projector, in-vehicle playback system, etc. This application does not impose any restrictions on the specific type of terminal device.

[0102] To better understand the embodiments of this application, the following is combined with... Figure 2 This application describes a hardware structure for an electronic device 100; the electronic device 100 may refer to a terminal device.

[0103] Electronic device 100 may include processor 110 (such as CPU), external memory interface 120, internal memory 121, universal serial bus (USB) connector 130, charging management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, and display screen 170, etc.

[0104] The processor 110 may include one or more processing units, such as an application processor (AP), a modem processor, a GPU, a controller, a digital signal processor (DSP), a baseband processor, etc. These different processing units may be independent devices or integrated into one or more processors.

[0105] The processor 110 can generate operation control signals based on the instruction opcode and timing signals to control the instruction fetching and execution.

[0106] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 may be a cache memory. This memory can store instructions or data that the processor 110 has used or that are used frequently. If the processor 110 needs to use the instruction or data, it can directly retrieve it from this memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0107] In some embodiments, the processor 110 may include one or more interfaces. These interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal serial bus (USB) interface, etc. The processor 110 can connect to modules such as wireless communication modules and displays through at least one of these interfaces.

[0108] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0109] USB connector 130 is a USB standard-compliant interface used to connect electronic device 100 and peripheral devices. Charging management module 140 receives charging input from a charger, which can be either a wireless or wired charger. Power management module 141 connects to battery 142, and charging management module 140 connects to processor 110. Power management module 141 receives input from battery 142 and / or charging management module 140 to power processor 110, internal memory 121, display screen 170, and wireless communication module 160, etc. In some embodiments, power management module 141 and charging management module 140 may also be housed in the same device.

[0110] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0111] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in the same device as at least some modules of the processor 110.

[0112] The wireless communication module 160 can provide wireless communication solutions for use on electronic devices 100, including wireless local area networks (WLAN) (such as Wi-Fi networks), Bluetooth (BT), and near field communication (NFC) technologies.

[0113] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other terminal devices via wireless communication technology. This wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), etc.

[0114] Electronic device 100 can implement display functions through GPU, display screen 170, and application processor. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0115] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, it can store vector graphics source code files on the external memory card, or transfer vector graphics source code files from the electronic device 100 to the external memory card.

[0116] Internal memory 121 can be used to store computer executable program code, including instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (e.g., games or animations), etc. The data storage area may store data created during the use of electronic device 100 (e.g., contact information, information about external devices to be connected, etc.). In addition, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional methods or data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory disposed in the processor.

[0117] Electronic device 100 can display dynamic icons (such as dynamic cursors), video animations and other image data through display screen 170.

[0118] The display screen 170 is used to display interface information such as application markets, dynamic icons, and animation playback. The display screen 170 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like. In some embodiments, the electronic device 100 may include one or more display screens 170. In some embodiments, the display screen may be a foldable or rollable display screen.

[0119] It should be noted that in some scenarios, such as when electronic device 100 can be a terminal device, since most applications running on the terminal device have screen display requirements, electronic device 100 can be equipped with display screen 170; the display screen 170 can cooperate with the image rendering process of various applications to display various dynamic icons, game scenes, movie animations, etc.

[0120] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also include... Figure 2 More or fewer components, or combining some components, or splitting some components, or different component arrangements. Figure 2 The components can be implemented in hardware, software, or a combination of both.

[0121] Furthermore, it should be noted that the software system of the aforementioned electronic device 100 can adopt a layered architecture or a service architecture, etc. This embodiment of the invention uses the Harmony OS with a layered architecture as an example to exemplify the software architecture of the electronic device 100. It should be understood that the solution provided in this application can also be applied to other types of operating systems such as Android, Apple, and Windows.

[0122] Figure 3 A schematic diagram of the software architecture of the electronic device 100 provided in an embodiment of this application is shown. For example... Figure 3 As shown, the layered architecture of electronic device 100 divides the software into several layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. In some implementations, the Harmony system comprises four layers, from bottom to top: the kernel layer, the system basic services layer, the framework layer, and the application layer.

[0123] The Harmony system employs a multi-kernel design, optionally including the Linux kernel, the Harmony microkernel, and the lightweight IoT operating system kernel (LiteOS). This design allows devices with varying capabilities to choose the appropriate system kernel. The kernel layer also includes a kernel abstraction layer, providing foundational kernel capabilities to other Harmony layers, such as process management, thread management, memory management, file system management, network management, and peripheral device management.

[0124] The system's basic service layer is the core capability set of the Harmony system, enabling it to provide application services through a framework layer in multi-device deployment scenarios. This layer may optionally include the following components:

[0125] The system's basic capability subsystems provide fundamental capabilities for the operation, scheduling, and migration of distributed applications across multiple devices within the Harmony system. These subsystems comprise a distributed soft bus, distributed data management and file management, distributed task scheduling, the Ark runtime, and distributed security and privacy protection. The Ark runtime provides runtime environments for multiple languages ​​(C / C++ / JavaScript) and basic system libraries. It also provides a runtime environment for Java programs statically generated using the Ark compiler (i.e., the parts of the application or framework layer developed using the Java language).

[0126] The basic software service subsystem suite provides common and general software services for the Harmony system. It comprises subsystems such as graphics and image processing, distributed media, distributed AI, multimodal input, mobile sensing development platform (MSDP) & device virtualization (DV), event notification, telephony services, and design for X (DFX) for non-functional product attributes. Each subsystem can be tailored to the functional granularity required for deployment in different device configurations.

[0127] Enhanced software service subsystem set (see) Figure 2 The enhanced software portion (highlighted by the dashed line) provides differentiated capability enhancement software services for the Harmony system across various devices. It comprises subsystems such as tablet business software, smart screen business software, in-vehicle system business software, and Internet of Things (IoT) business software. This set of enhanced software service subsystems can be tailored to the deployment environment of different device types, with each subsystem further tailored to its functional granularity.

[0128] Harmony Driver Foundation (HDF) and Hardware Abstraction Layer (HAL): These form the foundation for the open hardware ecosystem of the Harmony system. They provide hardware capability abstraction at the top and development framework and runtime environment for various peripheral drivers at the bottom.

[0129] Hardware Service Subsystem Set: Provides common and adaptable hardware services for the Harmony system, consisting of hardware service subsystems such as general sensor, location, power, USB, and biometrics. The Hardware Service Subsystem Set can be tailored to the deployment environment of different device types, with each subsystem allowing for functional customization.

[0130] Proprietary hardware service subsystem (see) Figure 3 The proprietary hardware component (highlighted by the dashed line) provides differentiated hardware services for different devices within the Harmony system. Optional subsystems include proprietary hardware services for tablets, in-vehicle systems, wearables, and IoT devices. These proprietary hardware service subsystems can be tailored to a subsystem level, and each subsystem can be further tailored to a functional level.

[0131] The framework layer provides Harmony system applications with multi-language user program frameworks and meta-capability frameworks in languages ​​such as Java, C, C++, and JavaScript, as well as multi-language framework application programming interfaces (APIs) for various software and hardware services.

[0132] The application layer includes system applications and third-party applications (or extended applications), which can include applications such as camera, gallery, graphic design, animation design, music, video, and SMS. Applications in the Harmony system are built on the basis of atomic ability (AA) and feature ability (FA).

[0133] The following has Figure 2 and Figure 3 Taking the terminal device 2 (e.g., a mobile phone) with the structure shown as an example, and in conjunction with the graphics processing method provided in this application, the workflow of the software system and hardware system of the electronic device 100 executing the graphics processing method is illustrated by way of example.

[0134] like Figure 4A As shown, the developer (or designer) installs a vector design tool (such as application A) on terminal device 1, and models (i.e. creates or designs) the target vector graphic (such as an icon or illustration) in the vector design tool according to certain formats and rules (such as a tree structure constructed by SDF basic primitives and SDF operators), generating a target vector file; the target vector file can be stored locally or on a cloud server for use by other terminal devices (such as terminal device 2); the target vector file can record relevant data describing the tree structure of the target vector graphic, such as node name, node type, node transformation information, etc.

[0135] For example, such as Figure 4A As shown, in some scenarios, developers can apply the modeled target vector file to a system application (such as a weather application, a theme application, etc.) on terminal device 2. When a system application is launched, terminal device 2 can read and process the target vector file. When processing the target vector file, terminal device 2 can first extract the shape information and drawing information of the target vector graphic through its internal vector parsing module. Then, it can convert the shape information and drawing information into a vector data structure in memory. Finally, it can call the drawing interface of its internal vector drawing engine to complete the visualization of the target vector graphic (that is, display the target vector graphic on the display screen of terminal device 2).

[0136] For example, such as Figure 4BAs shown, when a user opens a theme application (an example of a system application), the theme application runs on the Harmony system of terminal device 2. When the theme application performs graphics drawing, it can generate a drawing request and send it to the graphics software service. The graphics software service can load the target vector file into memory according to the drawing request and send drawing instructions to the vector parsing module. After receiving the drawing instructions, the vector parsing module can extract the shape information of the target vector graphic from the target vector file in memory. Since the target vector file may include multiple layers, and each layer represents an independent element or a group of elements in the scene, the vector parsing module can traverse the shape tree (a nested data structure used to represent complex geometric shapes) in each layer. During the traversal, the vector parsing module can extract the shape information of the vector graphic. This shape information describes the shape's outline, boundaries, and position relative to other elements. After extracting the shape information, it is then converted into a vector data structure in memory (such as an SDF data structure). In addition to the shape information, the target vector file may also include rendering information associated with each layer. This drawing information may include fill format (such as color, gradient, or pattern), stroke format (such as line width, color, style), and special effects (such as lighting, blur, shadow, etc.); the vector parsing module sends the shape information and drawing information to the vector drawing engine in the engine layer; the vector drawing engine generates a graphics drawing instruction stream based on the shape information and drawing information, and sends the graphics drawing instruction stream to the GPU driver; the GPU driver generates a drawing driver instruction stream based on the graphics drawing instruction stream, and sends the drawing driver instruction stream to the GPU; the GPU instructs the display driver to push frames to the display screen based on the drawing driver instruction stream, thereby realizing the visualization drawing of the target vector graphics.

[0137] It should be noted that the software architecture of electronic device 100 is not limited to Figures 2 to 4B The hardware and software system architecture shown can be adapted to specific application scenarios in practical applications. Figures 2 to 4B The hardware and software system architecture shown may be modified, but this application does not limit it.

[0138] The above provides a detailed description of the hardware and software system architecture of the electronic device 100 to which this application applies. Below, we will further discuss... Figure 5 Several application scenarios applicable to this application are introduced.

[0139] Figure 5Several application scenarios of the graphic processing methods applicable to this application are illustrated. In some scenarios, developers can use vector design tools to generate target vector files of target vector graphics and apply these target vector files to system applications of some terminal devices (i.e., an example of electronic devices) to enhance or improve the expressiveness and functionality of these system applications and provide users with richer (static and / or dynamic) visual effects. These system applications include, but are not limited to, theme applications 501 (such as mood-related features), weather systems 502 (such as terrain, fluids, etc.), dynamic wallpapers 503 (such as clouds, splashes, snow, etc.), and user interfaces. Interface (UI) layer 504 (e.g., blur, shadow, color overflow); For theme applications 501, more detailed and dynamic theme elements, such as background patterns and icons, can be created using the above target vector files; for weather systems 502, various natural phenomena can be simulated using the above target vector files, such as undulating terrain and fluid flow; for live wallpapers 503, more realistic dynamic effects can be created using the above target vector files, such as drifting clouds, splashing water droplets, and snow cover; and for UI layers 504, various visual effects can be added to UI designs using the above target vector files, such as blur effects, shadow effects, and color overflow; these effects can enhance the layering and three-dimensionality of the UI, making the interface more beautiful and user-friendly.

[0140] The above describes several application scenarios applicable to this application. The following sections describe the graphic processing method 600A provided in the embodiments of this application (see...). Figure 6A ), and the method for handling vector cursors 600B (see Figure 6B (Example provided)

[0141] like Figure 6A The diagram shown is a flowchart of a graphics processing method 600A provided in an embodiment of this application. Before introducing the method 600A provided in this application, the execution subject involved in method 600A will be briefly described. In method 600A, the electronic device can be a server (such as a computing server, graphics processing server, etc.) or a terminal device; it can also be a device with... Figure 2 and Figure 3 Servers with hardware and software architecture, or those with... Figure 2 and Figure 3 A hardware and software architecture-based terminal device. This method 600A can be executed by an electronic device, by a module applied in an electronic device (such as a processor, chip, or chip system), or by a logic module or software that can implement all or part of the functions of the electronic device.

[0142] Method 600A includes steps 601A to 602A, which are described in detail below.

[0143] Step 601A: The electronic device acquires the description data of the target vector graphic, which is defined by a tree structure.

[0144] For example, a tree structure (also called a tree-like structure) includes at least one SDF basic primitive and at least one SDF operator. The SDF basic primitive is the leaf node describing the data, and the SDF operator is the non-leaf node describing the data. The SDF operator is used to represent the method of processing the SDF basic primitive.

[0145] It should be noted that the above descriptive data can be understood as data describing the various nodes (such as leaf nodes or non-leaf nodes) of a tree structure; the leaf nodes of the descriptive data can also replace the leaf nodes of the tree structure (such as a binary tree), and the non-leaf nodes of the descriptive data can also replace the non-leaf nodes of the tree structure (such as a binary tree); the above target vector graphics can be static vector graphics or dynamic vector graphics; among them, static vector graphics can refer to those vector graphics whose shape, color, position and other parameters do not change over time; such graphics are usually used to design some graphic elements that require precise size and clear edges, such as icons in website or application interfaces (e.g., various static icons used to represent different operating states or indicate specific elements of the user interface; these static icons can be arrows, finger shapes, magnifying glasses, etc., to indicate click, selection, drag and other operations), special logos (such as brand logos) or illustrations (such as statically displayed artistic images), etc.

[0146] Dynamic vector graphics refer to vector graphics that present different visual effects over time. These graphics are commonly used to create animations, dynamic images (such as graphics interchange format (GIF) animations), and special effects (such as loading animations and transition effects). For example, in web design, dynamic vector graphics can be used to create page loading animations to improve the user experience.

[0147] It should be noted that in static vector graphics, the graphic corresponding to the root node of the tree structure is a static vector graphic (i.e., the target vector graphic); while in dynamic vector graphics, the state of the graphic corresponding to the root node of the tree structure (i.e., the state of the intermediate graphic) changes over time.

[0148] The aforementioned descriptive data may include, but is not limited to, the relevant information of each node in the tree structure. For example, the relevant information of each node may include, but is not limited to, the node name, node type, SDF operators (such as union operator, difference operator, etc.), SDF basic primitives (such as circle, rectangle, etc.), transformation functions (such as shape transformation functions, etc.), position coordinates, color, and fill format.

[0149] Furthermore, it can be seen that one of the differences between the descriptive data of dynamic vector graphics and the descriptive data of static vector graphics is that some (or all) nodes of the tree structure describing dynamic vector graphics can introduce (or embed) transformation functions so that the nodes with introduced transformation functions can change over time, while the nodes of the tree structure describing static vector graphics do not change over time.

[0150] Typically, the descriptive data of a target vector graphic can be stored in the form of a target vector file; this target vector file can be a static vector file or a dynamic vector file; among them, a static vector file can be used to record the modeling information of a static vector graphic (such as the relevant information of each node in a tree structure), and a dynamic vector file can be used to record the modeling information of a dynamic vector graphic.

[0151] In some embodiments, the descriptive data of static (or dynamic) vector graphics recorded in a static (or dynamic) vector file can be defined based on the JSON data format; and such static (or dynamic) vector files defined based on the JSON data format can also be called static (or dynamic) JSON files.

[0152] It should be noted that static JSON files can record detailed information about each node (such as SDF primitives and / or SDF operators) in the tree structure defining static vector graphics, such as node name, node type, and parameter list corresponding to the SDF operator (such as union operator, difference operator, etc.). Similarly, dynamic JSON files can record not only detailed information about each node (such as SDF primitives and / or SDF operators) in the tree structure defining dynamic vector graphics, such as node name, node type, and parameter list corresponding to the SDF operator (such as union operator, difference operator, etc.), but also information about the transformation functions (such as shape transformation functions) of each node.

[0153] In fact, dynamic JSON files can be viewed as vector files created by extending (or introducing) transformation functions onto static JSON files. Similarly, dynamic vector graphics can be seen as graphics created by extending transformation functions onto the tree structure of static vector graphics.

[0154] In some embodiments, the dynamic JSON file can record dynamic vector graphics as keyframes (i.e., the specific state of the transformation function at the sampling time), or it can record dynamic vector graphics by recording the transformation functions of each node in the tree structure.

[0155] The aforementioned SDF basic primitives (also referred to as SDF primitives) can be understood as basic graphics (or basic shapes) represented using SDF; these SDF basic primitives can be basic graphics such as circles, rectangles, and polygons; in addition, SDF basic primitives can be represented by the symbol SD_XXX, or by other combinations of characters, which is not limited in this application; typically, SDF basic primitives are located at the leaf nodes in a tree structure.

[0156] For example, a dynamic vector graphic (i.e., an example of a target vector graphic) can be represented by a tree structure G, which may include a root node, subtree 1, and subtree 2, where subtree 1 represents vector graphic A, subtree 2 represents vector graphic B, and both vector graphic A and vector graphic B can change over time; the vector graphic C represented by the root node can also change over time; a dynamic vector graphic can be understood as a "fused state" of vector graphic A and vector graphic B superimposed, that is, a dynamic vector graphic can be understood as describing the complete process of smoothly transitioning from vector graphic A to vector graphic B.

[0157] Furthermore, since dynamic vector graphics can change over time, given a specific observation time t, dynamic vector graphics can exhibit different graphic states at different times (i.e., dynamic vector graphics degenerate into static vector graphics).

[0158] It should be noted that in some embodiments, the nodes of the tree structure described above may correspond to different or the same graphics. For example, the leaf nodes of the tree structure can usually be SDF basic primitives, while the graphics corresponding to the non-leaf nodes can be divided into two cases: Case 1, when the target vector graphic is a static vector graphic, the graphics corresponding to the non-leaf nodes (i.e., the processing result of the SDF operator) can be a part of the target vector graphic, or it can be the target vector graphic (such as when the non-leaf node is the root node); Case 2, when the target vector graphic is a dynamic vector graphic, the graphics corresponding to the non-leaf nodes (i.e., the processing result of the SDF operator) can be the entire graphic corresponding to a certain moment in the change of the target vector graphic (such as when the non-leaf node is the root node), or it can be a part of the graphic corresponding to a certain moment in the change of the target vector graphic (such as when the non-leaf node is not the root node).

[0159] The understanding of a tree structure as including at least one SDF basic primitive and at least one SDF operator can be categorized into the following cases:

[0160] Case 1: The tree structure describing the target vector graphics includes an SDF basic primitive and an SDF operator.

[0161] Case 2: The tree structure describing the target vector graphics includes an SDF basic primitive and multiple SDF operators.

[0162] Case 3: The tree structure describing the target vector graphics includes multiple SDF basic primitives and one SDF operator.

[0163] Case 4 describes a tree structure that describes the target vector graphics, which includes multiple SDF basic primitives and multiple SDF operators.

[0164] The SDF operators described above are used to represent methods for processing basic SDF primitives, and can be understood in the following ways:

[0165] 1) SDF operators only process SDF basic primitives.

[0166] 2) SDF operators process SDF primitives and graphics obtained by processing other SDF operators besides themselves.

[0167] 3) The SDF operator processes the graphics obtained by other SDF operators besides itself.

[0168] In some embodiments, the above-mentioned SDF basic primitives include at least one of the following: straight line graphics, curved graphics, or polyline graphics.

[0169] In SDF representation, a straight line graph can be represented by calculating the shortest distance from a point to a line (taking into account the direction of the distance).

[0170] Curved shapes (such as circles, ellipses, etc.) can also be represented by SDF. For each type of curved shape, an SDF function can be defined, which can calculate the directed distance from any point to the boundary of the curve.

[0171] A polyline graph typically consists of multiple straight line segments; in SDF representation, a polyline graph can be represented by calculating the shortest distances from a point to each side of the polyline (taking into account the direction of the distances), and then taking the minimum value among them (or processing according to specific rules).

[0172] In this embodiment, since SDF basic primitives are centered on shapes, they can accurately represent the outline and boundaries of graphics. For the straight lines, curves, and polylines that serve as the basic building blocks, they can be combined to create various complex vector graphics, thereby achieving diverse graphic designs. Furthermore, due to the inherent characteristics of SDF, such as smooth boundaries and efficient rendering capabilities, vector graphics constructed using SDF basic primitives can exhibit better visual effects and higher rendering efficiency during rendering.

[0173] In some scenarios, the aforementioned straight-line graphs, curved graphs, and polyline graphs can each include a variety of different basic graphs; for example, the aforementioned straight-line graphs include, but are not limited to, single-line graphs, intersecting line graphs, and parallel line graphs; curved graphs include, but are not limited to, circles, ellipses, spiral graphs, and parabolic graphs; and polyline graphs include, but are not limited to, polygons (i.e., polygonal graphs).

[0174] In addition to single-line figures, linear figures can also include more complex figures composed of line segments combined in different ways; for example, such as... Figure 7A As shown, there are arrow shapes, cross shapes, intersecting lines formed by multiple straight line segments intersecting at a certain point, parallel lines formed by multiple straight line segments arranged in parallel, and intersecting lines that intersect at a specific angle.

[0175] The aforementioned curve graphs can include complex graphs composed of various combinations of different curve segments; such as... Figure 7B As shown, common curved graphs include circles, ellipses, spirals, and parabolas; however, curved graphs can also include curves of other shapes and properties, such as... Figure 7B The figures shown include hyperbolic curves, sine curves, cosine curves, toroidals, and some circular shapes.

[0176] The above broken line graph can be understood as a two-dimensional figure formed by connecting a series of straight line segments end to end; such as Figure 7C As shown, line graphs can include various polygons, such as triangles, rectangles, parallelograms, etc.; they can also include line graphs composed of multiple lines.

[0177] Therefore, in some scenarios, a wide range of complex shapes and patterns can be described using various basic graphics included in straight-line graphics, curved graphics, and polyline graphics, such as single-line graphics, intersecting line graphics, circles, and polygons. These SDF basic primitives can be used individually or in combination to describe more complex and diverse vector graphics. Furthermore, since a variety of SDF basic primitives are provided, users can flexibly select and use them according to their needs, thereby meeting different design or modeling requirements.

[0178] The SDF operator (also known as an SDF operator or SDF operator) mentioned above can be understood as a distance field processing function, which is usually used to perform some kind of mathematical or logical operation. The SDF operator can be used to perform various processing (such as combination, transformation or modification) on SDF basic primitives to generate more complex graphic shapes. For example, SDF operators can be used to perform union, intersection, difference and other operations on SDF basic primitives and other objects.

[0179] It should be noted that when processing objects such as SDF primitives, the SDF operator can process one or more (e.g., two for a binary tree) distance values ​​(e.g., the distance values ​​corresponding to two SDF primitives) and return the processed distance value d'. The SDF operator can be represented by the symbol OP_XXX or by other character combinations, which is not limited in this application. In general, the SDF operator is used as a non-leaf node in a tree structure (e.g., a child node or the root node of a tree structure).

[0180] In some embodiments, the above SDF operators include at least one of the following: round operator, onion operator, boolean operator, or smoothing operator.

[0181] The rounded corner operator (i.e., the rounding operator or rounding operator) can convert the sharp edges or corners of some graphics in the target vector graphic (such as a graphic obtained by processing a certain SDF basic primitive or several SDF basic primitives) into smoother rounded corners, making the edges of the target vector graphic look softer and reducing visual abruptness; it can also make the processed graphics (such as arrow graphics) disappear or hide during the change of dynamic vector graphics.

[0182] Hollow operators (also known as hollow operators or hollow gestures) can be used to create a hole or recessed area (such as a container or pipe) inside a target vector graphic.

[0183] Boolean operators (i.e., Boolean operators or Boolean operators) can refer to logical operators used in graphics processing, such as union, intersection, and subtraction. These operators can be used to combine, modify, or divide the shapes of parts of a target vector graphic. For example, the union operator can be used to merge two SDF primitives into one, while the intersection operator can be used to determine the common parts of two SDF primitives.

[0184] The aforementioned smoothing operators (i.e., smoothing operators or smoothing modifiers) can be used to reduce noise or unevenness in parts of a target vector graphic (such as a certain SDF primitive), making the shape represented by the parts of the target vector graphic smoother; wherein, the smoothing operator can be implemented through some form of filter or interpolation algorithm, thereby making the appearance of the graphic smoother and more natural.

[0185] It should be noted that, in addition to the operators mentioned above, SDF operators may also include cutting operators, combination (or hybrid) operators (such as operators composed of Boolean operators), scaling operators, translation operators, deformation operators, and rotation operators, etc. This application does not limit them.

[0186] In this embodiment, by introducing features such as rounded corner operators and hollow operators, SDF operators can express more diverse and refined graphics (or shapes). For example, rounded corner operators can smooth corners, making graphics (or shapes) look more natural and fluid; hollow operators can create graphics (or shapes) with empty interiors or specific holes, increasing the diversity and hierarchy of designs; and the introduction of Boolean operators (such as union, intersection, difference, etc.) can greatly simplify the calculation steps in the graphics processing process. For example, Boolean operators can quickly generate complex shapes through logical operations without manually drawing or editing every graphic detail, thereby improving the efficiency of graphics drawing; in addition, features such as smoothing operators can improve the smoothness and visual effect of graphics. For example, in scenarios such as graphics rendering and animation production, smooth curves and shapes are crucial for improving the overall visual effect.

[0187] In some other implementations, the Boolean operators mentioned above include at least one of the following: intersection operator, union operator, difference operator, or XOR operator, and the smoothing operator includes at least one of the following: smooth intersection operator, smooth union operator, or smooth subtraction operator.

[0188] The intersection operator is used to determine the common parts of two graphs (such as two SDF primitives); the union operator is used to merge all parts of two graphs (such as two SDF primitives) into one graph; the difference operator is used to subtract the part common to one graph (such as SDF primitive I1) from one graph (such as SDF primitive I2) and return the remaining part; the XOR operator is used to determine the non-overlapping parts of two graphs.

[0189] The aforementioned smoothing intersection operator is used to smooth the intersection calculation results when calculating the intersection of two graphics, so as to reduce the roughness of the edges; for example, to perform gradient or blurring processing at the edges of the intersection region.

[0190] The smooth union operator is used to smooth the result of the union calculation when calculating the union of two figures, so as to eliminate sharp or irregular parts of the union edge and make the overall appearance more harmonious.

[0191] The smooth difference operator is used to smooth the difference result when calculating the difference between two graphs, so as to reduce the abruptness of the difference edges and make them blend better with the surrounding area.

[0192] In this embodiment, by introducing different types of operators, the user's graphics processing needs in different scenarios can be met. For example, by performing logical operations such as intersection, union, difference, and XOR on graphics, graphics with precise boundaries and shapes can be quickly constructed without manual drawing or editing, which greatly improves the efficiency and accuracy of graphics operations. For another example, by using operators such as smooth intersection, the visual effect of graphics can be improved, making the generated graphics more natural and smooth.

[0193] The above section details the basic SDF primitives and SDF operators in a tree structure. The following section will introduce in detail the application scenarios of tree structures for describing target vector graphics.

[0194] The tree structure described above (also known as an SDF tree structure or SDF tree-like structure) can be a binary tree or a multi-branch tree (such as a ternary tree). Each non-leaf node in the tree structure may have one or more child nodes. These child nodes can be SDF primitives or SDF operators. In this tree structure, there is a hierarchical relationship between nodes, similar to the branching structure of a tree. When describing target vector graphics, the tree structure can be used to organize and manage different parts (or different attributes) of the vector graphics, making the expression of the data description clearer and more efficient.

[0195] It should be noted that since tree structures can describe both static and dynamic vector graphics, a tree structure describing static vector graphics can be called a static tree structure, while a tree structure describing dynamic vector graphics can be called a dynamic tree structure.

[0196] The following examples illustrate how different tree structures are used to describe static and dynamic vector graphics.

[0197] Example 1: Binary tree describing static vector graphics

[0198] For example, such as Figure 8A As shown, in some scenarios, the tree structure described above can be a binary tree, where the leaf nodes can be SDF basic primitive 1, SDF basic primitive 2, SDF basic primitive 3, and SDF basic primitive 4; and the non-leaf nodes can be SDF operator 1, SDF operator 2, SDF operator 3, and SDF operator 4. Specifically, SDF operator 1 can perform operations on SDF basic primitive 1 to obtain sub-shape 1; SDF operator 2 can perform operations on SDF basic primitive 2 and sub-shape 1 to obtain sub-shape 2; SDF operator 3 can perform operations on SDF basic primitive 3 and SDF basic primitive 4 to obtain sub-shape 3; and SDF operator 4 can perform operations on sub-shape 3 and sub-shape 2 to obtain the target vector graphic.

[0199] Example 2: Binary tree describing dynamic vector graphics

[0200] For example, such as Figure 8B As shown, taking a binary tree to describe a dynamic vector cursor graphic (i.e., an example of dynamic vector graphics) as an example, some (or all) nodes of this binary tree can be transformed using transformation functions so that these nodes can change dynamically over time. These transformation functions can perform scaling, rotation, translation, and other transformations on SDF basic primitives and other objects. It should be noted that... Figure 8B The transformation functions introduced by some (or all) nodes are not shown in the diagram. This section primarily explains the logical operation relationships between nodes when a binary tree represents a dynamic vector graphic. For example, the rounded corner operator (OP_ROUND) can operate on arrow graphic 1 (SD_ARROW 1) to obtain subshape 1; the union operator 1 (OP_UNION 1) can operate on subshape 1 and arrow graphic 2 (SD_ARROW 2) to obtain subshape 2; the union operator 2 (OP_UNION 2) can operate on arrow graphic 3 (SD_ARROW 3) and arrow graphic 4 (SD_ARROW 4) (i.e., two examples of SDF basic primitives) to obtain subshape 3; the smooth union operator 1 (OP_SMOOTH_UNION 1) can operate on subshape 3 and a partial curve (SD_PART_RING) (i.e., another example of SDF basic primitives) to obtain subshape 4; the smooth union operator 2 (OP_SMOOTH_UNION 1)... 2) Operations can be performed on sub-shape 2 and sub-shape 4 to obtain the intermediate shape.

[0201] It should be noted that, as Figure 8C As shown, because dynamic vector graphics change over time, they will present different graphic states at different times during the playback period (such as 2 seconds or 5 seconds); for example, the dynamic vector graphics at the start of playback are displayed as the starting graphic, the dynamic vector graphics at different times during playback are displayed as the intermediate graphic, and the dynamic vector graphics at the end of playback are displayed as the ending graphic.

[0202] Example 3: A ternary tree describing a static vector graphic

[0203] like Figure 9AAs shown, in some scenarios, the tree structure described above can also be a ternary tree. The leaf nodes of this ternary tree can be SDF basic primitive 1, SDF basic primitive 2, ..., SDF basic primitive 8 and SDF basic primitive 9; while the non-leaf nodes can be SDF operator 1, SDF operator 2, SDF operator 3 and SDF operator 4. Among them, SDF operator 1 can perform operations on SDF basic primitive 1, SDF basic primitive 2 and SDF basic primitive 3 to obtain sub-shape 1; SDF operator 2 can perform operations on sub-shape 1, SDF basic primitive 4 and SDF basic primitive 5 to obtain sub-shape 2; SDF operator 3 can perform operations on SDF basic primitive 6, SDF basic primitive 7 and SDF basic primitive 8 to obtain sub-shape 3; SDF operator 4 can perform operations on SDF basic primitive 9, sub-shape 2 and sub-shape 3 to obtain static vector graphics.

[0204] Example 4: n-ary tree describing static vector graphics

[0205] like Figure 9B As shown, in some scenarios, the tree structure described above can also be an n-ary tree, where n is an integer greater than 3. The leaf nodes of this n-ary tree can be multiple SDF basic primitives such as SDF basic primitive 1, SDF basic primitive 2, and SDF basic primitive 3; while the non-leaf nodes can be multiple SDF operators such as SDF operator 1, SDF operator 2, and SDF operator 3. Among them, SDF operator 1 can perform operations on SDF basic primitive 1, SDF basic primitive 2, ..., SDF basic primitive n to obtain sub-shape 1; SDF operator p can perform operations on SDF basic primitive n, SDF basic primitive n+1, ..., SDF basic primitive 2n to obtain sub-shape 2; SDF operator m can perform operations on sub-shape 1, SDF basic primitive 1, ..., SDF basic primitive k and sub-shape 2 to obtain static vector graphics; where k and p are positive integers, and k+p≤n.

[0206] It should be noted that, Figure 8A (or Figure 8B or Figure 9A This application only shows one form of binary tree (or ternary tree or n-ary tree) (such as a four-level or three-level structure). In practical applications, binary trees (or ternary trees or n-ary trees) may be four-level, six-level, or even more-level structures. This application does not limit this.

[0207] Step 602A: The electronic device draws the target vector graphic based on the description data.

[0208] In some embodiments, an electronic device can control its internal CPU (or GPU) to draw a target vector graphic based on description data; for example, during the drawing process of some static vector graphics, the electronic device can control its internal CPU (or GPU) to draw the static vector graphic based on description data.

[0209] For example, in the processing of static vector graphics, the GPU can read and parse the descriptive data that describes the static vector graphics. This descriptive data can define the various elements in the static vector graphics in detail, including SDF primitives, SDF operators, colors, fill patterns, and other information. The GPU can then use its powerful parallel processing capabilities to draw accurate static vector graphics on the display screen based on this descriptive data. This not only reduces the processing burden on electronic devices that directly use the CPU to draw static vector graphics, but also enables the GPU to efficiently perform complex graphics drawing tasks, thereby presenting users with high-quality static vector graphics.

[0210] In other embodiments, the electronic device can control its internal CPU and GPU to jointly draw the target vector graphics based on the description data; for example, in dynamic scenes such as animation production and graphic design, the target vector graphics are dynamic vector graphics; the electronic device can first perform static processing on its internal CPU (that is, process the dynamic vector graphics into static vector graphics at different times) to obtain the static processing result, and then control its internal GPU to draw the static vector graphics at different times based on the static processing result, thereby realizing the drawing of dynamic vector graphics (this process can also be called animation-driven).

[0211] In some other embodiments, the electronic device can control its internal GPU to draw dynamic vector graphics based on description data; for example, the electronic device can directly staticize the dynamic vector graphics on the GPU, and then control the GPU to draw static vector graphics at different times based on the staticization results, thereby realizing the drawing of dynamic vector graphics.

[0212] In summary, traditional path methods for describing vector graphics are limited by their complexity, numerous drawing instructions, and low rendering efficiency. This application uses a tree structure composed of SDF primitives and SDF operators to describe the target vector graphics, which is not only clear in its hierarchy but also easy to manage and modify. For example, by adjusting a node in the tree structure (such as an SDF primitive or SDF operator), it is easy to achieve local or global adjustments to the entire vector graphics. Furthermore, since SDF is a shape-based modeling method, it allows developers to more intuitively understand and perceive the global structure of the graphics, thus helping them better grasp the overall style and detail processing during the design process. At the same time, due to the flexibility of SDF, developers can easily adjust the shape, size, and other attributes of the vector graphics to meet different design needs. For complex vector graphics, traditional path description methods may require a large number of drawing instructions and complex calculations; however, this application uses a tree structure description method, which can reduce the complexity of describing vector graphics, decrease the number of drawing instructions, and improve rendering efficiency by optimizing the tree structure and reducing unnecessary nodes.

[0213] Since dynamic vector graphics can be viewed as graphics formed by extending the tree structure of static vector graphics with transformation functions, in some scenarios, dynamic vector graphics can be described by introducing (or embedding or extending) transformation functions into some (or all) nodes of the tree structure (such as the node containing the first SDF primitive or the node containing the first SDF operator). For example, developers can select appropriate transformation functions for different graphic parts of the dynamic vector graphics according to actual needs to control the changes of the dynamic vector graphics at different times.

[0214] For example, in dynamic scenarios such as animation production and graphic design, different transformation functions can be introduced into different SDF basic primitives and / or SDF operators in a tree structure to independently control the graphic changes of different parts in dynamic vector graphics. This hierarchical control strategy enables dynamic vector graphics to exhibit richer and more diverse dynamic effects over time, which helps to improve the attractiveness and expressiveness of the graphics.

[0215] For example, in some embodiments, the tree structure may include: a transformation function; the transformation function being located at the same node in the tree structure as the first SDF basic primitive, used to control the change of the graphic state of the first SDF basic primitive over time, wherein the first SDF basic primitive is one of at least one SDF basic primitive; or, a transformation function being located at the same node in the tree structure as the first SDF operator, used to control the change of the graphic corresponding to the first SDF operator over time, wherein the first SDF operator is one of at least one SDF operator.

[0216] In the tree structure describing the target vector graphics, a transformation function can be introduced into a node (such as the root node); for example, Figure 10A As shown, taking a binary tree to describe dynamic vector graphics as an example, developers can introduce a transformation function on the leaf node where the SDF basic primitive 1 (i.e., an example of the first SDF basic primitive) is located, to control the graphic of the SDF basic primitive 1 to change with time according to the transformation function; for example, during the playback period (such as 1 second or 2 seconds, etc.), the dynamic vector graphics will present different graphic states at different times (such as the graphic states of the root node where the SDF operator 4 is located at different times); for example, the dynamic vector graphics are displayed as the initial graphic at the beginning of playback, as the intermediate graphic at different times during playback, and as the ending graphic at the end of playback.

[0217] For example, such as Figure 10B As shown, taking the dynamic vector graphics described by the binary tree as an example, developers can introduce a transformation function on the root node of SDF operator 4 (i.e., an example of the first SDF operator) to control the target vector graphics corresponding to SDF operator 4 to change at different times according to the transformation function.

[0218] Therefore, it is evident that vector graphics can be dynamically controlled over time by introducing transformation functions into some (or all) nodes of a tree structure. This not only enhances the dynamic interactivity of the graphics but also allows users to experience more vivid graphic changes. In a tree structure, each node (such as an SDF primitive or SDF operator) can be considered an independent control unit. Associating transformation functions with specific nodes (such as SDF primitives or SDF operators) allows for fine-grained control over different parts or levels of the target vector graphics. Furthermore, the hierarchical and modular nature of tree structures makes graphic design easy to adjust. For example, when it is necessary to modify or expand a graphic, operations can be performed on specific nodes without affecting other parts. Therefore, introducing transformation functions into a tree structure also makes adjusting the target vector graphics more direct and simple.

[0219] In other embodiments, the above transformation function may include: a shape transformation function and / or a position transformation function, wherein the shape transformation function is used to control the shape of the first SDF basic primitive to change over time, and the position transformation function is used to control the position of the graphic corresponding to the first SDF basic primitive to change over time; or, the shape transformation function is used to control the shape of the first SDF operator to change over time, and the position transformation function is used to control the position of the graphic corresponding to the first SDF operator to change over time.

[0220] Among them, shape transformation functions include, but are not limited to, scaling functions, shearing functions, deformation functions, and twisting functions; position transformation functions include, but are not limited to, translation functions, rotation functions, axisymmetric functions, tilting functions, and flipping functions.

[0221] In some scenarios, to achieve more complex and richer animation effects, developers can use shape transformation functions and / or position transformation functions to more finely control the changes in the graphical state of a node in a tree structure. For example, the shape of a node (such as the first SDF primitive or the first SDF operator) can be controlled to change over time using a shape transformation function; or the position of a node can be controlled to change over time using a position transformation function; or the shape of a node can be controlled to change over time using both shape transformation functions and position transformation functions.

[0222] For example, using a binary tree to describe dynamic vector graphics, such as... Figure 11A As shown, developers can introduce shape transformation functions and / or position transformation functions in the root node of the binary tree (such as SDF operator 4) to control the shape and / or position of the graphic corresponding to the root node as it changes over time; or, as shown... Figure 11A As shown, developers can also introduce shape transformation functions and / or position transformation functions on the leaf nodes where the SDF basic primitive 2 of the binary tree is located to control the shape and / or position of the SDF basic primitive 2 changes over time.

[0223] It should be noted that in some scenarios, the shape transformation function can also be described as a parametric curve, shape curve, or morphology curve, and can be represented by P(t); P(t) is used to represent the change of the shape of a node (such as an SDF primitive) in the tree structure with time t; the position transformation function can also be described as a transformation curve, position curve, or attitude curve, and can be represented by T(t); T(t) is used to represent the change of the spatial position of a node (such as an SDF primitive or SDF operator) in the tree structure with time t.

[0224] For example, such as Figure 11B As shown, in some scenarios, developers can introduce parameter curves P(t) and / or transformation curves T(t) on the leaf nodes where the SDF basic primitive 1 of the binary tree is located to control the shape and / or position of the SDF basic primitive 1 changes over time; or, in other scenarios, developers can also introduce parameter curves P(t) and / or transformation curves T(t) on the leaf nodes where the SDF operator 3 of the binary tree is located to control the shape and / or position of the SDF operator 3 changes over time.

[0225] Therefore, the transformation functions that control the animation effects of dynamic vector graphics can include shape transformation functions and / or position transformation functions. Different transformation functions can be used to independently adjust the shape and position changes of the graphics, which not only enhances the flexibility and dynamic performance of the graphics, but also enables developers to easily achieve complex animation effects, such as shape gradation and movement path adjustment, without having to redraw the entire graphic.

[0226] Furthermore, in some complex dynamic scenarios, the aforementioned tree structure also includes: a first transformation function and a second transformation function; wherein, the first transformation function is located at the same node in the tree structure as the first SDF basic primitive, and is used to control the change of the graphic state of the first SDF basic primitive over time, and the first SDF basic primitive is one of at least one SDF basic primitive; the second transformation function is located at the same node in the tree structure as the first SDF operator, and is used to control the change of the graphic corresponding to the first SDF operator over time, and the first SDF operator is one of at least one SDF operator.

[0227] It should be noted that in the tree structure describing dynamic vector graphics, multiple transformation functions (such as the first transformation function and the second transformation function) can usually be introduced into some nodes (such as the root node) or all nodes (such as leaf nodes or the root node) to achieve the dynamic effect of the graphics.

[0228] For example, in simple graphic design or animation production scenarios, the relevant attributes of dynamic vector graphics can be described using a binary tree with a relatively low level; such as Figure 12A As shown, developers can introduce eight transformation functions (i.e., the first transformation function to the eighth transformation function) into all nodes of the binary tree (such as SDF primitive 1 to SDF primitive 4, and SDF operator 1 to SDF operator 4) to control the graphs corresponding to the eight nodes to change over time according to their respective transformation functions.

[0229] For example, in complex graphic design or animation production scenarios, multi-level binary trees can be used to describe the relevant attributes of dynamic vector graphics; such as... Figure 12B As shown, developers can introduce multiple transformation functions (such as the first transformation function to the nth transformation function) into all nodes of the binary tree (such as the nodes where SDF primitive 1 to SDF primitive 2n, and SDF operator 1 to SDF operator p, etc.) to control the graph corresponding to each node to change over time according to its respective transformation function.

[0230] Therefore, by embedding different transformation functions into different SDF primitives and SDF operators, the state changes of different parts of the target vector graphics can be independently controlled. This hierarchical control strategy enables the target vector graphics to exhibit richer and more diverse dynamic effects over time, improving the expressiveness of the graphics. For example, developers can select appropriate transformation functions for different parts of the graphics according to actual needs, and achieve precise control over the changes in the graphics by adjusting the parameters of the transformation functions. Combining multiple transformation functions with SDF primitives and SDF operators respectively can achieve various animation effects during the rendering process. In addition, since the transformation functions are defined on the nodes of the tree structure, the transformation functions can be optimized for specific parts of the graphics to reduce unnecessary computation and thus improve rendering performance.

[0231] In some embodiments, the first transformation function includes: a first shape transformation function and / or a first position transformation function, wherein the first shape transformation function is used to control the shape of the first SDF basic primitive to change over time, and the first position transformation function is used to control the position of the graphic corresponding to the first SDF basic primitive to change over time; the second transformation function includes: a second shape transformation function and / or a second position transformation function, wherein the second shape transformation function is used to control the shape of the first SDF operator to change over time, and the second position transformation function is used to control the position of the graphic corresponding to the first SDF operator to change over time.

[0232] For example, in some scenarios, to achieve more complex and richer animation effects, developers can use shape transformation functions (such as the first shape transformation function) and / or position transformation functions (such as the first position transformation function) to more finely control the changes in the graphic state of each node in the tree structure. For instance, the shape transformation function can be used to control the shape of some or all nodes (such as the first SDF primitive or the first SDF operator, etc.) to change over time; the position transformation function can also be used to control the position of some or all nodes (such as the first SDF primitive or the first SDF operator, etc.) to change over time.

[0233] For example, such as Figure 13A As shown, developers can introduce multiple shape transformation functions (such as the first shape transformation function to the fourth shape transformation function) and / or multiple position transformation functions (such as the first position transformation function to the fourth position transformation function) into some nodes of the binary tree (such as SDF basic primitive 3, SDF operator 3, etc.) to control the shape and / or position of the graphics corresponding to the 4 nodes as time changes.

[0234] For example, such as Figure 13BAs shown, developers can also introduce multiple shape transformation functions (such as the first shape transformation function to the eighth shape transformation function) and / or multiple position transformation functions (such as the first position transformation function to the eighth position transformation function) in all nodes of the binary tree (such as SDF basic primitive 1 to SDF basic primitive 4, SDF operator 1 to SDF operator 4, etc.) to control the shape and / or position of the graphic corresponding to the 8 nodes as time changes.

[0235] It should be noted that in some scenarios, the first shape transformation function can also be described as a first parameter curve, a first shape curve, or a first morphology curve, used to control the change of the graphic corresponding to a certain node (such as an SDF basic primitive) in the tree structure with time t; this first shape transformation function can be represented by P(t); the first position transformation function can also be described as a first transformation curve, a first position curve, or a first attitude curve, used to control the change of the position corresponding to a certain node (such as an SDF basic primitive or an SDF operator) in the tree structure with time t; the first position transformation function can be represented by T(t); for an understanding of the first shape transformation function, please refer to the above. Figures 11A to 11B For an understanding of the shape transformation function involved, as well as the first position transformation function, please refer to the above text. Figures 11A to 11B The understanding of the position transformation functions involved will not be elaborated here; in addition, the understanding of the second shape transformation function is similar to that of the first shape transformation function, and the understanding of the second position transformation function is similar to that of the first position transformation function, so they will not be elaborated here.

[0236] Therefore, the transformation functions (such as the first transformation function and the second transformation function) that control the animation effects of the target vector graphics can include shape transformation functions (such as the first shape transformation function and the second shape transformation function) and / or position transformation functions (such as the first position transformation function and the second position transformation function). Through each shape transformation function and each position transformation function, the shape and position changes of the graphics can be adjusted independently, which not only enhances the flexibility and dynamic expression of the graphics, but also enables developers to easily achieve complex animation effects, such as shape gradation and movement path adjustment, without having to redraw the entire graphics.

[0237] In some embodiments, step 602A above can also be implemented by method 700, which includes steps 701 and 702.

[0238] Step 701: The electronic device extracts the shape information and drawing information of the target vector graphic based on the description data.

[0239] In some embodiments, before performing step 701, the electronic device may first determine whether the target vector graphic is a static vector graphic or a dynamic vector graphic. If the target vector graphic is a static vector graphic, the electronic device may first use software tools (such as a JSON parsing tool) to load the JSON file of the static vector graphic into memory, and then use its (i.e., the electronic device's) internal parsing module to traverse the tree structure description data recorded in the JSON file to extract the shape information corresponding to each layer. After that, the shape information is converted into an SDF data structure in memory. Finally, the drawing information corresponding to each layer is extracted, whereby the drawing information may include fill format, stroke format, and special effects (such as lighting, blur, shadow, etc.).

[0240] If the target vector graphic is a dynamic vector graphic, the electronic device can first perform static processing on the dynamic vector graphic (also known as parameter static processing) to obtain the static vector graphic corresponding to different times; then, these static vector graphics are loaded into memory using software tools (such as JSON parsing tools), and finally, the static vector graphics at different times are drawn according to the processing flow of static vector graphics, thereby realizing the drawing of dynamic vector graphics. For details, please refer to the relevant descriptions of steps (5) and (6) in step 702 below, which will not be elaborated here.

[0241] Step 702: The electronic device draws the target vector graphic based on the shape information and drawing information.

[0242] In some embodiments, after the electronic device extracts the shape information and drawing information of the target vector graphic, it can pass the shape information and drawing information to the internal engine layer through its internal drawing interface, so that the engine layer can call the SDF drawing pipeline to complete the drawing of the target vector graphic.

[0243] The following describes the process steps for drawing target vector graphics on an electronic device through a specific graphics processing flow. In practical applications, this graphics processing flow can also be adjusted according to the actual situation, and this application does not limit it.

[0244] like Figure 14A As shown, the process steps for an electronic device to draw a target vector graphic include:

[0245] Step (1): The electronic device reads the target vector file, which is used to record the description data of the target vector graphics; the description data includes the data of each vector layer of the target vector graphics.

[0246] Step (2): Before extracting the shape information (i.e. geometric information) and drawing information of each vector layer, the electronic device can first determine whether the target vector graphic is a dynamic vector graphic or a static vector graphic; if the target vector graphic is a static vector graphic, then execute steps (3) and (4); if the target vector graphic is a dynamic vector graphic, then execute steps (5) to (6).

[0247] Step (3): The electronic device (such as the CPU inside the electronic device) loads the target vector file into memory, then traverses the description data recorded in the target vector file, extracts the shape information (i.e., geometric information) corresponding to each layer, and converts the shape information into a shape representation (i.e., geometric representation) that the GPU can process; wherein, the extraction and processing of shape information includes, but is not limited to, scene tree transformation processing and shape tree symbol parsing; in addition, the electronic device also needs to extract the drawing information corresponding to each layer and convert this drawing information into a surface representation that the GPU can process, wherein, this drawing information may include drawing styles (such as fill format, stroke format, etc.) and special effects (such as glow, blur, shadow and anti-aliasing, etc.).

[0248] Step (4): The GPU controls its internal SDF rendering pipeline to render the target vector graphics based on the shape representation data and surface representation data; for example, such as Figure 14B As shown, the target vector graphic drawn by the SDF drawing pipeline can be represented by SDF. This SDF can represent the boundary of the target vector graphic using the pixel distance value d. The pixel distance value d at the boundary is zero, while the inner and outer pixels have negative and positive values, respectively. For example, when d < -ε, it means that the current pixel is inside the SDF primitive, and when the SDF drawing pipeline fills the current pixel with color, it can fill it with the inner color C. imer When -ε≤d≤ε, it means the current pixel is located on the boundary of the SDF primitive. When the SDF drawing pipeline fills the current pixel with color, it can fill it with the internal color C. couter When d ≥ ε, it means the current pixel is outside the SDF primitive. When the SDF drawing pipeline fills the current pixel with color, it can fill it with the background color C. background 2).

[0249] In some embodiments, the electronic device can also control the SDF vector drawing pipeline to extract shape and drawing information from the target vector file through operations such as parameter parsing, and then complete the drawing of the target vector graphic through the SDF drawing pipeline. The SDF drawing pipeline can be a custom shader based on a two-dimensional drawing engine. Since the target vector graphic is described based on SDF basic primitives, the target vector graphic can be drawn through drawing instructions in a single pass (such as drawing instructions in the process of the GPU controlling the above-mentioned SDF drawing pipeline to draw the target vector graphic). For example, in a single pass, shadows can be added to the target vector graphic through shadow drawing instructions (i.e., simulating a 3D effect), lighting can be added to the target vector graphic through lighting drawing instructions (i.e., a kind of light and shadow effect), and anti-aliasing, filtering (i.e., SDF effects and SDF anti-aliasing) and other drawing instructions can be used to process the target vector graphic.

[0250] Step (5): Electronic devices can staticize dynamic vector graphics in two ways:

[0251] Method 1: such as Figure 15A As shown, electronic devices can use their internal CPU to statically process the transformation functions of each node in the tree structure of dynamic vector graphics, obtaining static vector graphics corresponding to different times. For example, taking node 1, where the SDF operator is located, as an example, node 1 introduces a shape transformation function P(t) and a position transformation function T(t). The CPU can divide the static vector graphics of node 1 changing with time over time within time period T into static vector graphics at multiple time intervals (e.g., Δt). For example, for the shape transformation function P(t), time period T can be divided into multiple time intervals (e.g., t1, t2, ..., tt) with Δt as the time interval. n-1 t n And determine the shape information of the static vector graphics corresponding to each time point; for example, determine the shape information of static vector graphics 1 at time t1, determine the shape information of static vector graphics 2 at time t2, ..., determine the shape information of static vector graphics 1 at time t1, ..., determine the shape information of static vector graphics 2 at time t2, ... n-1 The shape information of the static vector graphic n-1 corresponding to time t and the determination of t n The shape information of the static vector graphic n corresponding to a given time; for example, for the position transformation function T(t), the time period T can also be divided into multiple time periods (such as t1, t2, ..., tt) with Δt as the time interval. n-1 t n And determine the position information of the static vector graphic corresponding to each time point; for example, determine the position information of static vector graphic 1 at time t1, determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t1, ..., determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t1, ..., determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t2 ...n-1 The position information of the static vector graphic n-1 corresponding to time t and the determination of t n The position information of the static vector graphic n corresponding to the given time.

[0252] Method 2: such as Figure 15B As shown, electronic devices can use their internal GPU to statically process the transformation functions of each node in the tree structure of dynamic vector graphics, obtaining static vector graphics corresponding to different times. For example, taking node 1, where the SDF operator is located, as an example, node 1 introduces a shape transformation function P(t) and a position transformation function T(t). The GPU can divide the static vector graphics of node 1 changing with time over time within time period T into static vector graphics at multiple time intervals (e.g., Δt). For example, for the shape transformation function P(t), time period T can be divided into multiple time intervals (e.g., t1, t2, ..., tt) with Δt as the time interval. n-1 t n And determine the shape information of the static vector graphics corresponding to each time point; for example, determine the shape information of static vector graphics 1 at time t1, determine the shape information of static vector graphics 2 at time t2, ..., determine the shape information of static vector graphics 1 at time t1, ..., determine the shape information of static vector graphics 2 at time t2, ... n-1 The shape information of the static vector graphic n-1 corresponding to time t and the determination of t n The shape information of the static vector graphic n corresponding to a given time; for example, for the position transformation function T(t), the time period T can also be divided into multiple time periods (such as t1, t2, ..., tt) with Δt as the time interval. n-1 t n And determine the position information of the static vector graphic corresponding to each time point; for example, determine the position information of static vector graphic 1 at time t1, determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t1, ..., determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t1, ..., determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t2, ..., determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t1, ..., determine the position information of static vector graphic 2 at time t2, ..., determine the position information of static vector graphic 1 at time t2, ..., determine the position information of static vector graphic 1 at time t2, ..., determine the position information of static vector graphic 1 at time t1, ..., determine the position information of static vector graphic 2 ... n-1 The position information of the static vector graphic n-1 corresponding to time t and the determination of t n The position information of the static vector graphic n corresponding to the given time.

[0253] Step (6): For the static processing method of method 1, the electronic device can send the shape information and position information of the static vector graphic i to its internal GPU; the GPU draws the dynamic vector graphic based on the shape information and position information of the static vector graphic i, where i can be 1, 2, ..., n. For the static processing method of method 2, the electronic device can directly control the GPU to draw the dynamic vector graphic based on the shape information and position information of the static vector graphic i, where i can be 1, 2, ..., n.

[0254] It should be noted that when electronic devices draw dynamic vector graphics based on the static processing results, they can draw static vector graphics i at each time step (e.g., t2) using the same drawing method as static vector graphics. For details, please refer to [reference needed]. Figure 14B The relevant descriptions in the document will not be repeated here.

[0255] It is evident that traditional vector graphics rendering processes are cumbersome, involving multiple steps such as surface subdivision, triangulation, lighting processing, and texture mapping, which are not only time-consuming but may also introduce precision loss. In contrast, this application uses a tree structure constructed from SDF primitives and SDF operators to describe the target vector graphics, enabling electronic devices to directly extract shape and drawing information from the description data of the target vector graphics without the need for complex processing steps in traditional rendering methods. Due to the characteristics of SDF and the directness of the tree structure, high precision can be maintained in the graphics rendering process, reducing the precision loss that may be caused by the increase in processing steps. In addition, electronic devices directly draw based on the extracted shape and drawing information, which not only simplifies the rendering process but also avoids unnecessary intermediate steps and improves rendering efficiency.

[0256] The above describes method 600A in detail. Below, we introduce method 600B for vector cursor processing, such as... Figure 6A As shown; this vector cursor (i.e., vector cursor graphic) can be understood as an example of the target vector graphic in 600A above; before introducing the method 600B provided in this application, a brief description of the execution subject involved in method 600B will be given first. In method 600B, the electronic device can be a server (such as a computing server, graphics processing server, etc.) or a terminal device; it can also be a device with Figure 2 and Figure 3 Servers with hardware and software architecture, or those with... Figure 2 and Figure 3 A hardware and software architecture-based terminal device. This method 600B can be executed by an electronic device, by a module applied in an electronic device (such as a processor, chip, or chip system), or by a logic module or software that can implement all or part of the functions of the electronic device.

[0257] Method 600B includes steps 601B to 602B, which are described in detail below.

[0258] Step 601B: The electronic device acquires the descriptive data of the vector cursor graphic.

[0259] The description data is defined through a tree structure, which is used to describe the construction and transformation process of the vector cursor graphics. The description data includes the initial graphic data, the intermediate SDF operators, and the final graphic data.

[0260] The initial graphic data is used to define the initial graphic of the vector cursor graphic; it can typically include data such as SDF primitives, SDF operators, and transformation functions; for example, in some embodiments, the initial graphic data can include a first set of SDF primitives, a first set of SDF operators, and a first set of transformation functions.

[0261] The intermediate SDF operator is used to calculate the intermediate graphics of the vector cursor graphic during the transformation process, where the intermediate SDF operator is the root node of the tree structure.

[0262] The ending graphic data is used to define the ending graphic of the vector cursor graphic; it may also include data such as SDF basic primitives, SDF operators, and transformation functions; for example, in some embodiments, the ending graphic data may include a second SDF primitive set, a second SDF operator set, and a second transformation function set.

[0263] In this context, each SDF basic primitive in the first SDF primitive set and the second SDF primitive set can be a leaf node describing the data, each SDF operator in the first SDF operator set and the second SDF operator set can be a non-leaf node in the data describing the data other than the root node, and each transformation function in the first transformation function set and the second transformation function set can be located in a leaf node or a non-leaf node describing the data.

[0264] It should be noted that the above-mentioned vector cursor graphic is a dynamic vector graphic, which can be called a dynamic vector cursor graphic or dynamic cursor (or simply cursor). In some scenarios, the vector cursor graphic can be used as a visual guidance tool to guide users to complete specific tasks or operations. For example, by dynamically changing the position, trajectory, or shape of the cursor, it can indicate a series of operations on the interface, thereby improving the user's operational efficiency and accuracy.

[0265] In other scenarios, vector cursor graphics can be used to indicate text input positions, selection areas, or other interface elements. On the other hand, their position, shape, or color can be changed according to user operations or system events (such as keyboard input, mouse movement, etc.) to respond to a series of user operations on the interface.

[0266] In other scenarios, vector cursors can also be used to display and convey information; for example, in data visualization, vector cursors can dynamically point to key data or important areas and attract users' attention through animation effects to help users better understand data and information.

[0267] In addition, it should be noted that the description data of the above vector cursor graphics can also be stored in the form of vector files (such as dynamic JSON files). For details, please refer to the storage method of the description data of the target vector graphics in step 601A above, which will not be repeated here.

[0268] Since vector cursor graphics typically present different graphical states at different times or in accordance with the user's operational intentions, when using a tree structure to describe (or model) vector cursor graphics, the modeling can be divided into three parts: modeling the starting graphic, modeling the intermediate graphic, and modeling the ending graphic. Using a tree structure to model the starting graphic can generate starting graphic data; using a tree structure to model the intermediate graphic can generate intermediate graphic data (such as intermediate SDF operators); and using a tree structure to model the ending graphic can generate ending graphic data.

[0269] The initial graphic data can also be understood as the initial graphic that the vector cursor graphic presents before dynamic changes. In some embodiments, this initial graphic data may include attributes such as a first SDF primitive set, a first SDF operator set, a first transformation function set, the starting position of the cursor, and the color of the cursor. For example, in a text editing software, the vector cursor graphic may first appear at the beginning of the document, and the initial graphic can be displayed.

[0270] The first SDF primitive set may include, but is not limited to, circles, arrows, and question marks; the first SDF operator set may include, but is not limited to, rounded corner operators and Boolean operators (such as the first Boolean operator and the third Boolean operator); the first transformation function set may include the transformation functions (such as the first transformation function) in method 600A and / or the shape transformation functions (and / or position transformation functions) in method 600A. For relevant descriptions of transformation functions, please refer to the relevant descriptions in method 600A, which will not be repeated here.

[0271] The aforementioned intermediate SDF operator is typically the root node of a tree structure, used to process graphics corresponding to non-root nodes in the tree structure to generate intermediate graphics of the vector cursor graphic during the transformation process; in other words, the intermediate SDF operator can control the shape, position, smoothing effect, and other attributes of the intermediate graphic during dynamic changes; the intermediate SDF operator can be an operator such as a smoothing union operator or a smoothing intersection operator, which is not limited in this application; for example, in a text editing software, when the user moves the vector cursor graphic, the vector cursor graphic can display different intermediate graphics as time changes.

[0272] End-of-image data is used to define the final static state of the vector cursor after all dynamic changes have been completed. This end-of-image data may include attributes such as the second SDF primitive set, the second SDF operator set, the second transformation function set, the cursor's end position, and the cursor's color. For example, in a text editing software, when the user finishes inputting and stops moving the vector cursor, the vector cursor may remain at a specific position in the document. At this time, the vector cursor can display the end-of-image.

[0273] The second SDF primitive set may include, but is not limited to, circles, cross shapes, and some ring shapes; the second SDF operator set may include, but is not limited to, rounded corner operators, smoothing operators, and Boolean operators (such as the second Boolean operator and the fourth Boolean operator); the second transformation function set may include the transformation functions (such as the second transformation function) in method 600A and / or the shape transformation functions (and / or position transformation functions) in method 600A. For relevant descriptions of transformation functions, please refer to the relevant descriptions in method 600A, which will not be repeated here.

[0274] It should be noted that in some scenarios, using a tree structure composed of SDF basic primitive sets (such as the first SDF basic primitive set) and SDF operator sets (such as the first SDF operator set) to describe the starting, intermediate, and ending shapes of a vector cursor graphic during its transformation process not only provides a clear hierarchy but also facilitates the management and modification of the graphic shapes in different states. For example, by adjusting a node in the tree structure (such as a specific SDF basic primitive or SDF operator), it is easy to achieve local or global adjustments to the entire vector cursor graphic. Furthermore, since SDF is a shape-based modeling method, it allows developers to more intuitively understand and perceive the global structure of the graphic, thereby helping them to better grasp the overall style and detail processing of the cursor graphic during the design process. At the same time, due to the flexibility of SDF, developers can also easily adjust the shape, size, and other attributes of the vector cursor graphic to meet different design requirements.

[0275] In some embodiments, the starting graphic is a question mark graphic, the middle SDF operator is a smoothing operator, the ending graphic is a cross graphic, the first SDF primitive set includes a circle and a question mark graphic, the first SDF operator set includes a first Boolean operator and a rounded corner operator, the second SDF primitive set includes a circle and a cross graphic, and the second SDF operator set includes a second Boolean operator and a rounded corner operator.

[0276] The first Boolean operator can be a union operator, a difference operator, etc., and the second Boolean operator can also be a union operator, a difference operator, etc. This application does not limit this.

[0277] The smoothing operator (i.e., the intermediate SDF operator) can be a smoothing union operator or a smoothing difference operator, etc., and this application does not limit it.

[0278] For example, in some scenarios, both the first and second Boolean operators are difference operators, and the smoothing operator is a smooth union operator; such as Figure 15C As shown, taking a binary tree to describe a dynamic vector cursor graphic (i.e., an example of a vector cursor graphic) as an example, the initial graphic is a question mark graphic, and each node of subtree 1 corresponding to the initial graphic introduces a transformation function (i.e., the first transformation function set includes transformation function 1 to transformation function 4) so ​​that each node of subtree 1 can change dynamically over time; the first SDF primitive set includes a circle 1501 and a question mark graphic 1502; the first SDF operator set includes a first Boolean operator and a rounded corner operator 1503; the intermediate SDF operator is a smoothing union operator, which smooths and combines... The root node of the set operator corresponds to the middle graphic of the vector cursor graphic; the ending graphic is a cross graphic, and each node of the subtree 2 corresponding to the ending graphic introduces a transformation function (i.e., the second transformation function set includes transformation functions 5 to 8) so that each node of the subtree 2 can change dynamically over time; the second SDF primitive set includes a circle 1504 and a question mark graphic 1505; the second SDF operator set includes a second Boolean operator and a rounded corner operator 1506; wherein, transformation functions 1 to 9 can be the same or different, and this application does not limit this.

[0279] In some other embodiments, the starting graphic is a double-arrow graphic, the middle SDF operator is a first smoothing operator, and the ending graphic is a double-arrow arc. The first SDF primitive set includes a first arrow graphic and a second arrow graphic, the first SDF operator set includes a rounded corner operator and a third Boolean operator, the second SDF primitive set includes a partial ring, a third arrow graphic, and a fourth arrow graphic, and the second SDF operator set includes a fourth Boolean operator and a second smoothing operator.

[0280] The third Boolean operator can be a union operator, a difference operator, etc., and the fourth Boolean operator can also be a union operator, a difference operator, etc. This application does not limit this.

[0281] The first smoothing operator (i.e., the intermediate SDF operator) can be a smoothing union operator, a smoothing difference operator, etc., and the second smoothing operator can also be a smoothing union operator, or a smoothing difference operator, etc. This application does not limit this.

[0282] For example, in some scenarios, the third and fourth Boolean operators are both union operators, the first smoothing operator is a smooth union operator, and the second smoothing operator is also a smooth union operator; such as Figure 15DAs shown, taking a binary tree to describe a dynamic vector cursor graphic (i.e., an example of a vector cursor graphic) as an example, the initial graphic is a double-arrow graphic, and each node of the subtree 1 corresponding to the initial graphic introduces a transformation function (i.e., the first transformation function set includes transformation function 1 to transformation function 4) so ​​that each node of the subtree 1 can change dynamically over time; the first SDF primitive set includes arrow graphic 1 (i.e., the first arrow graphic) and arrow graphic 2 (i.e., the second arrow graphic); the first SDF operator set includes the third Boolean operator and the rounded corner operator 1507; the intermediate SDF operator is the smoothing union operator (i.e., the first smoothing operator). The middle graphic of the vector cursor graphic corresponding to the root node of the smoothing union operator; the ending graphic is a double-headed arc, and each node of the subtree 2 corresponding to the ending graphic introduces a transformation function (i.e., the second transformation function set includes transformation functions 5 to 9) so that each node of the subtree 2 can change dynamically over time; the second SDF primitive set includes some rings, arrow graphic 3 (i.e., the third arrow graphic) and arrow graphic 4 (i.e., the fourth arrow graphic); the second SDF operator set includes the fourth Boolean operator and the second smoothing operator; wherein, transformation functions 1 to 10 can be the same or different, and this application does not limit this.

[0283] Step 602B: The electronic device draws a vector cursor graphic based on the description data.

[0284] In some embodiments, an electronic device can control its internal CPU (or GPU) to draw a vector cursor graphic based on description data; for example, during the drawing process of some vector cursor graphics, the electronic device can control its internal CPU (or GPU) to draw the vector cursor graphic based on description data.

[0285] For example, in the processing of vector cursor graphics, electronic devices can first perform static processing on the dynamic vector graphics on their internal CPU (that is, process the vector cursor graphics into static vector cursor graphics at different times), obtain the static processing result, and then control their internal GPU to draw the static vector cursor graphics at different times according to the static processing result, thereby realizing the drawing of vector cursor graphics.

[0286] In some other embodiments, the electronic device can control its internal GPU to draw vector cursor graphics based on description data; for example, the electronic device can directly perform static processing on the vector cursor graphics on the GPU, and then control the GPU to draw static vector cursor graphics at different times based on the static processing results, thereby realizing the drawing of vector cursor graphics.

[0287] It should be noted that since the vector cursor graphic can be understood as an example of the dynamic vector graphic in Method 600A above, the way the electronic device draws the vector cursor graphic according to the description data can refer to the drawing method of the dynamic vector graphic in Method 600A above, and will not be repeated here.

[0288] In summary, in method 600B, using a tree structure to describe the initial, intermediate, and final shapes of a vector cursor graphic during its transformation process not only provides a clear hierarchy but also facilitates the management and modification of the graphic shapes in different states. For example, by adjusting a node in the tree structure (such as a certain SDF primitive or SDF operator), it is easy to achieve local or global adjustments to the entire vector cursor graphic. Furthermore, for complex vector cursor graphics, traditional path description methods may require a large number of drawing commands and complex calculation processes; while the tree structure description method adopted in this application can reduce the complexity of describing vector cursor graphics by optimizing the tree structure and reducing unnecessary nodes, thereby reducing the number of drawing commands and improving rendering efficiency.

[0289] In some implementations, step 602B can also be achieved through the following steps:

[0290] Step 01): The electronic device draws the initial graphic based on the initial graphic data.

[0291] When the vector cursor stops or hovers over area 1 of interface 1 (such as the editing window), the vector cursor will display the starting graphic. At this time, the electronic device (or the electronic device through its internal GPU) can draw (or construct or generate) a static vector cursor as the starting graphic based on the starting graphic data (such as the first SDF primitive set, the first SDF operator set, the cursor color, etc.).

[0292] Step 02): In response to the operation event, the electronic device processes the initial graphic data and the final graphic data through the intermediate SDF operator to obtain the intermediate graphic.

[0293] The operation event can be a user operation event (such as a switching operation) or a system event (such as keyboard input, mouse movement, etc.), and this application does not limit it.

[0294] As the vector cursor moves from area 1 of interface 1 (such as the editing window) to area 2 of interface 2 (such as the toolbar window), the vector cursor can display different intermediate graphics at different times. During the movement, the electronic device (or the electronic device through its internal GPU) needs to perform static processing on the intermediate graphics corresponding to the intermediate SDF operator at different times (that is, process the intermediate graphics corresponding to the intermediate SDF operator into static intermediate graphics data at different times), obtain the static processing result, and then draw (or construct or generate) the static intermediate graphics at different times according to the static processing result, thereby completing the intermediate graphics corresponding to the vector cursor at different times during the movement.

[0295] It should be noted that the above-mentioned interface 1 and interface 2 may be the same or different; this application does not limit this; area 1 and area 2 are different areas; interface 1 (or interface 2) may be a webpage or the interface of an application, etc.; this application does not limit this.

[0296] Step 03): The electronic device draws the final graphic based on the final graphic data.

[0297] When the vector cursor graphic stops (or hovers) in area 2 of interface 2 (such as the toolbar window) after the intermediate graphic changes, the vector cursor graphic can be displayed as the end graphic. At this time, the electronic device (or the electronic device through its internal GPU) can draw (or construct or generate) a static vector cursor graphic that is different from the starting graphic as the end graphic based on the end graphic data (such as the second SDF primitive set, the second SDF operator set, the cursor color, etc.).

[0298] It should be noted that in some scenarios, the starting and ending graphic data may be the same, and correspondingly, the starting and ending graphics may also be the same.

[0299] Therefore, in practical applications, electronic devices can change their shape or display different graphic states in real time as the vector cursor moves across a given area. For example, if the vector cursor is stationary in area A, the electronic device can draw a starting graphic (or an ending graphic) based on the starting graphic data and display it in area A. As the vector cursor moves to another area B, i.e., from area A to area B, the electronic device can respond to operation events by processing the starting and ending graphic data using intermediate SDF operators to obtain an intermediate graphic. This allows the vector cursor to dynamically change during its movement, thus meeting the user's visual needs.

[0300] Methods 600A and 600B have been described in detail above. Below, with reference to the interface implementation example, taking an electronic device (such as a computer) as the terminal device, we will briefly introduce the application of method 600A in the graphic design scenario.

[0301] In graphic design scenarios, designers typically use graphic design applications to design vector graphics such as icons and illustrations. For example, designers can download graphic design applications through a browser and install them on a terminal device (such as a computer). Figure 16A As shown; designers can double-click the shortcut icon 1602 of the graphic design application on the main interface 1601 of the terminal device to launch the graphic design application, as follows. Figure 16A As shown; at this time, the terminal device enters the design interface 1603 of the graphic design application, as follows. Figure 16B As shown; on this design interface 1603, the designer can see the toolbar 1604, design window 1605, layer list 1606, and effect viewing window 1607. The toolbar 1604 is used by the designer to select the descriptive data for the target vector graphic (such as selecting the type of tree structure, the SDF basic primitives of the leaf nodes, etc.); the design window 1605 is used by the designer to design the tree structure describing the target vector graphic, such as the SDF basic primitives (such as circles, rectangles, etc.) corresponding to different nodes of a binary tree, and SDF operators (such as the union operator); the layer list 1606 is used by the designer to view the information of different layers after the target vector graphic is run; the effect viewing window 1607 is used by the designer to view the running results of the tree structure, such as checking whether the effect of the target vector graphic or the transformation process of the animation meets the design requirements.

[0302] For example, such as Figure 16B As shown, designers can select binary tree 1608 under the tree structure component to design the target vector graphics; designers can drag the binary tree 1608 component to the design window 1605. At this time, the system default binary tree 1609 appears in the design window 1605 area. Designers can then edit each node based on the binary tree 1609 according to their design needs; for example, as... Figure 17A As shown, the designer can select leaf node 1701 and right-click to bring up the node editing tool 1702. The designer can select the editing method for leaf node 1701 on the node editing tool 1702, such as setting specific graphic state changes for leaf node 1701, such as specific methods for shape transformation and position transformation; or delete leaf node 1701, etc. The designer can edit each node according to the requirements.

[0303] For example, consider designing a dynamic cursor (an example of a dynamic vector graphic). This dynamic cursor needs to dynamically change from a question mark shape to a cross shape; such as... Figure 17B As shown, designers can set specific content for each node based on binary tree 1609 (e.g., designing leaf nodes as SDF basic primitives and non-leaf nodes as SDF operators); for example, designers can select the cross 1703 graphic in the line graphic component of toolbar 1604 and drag the cross 1703 graphic to the leaf node 1705 of binary tree 1609; similarly, designers can select the circle and question mark graphics in the curve graphic component and drag them to the leaf node of binary tree 1704; in the operator list component, designers can select the rounded corner operator, the union and smooth union in Boolean operators, and the cut operator, and drag these SDF operators to... On the non-leaf nodes of binary tree 1609; in addition, shape transformation function P(t) and position transformation function T(t) can be introduced into all nodes of binary tree 1609 to obtain the final binary tree 1704; it should be noted that the P(t) and T(t) introduced into each node of binary tree 1609 can be the same (such as partially the same or all the same) or they can all be different, and this application does not limit this; after designing the binary tree 1704 with dynamic cursor, you can click the play button 1706 to view the design effect; initially, the designer can see that the starting graphic of dynamic cursor is the question mark graphic 1707. As playback continues, the question mark graphic 1707 will change dynamically, for example, becoming Figure 18A The blurred question mark 1801 shown is the intermediate graphic of the animated cursor at a certain moment; as the video plays to the end, the designer can see that the final graphic of the animated cursor is... Figure 18B The cross 1802 diagram shown.

[0304] For example, consider designing another type of dynamic cursor (another example of dynamic vector graphics) that requires the cursor to dynamically change from a double-headed arrow to a double-headed arc; such as Figure 19AAs shown, designers can drag the binary tree 1608 component to the design window 1605 to design the required binary tree 1901 based on the default binary tree framework. Designers can then set specific content for each node in the binary tree 1901 (e.g., designing leaf nodes as SDF primitives and non-leaf nodes as SDF operators). Furthermore, designers can select the arrow 1902 graphic from the straight line graphic component in the toolbar 1604 and drag it to the leaf node 1903 of the binary tree 1901. Similarly, designers can also select the arrow 1902 graphic from the curve graphic component... Select the semicircle and drag it to a leaf node of binary tree 1901; in the operator list component, select the rounded corner operator, the union and smooth union SDF operators from the Boolean operators, and drag the selected SDF operators to non-leaf nodes of binary tree 1901 to obtain the designed binary tree 1903; after designing the binary tree 1903 with the dynamic cursor, you can click the play button 1706 to view the design effect; initially, the designer can see that the starting shape of the dynamic cursor is two arrows 1904. As playback continues, the two arrows 1904 will dynamically change, for example, becoming... Figure 20A The two blurred arrows 2001 shown (i.e., the intermediate graphic of the dynamic cursor at a certain moment) indicate the end of the playback. At the end, the designer can see that the final graphic of the dynamic cursor is... Figure 20B The double-arrow arc 2002 is shown.

[0305] It should be noted that the graphic processing method proposed in this application is not only applicable to animation production and graphic design, but also to web design, UI / UX design, advertising design, game development, and other fields. This application does not limit it in any way. For example, in web design, designers can use a combination of tree-structured SDF basic primitives and SDF basic operators to create animation effects to respond to user interactions and provide a richer and more dynamic user experience.

[0306] The foregoing has detailed examples of the graphics processing methods provided in this application. It is understood that, in order to achieve the above functions, electronic devices include hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application. This application can divide the graphics processing methods into functional units based on the above method examples. For example, each function can be divided into separate functional units, or two or more functions can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. It should be noted that the unit division in this application is illustrative and only represents a logical functional division; other division methods may exist in actual implementation.

[0307] Figure 21 A schematic diagram of the structure of an electronic device provided in this application is shown. Figure 21 The dashed line indicates that the unit or module is optional. Electronic device 2100 can be used to implement the methods described in the above method embodiments. Electronic device 2100 can be a server, terminal device, or chip (system).

[0308] Electronic device 2100 includes one or more processors 2101, which enable electronic device 2100 to implement Figure 6A (Or the method in the method embodiment corresponding to method 600B). The processor 2101 can be a general-purpose processor or a special-purpose processor. For example, the processor 2101 can be a central processing unit (CPU). The CPU can be used to control the electronic device 2100, execute software programs, and process data from the software programs. The electronic device 2100 may also include a communication unit 2105 for implementing signal input (reception) and output (transmission).

[0309] The aforementioned electronic device 2100 may be a chip (system) including a memory and a processor, wherein the processor is configured to execute a computer program stored in the memory to implement the methods shown in the various embodiments above.

[0310] The communication unit 2105 may be an input and / or output circuit of the chip (system), or the communication unit 2105 may be a communication interface of the chip (system), and the chip (system) may be a component of the electronic device 2100.

[0311] For example, the communication unit 2105 may be a transceiver of the electronic device 2100, or the communication unit 2105 may be a transceiver circuit of the electronic device 2100.

[0312] The electronic device 2100 may include one or more memories 2102 storing a program 2104. The program 2104 can be executed by a processor 2101 to generate instructions 2103, causing the processor 2101 to execute the method described in the above method embodiments according to the instructions 2103. Optionally, the memory 2102 may also store data. Optionally, the processor 2101 may also read data stored in the memory 2102, which may be stored at the same memory address as the program 2104, or it may be stored at a different memory address than the program 2104.

[0313] The processor 2101 and memory 2102 can be configured separately or integrated together, for example, integrated on a system-on-chip (SOC) of an electronic device. For details on how the processor 2101 performs graphics processing, please refer to the relevant description in the method embodiments.

[0314] It should be understood that the steps of the above method embodiments can be implemented by hardware logic circuits or software instructions in the processor 2101. The processor 2101 can be a CPU, a digital signal processor (DSP), a field programmable gate array (FPGA), or other programmable logic devices, such as discrete gate, transistor logic devices, or discrete hardware components.

[0315] This application also provides a computer program product that, when executed by processor 2101, implements the method of any of the method embodiments in this application. The computer program product can be stored in memory 2102, for example, as program 2104. Program 2104 undergoes preprocessing, compilation, assembly, and linking processes to ultimately be converted into an executable object file that can be executed by processor 2101.

[0316] This application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a computer, implements the method of any of the method embodiments of this application. The computer program may be a high-level language program or an executable object program.

[0317] The computer-readable storage medium is, for example, memory 2102. Memory 2102 can be volatile memory or non-volatile memory, or memory 2102 can include both volatile and non-volatile memory. The non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous linked dynamic random access memory (SLDRAM), and direct rambus RAM (DRRAM).

[0318] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process and technical effects of the above-described apparatus and equipment can be referred to the corresponding processes and technical effects in the foregoing method embodiments, and will not be repeated here.

[0319] The systems, apparatuses, and methods disclosed in the several embodiments provided in this application can be implemented in other ways. For example, some features of the method embodiments described above may be omitted or not performed. The apparatus embodiments described above are merely illustrative; the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Multiple units or components may be combined or integrated into another system.

[0320] In addition, the coupling between units or between components can be direct or indirect, including electrical, mechanical or other forms of connection.

Claims

1. A method for image processing, characterized in that, The method includes: Obtain description data of the target vector graphic. The description data is defined by a tree structure. The tree structure includes at least one symbolic distance field (SDF) basic primitive and at least one SDF operator. The SDF basic primitive is the leaf node of the description data, and the SDF operator is the non-leaf node of the description data. The SDF operator is used to represent the method of processing the SDF basic primitive. The target vector graphic is drawn based on the described data.

2. The method according to claim 1, characterized in that, The SDF basic graphic elements include at least one of the following: straight line graphics, curved graphics, or polyline graphics.

3. The method according to claim 2, characterized in that, The straight-line graphics include single-line graphics, intersecting line graphics, and parallel line graphics; the curved graphics include circular, elliptical, spiral, and parabolic graphics; and the broken-line graphics include polygons.

4. The method according to any one of claims 1 to 3, characterized in that, The SDF operator includes at least one of the following: rounded corner operator, hollow operator, Boolean operator, or smoothing operator.

5. The method according to claim 4, characterized in that, The Boolean operators include at least one of the following: intersection operator, union operator, difference operator, or XOR operator, and the smoothing operators include at least one of the following: smoothing intersection operator, smoothing union operator, or smoothing difference operator.

6. The method according to any one of claims 1 to 5, characterized in that, The tree structure further includes: a transformation function, which is located at the same node of the tree structure as the first SDF basic primitive, and is used to control the state of the first SDF basic primitive to change over time, wherein the first SDF basic primitive is one of the at least one SDF basic primitive; Alternatively, the transformation function is located at the same node in the tree structure as the first SDF operator, and is used to control the graph corresponding to the first SDF operator to change over time, wherein the first SDF operator is one of the at least one SDF operator.

7. The method according to claim 6, characterized in that, The transformation function includes a shape transformation function and / or a position transformation function. The shape transformation function is used to control the shape of the first SDF basic graphic element to change over time, and the position transformation function is used to control the shape of the graphic corresponding to the first SDF basic graphic element to change over time. Alternatively, the shape transformation function is used to control the shape of the first SDF operator to change over time, and the position transformation function is used to control the shape of the graphic corresponding to the first SDF operator to change over time.

8. The method according to any one of claims 1 to 5, characterized in that, The tree structure further includes: a first transformation function and a second transformation function, wherein the first transformation function is located at the same node of the tree structure as the first SDF basic primitive, and is used to control the state of the first SDF basic primitive to change over time, wherein the first SDF basic primitive is one of the at least one SDF basic primitive; The second transformation function, which is located at the same node in the tree structure as the first SDF operator, is used to control the change of the graph corresponding to the first SDF operator over time. The first SDF operator is one of the at least one SDF operator.

9. The method according to claim 8, characterized in that, The first transformation function includes: a first shape transformation function and / or a first position transformation function, wherein the first shape transformation function is used to control the shape of the first SDF basic primitive to change over time, and the first position transformation function is used to control the shape of the graphic corresponding to the first SDF basic primitive to change over time; The second transformation function includes: a second shape transformation function and / or a second position transformation function, wherein the second shape transformation function is used to control the shape of the first SDF operator to change over time, and the second position transformation function is used to control the shape of the graphic corresponding to the first SDF operator to change over time.

10. The method according to any one of claims 1 to 9, characterized in that, The step of drawing the target vector graphic based on the description data includes: Extract the shape information and drawing information of the target vector graphic based on the description data; The target vector graphic is drawn based on the shape information and the drawing information.

11. A method for processing vector cursors, characterized in that, The method includes: Obtain descriptive data for a vector cursor graphic. The descriptive data is defined by a tree structure, which describes the construction and transformation process of the vector cursor graphic. The descriptive data includes initial graphic data, intermediate SDF operators, and final graphic data. The initial graphic data defines the initial graphic of the vector cursor graphic. The intermediate SDF operators calculate the intermediate graphics of the vector cursor graphic during the transformation process. The intermediate SDF operators are the root node of the tree structure. The final graphic data defines the final graphic of the vector cursor graphic. The vector cursor graphic is drawn based on the described data.

12. The method according to claim 11, characterized in that, The initial graphic data includes a first SDF primitive set, a first SDF operator set, and a first transformation function set; the final graphic data includes a second SDF primitive set, a second SDF operator set, and a second transformation function set. Wherein, each SDF basic primitive in the first SDF primitive set and the second SDF primitive set is a leaf node of the description data, each SDF operator in the first SDF operator set and the second SDF operator set is a non-leaf node in the description data other than the root node, and each transformation function in the first transformation function set and the second transformation function set is located in a leaf node or a non-leaf node of the description data.

13. The method according to claim 12, characterized in that, The starting graphic is a question mark graphic, the intermediate SDF operator is a smoothing operator, and the ending graphic is a cross graphic. The first SDF primitive set includes circles and question mark graphics, the first SDF operator set includes a first Boolean operator and a rounded corner operator, the second SDF primitive set includes circles and cross graphics, and the second SDF operator set includes a second Boolean operator and a rounded corner operator.

14. The method according to claim 13, characterized in that, Both the first Boolean operator and the second Boolean operator are difference operators, and the smoothing operator is a smooth union operator.

15. The method according to claim 12, characterized in that, The starting graphic is a double-arrow graphic, the middle SDF operator is a first smoothing operator, and the ending graphic is a double-arrow arc. The first SDF primitive set includes a first arrow graphic and a second arrow graphic. The first SDF operator set includes a rounded corner operator and a third Boolean operator. The second SDF primitive set includes a partial ring, a third arrow graphic, and a fourth arrow graphic. The second SDF operator set includes a fourth Boolean operator and a second smoothing operator.

16. The method according to claim 15, characterized in that, The third Boolean operator and the fourth Boolean operator are both union operators, and the first smoothing operator and the second smoothing operator are both smoothing union operators.

17. The method according to any one of claims 11 to 16, characterized in that, The step of drawing the vector cursor graphic based on the description data includes: The initial graphic is drawn based on the initial graphic data; In response to an operation event, the starting graphic data and the ending graphic data are processed by the intermediate SDF operator to obtain an intermediate graphic; The ending graphic is drawn based on the ending graphic data.

18. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory being used to store a computer program, and the processor being used to call and run the computer program from the memory, causing the electronic device to perform the method of any one of claims 1 to 10, or causing the electronic device to perform the method of any one of claims 11 to 17.

19. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, causes the processor to perform the method of any one of claims 1 to 10, or causes the processor to perform the method of any one of claims 11 to 17.

20. A computer program product, characterized in that, The computer program product includes: computer program code, which, when executed by a processor, causes the processor to perform the method of any one of claims 1 to 10, or causes the processor to perform the method of any one of claims 11 to 17.

21. A chip system, characterized in that, The chip system includes a memory and a processor, the processor being configured to execute a computer program stored in the memory to implement the method as claimed in any one of claims 1 to 10, or to implement the method as claimed in any one of claims 11 to 17.

Images