An interface element drawing method and device, equipment, storage medium, product

Abstract

Embodiments of the present application disclose an interface element drawing method and device, equipment, storage medium and product, the method comprising: analyzing drawing data corresponding to an interface element to be drawn in a page to obtain position information of the interface element; establishing a background view for the interface element according to the position information, the background view being used to carry the drawn interface element; setting a two-dimensional coordinate system according to the background view, determining point coordinates in the two-dimensional coordinate system according to a size of the background view and width information of the interface element, and performing two-dimensional traversal on the point coordinates in the two-dimensional coordinate system; in the process of performing two-dimensional traversal on the point coordinates in the two-dimensional coordinate system, performing interpolation calculation on the traversed point coordinates to obtain a point to be drawn; and performing rendering processing on the point to be drawn to draw the interface element in the page; the technical scheme of the embodiments of the present application ensures the accuracy and comprehensiveness of the point to be drawn obtained by interpolation calculation, so that the drawn interface element can meet the desired effect.

Description

Technical Field

[0001] This application relates to the field of interface drawing, and more specifically, to a method, apparatus, device, storage medium, and product for drawing interface elements. Background Technology

[0002] With the widespread use of computers, more and more designers are using computers to create images. The process of creating images often involves drawing interface elements. Currently, when drawing interface elements, the relevant APIs (Application Programming Interfaces) of the system's drawing framework are typically used. For example, when drawing interface elements using the Quartz2D (a 2D drawing engine) framework's APIs, the graphics context is obtained, the start and end points of the drawing path are determined, and the path between the start and end points is determined by calling common path concatenation functions. Finally, the path is added to the context to achieve rendering. However, the path obtained by calling common path concatenation functions may differ from the design path, causing a mismatch between the drawn path and the graphics context, resulting in a deviation between the drawn interface elements and the desired effect. Summary of the Invention

[0003] To address the aforementioned technical problems, embodiments of this application provide a method, apparatus, device, storage medium, and product for drawing interface elements, ensuring the accuracy and comprehensiveness of the points to be drawn obtained through interpolation calculations, so that the drawn interface elements can achieve the desired effect.

[0004] Other features and advantages of this application will become apparent from the following detailed description, or may be learned in part from practice of this application.

[0005] According to one aspect of the embodiments of this application, a method for drawing interface elements is provided, comprising: parsing drawing data corresponding to an interface element to be drawn on a page to obtain position information of the interface element; establishing a background view for the interface element based on the position information, the background view being used to hold the drawn interface element; setting a two-dimensional coordinate system based on the background view, determining the coordinates of points in the two-dimensional coordinate system based on the size of the background view and the width information of the interface element, and performing a two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system; interpolating the traversed coordinates of points to obtain a point to be drawn during the two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system; and rendering the point to be drawn to draw the interface element on the page.

[0006] According to one aspect of the embodiments of this application, an interface element drawing apparatus is provided, comprising: a parsing module, configured to parse drawing data corresponding to an interface element to be drawn on a page to obtain position information of the interface element; a building module, configured to build a background view for the interface element based on the position information, the background view being used to carry the drawn interface element; a traversal module, configured to set a two-dimensional coordinate system based on the background view, determine the coordinates of points in the two-dimensional coordinate system based on the size of the background view and the width information of the interface element, and perform two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system; an interpolation module, configured to perform interpolation calculation on the traversed coordinates of points to obtain a point to be drawn during the two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system; and a drawing module, configured to perform rendering processing on the point to be drawn to draw the interface element on the page.

[0007] In one embodiment of this application, the drawing data includes the vertices of the background view corresponding to the interface element and the rounded corner radius of the interface element. The parsing module is configured to index the vertices of the background view to determine the position area of ​​the background view corresponding to the interface element; determine the size of the background view from the position area according to the rounded corner radius of the interface element; and use the position corresponding to the size of the background view as the position information of the interface element.

[0008] In one embodiment of this application, the traversal module is configured to establish a two-dimensional coordinate system with the upper left corner of the background view as the origin, the positive direction of the horizontal axis of the two-dimensional coordinate system being horizontal to the right, and the positive direction of the vertical axis of the two-dimensional coordinate system being vertical downward; determine a reference point in the two-dimensional coordinate system based on the size of the background view and the width information of the interface elements, and determine multiple control points centered on the reference point; and put the reference point and control points into an array for two-dimensional traversal.

[0009] In one embodiment of this application, the traversal module performs an outer traversal of the array to obtain the coordinate parameters corresponding to each control point, the coordinate parameters including the horizontal coordinate value and the vertical coordinate value; based on the coordinate parameters corresponding to each control point, the control point is traversed an inner traversal a preset number of times to obtain the coordinate value of each control point, and the current inner traversal number is recorded.

[0010] In one embodiment of this application, the interpolation module obtains the coordinate values ​​of each control point obtained during the inner traversal of the control points for a preset number of times, as well as the current inner traversal number; and performs interpolation calculation based on the current inner traversal number and the coordinate values ​​of each control point to obtain the coordinate values ​​of the point to be drawn.

[0011] In one embodiment of this application, the drawing module generates a layer object of the background view according to the size of the background view; sets layer attributes for the layer object, the layer attributes including at least one of stroke color, fill color, line width, percentage of the stroke start point to the total path and percentage of the stroke end point to the total path; draws the point to be drawn to obtain a path, and uses the layer object to render and display the path on the background view to obtain the interface element.

[0012] In one embodiment of this application, the interface drawing device further includes a trigger module, which is configured to set different trigger events corresponding to different gesture operations on the background view; if a gesture operation input on the interface element is obtained, the trigger event corresponding to the input gesture operation is triggered.

[0013] According to one aspect of the embodiments of this application, an electronic device is provided, including one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the electronic device to implement the interface element drawing method as described above.

[0014] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, on which computer-readable instructions are stored, which, when executed by a computer's processor, cause the computer to perform the interface element drawing method as described above.

[0015] According to one aspect of the embodiments of this application, a method for drawing interface elements as described above is provided when the computer instructions of a computer program product are executed by a processor.

[0016] In the technical solution provided by the embodiments of this application, the drawing data corresponding to the interface elements to be drawn on the page is parsed to obtain the position information of the interface elements. Then, a background view can be established based on the position information of the interface elements. The background view is used to carry the interface elements to be drawn. The display position of the interface elements to be drawn on the page can be determined. Then, a two-dimensional coordinate system is set based on the background view, and point coordinates are defined in the two-dimensional coordinate system by the size of the background view and the width information of the interface elements. During the two-dimensional traversal of the point coordinates, the traversed point coordinates are interpolated to obtain the point to be drawn. This associates the point coordinates with the width information of the background view and the interface elements. By performing two-dimensional traversal of the point coordinates, the accuracy and comprehensiveness of the point to be drawn obtained by the interpolation calculation are ensured. Then, the point to be drawn is rendered to draw the interface elements on the page so that the drawn interface elements can meet the desired effect.

[0017] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0018] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:

[0019] Figure 1 This is a schematic diagram of one implementation environment involved in this application;

[0020] Figure 2 A flowchart illustrating a method for drawing interface elements according to an embodiment of this application is shown;

[0021] Figure 3 A schematic diagram showing the positions of interface elements in a page according to an embodiment of this application is provided.

[0022] Figure 4 It shows Figure 2 A flowchart of step S110 in an exemplary embodiment shown in the illustrated example;

[0023] Figure 5 It shows Figure 2 A flowchart of step S130 in an exemplary embodiment shown in the illustrated example;

[0024] Figure 6 It shows Figure 2 A flowchart of step S140 in an exemplary embodiment shown in the illustrated example;

[0025] Figure 7 It shows Figure 2 A flowchart of step S150 in an exemplary embodiment shown in the illustrated example;

[0026] Figure 8 A schematic diagram of interface elements drawn according to an embodiment of this application is shown;

[0027] Figure 9 It shows Figure 2 A flowchart in an exemplary embodiment following step S150 in the illustrated embodiment;

[0028] Figure 10 A flowchart illustrating the plotting of curves according to an exemplary embodiment of this application is shown;

[0029] Figure 11 A schematic diagram of a curve drawn according to an embodiment of this application is shown;

[0030] Figure 12 A schematic diagram of an interface element drawing apparatus according to an embodiment of this application is shown;

[0031] Figure 13 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown. Detailed Implementation

[0032] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0033] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0034] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0035] It should also be noted that "multiple" as mentioned in this application refers to two or more. "And / or" describes 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. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0036] Please see Figure 1 , Figure 1 This is a schematic diagram of an implementation environment related to this application. The implementation environment includes a mobile terminal 100 and a server 200, and the mobile terminal 100 and the server 200 communicate with each other via a wired or wireless network.

[0037] Server 200 sends the drawing data corresponding to the interface elements to be drawn to mobile terminal 100.

[0038] The mobile terminal 100 receives drawing data, parses the drawing data corresponding to the interface elements to be drawn on the page, and obtains the position information of the interface elements; it creates a background view for the interface elements based on the position information, and the background view is used to hold the interface elements to be drawn; it sets a two-dimensional coordinate system based on the background view, determines the coordinates of points in the two-dimensional coordinate system based on the size of the background view and the width information of the interface elements, and performs a two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system; during the two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system, it performs interpolation calculations on the traversed coordinates to obtain the points to be drawn; and it performs rendering processing on the points to be drawn to draw the interface elements on the page.

[0039] Among them, mobile terminal 100 can be any electronic device that can display content, such as smartphones, tablets, laptops, and computers. Server 200 can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. This section does not impose any restrictions on these.

[0040] Understandably, blockchain is a new application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and cryptographic algorithms. Essentially, blockchain is a decentralized database, a chain of data blocks linked together using cryptographic methods. Each data block contains information about a batch of network transactions, used to verify the validity of the information (anti-counterfeiting) and to generate the next block.

[0041] The implementation environment involved in this invention can be a distributed system formed by multiple nodes (any form of computing device connected in the network, such as servers or mobile terminals) connected through network communication. Taking a blockchain system as an example, the distributed system is formed by multiple nodes (any form of computing device connected in the network, such as servers or mobile terminals), and the nodes form a peer-to-peer (P2P) network. The P2P protocol is an application layer protocol running on top of the Transmission Control Protocol (TCP). In the distributed system, any machine, such as a server or mobile terminal, can join and become a node. A node includes a hardware layer, a middleware layer, an operating system layer, and an application layer.

[0042] The functions of each node in a blockchain system include: 1) Routing: A basic function of nodes used to support communication between nodes. In addition to routing, nodes may also have the following functions: 2) Applications: Deployed within the blockchain to implement specific business needs, recording data related to the implementation of these functions to form record data. This record data carries a digital signature to indicate the source of the task data. The record data is then sent to other nodes in the blockchain system, where other nodes, upon successful verification of the record data's source and integrity, add the record data to a temporary block.

[0043] As disclosed in this application, the interface element drawing method involves a server node forming drawing data corresponding to the interface element to be drawn into record data, which carries a digital signature to indicate the source of the data. The record data is then sent to other nodes in the blockchain system. Other nodes, such as other servers or mobile terminals, can obtain the drawing data when they successfully verify the source and integrity of the record data. In this case, the mobile terminal can complete the drawing of the interface element on the page. Multiple servers and mobile terminals can form a blockchain system, and the servers and mobile terminals are nodes on the blockchain system.

[0044] Please see Figure 2 , Figure 2 This is a flowchart illustrating a method for drawing interface elements according to an exemplary embodiment. This method can be applied to... Figure 1 The implementation environment shown, and by Figure 1 The mobile terminal 100 in the illustrated embodiment environment is specifically executed. This interface element drawing method may include steps S110 to S150, which are detailed below:

[0045] S110. Parse the drawing data corresponding to the interface elements to be drawn on the page to obtain the position information of the interface elements.

[0046] It is understood that a page includes multiple interface elements, each corresponding to a drawing data set. These interface elements include UI elements with curves, arcs, and rounded corners, such as user avatars and interface controls. In one embodiment of this application, the position information of the interface element is obtained by parsing the drawing data corresponding to the interface element. This position information specifies the position of the interface element on the page. The position information includes the position of the interface element relative to the page, i.e., the display position of the interface element on the page, such as the distance of the interface element from the top, bottom, left, and right edges of the page. It also includes the position information of the interface element relative to other interface elements, such as... Figure 3As shown, the page includes multiple interface elements (such as the bottom control with a curve and the avatar in the middle area), content images (such as four violinists) and text. The interface elements include one interface element, user avatar 31, and another interface element, application avatar 32. The position information of the two interface elements is that user avatar 31 is located below application avatar 32.

[0047] In one example of this application, the mobile terminal receives drawing data sent by the server, that is, the server first determines the drawing data of the interface elements, and the mobile terminal draws the effect of the interface elements; in another example, the user can determine the drawing data of the interface elements; no limitation is made here.

[0048] S120. Create a background view for the interface elements based on the location information. The background view is used to hold the drawn interface elements.

[0049] In this embodiment, the background view is equivalent to a canvas on which interface elements are drawn. Since the position information of the interface elements is determined, a background view can be created for the interface elements based on the position information. Thus, the position information of the background view corresponds to the position information of the interface elements. In one example, the created background view can be a regular shape, such as a rectangle or a circle. The background view can also be an irregular shape, which is not limited here.

[0050] S130. Set a two-dimensional coordinate system based on the background view, determine the coordinates of points in the two-dimensional coordinate system based on the size of the background view and the width information of the interface elements, and perform a two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system.

[0051] In one embodiment of this application, a two-dimensional coordinate system is set based on the background view. The two-dimensional coordinate system refers to a Cartesian coordinate system formed by two mutually perpendicular number axes on the same plane with a common origin. Specifically, the origin of the two-dimensional coordinate system is set based on the background view. The two-dimensional coordinate system contains multiple point coordinates. The horizontal and vertical coordinate values ​​of the point coordinates are determined according to the size of the background view and the width information of the interface elements. The size of the background view includes the length and width of the background view. The width information of the interface elements includes the maximum width of the interface elements. In some examples, the width information can also be the average width of the interface elements, which can be flexibly adjusted according to actual needs.

[0052] It is understandable that two-dimensional traversal refers to the traversal of a two-dimensional array. If a one-dimensional array stores elements, then a two-dimensional array stores a one-dimensional array. Traversing a two-dimensional array means traversing a one-dimensional array and then traversing each element of the one-dimensional array. In this embodiment, two-dimensional traversal is performed on the point coordinates of a two-dimensional coordinate system. This means traversing the point coordinates and then traversing the coordinate values ​​of each coordinate.

[0053] S140. During the two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system, the coordinates of the traversed points are interpolated to obtain the point to be drawn.

[0054] In this embodiment, during the two-dimensional traversal of the point coordinates in the two-dimensional coordinate system, at least one point coordinate will be traversed. The x-coordinate and y-coordinate values ​​of at least one point coordinate are interpolated to obtain the point to be drawn, which is also located in the two-dimensional coordinate system.

[0055] S150. Render the points to be drawn in order to draw interface elements on the page.

[0056] It is understood that in this embodiment, multiple points to be drawn can be obtained. By rendering multiple points to be drawn in the two-dimensional coordinate system, interface elements can be drawn on the page, and the interface elements will pass through each point to be drawn.

[0057] In one embodiment of this application, the drawing data includes the vertices of the background view corresponding to the interface element. When the background view is a regular rectangle, the vertices of the background view are the four corner vertices of the regular rectangle. When the interface element is a curve, arc, or rounded corner, the drawing data also includes the rounded corner radius of the interface element.

[0058] Figure 4 yes Figure 2 The flowchart of step S110 in the illustrated embodiment is shown in an exemplary embodiment. Figure 4 As shown, the process of obtaining the position information of interface elements includes steps S111 to S113, which are described in detail below:

[0059] S111. Index the vertices of the background view to determine the position area of ​​the background view corresponding to the interface element.

[0060] Since the vertices of the background view are known, the vertices of the background view are indexed. That is, the page contains various points, and the vertices of the background view are indexed on the page to determine the position of the vertices of the background view on the page. By determining the position on the page, the position area of ​​the background view corresponding to the interface element on the page can be determined.

[0061] S112. Determine the size of the background view from the position area based on the corner radius of the interface elements.

[0062] Since the background view is used to hold interface elements, in order to avoid wasting the area occupied by the background view on the page, the display area of ​​the interface elements should be adapted to the size of the background view. After knowing the corner radius of the interface element, mark the display area adapted to the corner radius of the interface element from the position area. When the background view is a regular rectangle, the length and width of the display area can be determined and used as the size of the background view.

[0063] S113. Use the position corresponding to the size of the background view as the position information of the interface element.

[0064] In one embodiment of this application, after determining the size of the background view from the location area, the position corresponding to the size of the background view can be obtained. This position is then used as the position information of the interface element, i.e., the position information of the interface element relative to the page. It should be noted that when the position information corresponding to two interface elements overlaps, the relative position of the two interface elements is determined based on the size of the background view corresponding to each interface element. For example, if interface element 1 and interface element 2 are both located in area a of the page, but the background view of interface element 1... Figure 1 The size of the background view is larger than that of interface element 2. Figure 2 To avoid obscuring interface element 2, in area a, interface element 2 is positioned above interface element 1.

[0065] In this embodiment, the position area of ​​the background view is determined by the vertices of the background view in the obtained drawing data, and the size of the background view is further determined by the rounded corner radius of the interface elements to ensure that the background view is adapted to the interface elements and to ensure that the area occupied by the background view on the page is reasonably planned. In this way, the position of the interface elements can be determined, which is convenient for the subsequent creation of the background view.

[0066] Figure 5 yes Figure 2 The flowchart of step S130 in the illustrated embodiment is shown in an exemplary embodiment. Figure 5 As shown, steps S131 to S133 are detailed below:

[0067] S131. Establish a two-dimensional coordinate system with the upper left corner of the background view as the origin. The positive direction of the horizontal axis of the two-dimensional coordinate system is horizontal to the right, and the positive direction of the vertical axis of the two-dimensional coordinate system is vertical downward.

[0068] In one embodiment of this application, the background view is a regular rectangle. A two-dimensional coordinate system is established with the upper left corner of the regular rectangle as the origin. The positive direction of the horizontal axis of the two-dimensional coordinate system is horizontal to the right, and the positive direction of the vertical axis is vertical downward. That is, the horizontal axis is the direction of the length of the regular rectangle, and the vertical axis is the direction of the width of the regular rectangle.

[0069] S132. Determine a reference point in a two-dimensional coordinate system based on the size of the background view and the width information of the interface elements, and determine multiple control points centered on the reference point.

[0070] In one embodiment of this application, a reference point and multiple control points centered on the reference point are determined in a two-dimensional coordinate system based on the length and width of the background view and the maximum width of the interface element. The multiple control points can be 3 control points, 4 control points, 5 control points, etc. This embodiment takes 4 control points as an example for illustration: Assuming the width of the background view is W, the height is H, and the maximum width of the interface element is margin, then the reference point is determined as p(W*0.5, 0), and the 4 control points are p0(0, H), p1(W*0.5-margin, H), p2(W*0.5+margin, H) and p3(W, H).

[0071] S133. Place the reference point and control point into an array and perform a two-dimensional traversal.

[0072] Place the reference point and multiple control points into an array to form a two-dimensional array, and then perform a two-dimensional traversal on the two-dimensional array, such as obtaining the two-dimensional array = {{W*0.5, 0}, {0, H}, {W*0.5-margin, H}, {W*0.5+margin, H}, {W, H}}.

[0073] In this embodiment, a two-dimensional coordinate system is set based on the background view, and point coordinates are defined in the two-dimensional coordinate system by the size of the background view and the width information of the interface elements, so that the point coordinates are associated with the background view and the interface elements, thereby improving the reliability of the determination of the point coordinates.

[0074] In one example, the process of placing the reference points and control points into an array for two-dimensional traversal includes:

[0075] Perform an outer traversal of the array to obtain the coordinate parameters corresponding to each control point; based on the coordinate parameters corresponding to each control point, perform an inner traversal of the control points a preset number of times to obtain the coordinate value of each control point, and record the current inner traversal count.

[0076] Perform an outer traversal on the array, i.e., iterate through the number of one-dimensional data points. During the traversal, obtain the coordinate parameters of the control points, which include the x-coordinate and y-coordinate of each control point. For example, for the two-dimensional array = {{W*0.5, 0}, {0, H}, {W*0.5-margin, H}, {W*0.5+margin, H}, {W, H}}, perform two outer traversals. In each traversal, obtain the coordinate parameters of the last four control points, resulting in {0, H}, {W*0.5-margin, H}, {W*0.5+margin, H}, {W, H}.

[0077] The inner traversal is to traverse the coordinates of each control point. For example, to traverse 4 control points n times, the x-coordinate and y-coordinate values ​​of each control point are obtained. For example, when performing the i-th memory traversal, the x-coordinate and y-coordinate values ​​{0, H} of control point P0 are obtained, and the current inner traversal number i is recorded.

[0078] Figure 6 This is a flowchart of step S140 in an exemplary embodiment of this example. Figure 6 As shown, obtaining the point to be drawn includes steps S141 to S142, which are described in detail below:

[0079] S141. Obtain the coordinates of each control point obtained during the inner traversal of the control points for a preset number of times, as well as the current number of inner traversals.

[0080] S142. Based on the current number of inner traversals and the coordinate values ​​of each control point, perform interpolation calculations to obtain the coordinate values ​​of the point to be drawn.

[0081] In this embodiment, during the inner traversal of the control points n times, the coordinate values ​​of each control point and the current inner traversal number i are obtained. Based on the Catmull-Rom algorithm (an algorithm used when we want an object to move from one point to another, but not in a straight line, but slightly curved; given a set of discrete points, the curve is drawn by interpolating the discrete points and passing through each discrete point), the coordinate values ​​of the point to be drawn are obtained by calculating the cubic interpolation function with i / n as the t value and the coordinate values ​​of the control points.

[0082] In one example, we'll use the four control points from the previous example as an example. First, we square and cube the value of t to generate t. 2 and t 3 Then according to t 2 and t 3 Generate the transformed f0, f1, f2, and f3:

[0083] f0 = -0.5*t 3 +t 2 -0.5*t;

[0084] f1 = 1.5 * t 3 -2.5*t 2 +1.0;

[0085] f2 = -1.5 * t 3 +2.0*t 2 +0.5*t;

[0086] f3 = 0.5 * t 3 -0.5*t 2;

[0087] The coordinates of the points to be drawn generated by the current traversal are:

[0088] x=p0.x*f0+p1.x*f1+p2.x*f2+p3.x*f3;

[0089] y=p0.y*f0+p1.y*f1+p2.y*f2+p3.y*f3;

[0090] Where p0.x is the x-coordinate of control point p0, and p0.y is the y-coordinate of control point p0; p1.x is the x-coordinate of control point p1, and p1.y is the y-coordinate of control point p1; p2.x is the x-coordinate of control point p2, and p2.y is the y-coordinate of control point p2; p3.x is the x-coordinate of control point p3, and p3.y is the y-coordinate of control point p3.

[0091] It is understandable that when n inner traversals are performed, each traversal will obtain the coordinates (x, y) of a point to be drawn, and a total of n coordinates of points to be drawn will be obtained.

[0092] In this embodiment, control points are obtained through the outer loop of the two-dimensional traversal, and the coordinate values ​​of each control point are obtained through the inner loop of the two-dimensional traversal. Based on the current traversal number i, the coordinate values ​​of the point to be drawn are calculated using a cubic interpolation function with i / n as the t value and the coordinate values ​​of the control points, thus ensuring the comprehensiveness of the determination of the coordinates of the point to be drawn.

[0093] like Figure 7 As shown, Figure 7 This is a flowchart of step S150 in an exemplary embodiment of this example. Figure 7 As shown, obtaining the points to be drawn includes steps S151 to S153, which are described in detail below:

[0094] S151. Generate a layer object for the background view based on its dimensions;

[0095] It is understandable that the background view does not have a display function. The reason why the background view can be displayed on the page is because there is a layer object inside the background view. Each background view has a layer object that provides the drawing and display of content behind it. The layer object is a rectangular area on the screen. In this embodiment, the layer object is generated according to the size of the background view, and the width and height coordinates of the layer object are adapted to the length and width of the background view.

[0096] S152. Set layer properties for the layer object;

[0097] In one embodiment of this application, layer attributes are set for a layer object. The interface attributes of the background view can be changed through the layer attributes. The layer attributes include at least one of the following: stroke color, fill color (no fill color is needed if it is hollow or a line), line width, percentage of the total path occupied by the start of the stroke (strokeStart), and percentage of the total path occupied by the end of the stroke (strokeEnd). The value range of strokeStart is [0,1], and the default value is 0. For example, if the start point is (0,0) and the end point is (100,0), if strokeStart is set to 0.5, then the start point is (50,0). Similarly, the value range of strokeEnd is [0,1], and the default value is 0. For example, if the start point is (0,0) and the end point is (100,0), if strokeEnd is set to 0.5, then the end point is (50,0).

[0098] S153. Draw the points to be drawn to obtain the path, and use the layer object to render and display the path on the background view to obtain the interface elements.

[0099] It's understandable that when multiple points need to be drawn, a path is drawn based on the coordinates of these points, passing through all of them. In one example, when drawing the path, the starting point is p0, and the path is drawn sequentially based on the coordinates of points p1, p2, and so on, ending at p3. Since the background view doesn't have a display function, the drawn path is projected onto the background view's layer object. The path is then displayed on the background view using the layer object's layer properties, resulting in the interface element. Figure 8 As shown, the interface elements with curves on the page, such as the "Homepage" control, the "doki" control, and the "Personal Center" control, are obtained.

[0100] In this embodiment, by setting layer properties for the layer object of the background view, the interface properties of the background view are enriched, and the path is drawn to the point to be drawn so that the path passes through all the points to be drawn. The path is then rendered and displayed on the background view through the layer object, so that the page can display the interface element.

[0101] In this embodiment, as Figure 9 As shown, Figure 9 This is a flowchart of an exemplary embodiment following step S150 in this embodiment. For example... Figure 9 As shown, after drawing the interface elements on the page, steps S161 to S162 are also included, which are described in detail below:

[0102] S161. Set different trigger events for different gesture operations for the background view.

[0103] It is understood that the background view can accept and process events. In this embodiment, different trigger events can be set for a background view corresponding to different gesture operations. For example, a click gesture corresponds to a page jump event, and a swipe gesture corresponds to a back event; such as... Figure 8 As shown, the current page corresponds to the "VIP Member" control. Clicking the "Home" control will navigate to the homepage interface, and swiping left on the "Home" control will exit the current page. When there are multiple background views on the page, different trigger events for gesture operations can be set for different background views, for example... Figure 8 In the current page, the corresponding interface element is the "VIP Member" control. When the interface element "Personal Center" control is clicked, the current page will jump to the display page corresponding to "Personal Center". When the interface element "Messages" control is clicked, the page for viewing messages will jump to the page.

[0104] S162. If a gesture operation is obtained from the interface element, trigger the trigger event corresponding to the input gesture operation.

[0105] When a user performs a gesture on the page, the location of the gesture is obtained. When the location is on a UI element, the background view receives the gesture and triggers the corresponding event.

[0106] For ease of understanding, such as Figure 10 As shown, this embodiment uses curves as an example to illustrate the method of drawing interface elements.

[0107] Create a TMFDrawCenter class to receive and process data returned from the server and manage the drawing of curves. TMFDrawCenter is a newly created class. The initialization method within this class configures OpenGL ES parameters, including double buffering, fixed pipeline, and 24-bit depth buffering. OpenGL ES (OpenGL for Embedded Systems) is a reduced subset of OpenGL (Open Graphics Library), a high-level 3D graphics API targeted at handheld and embedded devices, such as the currently popular smart terminals. It also supports desktop systems and is the foundation of the browser 3D graphics standard WebGL, supporting multiple platforms, such as desktop Linux and Windows, and mobile Android and iOS.

[0108] In TMFDrawCenter, the drawing data sent by the server is parsed by calling functions, and the background view of the rules is processed within TMFDrawCenter. Figure 4The vertex of each corner is indexed to determine the position area of ​​the background view. The size of the background view is determined from the position area based on the corner radius passed from the server. Then, the position information of the curve in the view hierarchy is defined in the page (position is used to specify the positioning of an element in the document; the top, right, bottom and left properties determine the final position of the element).

[0109] Based on the `position` field, the position where the curve needs to be drawn is determined, specifically using a Bézier curve. First, the `TMFDrawCenter` is used to detect if the page layout is complete. When `TMFDrawCenter` detects layout completion, it indicates the page layout is finished. The subviews of the current page are then iterated through, iterating through the data received from the server, and a new `View` is added to the page as the background view for drawing the Bézier curve. Point coordinates are then defined based on this background view. Specifically, five base points of type `CGPoint` are defined: p0, p1, p, p2, and p3. (The `CGPoint` type can be understood as a structure with x and y values, establishing a two-dimensional coordinate system with the top-left corner of the background view as the origin, the positive x-axis to the right, and the positive y-axis downwards). The width of the background view is W, the height is H, and the maximum width of the arc is `margin`. The coordinates are: p0(0, H), p1(W*0.5 - margin, H), p(W*0.5, 0), p2(W*0.5 + margin, H), and p3(W, H). By calling the moveToPoint method of path (Path is a class used to encapsulate geometric paths) (moveToPoint: set the starting point of the initial line segment) and passing in p0 (indicating that drawing is about to begin).

[0110] The Catmull-Rom algorithm is used to interpolate the point coordinates to calculate the drawing path. Specifically, these five points are packaged into NSValue objects (NSValue objects are simple containers used to store C or Objective-C data; they can store data of any type, such as int, float, char, and of course, pointers, structures, and object IDs; the goal of the NSValue class is to allow data structures of the above data types to be added to the collection) and placed into an array for two-dimensional traversal. The outer traversal is performed twice, and each traversal obtains the last four points (the four points are p0, p1, p2, and p3) for the Catmull-Rom algorithm to calculate the center point. Then, the inner four points are traversed n times (n can be preset, the default value is 100). Let the current number of times in the two-dimensional traversal be i, and use i / n as the t value to calculate the point to be drawn using the cubic interpolation function. The calculation process is as follows:

[0111] 1. Squaring and cubed t to generate tt. 2 and t 3 ;

[0112] 2. According to t 2 and t 3 Generate the transformed:

[0113] f0 = -0.5*t 3 +t 2 -0.5*t;

[0114] f1 = 1.5 * t 3 -2.5*t 2 +1.0;

[0115] f2 = -1.5 * t 3 +2.0*t 2 +0.5*t;

[0116] f3 = 0.5 * t 3 -0.5*t 2 ;

[0117] 3. Transform the input p0 to p3 to generate x and y:

[0118] x=p0.x*f0+p1.x*f1+p2.x*f2+p3.x*f3;

[0119] y=p0.y*f0+p1.y*f1+p2.y*f2+p3.y*f3;

[0120] The `CGPointMake` function (used to output the x and y values ​​of a point) generates the points to be drawn in the current iteration based on the x and y coordinates. The `addLineToPoint` function of the `path` class is called to generate the background view object layer, setting its width and height to the background view size, and setting the stroke color, fill color, line width, `strokeStart`, and `strokeEnd`. When drawing the points using OpenGL ES, the color buffer and stencil buffer from the previous OpenGL ES drawing are cleared first. Then, the `glDrawArrays` function in OpenGL ES (which provides drawing functionality; used when drawing graphics using vertex arrays, drawing based on the coordinate data in the vertex array and the specified pattern) is called to draw the corresponding points on the object layer. After setting the viewport size of the layer, a view model transformation is performed to obtain the image; this image corresponds to the drawn curve. Figure 11 As shown, the stock curve image is obtained by drawing the points to be drawn.

[0121] Add a tap gesture to the background view. The implementation of the gesture takes a block event as input, which represents the trigger event of the corresponding tap gesture. The pointInside function is overridden (to determine whether the current click or touch event occurs within the current view). The position of the user's click area is calculated. If the click area is not on the drawn curve, the pointInside function returns NO. Otherwise, the parent class's pointInside function is called to receive the user's click event and trigger the click event's trigger event.

[0122] It is worth noting that the APIs used on different devices (iOS and Android) are different. Different APIs are required to draw UI elements such as arcs, rounded corners, and curves on iOS and Android. However, the interface element drawing method provided in this example can draw interface elements on different operating systems by creating TMFDrawCenter, so as to solve the problem that two sets of APIs are currently required for drawing curves on mobile devices.

[0123] Currently, using the Quartz2D and SurfaceFlinger frameworks on pages with many rounded corners and arcs may cause off-screen rendering. The interface element drawing method provided in this example calculates the position of the curve drawing point at the CPU level using the Catmull-Rom algorithm and completes the rendering using OpenGL ES to solve the off-screen rendering problem of the GPU. Furthermore, the point coordinates in the two-dimensional coordinate system are associated with the width information of the background view and interface elements. By performing two-dimensional traversal of the point coordinates, the accuracy and comprehensiveness of the points to be drawn obtained by interpolation calculation are ensured. Then, the points to be drawn are rendered to draw interface elements on the page, so that the drawn interface elements can meet the desired effect and improve the performance of drawing curves.

[0124] The following describes an apparatus embodiment of this application, which can be used to execute the interface element drawing method in the above embodiments of this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the interface element drawing method described above.

[0125] Figure 12 A block diagram of an interface element drawing apparatus according to an embodiment of the present application is shown. The interface element drawing apparatus includes a parsing module 1210, a building module 1220, a traversal module 1230, an interpolation module 1240, and a drawing module 1250.

[0126] The parsing module 1210 is used to parse the drawing data corresponding to the interface elements to be drawn on the page to obtain the position information of the interface elements;

[0127] Module 1220 is used to create a background view for interface elements based on the location information. The background view is used to hold the drawn interface elements.

[0128] Traverse module 1230, set a two-dimensional coordinate system according to the background view, determine the coordinates of points in the two-dimensional coordinate system according to the size of the background view and the width information of the interface elements, and perform two-dimensional traversal on the coordinates of points in the two-dimensional coordinate system.

[0129] The interpolation module 1240 is used to perform interpolation calculations on the coordinates of the traversed points to obtain the points to be drawn during the two-dimensional traversal of the coordinates of points in the two-dimensional coordinate system.

[0130] The drawing module 1250 is used to render the points to be drawn in order to draw interface elements on the page.

[0131] In one embodiment of this application, based on the aforementioned scheme, the drawing data includes the vertices of the background view corresponding to the interface element and the rounded corner radius of the interface element. The parsing module 1210 is configured to index the vertices of the background view to determine the position area of ​​the background view corresponding to the interface element; determine the size of the background view from the position area according to the rounded corner radius of the interface element; and use the position corresponding to the size of the background view as the position information of the interface element.

[0132] In one embodiment of this application, based on the aforementioned scheme, the traversal module 1230 is configured to establish a two-dimensional coordinate system with the upper left corner of the background view as the origin, the positive direction of the horizontal axis of the two-dimensional coordinate system being horizontal to the right, and the positive direction of the vertical axis of the two-dimensional coordinate system being vertical downward; determine a reference point in the two-dimensional coordinate system according to the size of the background view and the width information of the interface elements, and determine multiple control points centered on the reference point; and put the reference point and control points into an array for two-dimensional traversal.

[0133] In one embodiment of this application, based on the aforementioned scheme, the traversal module 1230 performs an outer traversal of the array to obtain the coordinate parameters corresponding to each control point. The coordinate parameters include the horizontal coordinate value and the vertical coordinate value. Based on the coordinate parameters corresponding to each control point, the control point is traversed an inner traversal a preset number of times to obtain the coordinate value of each control point, and the current inner traversal number is recorded.

[0134] In one embodiment of this application, based on the aforementioned scheme, the interpolation module 1240 obtains the coordinate values ​​of each control point obtained during the inner traversal of the control points for a preset number of times, as well as the current inner traversal number; and performs interpolation calculation based on the current inner traversal number and the coordinate values ​​of each control point to obtain the coordinate values ​​of the point to be drawn.

[0135] In one embodiment of this application, based on the aforementioned scheme, the drawing module 1250 generates a layer object of the background view according to the size of the background view; sets layer attributes for the layer object, including at least one of stroke color, fill color, line width, percentage of the starting point of the stroke to the total path, and percentage of the ending point of the stroke to the total path; draws the points to be drawn to obtain the path, and uses the layer object to render and display the path on the background view to obtain the interface element.

[0136] In this embodiment, the interface drawing device further includes a trigger module, which is configured to set trigger events corresponding to different gesture operations for the background view; if a gesture operation input on an interface element is obtained, the trigger event corresponding to the input gesture operation is triggered.

[0137] The interface drawing device provided in this embodiment parses the drawing data corresponding to the interface elements to be drawn on the page to obtain the position information of the interface elements. Then, a background view can be established based on the position information of the interface elements. The background view is used to hold the interface elements to be drawn and can determine the display position of the interface elements to be drawn on the page. Then, a two-dimensional coordinate system is set based on the background view, and point coordinates are defined in the two-dimensional coordinate system by the size of the background view and the width information of the interface elements. During the two-dimensional traversal of the point coordinates, the traversed point coordinates are interpolated to obtain the point to be drawn. This associates the point coordinates with the width information of the background view and the interface elements. By performing two-dimensional traversal of the point coordinates, the accuracy and comprehensiveness of the point to be drawn obtained by the interpolation calculation are ensured. Then, the point to be drawn is rendered to draw the interface elements on the page so that the drawn interface elements can meet the desired effect.

[0138] It should be noted that the apparatus provided in the above embodiments and the method provided in the above embodiments belong to the same concept, and the specific way in which each module and unit performs operations has been described in detail in the method embodiments, and will not be repeated here.

[0139] Embodiments of this application also provide an electronic device, including one or more processors and a storage device, wherein the storage device is used to store one or more programs, which, when executed by one or more processors, enable the electronic device to implement the following interface element drawing method: parsing the drawing data corresponding to the interface element to be drawn on the page to obtain the position information of the interface element; establishing a background view for the interface element based on the position information, the background view being used to hold the drawn interface element; setting a two-dimensional coordinate system based on the background view, determining the point coordinates in the two-dimensional coordinate system based on the size of the background view and the width information of the interface element, and performing a two-dimensional traversal of the point coordinates in the two-dimensional coordinate system; during the two-dimensional traversal of the point coordinates in the two-dimensional coordinate system, interpolating the traversed point coordinates to obtain the point to be drawn; rendering the point to be drawn to draw the interface element on the page; for details, please refer to the above embodiments, which will not be repeated here.

[0140] Figure 13 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown.

[0141] It should be noted that, Figure 13 The computer system 1300 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0142] like Figure 13As shown, the computer system 1300 includes a Central Processing Unit (CPU) 1301, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 1302 or programs loaded from storage portion 1308 into Random Access Memory (RAM) 1303, such as performing the methods described in the above embodiments. Various programs and data required for system operation are also stored in RAM 1303. The CPU 1301, ROM 1302, and RAM 1303 are interconnected via bus 1304. An Input / Output (I / O) interface 1305 is also connected to bus 1304.

[0143] The following components are connected to I / O interface 1305: an input section 1306 including a keyboard, mouse, etc.; an output section 1307 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1308 including a hard disk, etc.; and a communication section 1309 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 1309 performs communication processing via a network such as the Internet. A drive 1310 is also connected to I / O interface 1305 as needed. Removable media 1311, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1310 as needed so that computer programs read from them can be installed into storage section 1308 as needed.

[0144] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program including a computer program for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 1309, and / or installed from removable medium 1311. When the computer program is executed by central processing unit (CPU) 1301, it performs various functions defined in the system of this application.

[0145] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying a computer-readable computer program. The transmitted data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The computer program contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0146] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0147] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0148] Another aspect of this application provides a computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the method described above. This computer-readable storage medium may be included in the electronic device described in the above embodiments, or it may exist independently and not assembled into the electronic device.

[0149] Another aspect of this application provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the above embodiments as follows: parsing the drawing data corresponding to the interface element to be drawn on the page to obtain the position information of the interface element; establishing a background view for the interface element based on the position information, the background view being used to hold the drawn interface element; setting a two-dimensional coordinate system based on the background view, determining the point coordinates in the two-dimensional coordinate system based on the size of the background view and the width information of the interface element, and performing a two-dimensional traversal of the point coordinates in the two-dimensional coordinate system; during the two-dimensional traversal of the point coordinates in the two-dimensional coordinate system, interpolating the traversed point coordinates to obtain the point to be drawn; and rendering the point to be drawn to draw the interface element on the page; for details, please refer to the above embodiments, which will not be repeated here.

[0150] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of this application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0151] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiments of this application.

[0152] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein.

[0153] The above description is merely a preferred exemplary embodiment of this application and is not intended to limit the implementation of this application. Those skilled in the art can easily make corresponding modifications or alterations based on the main concept and spirit of this application. Therefore, the scope of protection of this application should be determined by the scope of protection claimed in the claims.

Claims

1. A method for drawing interface elements, characterized in that, The method includes: The drawing data corresponding to the interface elements to be drawn on the page is parsed to obtain the position information of the interface elements; A background view is created for the interface element based on the location information, and the background view is used to hold the drawn interface element; A two-dimensional coordinate system is set according to the background view. A reference point and its coordinate parameters are determined in the two-dimensional coordinate system according to the size of the background view and the width information of the interface elements. Multiple control points centered on the reference point and their coordinate parameters are also determined. The coordinate parameters include horizontal coordinate values ​​and vertical coordinate values. Place the reference point and the control point into an array; perform an outer traversal of the array to determine the coordinate parameters of the four target points corresponding to the current outer traversal according to the arrangement order of the array, wherein the four target points are the points in the array; Based on the four target points corresponding to the current outer traversal, an inner traversal of a preset number n is performed, and the current inner traversal number i is recorded at each inner traversal. The interpolation parameter t is determined based on the current inner traversal number i and the preset number n, where t = i / n. Catmull-Rom interpolation is performed based on the interpolation parameter t and the coordinate parameters of the four target points corresponding to the current outer traversal to obtain the coordinate values ​​of the point to be drawn corresponding to the current inner traversal. The points to be drawn are rendered to draw the interface elements on the page.

2. The method according to claim 1, characterized in that, The drawing data includes the vertices of the background view corresponding to the interface element, and the corner radius of the interface element; parsing the drawing data corresponding to the interface element to be drawn on the page to obtain the position information of the interface element includes: The vertices of the background view are indexed to determine the position area of ​​the background view corresponding to the interface element; The size of the background view is determined from the location region based on the corner radius of the interface element; The position corresponding to the size of the background view is used as the position information of the interface element.

3. The method according to claim 1, characterized in that, The step of setting a two-dimensional coordinate system based on the background view includes: A two-dimensional coordinate system is established with the upper left corner of the background view as the origin. The positive direction of the horizontal axis of the two-dimensional coordinate system is horizontal to the right, and the positive direction of the vertical axis of the two-dimensional coordinate system is vertical downward.

4. The method according to claim 1, characterized in that, The rendering process of the point to be drawn, in order to draw the interface element on the page, includes: Generate a layer object for the background view based on the dimensions of the background view; Set layer properties for the layer object, the layer properties including at least one of stroke color, fill color, line width, percentage of the total path at the start of the stroke, and percentage of the total path at the end of the stroke; The path is obtained by drawing the points to be drawn, and the path is rendered and displayed on the background view using the layer object to obtain the interface element.

5. The method according to any one of claims 1-4, characterized in that, After rendering the point to be drawn to draw the interface element on the page, the method further includes: Set different trigger events for different gesture operations for the background view; If a gesture operation is detected on the interface element, the trigger event corresponding to the input gesture operation is triggered.

6. A device for drawing interface elements, characterized in that, include: The parsing module is used to parse the drawing data corresponding to the interface elements to be drawn on the page to obtain the position information of the interface elements; A module is established to create a background view for the interface element based on the location information, wherein the background view is used to hold the drawn interface element; The traversal module is used to set a two-dimensional coordinate system according to the background view, determine a reference point and its coordinate parameters in the two-dimensional coordinate system according to the size of the background view and the width information of the interface elements, and determine multiple control points centered on the reference point and their coordinate parameters; put the reference point and the control points into an array; perform an outer traversal on the array to determine the coordinate parameters of the four target points corresponding to the current outer traversal according to the arrangement order of the array, wherein the four target points are the points in the array; Based on the four target points corresponding to the current outer traversal, an inner traversal is performed for a preset number of times n. The current inner traversal number i is recorded during each inner traversal. The interpolation parameter t is determined based on the current inner traversal number i and the preset number n, where t = i / n. The coordinate parameter includes the horizontal coordinate value and the vertical coordinate value. The interpolation module is used to perform Catmull-Rom interpolation calculation based on the interpolation parameter t and the coordinate parameters of the four target points corresponding to the current outer traversal, so as to obtain the coordinate values ​​of the point to be drawn corresponding to the current inner traversal. The drawing module is used to render the points to be drawn in order to draw the interface elements on the page.

7. An electronic device, characterized in that, include: One or more processors; A storage device for storing one or more programs, which, when executed by the one or more processors, cause the electronic device to perform the method as described in any one of claims 1-5.

8. A computer-readable storage medium, characterized in that, It stores computer-readable instructions that, when executed by the processor of a computer, cause the computer to perform the method described in any one of claims 1-5.

9. A computer program product comprising computer instructions, characterized in that, When the computer instructions are executed by the processor, they implement the method described in any one of claims 1-5.

Images