Graphics drawing method functions and graphics drawing devices in applications

Abstract

The present application relates to the field of terminal application technology and provides a graphics drawing method function and a graphics drawing device in an application. Upon receiving a graphics drawing instruction, the method first determines the graphics node of the application graphics to be drawn, draws the non-reusable graphics node by calling the graphics drawing method function in its vector graphics object, and draws the reusable graphics node by calling its corresponding processing set and the graphics drawing method function in its vector graphics object. Finally, the graphics of all the non-reusable graphics nodes and the graphics of the reusable graphics nodes are combined to obtain the application graphics to be drawn, thereby reducing the complexity of graphics drawing and facilitating the updating of some of the already drawn graphics, reducing maintenance complexity, and improving user experience.

Description

Technical Field

[0001] The present application relates to the field of terminal application technology, and in particular to a graphics drawing method function and a graphics drawing device in an application. Background Art

[0002] In terminal application development, complex graphics drawing is often required. This is typically accomplished by drawing each point, line, and surface based on coordinates in a graphical user interface (UI) design. This approach is inefficient and difficult to maintain. Summary of the Invention

[0003] In view of this, an embodiment of the present application provides a graphics drawing method function and a graphics drawing device in an application to solve the problems of low efficiency and inconvenient maintenance of graphics drawing in applications in the prior art.

[0004] A first aspect of an embodiment of the present application provides a graphics drawing method function in an application, the method being executed by a terminal and comprising:

[0005] receiving a graphics drawing instruction and determining a graphics node of an application graphic to be drawn, wherein the graphics node includes at least one of a reusable graphics node and a non-reusable graphics node;

[0006] Calling a first vector graphics object of the non-reusable graphic node, and calling a graphics drawing method function of the non-reusable graphic node to draw the first vector graphics object, to obtain a graphic of the non-reusable graphic node;

[0007] Calling a second vector graphics object of the reusable graphic node, calling a processing set and a graphic drawing method function of the reusable graphic node to draw the second vector graphics object, and obtaining a graphic of the reusable graphic node;

[0008] The graph of the non-reusable graphic node and the graph of the reusable graphic node are combined to obtain the application graph to be drawn.

[0009] A second aspect of the embodiments of the present application provides a graphics drawing device in an application, including:

[0010] A receiving module is configured to receive a graphic drawing instruction and determine a graphic node of an application graphic to be drawn, wherein the graphic node includes at least one of a reusable graphic node and a non-reusable graphic node;

[0011] a drawing module configured to call a first vector graphics object of the non-reusable graphic node, and call a graphics drawing method function of the non-reusable graphic node to draw the first vector graphics object, thereby obtaining a graphic of the non-reusable graphic node;

[0012] The drawing module is further configured to call a second vector graphics object of the reusable graphic node, call a processing set and a graphic drawing method function of the reusable graphic node to draw the second vector graphics object, and obtain a graphic of the reusable graphic node;

[0013] The combining module is configured to combine the graph of the non-reusable graph node and the graph of the reusable graph node to obtain the application graph to be drawn.

[0014] Compared with the prior art, the embodiments of the present application have the following beneficial effects: when receiving a graphics drawing instruction, the embodiments of the present application first determine the graphic nodes of the application graphics to be drawn, draw the non-reusable graphic nodes by calling the graphics drawing method function in their vector graphics objects, draw the reusable graphic nodes by calling their corresponding processing sets and the graphics drawing method function in their vector graphics objects, and finally combine the graphics of all the non-reusable graphic nodes and the graphics of the reusable graphic nodes to obtain the application graphics to be drawn. That is, the technical solution of the embodiments of the present application encapsulates the graphics drawing into a vector graphics object, and each graphics drawing method function and processing set are encapsulated separately, and the graphics are processed at the drawing layer rather than the view layer, thereby reducing the complexity of the graphics drawing, facilitating the updating of part of the graphics that have been drawn, reducing the maintenance complexity, and improving the user experience.

[0015] Furthermore, the technical solution provided in the embodiments of the present application is that the processing set can be encapsulated in a single graphic node, or it can be encapsulated and stored separately and called by multiple graphic nodes. At the same time, a reasonable hierarchical architecture is designed, so that the graphics can be flexibly adapted, drawn and refreshed during drawing, further improving the efficiency of graphics drawing.

[0016] Furthermore, the technical solution provided in the embodiment of the present application can store the completed graphics, save the current drawing version information and modification information during storage, and can quickly call the historical version to obtain the application graphics to be drawn when the graphics drawing needs to be rolled back, further improving the drawing efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the embodiments or descriptions of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0018] Figure 1 It is a schematic diagram of a partially repeated graphic of an embodiment of the present application.

[0019] Figure 2 This is a flow chart of a graphics drawing method function in an application provided in an embodiment of the present application.

[0020] Figure 3 This is a flow chart of a method function for drawing a first vector graph object by calling a graphics drawing method function of a non-reusable graphic node provided in an embodiment of the present application.

[0021] Figure 4 It is a flowchart of a method for drawing a second vector graphics object by calling a processing set of a reusable graphic node and a graphic drawing method function provided by an embodiment of the present application.

[0022] Figure 5 This is a flowchart of another method for drawing a second vector graphics object by calling a processing set of a reusable graphic node and a graphic drawing method function provided by an embodiment of the present application.

[0023] Figure 6 This is a flowchart of a graphics drawing method in another application provided in an embodiment of the present application.

[0024] Figure 7 It is a flowchart of a method for determining a target interaction identifier or a target interaction node provided in an embodiment of the present application.

[0025] Figure 8 This is a flowchart of a graphics drawing method in another application provided in an embodiment of the present application.

[0026] Figure 9 This is a schematic diagram of a graphics drawing device in an application provided in an embodiment of the present application.

[0027] Figure 10 Schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0028] In the following description, specific details such as specific system structures and techniques are provided for purposes of illustration rather than limitation to facilitate a thorough understanding of the embodiments of the present application. However, it will be apparent to those skilled in the art that the present application may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obscuring the description of the present application with unnecessary detail.

[0029] The following describes in detail a graphics drawing method function and device in an application according to an embodiment of the present application with reference to the accompanying drawings.

[0030] As mentioned above, terminal application development often involves drawing complex graphics. This is typically accomplished by drawing each point, line, and surface based on a UI design drawing and comparing coordinates. This approach is inefficient and difficult to maintain.

[0031] That is to say, the above method must accurately refer to the UI design drawing in the early stage of graphic drawing, which increases the complexity of the work, and the implementation code is not intuitive and difficult to maintain. Furthermore, if there are local repetitive parts in the UI design drawing, or another graphic is obtained by changing one graphic, such as Figure 1 The partially repeated pattern shown is obtained by rotating a pattern multiple times. The above method does not utilize these repeated or changing characteristics to simplify the processing.

[0032] Alternatively, in some implementations, it's possible to provide some transformation functions at the view layer, such as translate functions or frozen animations. However, this approach requires treating the parts that need to be transformed as views, which increases processing complexity. Because graphics drawing is implemented at the drawing layer, treating graphics as views requires considering hierarchy upgrades and downgrades, coordinate system conversions, and conversions between relative and absolute coordinates, significantly increasing processing complexity.

[0033] In view of this, an embodiment of the present application provides a graphics drawing method function in an application. When a graphics drawing instruction is received, the graphics node of the application graphics to be drawn is first determined. The non-reusable graphics node is drawn by calling the graphics drawing method function in its vector graphics object. The reusable graphics node is drawn by calling its corresponding processing set and the graphics drawing method function in its vector graphics object. Finally, the graphics of all non-reusable graphics nodes and the graphics of reusable graphics nodes are combined to obtain the application graphics to be drawn. That is, the technical solution of the embodiment of the present application encapsulates the graphics drawing into a vector graphics object, and each graphics drawing method function and processing set are encapsulated separately. The graphics are processed at the drawing layer rather than the view layer, which reduces the complexity of graphics drawing and facilitates the updating of part of the graphics that have been drawn, reducing maintenance complexity and improving the user experience.

[0034] Figure 2 This is a flowchart of a graphics drawing method function in an application provided in an embodiment of the present application. Figure 2 As shown, the method includes the following steps:

[0035] In step S201 , a graphics drawing instruction is received, and a graphics node of an application graphic to be drawn is determined.

[0036] The graphic node includes at least one of a reusable graphic node and a non-reusable graphic node.

[0037] In step S202 , the first vector graphics object of the non-reusable graphic node is called, and the graphics drawing method function of the non-reusable graphic node is called to draw the first vector graphics object, thereby obtaining the graphics of the non-reusable graphic node.

[0038] In step S203, the second vector graphics object of the reusable graphic node is called, and the processing set and graphic drawing method function of the reusable graphic node are called to draw the second vector graphics object, thereby obtaining the graphic of the reusable graphic node.

[0039] In step S204 , the graph of the non-reusable graph node and the graph of the reusable graph node are combined to obtain an application graph to be drawn.

[0040] In an embodiment of the present application, the method may be executed by a terminal, and further, by a terminal where the application is located.

[0041] In an embodiment of the present application, upon receiving a graphic drawing instruction, the terminal may determine a graphic node of the application graphic to be drawn based on the graphic drawing instruction. The graphic node may include a reusable graphic node and a non-reusable graphic node, or may include only one of the reusable graphic node and the non-reusable graphic node.

[0042] In an embodiment of the present application, for a non-reusable graphic node, a first vector graphics object of the non-reusable graphic node can be first declared, and the first vector graphics object can be drawn by calling the graphics drawing method function of the non-reusable graphic node to obtain the graphics of the non-reusable graphic node.

[0043] In an embodiment of the present application, for a reusable graphic node, a second vector graphics object of a reusable graphic node can also be first declared, and the graphics of the reusable graphic node can be obtained by calling the second vector graphics object and calling the processing set and graphics drawing method function of the reusable graphic node to draw the second vector graphics object.

[0044] In other words, a graph can be split to obtain a reusable graph and a non-reusable graph, and both the reusable graph and the non-reusable graph can be encapsulated with nodes to obtain reusable graph nodes and non-reusable graph nodes. During the splitting process, the reusable graph and the non-reusable graph can be split into sub-frames, each of which is sized to fit the reusable graph or the non-reusable graph.

[0045] Wherein, for each graphic node, an interface can be declared, and this interface has vector graphics object attributes, child nodes and parent node attributes and drawing method.Wherein, it is vector graphics object attributes to mean that the interface defines an object, and its type is vector graphics object.Vector graphics object includes size position information attributes and picture content, wherein size position information can include coordinate information, and coordinate information can be the absolute position of the node in the entire UI diagram, including but not limited to horizontal coordinate, vertical coordinate, width, height, drawing path (path).On the other hand, coordinate information can also be the relative position of the node in its parent node, including but not limited to horizontal coordinate, vertical coordinate, width, height, path.If the relative position and absolute position of a node are the same, the parent node of the node is UI diagram.

[0046] The image content of a vector object, i.e., the vector image itself, can be drawn using conventional methods based on the UI design. Drawing can be achieved by calling a graphics drawing method function. The graphics drawing method function provides a specific definition of the drawing method.

[0047] For each UI graph, all reusable and non-reusable graphic nodes form a node tree. Therefore, each graphic node has a parent node and may have one or more child nodes. Nodes in the node tree can be freely added, deleted, and replaced according to actual needs.

[0048] When drawing a graphic, first declare the graphic node as a vector graphics object. This object's type is vector graphics, and its construction logic is based on conventional drawing based on the UI design. In other words, by calling the graphic node's interface, the specific drawing tasks are implemented in its properties and methods. During drawing, the coordinates of the graphic node's subframe are obtained from the vector graphics object properties in the interface, and then the graphics drawing method function is called to draw the graphic.

[0049] For example, in the Apple operating system (iOS), the origin of the subframe's coordinate system is the upper-left corner. Drawing within this coordinate system allows the drawing method to be encapsulated as a separate function, making it easier to replace the function call when the design changes. You can use the UIGraphicsImageRenderer class's initialization method, passing in the subframe size to obtain a canvas manager object. Then, call the image method on the canvas manager object to generate the vector image. The actual drawing function is then called within the image method's callback block.

[0050] It should be noted that for vector graphics objects corresponding to reusable graphic nodes, if they do not change subsequently, you can use lazy loading to draw one object at a time and continue to use this object in subsequent drawings.

[0051] In an embodiment of the present application, for reusable graphic nodes, processing is required before the graphics are drawn, and the processing includes but is not limited to repetition, displacement, scaling, rotation, color change, inversion and combinations thereof. Therefore, the processing set of each reusable graphic node can also be pre-configured, in which the sequence between processing and the information required for processing are stored. Among them, the sequence between processing means that the processing has a sequence, and the set, as an ordered data structure, can include this. The information required for processing refers to the specific content of the processing, such as whether it is rotation or translation. When the processing is selected, the specific content of the processing can include specific parameters involved in the rotation, such as what is the angle of rotation, what is the timing of rotation, whether the rotation occurs after a certain processing, or before, etc.

[0052] In an embodiment of the present application, after completing the drawing of all graphic nodes of the application graphic to be drawn, the graphics of the non-reusable graphic nodes and the graphics of the reusable graphic nodes obtained by drawing can be combined to obtain the application graphic to be drawn.

[0053] According to the technical solution provided by the embodiment of the present application, when a graphics drawing instruction is received, the graphic nodes of the application graphics to be drawn are first determined, and the non-reusable graphic nodes are drawn by calling the graphics drawing method function in their vector graphics objects. The reusable graphic nodes are drawn by calling their corresponding processing sets and the graphics drawing method function in their vector graphics objects. Finally, the graphics of all the non-reusable graphic nodes and the graphics of the reusable graphic nodes are combined to obtain the application graphics to be drawn. That is, the technical solution of the embodiment of the present application encapsulates the graphics drawing into a vector graphics object, and each graphics drawing method function and processing set are encapsulated separately. The graphics are processed at the drawing layer rather than the view layer, which reduces the complexity of the graphics drawing and facilitates the updating of part of the graphics that have been drawn, reducing the maintenance complexity and improving the user experience.

[0054] Figure 3 This is a flow chart of a method function for drawing a first vector graph object by calling a graphics drawing method function of a non-reusable graphic node provided in an embodiment of the present application. Figure 3 As shown, the method includes the following steps:

[0055] In step S301, a first drawing frame of a first vector graphics object is obtained, and a first graphic drawing origin is determined in the first drawing frame.

[0056] In step S302, a first drawing parameter is obtained from the size and position information attributes of the first vector graphics object.

[0057] In step S303, the graphics drawing method function of the non-reusable graphics node is called, and the first vector graphics object is drawn using the first drawing parameters starting from the first graphics drawing origin.

[0058] In an embodiment of the present application, when drawing a graphic of a non-reusable graphic node, the first drawing frame of the first vector graphics object, i.e., the subframe of the non-reusable graphic node, can be obtained first, and then the first graphic drawing origin can be determined in the first drawing frame. In one example, the first graphic drawing origin is the upper left corner of the subframe.

[0059] In the embodiment of the present application, the first drawing parameter can also be obtained from the size and position information attributes of the first vector graphics object. Then, the graphics drawing method function of the non-reusable graphics node is called to draw the first vector graphics object using the first drawing parameter starting from the first graphics drawing origin.

[0060] In the embodiment of the present application, the processing set may include processing action parameters.

[0061] Figure 4 It is a flowchart of a method for drawing a second vector graphics object by calling a processing set of a reusable graphic node and a graphic drawing method function provided by an embodiment of the present application. Figure 4 As shown, the method includes the following steps:

[0062] In step S401, the processing action parameters in the processing set are obtained.

[0063] In step S402, a first drawing coordinate system of the second vector graphics object is obtained.

[0064] In step S403, the first drawing coordinate system is moved using the action specified by the processing action parameter to obtain a second drawing coordinate system.

[0065] In step S404, a second drawing frame for drawing a second vector graphics object is obtained in a second drawing coordinate system, and a second graphic drawing origin is determined in the second drawing frame.

[0066] In step S405 , a second drawing parameter is obtained from the size and position information attributes of the second vector graphics object.

[0067] In step S406, a graphics drawing method function is called to start from the second graphics drawing origin and use the second drawing parameters to draw the second vector graphics object.

[0068] In an embodiment of the present application, the processing action parameters in the processing set can be first obtained, and the first drawing coordinate system of the second vector graphics object can be obtained. The first drawing coordinate system is the current coordinate system, that is, the coordinate system used for drawing the current UI diagram, with its coordinate origin as the upper left corner. Next, the first drawing coordinate system can be moved using the action specified by the processing action parameters to obtain the second drawing coordinate system. For example, if the action specified by the processing action parameters is to translate horizontally to the left by a preset distance, then the coordinate origin of the first drawing coordinate system is translated horizontally to the left by a preset distance to obtain the second drawing coordinate system. For another example, if the action specified by the processing action parameters is to rotate clockwise by a preset angle, then the first drawing coordinate system as a whole is rotated clockwise by the preset angle to obtain the second drawing coordinate system.

[0069] In this embodiment of the present application, a second drawing frame for drawing a second vector graphics object can be obtained in a second drawing coordinate system, and a second graphic drawing origin can be determined in the second drawing frame. Second drawing parameters can then be obtained from the size and position information attributes of the second vector graphics object. Finally, a graphics drawing method function is called, starting from the second graphic drawing origin, and the second vector graphics object is drawn using the second drawing parameters.

[0070] In an example, if the reusable graph node is Figure 1 In the embodiment shown, the single arrow is rotated clockwise by a preset angle. Then, other areas and the original node can be drawn normally in the current coordinate system. Figure 1 In the embodiment shown, other areas are not shown, and the original node may be the node corresponding to the leftmost arrow. This step is performed because, in iOS, the drawing after the coordinate system processing action is performed will be affected by the coordinate system, but the drawing before this action will not be affected.

[0071] The current coordinate system is the origin of the current UI image, which is usually the upper left corner. Taking iOS as an example, you can call the UIGraphicsGetCurrentContext() system function to get the current coordinate system. Then draw, call the arrow drawing function, draw it at the origin, and draw it. Figure 1 The leftmost arrow in the .

[0072] Next, you can draw other arrows. When drawing, you can move the current coordinate system to the desired point to make it the origin of the coordinate system. Figure 1 In the illustrated embodiment, the coordinate origin can be first moved to the rotation base point, which is the center of the lower edge of the rectangular box indicated by the leftmost arrow. Then, the coordinate origin can be moved to the upper left corner of the graphic drawing box to restore the coordinate system. This is because graphic drawing usually starts from the upper left corner, so the coordinate origin of the processed coordinate system needs to be restored.

[0073] Furthermore, if the preset rotation angle of each arrow is the same, the above operations of moving the coordinate origin, processing the coordinate system, and restoring the coordinate system can be encapsulated in a loop of k times, where k is the number of arrows that need to be rotated.

[0074] After restoring the coordinate system, you can call the vector graphics object of the graphic node corresponding to the arrow and call the graphics drawing method function to complete the drawing of the arrow graphic. If the graphic node corresponding to the arrow includes multiple graphic nodes, for example, a triangle is one graphic node and a rectangle is another graphic node, the above operations of moving the coordinate origin, processing the coordinate system, and restoring the coordinate system remain unchanged. Only when calling the vector graphics object of the graphic node and calling the graphics drawing method function, the graphics drawing method function is called for each graphic node separately to complete the drawing of each graphic.

[0075] In an embodiment of the present application, the processing set may further include a processing time parameter.

[0076] Figure 5 This is a flowchart of another method for drawing a second vector graphics object by calling a processing set of a reusable graphic node and a graphic drawing method function provided by an embodiment of the present application. Figure 5 As shown, the method includes the following steps:

[0077] In step S501, the processing time parameter and the processing action parameter in the processing set are obtained.

[0078] In step S502, a first drawing coordinate system of the second vector graphics object is obtained.

[0079] In step S503, at a time specified by the processing time parameter, the first drawing coordinate system is moved using an action specified by the processing action parameter to obtain a second drawing coordinate system.

[0080] In step S504, a second drawing frame for drawing the second vector graphics object is obtained in the second drawing coordinate system, and a second graphic drawing origin is determined in the second drawing frame.

[0081] In step S505 , a second drawing parameter is obtained from the size and position information attributes of the second vector graphics object.

[0082] In step S506, a graphics drawing method function is called to start from the second graphics drawing origin and use the second drawing parameters to draw the second vector graphics object.

[0083] In the embodiment of the present application, as mentioned above, the processing set may also include a processing time parameter to indicate the timing of the processing. Figure 4When drawing in the illustrated embodiment, after obtaining the first drawing coordinate system, the first drawing coordinate system can be moved at the time specified by the processing time parameter using the action specified by the processing action parameter to obtain a second drawing coordinate system, so that the processing operation meets the constraints of the processing time parameter.

[0084] In an embodiment of the present application, the reusable graphic node may include N graphic nodes, and the N graphic nodes correspond to the same processing set, where N is a positive integer greater than 1. In this case, calling the graphic drawing method function starting from the second graphic drawing origin to draw the second vector graph object may be to call the graphic drawing method function for each of the N graphic nodes starting from the second graphic drawing origin to draw the second vector graph object.

[0085] In other words, a processing set can correspond to a single graphic node or multiple graphic nodes. When corresponding to multiple graphic nodes, these graphic nodes need to be processed identically. Furthermore, to improve efficiency, if there are graphic nodes in a UI diagram that require the same processing, they can be treated as a whole and the coordinate system processed uniformly. This requires confirming the drawing order between nodes. Nodes that require the same processing are grouped into a set.

[0086] For example, a UI diagram originally had graphic nodes A, B, C, D, E, F, and G. Now, based on the order of confirmation, they are divided into three sets:

[0087] The first set: A, C, D, E, F, which are the normally drawn parts;

[0088] The second set: B, C, E, F, which are the parts that need a treatment;

[0089] The third set: F, G, they are the parts that need another kind of treatment.

[0090] When drawing graphics, the graphics nodes in the first set can be directly drawn by calling their graphics drawing method functions; for the graphics nodes in the second set, first call their corresponding processing sets to perform coordinate system processing to obtain the second drawing coordinate system, and then call the graphics drawing method functions of the graphics nodes B, C, E and F respectively in the second drawing coordinate system to draw; for the graphics nodes in the third set, first call their corresponding processing sets to perform coordinate system processing to obtain the second drawing coordinate system, and then call the graphics drawing method functions of the graphics nodes F and G respectively in the second drawing coordinate system to draw.

[0091] In an embodiment of the present application, the graphics drawing method function is mounted as a node method on the reusable graphics node and the non-reusable graphics node; the processing set is mounted as a node attribute on the reusable graphics node; or the processing set is stored in a preset storage unit and called by the target reusable graphics node when drawing the second vector graphics object. The target reusable graphics node is the node that needs to execute the processing action in the processing set.

[0092] As previously mentioned, a graphics drawing method function is a method mounted on a graphics node. Furthermore, a processing set can be mounted on a reusable graphics node as a node attribute. Furthermore, since a processing set can correspond to multiple nodes, the processing set can also be stored in a pre-defined storage unit, such as the cloud, and then called by the target reusable graphics node when drawing the second vector graphics object. The target reusable graphics node is the node that needs to execute the processing actions in the processing set.

[0093] In an embodiment of the present application, in response to a graphics drawing instruction, the entire terminal graphical interface UI view is drawn, and all graphic nodes included in the terminal UI are determined to be graphic nodes of the application graphic to be drawn. In response to a graphics drawing instruction, a portion of the graphic in the terminal UI view is drawn, and the coordinate values ​​of each graphic node in the application graphic to be drawn are obtained from the graphics drawing instruction to obtain the graphic nodes of the application graphic to be drawn.

[0094] That is, when the graphics drawing instruction instructs to draw the entire terminal graphical interface UI view, all the graphic nodes included in the terminal UI can be determined to be the graphic nodes of the application graphic to be drawn. When the graphics drawing instruction instructs to draw a portion of the graphics in the terminal UI view, the coordinate values ​​of each graphic node in the application graphic to be drawn can be obtained from the graphics drawing instruction to obtain the graphic nodes of the application graphic to be drawn.

[0095] In other words, when drawing graphics, you can draw according to the node coordinates. Since the information of all nodes in the terminal UI view has been saved, including the size and position information of each node, the coordinates of the nodes that need to be drawn can be carried in the graphics drawing instructions, thereby determining the graphic nodes of the application graphics to be drawn, and then drawing the graphics for each node. It should be noted that the graphics drawing here can also be used to refresh the graphic nodes that have already been drawn.

[0096] Taking iOS as an example, the -(void)drawRect:(CGRect)rect function can be used to support drawing (or refreshing) nodes. When this function calls the setNeedsDisplay function, the rect in the -(void)drawRect:(CGRect)rect function is the passed coordinate. For example, by calling the -(void)setNeedsDisplay function, the entire terminal UI view can be drawn or refreshed, or by calling the -(void)setNeedsDisplayInRect:(CGRect)rect function, the graphics node corresponding to the coordinates specified by rect can be drawn or refreshed.

[0097] In an embodiment of the present application, the graphic node of the application graphic to be drawn can also be determined in the following manner: obtain the coordinates of the area to be drawn from the graphic drawing instruction; traverse the node tree of the terminal UI view corresponding to the application graphic to be drawn, and determine the first target node whose node coordinate value range falls within the area to be drawn, and the parent node coordinate value range of the first target node does not fall within the area to be drawn; determine that the first target node is the graphic node of the application graphic to be drawn.

[0098] That is to say, if the business requirement is to specify an area rather than the area corresponding to a node for graphics drawing or refreshing, you can construct a calculation module whose input parameter is a specified area and the return value is the node involved. The processing logic is to traverse all nodes in the tree structure under the root node and find the largest parent node that falls into the specified area.

[0099] Among them, the maximum parent node means that if the nodes falling into the specified area are A, B, C, and D, node A has child nodes A1, A2, and A3, and node B has child nodes B1 and B2, then the parent nodes A, B, C, and D are the maximum parent nodes.

[0100] Figure 6 This is a flowchart of a graphics drawing method in another application provided in an embodiment of the present application.

[0101] in, Figure 6 Steps S601 to S604 in the embodiment shown are similar to Figure 2 Steps S201 to S204 in the illustrated embodiment are substantially the same and are not described again here. Figure 6 As shown, the method further includes the following steps:

[0102] In step S605, when drawing the first vector graphics object and the second vector graphics object, at least one identifier is added to the drawn vector graphics objects.

[0103] Each identifier corresponds to a graphic in the vector graphics object.

[0104] In step S606, each identifier is associated with the corresponding interaction event, or the graphic node is associated with the corresponding interaction event, so that when the terminal detects an interaction action, it determines the target interaction identifier or target interaction node and executes the interaction event associated with the target interaction identifier or target interaction node.

[0105] In the embodiment of the present application, for each graphic, preset interactive events can be added according to business needs. Interactive events include but are not limited to clicks, slides, zooms, etc. Because graphics can be regular or irregular, their interactive events are more flexible. The processing of interactive events in related technologies is relatively complex. In view of this, the embodiment of the present application makes it possible to quickly determine the interactive area of ​​the interactive event by adding an identifier when drawing the graphic, thereby improving processing efficiency.

[0106] In the embodiment of the present application, when drawing the first vector graphics object and the second vector graphics object, at least one identifier may be added to the drawn vector graphics object, wherein each identifier corresponds to a graphic in the vector graphics object.

[0107] The mark used to distinguish the inside and outside of a graphic. If there is an existing mark in the UI design, use it directly; if not, create one, because the drawing process is known, so the mark can be added during the drawing process. Since the content drawn in the embodiment of the present application is known, for a graphic node, the drawing content can be marked by default, and another value can be marked in addition to the drawing content. Optionally, another custom mark can be added to the area outside the drawing content area. It is understandable that another custom mark may not be added, because if it is just a simple judgment whether it is inside or outside the area, it is sufficient to add a mark inside the outline. That is, the area without a mark is the external area; or, if a mark is added outside the outline, the area without the mark is the internal area. However, if the business needs are more complex, two or even more marks can be used.

[0108] Furthermore, if the interaction event is specified to occur on the entire graphic node, then there's no need to add an identifier. Because the graphic node is responsible for drawing the actual graphics, the remaining blank area is transparent by default and ignored during the drawing process of the parent node. Therefore, you can simply bind the interaction event to the graphic node, storing it as a member attribute of the graphic node. When an interaction occurs, the graphic node can sense it and call it directly. Alternatively, you can add an identifier within the graphic node.

[0109] That is to say, in an embodiment of the present application, each identifier can be associated with a corresponding interaction event, or a graphic node can be associated with a corresponding interaction event, so that when the terminal detects an interaction action, it can determine the target interaction identifier or target interaction node and execute the interaction event associated with the target interaction identifier or target interaction node.

[0110] In the embodiment of the present application, the target parameters in the drawn vector graphics object can be used as the identifier of the vector graphics object, or an additional identifier can be added to the drawn vector graphics object.

[0111] For example, if the drawn content of a vector graphics object has a background color, the background color can be used as the identifier of the vector graphics object. Furthermore, if the vector graphics object includes multiple graphics, each with a different background color, the background color of each graphic can be used as the identifier of each graphic in the vector graphics object.

[0112] On the other hand, if the vector object's content doesn't have parameters that can be used for identification, you can add them during the drawing process. For example, if the vector object's content is a car window, you can add an identification inside the window outline, that is, add a custom identification to the coordinate system or pixels of the car window area.

[0113] In an embodiment of the present application, when an interactive event occurs, certain processing operations need to be performed to notify the graphic node that executes the interactive event.

[0114] Figure 7 It is a flowchart of a method for determining a target interaction identifier or a target interaction node provided in an embodiment of the present application. Figure 7 As shown, the method includes the following steps:

[0115] In step S701, the interaction position of the interaction action in the terminal UI is obtained.

[0116] In step S702, in response to determining that the interaction position falls within the area where the target graphic is located in the target vector graphics object, an identifier corresponding to the target graphic is determined as a target interaction identifier.

[0117] In step S703, in response to determining that the interaction position does not fall within the area where the graphics in any vector graphics object are located, and the interaction position falls within the area where the second target node is located, the second target node is determined to be the target interaction node.

[0118] In an embodiment of the present application, the interaction position of an interactive action in the terminal UI can be obtained. If it is determined that the interaction position falls within the area where the target graphic is located in the target vector graphics object, the identifier corresponding to the target graphic is determined to be the target interaction identifier. If it is determined that the interaction position does not fall within the area where the graphic is located in any vector graphics object, and the interaction position falls within the area where the second target node is located, the second target node is determined to be the target interaction node.

[0119] Furthermore, obtaining the interaction position of the interaction action in the terminal UI can be achieved in the following manner: in response to the interaction action including at least two contact areas with the terminal screen, in response to determining that each contact area falls within a preset interaction range, determining the judgment point in each contact area as the interaction position; in response to the interaction action including a single contact area with the terminal screen, in response to determining that the single contact area falls within the preset interaction range, determining the judgment point in the single contact area as the interaction position; wherein the judgment point of the contact area is the midpoint of the contact area, or a random sampling point.

[0120] Furthermore, whether the contact area falls within the preset interaction range is determined in the following manner: in response to determining that the midpoint of the contact area falls within the preset interaction range, the contact area is determined to fall within the preset interaction range; or M random sampling points are determined from the contact area, where M is a positive integer greater than 1; in response to determining that the number of random sampling points that fall within the preset interaction range among the M random sampling points is greater than a preset threshold, the contact area is determined to fall within the preset interaction range.

[0121] Among them, determining that the interaction position falls within the area where the target graphic is located in the target vector graph object can be, creating a unit pixel area, and copying the graphic information at the interaction position to the unit pixel area, the graphic information including at least the identification information of the graphic or the identification information and coordinate information of the node where the graphic is located; copying the target vector graph object, and using the coordinate information of the unit pixel area to determine the target judgment point in the target vector graph object; in response to determining that the graphic identification information of the target judgment point is the same as the graphic identification information of the unit pixel area, or the graphic identification information of the node where the target judgment point is located is the same as the identification information of the node where the graphic of the unit pixel area is located, determining that the interaction position falls within the area where the target graphic is located in the target vector graph object.

[0122] In other words, the interaction is finger-distinguishing, and the midpoint of each finger's range, or a set of random sampling points, etc., can be taken as the judgment point.

[0123] There may be more than one point at which an interaction occurs, and different trade-offs can be taken based on different interactions.

[0124] For example, when a pinch gesture occurs, there must be two fingers, that is, two contact points, and both points must be within the corresponding range in order to confirm the pinch gesture. Figure 1 In the arrow, the pinch gesture is confirmed only when both pinch points are inside the arrow. If one is inside and the other is outside, the pinch gesture is aborted. If both pinch points are inside the arrow, further evaluation can be performed on each point to determine whether they are within the preset interaction range.

[0125] For a single finger, the midpoint of each finger's range can be used as the judgment point, which is a relatively simple method. Furthermore, for a single finger, one or more random sampling points within each finger's range can be used as judgment points. In this way, each sampling point will return a result of "in or out of the preset interaction range." The results are summarized and statistically analyzed. For example, if more than 50% of the points return "in", then the range of this finger interaction falls within the preset range of interaction to be processed; otherwise, it is not.

[0126] The method for determining whether a node is within or outside the preset interactive range can have input parameters and a return value. The input parameter is the coordinates of the point being determined, and the return value is "whether it is within or outside the preset interactive range." The implementation process can be: creating a 1-pixel region; extracting the pixel where the point coordinates are located and copying it into the 1-pixel region; calling the draw(at:) method on the node, passing in the negative value of the point coordinates.

[0127] An example pseudocode example might be im.draw(at:CGPoint(-point.x, -point.y)). Negative numbers are used because moving the coordinate point downward and rightward is negative. Since the origin of a 1-pixel region is the top-left corner, movement to the right and downward is necessary. This can be further understood as a point being fixed, and a rectangle being used to fit its position. Finally, the point's flag is retrieved for verification, returning a result indicating whether it is present or absent.

[0128] It should be noted that if the interactive event is stipulated to occur on the entire graphic node, then there is no identification for each graphic in the graphic node. Therefore, the judgment result can be obtained by judging whether the identification of the extracted point is consistent with the identification of the graphic node. If the graphic node is not additionally identified, when the extracted point is judged to be transparent, it can be determined that the judgment result is within the range.

[0129] Figure 8 This is a flowchart of a graphics drawing method in another application provided in an embodiment of the present application.

[0130] in, Figure 8 Steps S801 to S804 in the embodiment shown are similar to Figure 2 Steps S201 to S204 in the illustrated embodiment are substantially the same and are not described again here. Figure 8As shown, the method further includes the following steps:

[0131] In step S805 , the drawn application graphic is saved in the terminal UI view where the application graphic is located, and the version parameters and modification parameters of this drawing are saved.

[0132] In the embodiment of the present application, the drawn application graphic can be saved in the terminal UI view where the application graphic is located, and the version parameters and modification parameters of this drawing can be saved.

[0133] In other words, since a parent node (a UI diagram is also considered a node) is composed of child nodes, as the business develops, graphic nodes may be added, deleted, and replaced. Therefore, a graphic node will go through several stages, and these stages may require rollbacks. Therefore, this historical change can be saved to facilitate immediate return to a specific historical version.

[0134] When saving historical changes, you can save the node's schema data for each historical version's root node (i.e., UI design). Any change counts as a version change and is recorded. The schema data consists of the graphical nodes and their relationships within the UI design, recording the affected graphical nodes and the operations associated with each graphical node. Therefore, each graphical node can also have a member attribute: version change record.

[0135] For example, the parent node's version change record is as follows: Version V1 - Change Point: Child node node0 was removed, and node node1 was added. The corresponding child node node0's version change record is as follows: Version V1 - Change Point: Removed from parent node. The corresponding child node node1's version change record is as follows: Version V1 - Change Point: Initialized, added to parent node. Version V2 - Change Point: Child node node2 changed. The corresponding child node node2's version change record is as follows: Version V2 - Change Point: Color changed from white to gray.

[0136] By adopting the technical solution of the embodiment of the present application, a complex UI diagram is decomposed and designed, achieving the purpose of reusability. At the same time, the graphics drawing and complex processing are separated, reducing the difficulty of development and maintenance. Among them, the processing is based on the coordinate system rather than the graphics, which is different from the general processing method for this situation in related technologies, such as the processing method at the view layer. Furthermore, the technical solution provided by the embodiment of the present application can also achieve flexible adaptation, drawing, refreshing, and historical version retention.

[0137] All of the above optional technical solutions can be combined in any way to form optional embodiments of the present application, and will not be described in detail here.

[0138] The following are device embodiments of the present application, which can be used to implement the method embodiments of the present application. For details not disclosed in the device embodiments of the present application, please refer to the method embodiments of the present application.

[0139] Figure 9 Schematic diagram of a graphics drawing device in an application provided by an embodiment of the present application. Figure 9 As shown, the device includes:

[0140] The receiving module 901 is configured to receive a graphic drawing instruction and determine a graphic node of an application graphic to be drawn, where the graphic node includes at least one of a reusable graphic node and a non-reusable graphic node.

[0141] The drawing module 902 is configured to call the first vector graphics object of the non-reusable graphic node and call the graphics drawing method function of the non-reusable graphic node to draw the first vector graphics object to obtain the graphics of the non-reusable graphic node.

[0142] The drawing module 902 is further configured to call the second vector graphics object of the reusable graphic node, call the processing set and graphic drawing method function of the reusable graphic node to draw the second vector graphics object, and obtain the graphic of the reusable graphic node.

[0143] The combining module 903 is configured to combine the graphics of the non-reusable graphic nodes and the graphics of the reusable graphic nodes to obtain the application graphics to be drawn.

[0144] According to the technical solution provided by the embodiment of the present application, when a graphics drawing instruction is received, the graphic nodes of the application graphics to be drawn are first determined, and the non-reusable graphic nodes are drawn by calling the graphics drawing method function in their vector graphics objects. The reusable graphic nodes are drawn by calling their corresponding processing sets and the graphics drawing method function in their vector graphics objects. Finally, the graphics of all the non-reusable graphic nodes and the graphics of the reusable graphic nodes are combined to obtain the application graphics to be drawn. That is, the technical solution of the embodiment of the present application encapsulates the graphics drawing into a vector graphics object, and each graphics drawing method function and processing set are encapsulated separately. The graphics are processed at the drawing layer rather than the view layer, which reduces the complexity of the graphics drawing and facilitates the updating of part of the graphics that have been drawn, reducing the maintenance complexity and improving the user experience.

[0145] In an embodiment of the present application, a graphics drawing method function of a non-reusable graphics node is called to draw a first vector graphics object: a first drawing frame of the first vector graphics object is obtained, and a first graphics drawing origin is determined in the first drawing frame; a first drawing parameter is obtained from the size and position information attributes of the first vector graphics object; and a graphics drawing method function of a non-reusable graphics node is called, starting from the first graphics drawing origin, and the first drawing parameter is used to draw the first vector graphics object.

[0146] In an embodiment of the present application, a processing set includes processing action parameters; calling a processing set and a graphics drawing method function of a reusable graphics node to draw a second vector graphics object includes: obtaining the processing action parameters in the processing set; obtaining a first drawing coordinate system of the second vector graphics object; moving the first drawing coordinate system using the action specified by the processing action parameters to obtain a second drawing coordinate system; obtaining a second drawing frame for drawing the second vector graphics object in the second drawing coordinate system, and determining a second graphics drawing origin in the second drawing frame; obtaining second drawing parameters from the size and position information attributes of the second vector graphics object; calling a graphics drawing method function to start from the second graphics drawing origin and use the second drawing parameters to draw the second vector graphics object.

[0147] In an embodiment of the present application, the processing set also includes a processing time parameter; calling the processing set and the graphics drawing method function of the reusable graphics node to draw the second vector graphics object includes: obtaining the processing time parameter and the processing action parameter in the processing set; obtaining the first drawing coordinate system of the second vector graphics object; at the time specified by the processing time parameter, using the action specified by the processing action parameter to move the first drawing coordinate system to obtain the second drawing coordinate system; obtaining the second drawing frame for drawing the second vector graphics object in the second drawing coordinate system, and determining the second graphics drawing origin in the second drawing frame; obtaining the second drawing parameter from the size and position information attributes of the second vector graphics object; calling the graphics drawing method function to start from the second graphics drawing origin and use the second drawing parameter to draw the second vector graphics object.

[0148] In an embodiment of the present application, the reusable graphic node includes N graphic nodes, the N graphic nodes correspond to the same processing set, and N is a positive integer greater than 1; calling the graphic drawing method function starting from the second graphic drawing origin, and drawing the second vector graph object is as follows: for each graphic node in the N graphic nodes, calling the graphic drawing method function starting from the second graphic drawing origin, respectively, to draw the second vector graph object.

[0149] In an embodiment of the present application, the graphics drawing method function is mounted as a node method on the reusable graphics node and the non-reusable graphics node; the processing set is mounted as a node attribute on the reusable graphics node; or the processing set is stored in a preset storage unit and called by the target reusable graphics node when drawing the second vector graphics object. The target reusable graphics node is the node that needs to execute the processing action in the processing set.

[0150] In an embodiment of the present application, determining the graphic nodes of the application graphics to be drawn includes: drawing the entire terminal graphical interface UI view in response to a graphic drawing instruction, and determining that all graphic nodes included in the terminal UI are graphic nodes of the application graphics to be drawn; drawing part of the graphics in the terminal UI view in response to a graphic drawing instruction, obtaining the coordinate values ​​of each graphic node in the application graphics to be drawn from the graphic drawing instruction, and obtaining the graphic nodes of the application graphics to be drawn.

[0151] In an embodiment of the present application, determining the graphic node of the application graphic to be drawn includes: obtaining the coordinates of the area to be drawn from the graphic drawing instruction; traversing the node tree of the terminal UI view corresponding to the application graphic to be drawn, and determining the first target node whose node coordinate value range falls within the area to be drawn, and the parent node coordinate value range of the first target node does not fall within the area to be drawn; determining that the first target node is the graphic node of the application graphic to be drawn.

[0152] In an embodiment of the present application, it also includes: when drawing the first vector graphics object and the second vector graphics object, adding at least one identifier to the drawn vector graphics object, each identifier corresponding to a graphic in the vector graphics object; associating each identifier with a corresponding interaction event, or associating a graphic node with a corresponding interaction event, so that when the terminal detects an interaction action, it determines the target interaction identifier or target interaction node, and executes the interaction event associated with the target interaction identifier or target interaction node.

[0153] In an embodiment of the present application, adding at least one identifier to the drawn vector graphics object includes: using target parameters in the drawn vector graphics object as the identifier of the vector graphics object; or adding an additional identifier to the drawn vector graphics object.

[0154] In an embodiment of the present application, determining the target interaction identifier or target interaction node includes: obtaining the interaction position of the interaction action in the terminal UI; in response to determining that the interaction position falls into the area where the target graphic is located in the target vector graphics object, determining the identifier corresponding to the target graphic as the target interaction identifier; or in response to determining that the interaction position does not fall into the area where the graphic is located in any vector graphics object, and the interaction position falls into the area where the second target node is located, determining the second target node as the target interaction node.

[0155] In an embodiment of the present application, obtaining the interaction position of an interaction action in a terminal UI includes: in response to the interaction action including at least two contact areas with the terminal screen, in response to determining that each contact area falls within a preset interaction range, determining the judgment point in each contact area as the interaction position; in response to the interaction action including a single contact area with the terminal screen, in response to determining that the single contact area falls within the preset interaction range, determining the judgment point in the single contact area as the interaction position; wherein the judgment point of the contact area is the midpoint of the contact area, or a random sampling point; whether the contact area falls within the preset interaction range is determined in the following manner: in response to determining that the midpoint of the contact area falls within the preset interaction range, determining that the contact area falls within the preset interaction range; or determining M random sampling points from the contact area, where M is a positive integer greater than 1; in response to determining that the number of random sampling points falling within the preset interaction range among the M random sampling points is greater than a preset threshold, determining that the contact area falls within the preset interaction range.

[0156] In an embodiment of the present application, determining that the interaction position falls within the area where the target graphic is located in the target vector graphics object includes: creating a unit pixel area, and copying the graphic information at the interaction position to the unit pixel area, the graphic information including at least the identification information of the graphic or the identification information and coordinate information of the node where the graphic is located; copying the target vector graphics object, and using the coordinate information of the unit pixel area to determine the target judgment point in the target vector graphics object; in response to determining that the graphic identification information of the target judgment point is the same as the graphic identification information of the unit pixel area, or the graphic identification information of the node where the target judgment point is located is the same as the identification information of the node where the graphic in the unit pixel area is located, determining that the interaction position falls within the area where the target graphic is located in the target vector graphics object.

[0157] In the embodiment of the present application, the method further includes: saving the drawn application graphic in the terminal UI view where the application graphic is located, and saving the version parameters and modification parameters of the current drawing.

[0158] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0159] Figure 10 Schematic diagram of an electronic device provided in an embodiment of the present application. Figure 10 As shown, the electronic device 10 of this embodiment includes: a processor 1001, a memory 1002, and a computer program 1003 stored in the memory 1002 and executable by the processor 1001. When the processor 1001 executes the computer program 1003, the steps of the above-described method embodiments are implemented. Alternatively, when the processor 1001 executes the computer program 1003, the functions of the modules / units in the above-described device embodiments are implemented.

[0160] The electronic device 10 may be a desktop computer, a notebook, a PDA, a cloud server, or other electronic device. The electronic device 10 may include but is not limited to a processor 1001 and a memory 1002. Those skilled in the art will appreciate that Figure 10 The electronic device 10 is merely an example and does not limit the electronic device 10 . The electronic device 10 may include more or fewer components than shown in the figure, or different components.

[0161] The processor 1001 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0162] Memory 1002 can be an internal storage unit of electronic device 10, such as a hard disk or memory of electronic device 10. Memory 1002 can also be an external storage device of electronic device 10, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) card, a Flash Card, etc. equipped on electronic device 10. Memory 1002 can also include both an internal storage unit of electronic device 10 and an external storage device. Memory 1002 is used to store computer programs and other programs and data required by the electronic device.

[0163] Those skilled in the art will clearly understand that for the sake of convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units.

[0164] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. The computer program may include computer program code, which may be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0165] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present application, and should all be included in the scope of protection of the present application.

Claims

1. A graphics drawing method in an application, characterized in that: The method is executed by a terminal, and includes: receiving a graphics drawing instruction and determining a graphics node of an application graphic to be drawn, wherein the graphics node includes at least one of a reusable graphics node and a non-reusable graphics node; Calling a first vector graphics object of the non-reusable graphic node, and calling a graphics drawing method function of the non-reusable graphic node to draw the first vector graphics object, to obtain a graphic of the non-reusable graphic node; Calling a second vector graphics object of the reusable graphic node, calling a processing set and a graphics drawing method function of the reusable graphic node to draw the second vector graphics object, thereby obtaining a graphic of the reusable graphic node; wherein the processing set of the reusable graphic node is a pre-configured ordered data structure that stores a sequence of processing actions and processing action parameters required for the processing actions; The graph of the non-reusable graphic node and the graph of the reusable graphic node are combined to obtain the application graph to be drawn.

2. The method according to claim 1, characterized in that The calling of the graphics drawing method function of the non-reusable graphics node draws the first vector graphics object: Obtaining a first drawing frame of the first vector graphics object, and determining a first graphic drawing origin in the first drawing frame; Obtaining a first drawing parameter from the size and position information attributes of the first vector graphics object; The graphics drawing method function of the non-reusable graphics node is called to draw the first vector graphics object using the first drawing parameters starting from the first graphics drawing origin.

3. The method according to claim 1, characterized in that The calling of the processing set and the graphics drawing method function of the reusable graphics node to draw the second vector graphics object includes: Obtaining processing action parameters in the processing set; Obtain a first drawing coordinate system of the second vector graphics object; Moving the first drawing coordinate system by using an action specified by a processing action parameter to obtain a second drawing coordinate system; Obtaining a second drawing frame for drawing the second vector graphics object in the second drawing coordinate system, and determining a second graphic drawing origin in the second drawing frame; Obtaining a second drawing parameter from the size and position information attributes of the second vector graphics object; Calling a graphics drawing method function starts from the second graphics drawing origin and uses the second drawing parameters to draw the second vector graphics object.

4. The method according to claim 3, characterized in that The processing set also includes a processing time parameter; The calling of the processing set and the graphics drawing method function of the reusable graphics node to draw the second vector graphics object includes: Obtaining processing time parameters and processing action parameters in the processing set; Obtain a first drawing coordinate system of the second vector graphics object; At a time specified by the processing time parameter, the first drawing coordinate system is moved by an action specified by the processing action parameter to obtain a second drawing coordinate system; Obtaining a second drawing frame for drawing the second vector graphics object in the second drawing coordinate system, and determining a second graphic drawing origin in the second drawing frame; Obtaining a second drawing parameter from the size and position information attributes of the second vector graphics object; Calling a graphics drawing method function starts from the second graphics drawing origin and uses the second drawing parameters to draw the second vector graphics object.

5. The method according to claim 3 or 4, characterized in that: The reusable graphic nodes include N graphic nodes, the N graphic nodes correspond to the same processing set, and N is a positive integer greater than 1; The calling of the graphics drawing method function starts from the second graphics drawing origin, and the steps of drawing the second vector graphics object are: For each of the N graphic nodes, a graphic drawing method function is called respectively, starting from the second graphic drawing origin, to draw the second vector graphics object.

6. The method according to claim 3 or 4, characterized in that: The graphics drawing method function is mounted as a node method on the reusable graphics node and the non-reusable graphics node; The processing set is mounted as a node attribute on the reusable graphic node; or The processing set is stored in a preset storage unit and is called by a target reusable graphic node when drawing a second vector graphics object. The target reusable graphic node is a node that needs to execute the processing actions in the processing set.

7. The method according to claim 1, characterized in that The step of determining the graphic node of the application graphic to be drawn includes: In response to the graphic drawing instruction indicating that the terminal graphical interface UI view is drawn as a whole, determining that all graphic nodes included in the terminal UI are graphic nodes of the application graphic to be drawn; In response to a graphic drawing instruction indicating drawing a portion of the graphics in the terminal UI view, coordinate values ​​of each graphic node in the application graphic to be drawn are obtained from the graphic drawing instruction to obtain the graphic nodes of the application graphic to be drawn.

8. The method according to claim 1, characterized in that The step of determining the graphic node of the application graphic to be drawn includes: Obtaining coordinates of the area to be drawn from the graphics drawing instruction; Traversing the node tree of the terminal UI view corresponding to the application graphic to be drawn, determining a first target node whose node coordinate value range falls within the area to be drawn, and whose parent node coordinate value range does not fall within the area to be drawn; The first target node is determined to be a graphic node of the application graphic to be drawn.

9. The method according to claim 1, characterized in that The method further comprises: When drawing the first vector graphics object and the second vector graphics object, at least one identifier is added to the drawn vector graphics object, each identifier corresponding to a graphic in the vector graphics object; Each identifier is associated with a corresponding interaction event, or a graphic node is associated with a corresponding interaction event, so that when the terminal detects an interaction action, it determines the target interaction identifier or target interaction node and executes the interaction event associated with the target interaction identifier or target interaction node.

10. The method according to claim 9, characterized in that The adding at least one identifier to the drawn vector graphics object includes: Using the target parameter in the drawn vector graphics object as the identifier of the vector graphics object; or Add additional identifiers to the drawn vector object.

11. The method according to claim 9, characterized in that The determining of the target interaction identifier or target interaction node includes: Get the interactive position of the interactive action in the terminal UI; In response to determining that the interaction position falls within the area where the target graphic is located in the target vector graphics object, determining an identifier corresponding to the target graphic as the target interaction identifier; or In response to determining that the interaction position does not fall within an area where a graphic in any vector graphics object is located, and the interaction position falls within an area where a second target node is located, the second target node is determined to be the target interaction node.

12. The method according to claim 11, characterized in that The obtaining of the interaction position of the interaction action in the terminal UI includes: In response to the interaction action including at least two contact areas with the terminal screen, and in response to determining that each contact area falls within a preset interaction range, determining a judgment point in each contact area as the interaction position; In response to the interaction action including a single contact area with the terminal screen, and in response to determining that the single contact area falls within a preset interaction range, determining a judgment point in the single contact area as the interaction position; The judgment point of the contact area is the midpoint of the contact area, or a random sampling point; The contact area falls within the preset interaction range in the following way: In response to determining that a midpoint of the contact area falls within a preset interaction range, determining that the contact area falls within the preset interaction range; or Determine M random sampling points from the contact area, where M is a positive integer greater than 1; In response to determining that the number of random sampling points in the M random sampling points that fall within the preset interaction range is greater than a preset threshold, it is determined that the contact area falls within the preset interaction range.

13. The method according to claim 11, characterized in that Determining that the interaction position falls within an area where a target graphic in a target vector graphics object is located includes: Creating a unit pixel area, and copying the graphic information at the interaction position to the unit pixel area, the graphic information including at least the identification information of the graphic or the identification information and coordinate information of the node where the graphic is located; copying the target vector graph object, and determining a target judgment point in the target vector graph object using the coordinate information of the unit pixel area; In response to determining that the graphic identification information of the target judgment point is the same as the graphic identification information of the unit pixel area, or the graphic identification information of the node where the target judgment point is located is the same as the identification information of the node where the graphic of the unit pixel area is located, it is determined that the interaction position falls into the area where the target graphic is located in the target vector graph object.

14. The method according to claim 1, wherein The method further comprises: The drawn application graphic is saved in the terminal UI view where the application graphic is located, and the version parameters and modification parameters of this drawing are saved.

15. A graphics drawing device in an application, characterized in that: include: A receiving module is configured to receive a graphic drawing instruction and determine a graphic node of an application graphic to be drawn, wherein the graphic node includes at least one of a reusable graphic node and a non-reusable graphic node; a drawing module configured to call a first vector graphics object of the non-reusable graphic node, and call a graphics drawing method function of the non-reusable graphic node to draw the first vector graphics object, thereby obtaining a graphic of the non-reusable graphic node; The drawing module is further configured to call a second vector graphics object of the reusable graphic node, call a processing set and a graphics drawing method function of the reusable graphic node to draw the second vector graphics object, and obtain a graphic of the reusable graphic node; wherein the processing set of the reusable graphic node is a pre-configured ordered data structure, which stores the sequence of processing actions and processing action parameters required for the processing actions; The combining module is configured to combine the graph of the non-reusable graph node and the graph of the reusable graph node to obtain the application graph to be drawn.

Images