Graph drawing method and device in applet, storage medium and electronic equipment

Abstract

The invention relates to the technical field of computers, and provides a graph drawing method in an applet, a graph drawing device in the applet, a computer storage medium and electronic device.The graph drawing method in the applet comprises the steps that template information corresponding to a to-be-drawn graph template is obtained; the template information comprises a template identifier corresponding to the graphic template, drawing data required for drawing the graphic template and a canvas identifier, and the canvas identifier is an identifier for drawing a canvas object of the graphic template; determining a drawing method set corresponding to the graphic template according to the template identifier and a pre-configured mapping relationship between the template identifier and the drawing method set; and drawing the graphic template in the canvas object based on a drawing method set corresponding to the graphic template in combination with the drawing data. According to the method, the graph drawing efficiency can be improved.

Description

Background Art

[0002] Canvas API is a new tag added in HTML5 that is used to generate images in real time on web pages and can manipulate image content. Basically, it is a bitmap that can be manipulated with JavaScript.

[0003] In the related art, when Canvas drawing is used in a mini-program, when multiple similar Canvas drawing operations need to be implemented in one page at the same time, or when multiple pages need to implement similar multiple Canvas drawing operations, each graphic can only be drawn one by one.

[0004] In view of this, there is an urgent need in the art to develop a new method and device for drawing graphics in a small program.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure. Summary of the invention

[0006] The purpose of the present disclosure is to provide a graphics drawing method in a mini-program, a graphics drawing device in a mini-program, a computer storage medium and an electronic device, thereby overcoming the technical problem of low graphics drawing efficiency caused by the limitations of related technologies to at least a certain extent.

[0007] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by the practice of the present disclosure.

[0008] According to a first aspect of the present disclosure, a method for drawing graphics in a mini-program is provided, comprising:

[0009] Acquire template information corresponding to the graphic template to be drawn; the template information includes a template identifier corresponding to the graphic template, drawing data required to draw the graphic template, and a canvas identifier, wherein the canvas identifier is an identifier of a canvas object used to draw the graphic template;

[0010] Determining the drawing method set corresponding to the graphic template according to the mapping relationship between the template identifier, the pre-configured template identifier and the drawing method set;

[0011] Based on the drawing method set corresponding to the graphic template and the drawing data, the graphic template is drawn in the canvas object.

[0012] In an exemplary embodiment of the present disclosure, the mapping relationship between the template identifier and the drawing method set is configured in the following manner:

[0013] Acquire a plurality of pre-screened standard graphic templates; each of the standard graphic templates corresponds to a template identifier;

[0014] According to the style features of the display elements contained in each of the standard graphic templates, a drawing method set corresponding to each of the standard graphic templates is configured;

[0015] The mapping relationship between the template identifier of each standard graphic template and its drawing method set is stored.

[0016] In an exemplary embodiment of the present disclosure, configuring a drawing method set corresponding to each standard graphic template according to the style features of the display elements included in each standard graphic template includes:

[0017] Screening out first-category display elements and second-category display elements from the display elements included in each standard graphic template; wherein the drawing complexity of the second-category display elements is higher than the drawing complexity of the first-category display elements;

[0018] Obtaining a canvas original application programming interface method required to be called for drawing the first type of display elements, and obtaining a tool class method required to be called for drawing the second type of display elements;

[0019] The canvas original application programming interface method and the tool class method are integrated to obtain a drawing method set corresponding to each standard graphic template.

[0020] In an exemplary embodiment of the present disclosure, the tool class method required to draw the second type of display element is configured in the following manner:

[0021] Obtain at least two canvas original application programming interface methods required to draw the second type of display elements;

[0022] The at least two canvas original application programming interface methods are encapsulated to obtain the tool class method.

[0023] In an exemplary embodiment of the present disclosure, drawing the graphic template in the canvas object based on the drawing method set corresponding to the graphic template in combination with the drawing data includes:

[0024] According to the drawing requirements of the graphic template, performing data verification on the drawing data;

[0025] In response to a result of the data verification being passed, the graphic template is drawn in the canvas object based on a drawing method set corresponding to the graphic template in combination with the drawing data.

[0026] In an exemplary embodiment of the present disclosure, the type of data verification includes any one or more of the following: null value verification, data integrity verification, and website validity verification.

[0027] In an exemplary embodiment of the present disclosure, drawing the graphic template in the canvas object based on the drawing method set corresponding to the graphic template in combination with the drawing data includes:

[0028] Based on the drawing method set corresponding to the graphic template and the drawing data, input the canvas object to obtain a drawing result;

[0029] The drawing result includes a resource access address corresponding to the graphic template.

[0030] According to a second aspect of the present disclosure, a graphics drawing device in a mini-program is provided, comprising:

[0031] A template information receiving module, used to obtain template information corresponding to a graphic template to be drawn; the template information includes a template identifier corresponding to the graphic template, drawing data required to draw the graphic template, and a canvas identifier, wherein the canvas identifier is an identifier of a canvas object used to draw the graphic template;

[0032] A drawing method set search module, used to determine the drawing method set corresponding to the graphic template according to the mapping relationship between the template identifier, the pre-configured template identifier and the drawing method set;

[0033] A graphics drawing module is used to draw the graphics template in the canvas object based on a drawing method set corresponding to the graphics template in combination with the drawing data.

[0034] According to a third aspect of the present disclosure, a computer storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the graphics drawing method in the applet described in the first aspect is implemented.

[0035] According to a fourth aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute the graphics drawing method in the applet described in the first aspect above by executing the executable instructions.

[0036] It can be seen from the above technical solutions that the graphics drawing method in the applet, the graphics drawing device in the applet, the computer storage medium and the electronic device in the exemplary embodiments of the present disclosure have at least the following advantages and positive effects:

[0037] In the technical solutions provided by some embodiments of the present disclosure, by pre-configuring the mapping relationship between the template and the drawing method set, when the graphic template needs to be drawn subsequently, its drawing method set can be quickly obtained directly according to the template identifier of the graphic template, so that in the subsequent graphic drawing process, there is no need to define the drawing method one by one to repeat the detailed drawing process of the graphic template. It is only necessary to directly call the configured drawing method set to achieve fast graphics drawing, so that the drawing method corresponding to the graphic template can be reused and directly called when needed by other pages of the system, thereby avoiding many repeated copy and paste work, simplifying the graphic drawing steps, and improving the graphics drawing efficiency. It is particularly suitable for scenarios where multiple similar graphics need to be drawn in one page at the same time or multiple pages need to achieve similar multiple graphics drawing.

[0038] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The accompanying drawings herein are incorporated into the specification and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification are used to explain the principles of the present disclosure. Obviously, the accompanying drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without creative work.

[0040] Figure 1 A schematic diagram showing a flow chart of a method for drawing graphics in a mini-program according to an embodiment of the present disclosure;

[0041] Figure 2-Figure 7 A schematic diagram showing a standard graphic template selected in an embodiment of the present disclosure;

[0042] Figure 8 A flowchart showing how to configure a mapping relationship between a template identifier and a drawing method set in an embodiment of the present disclosure;

[0043] Fig. 9 A flowchart showing how to configure a drawing method set corresponding to each standard graphic template according to the style features of the display elements included in each standard graphic template in an embodiment of the present disclosure;

[0044] Fig.10 A schematic diagram showing the overall process of configuring the mapping relationship between the template identifier and the drawing method set in the embodiment of the present disclosure;

[0045] Fig.11 A schematic diagram showing the overall process of graphics drawing in a mini-program in an embodiment of the present disclosure;

[0046] Fig.12 Show the above Fig.11 Schematic diagram of the processing flow included in step S1104;

[0047] Fig.13 A schematic diagram showing the structure of a graphics drawing device in a small program in an exemplary embodiment of the present disclosure;

[0048] Fig.14 A schematic structural diagram of an electronic device in an exemplary embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0049] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as being limited to the examples set forth herein; on the contrary, these embodiments are provided so that the present disclosure will be more comprehensive and complete, and the concepts of the example embodiments are fully conveyed to those skilled in the art. The described features, structures, or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known technical solutions are not shown or described in detail to avoid obscuring various aspects of the present disclosure.

[0050] The terms "a", "an", "the" and "said" are used in this specification to indicate the presence of one or more elements / components / etc.; the terms "including" and "having" are used to express an open-ended inclusion and mean that additional elements / components / etc. may exist in addition to the listed elements / components / etc.; the terms "first" and "second" etc. are used only as labels and are not intended to limit the quantity of their objects.

[0051] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings represent the same or similar parts, and their repeated descriptions will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities.

[0052] Canvas is the Chinese name for "canvas", which is the "container" of all UI components in the game. In a scene, multiple Canvas objects can exist, and Canvas can be "nested". It should be noted that any UI object in the scene must be a "child" of a Canvas object.

[0053] Canvas is a drawable area defined by HTML code with height and width attributes. JavaScript code can access this area, similar to other general 2D APIs, and dynamically generate graphics through a complete set of drawing functions.

[0054] At present, when multiple similar graphics need to be drawn in one page at the same time, or when multiple pages need to draw similar graphics, they need to be drawn one by one according to the existing technology. Obviously, this solution will lead to the following series of problems:

[0055] First, it lacks flexibility. If you add a new graphics template or want to change an existing one, you must go deep into the function to implement it, which violates the open-closed principle.

[0056] Second, the reusability is poor. If another page is added to the applet, and this page also needs to make some similar drawing method calls, it is likely that these verification logics will be copied everywhere.

[0057] Third, the function is relatively large. When the page business scenario is more complex, the drawing function will be larger.

[0058] In the embodiments of the present disclosure, firstly, a method for drawing graphics in a small program is provided, which overcomes the defect of low efficiency in the related art at least to a certain extent.

[0059] Figure 1 A flowchart showing a method for drawing graphics in a small program in an embodiment of the present disclosure is shown. Figure 1 According to an embodiment of the present disclosure, a graphics drawing method in a small program includes the following steps:

[0060] Step S110, obtaining template information corresponding to the graphic template to be drawn; the template information includes a template identifier corresponding to the graphic template, drawing data required for drawing the graphic template, and a canvas identifier, where the canvas identifier is an identifier of a canvas object used to draw the graphic template;

[0061] Step S120, determining the drawing method set corresponding to the graphic template according to the template identifier, the mapping relationship between the pre-configured template identifier and the drawing method set;

[0062] Step S130 , drawing the graphic template in the canvas object based on the drawing method set corresponding to the graphic template and the drawing data.

[0063] exist Figure 1In the technical solution provided by the illustrated embodiment, the present disclosure pre-configures the mapping relationship between the template and the drawing method set, so that when the graphic template needs to be drawn subsequently, its drawing method set can be quickly obtained directly according to the template identifier of the graphic template, so that in the subsequent graphic drawing process, there is no need to define the drawing method one by one to repeat the detailed drawing process of the graphic template. It is only necessary to directly call the configured drawing method set to achieve fast graphic drawing, so that the drawing method corresponding to the graphic template can be reused and directly called when needed by other pages of the system, thereby avoiding many repeated copy and paste work, simplifying the graphic drawing steps, and improving the graphic drawing efficiency. It is particularly suitable for scenarios where multiple similar graphic drawing needs to be implemented in one page at the same time or multiple pages need to implement similar multiple graphic drawing.

[0064] The following Figure 1 The specific implementation process of each step is described in detail:

[0065] Before step S110, it should be noted that the present disclosure can pre-screen a plurality of standard graphic templates, and the standard graphic templates can be graphics that are frequently used in subsequent graphic drawing processes.

[0066] Exemplarily, multiple target graphics that meet preset conditions can be screened out from historically drawn graphics or graphics to be drawn as standard graphic templates. Optionally, the target graphics can be target graphics whose historical drawing frequency is higher than a preset frequency threshold screened out from historically drawn graphics, or multiple target graphics whose similarity is higher than a similarity threshold screened out from graphics to be drawn. The setting can be made according to actual conditions, and the present disclosure does not make any special limitation on this.

[0067] Exemplary, reference Figure 2-Figure 7 , Figure 2-Figure 7 A schematic diagram of six standard graphic templates screened out in the embodiment of the present disclosure is shown, and specifically a schematic diagram of multiple standard graphic templates determined based on multiple graphics to be drawn with high similarity is shown. By screening these standard graphic templates and configuring a set of drawing methods required to draw these standard graphic templates, it is possible to eliminate the need to define drawing methods one by one in the subsequent graphic drawing process to repeat the detailed drawing process of the graphic template, and quick drawing can be achieved by directly calling the drawing method set.

[0068] After filtering out the standard graphic templates, given that each standard graphic template corresponds to a different display style, for example, different pictures to be displayed, different titles, different price positions of items to be displayed, etc., it is necessary to define a unique template identifier for each standard graphic template and configure the mapping relationship between the template identifier and its drawing method set.

[0069] refer to Figure 8 , Figure 8 A flowchart showing how to configure a mapping relationship between a template identifier and a drawing method set in an embodiment of the present disclosure includes steps S801 to S803:

[0070] In step S801, a plurality of pre-screened standard graphic templates are obtained.

[0071] In this step, after screening out multiple standard graphic templates, the multiple pre-screened standard graphic templates can be obtained. Each standard graphic template can contain multiple display elements. Exemplarily, the display elements can be pictures, rounded rectangles, straight lines, circles, texts, etc., which can be set according to actual conditions. The present disclosure does not make any special limitations on this.

[0072] In step S802, a drawing method set corresponding to each standard graphic template is configured according to the style features of the display elements included in each standard graphic template.

[0073] In this step, refer to Fig. 9 , Fig. 9 A flowchart showing how to configure a drawing method set corresponding to each standard graphic template according to the style features of the display elements included in each standard graphic template in an embodiment of the present disclosure includes steps S901 to S903:

[0074] In step S901, first-category display elements and second-category display elements are screened out from display elements included in each standard graphic template.

[0075] In this step, the first category display elements and the second category display elements may be screened out from the display elements included in each standard graphic template.

[0076] It should be noted that in mini programs, the API of canvas is subject to many restrictions, which causes many inconveniences in daily development. Each development needs to call each API again, which is repetitive and ineffective. Take drawing a rounded rectangle in the canvas as an example. You need to use the canvas.setStrokeStyle method to set the color of the rectangle frame line, use the canvas.lineTo method to determine the starting and ending points of the rectangle line (determine the rectangle vertex), use the canvas.moveTo method to connect the two points (connect the 4 vertices of the rectangle), use the canvas.setStrokeStyle method to set the color of the rounded line, use the canvas.stroke or canvas.fill method to set the background color of the rectangle, use the canvas.ar method to set the rounded size of the rounded rectangle in the canvas, and use the canvas.beginPath and canvas.closePath methods to draw the rounded rectangle before the drawing is completed. This results in that each time you draw a rounded rectangle, you need to call each of the above APIs, which is repetitive and ineffective.

[0077] Thus, the present application can filter out the second category of display elements with higher drawing complexity from the above-mentioned display elements (for example, the above-mentioned rounded rectangle that needs to call the canvas raw application programming interface method multiple times during the drawing process), and filter out the first category of display elements with lower drawing complexity (for example, elements that can be quickly drawn by directly calling the canvas raw application programming interface method once during the drawing process, such as points).

[0078] In step S902, the canvas original application programming interface method required to draw the first type of display elements is obtained, and the tool class method required to draw the second type of display elements is configured.

[0079] In this step, for the above-mentioned first-category display element, the present disclosure can directly obtain the canvas original application programming interface method required to draw the first-category display element.

[0080] For the above-mentioned second type of display elements, the present disclosure can obtain at least two canvas original application programming interface methods required to draw the second type of display elements, and then encapsulate the at least two canvas original application programming interface methods to obtain tool class methods. Exemplarily, the tool class methods pre-encapsulated in the present disclosure may include: tool class methods corresponding to drawing rounded rectangles, tool class methods corresponding to batch loading pictures, tool class methods corresponding to cropping pictures, tool class methods corresponding to automatic line wrapping of multi-line text, etc., which can be set according to actual conditions, and the present disclosure does not make special restrictions on this.

[0081] By encapsulating to form the above-mentioned tool class method, multiple conditional selection statements can be effectively avoided, the drawing function can be prevented from being too large, and a lot of repetitive work can be saved in the subsequent graphics drawing process.

[0082] In step S903, the canvas original application programming interface method and the tool class method are integrated to obtain a drawing method set corresponding to each standard graphic template.

[0083] In this step, after obtaining the canvas original application programming interface method corresponding to the first type of display element and the tool class method corresponding to the second type of display element, the canvas original application programming interface method and the tool class method can be integrated to obtain a drawing method set corresponding to each standard graphic template.

[0084] Next reference Figure 8 In step S803, a mapping relationship between the template identifier of each standard graphic template and its drawing method set is stored.

[0085] In this step, the mapping relationship between the template identifier of each standard graphic template and its drawing method set may be stored to obtain the mapping relationship between the template identifiers of multiple standard graphic templates and multiple drawing method sets.

[0086] It should be noted that, in subsequent preset intervals, new standard graphic templates can be screened out again, and based on Figure 8 The step of configuring the drawing method set corresponding to the new standard graphic template is performed to continuously update the mapping relationship between the template identifiers of the above-mentioned multiple standard graphic templates and the multiple drawing method sets.

[0087] refer to Fig.10 , Fig.10 The overall flow diagram showing how to configure the mapping relationship between the template identifier and the drawing method set in the embodiment of the present disclosure includes steps S1001 to S1006:

[0088] In step S1001, start;

[0089] In step S1002, a template ID corresponding to a standard graphic template is defined;

[0090] In step S1003, the native API method corresponding to each standard graphic template is determined;

[0091] In step S1004, a tool class method corresponding to each standard graphic template is configured;

[0092] In step S1005, a drawing method set corresponding to each standard graphic template is generated;

[0093] In step S1006, end.

[0094] After configuring the above mapping relationship, when the business caller needs to draw a certain standard graphic template, it does not need to draw each element step by step as in the prior art, but can directly execute steps S110 to S130 in the present disclosure to improve the efficiency of graphic drawing.

[0095] Next reference Figure 1 In step S110, template information corresponding to the graphic template to be drawn is obtained.

[0096] In this step, the template information corresponding to the graphic template to be drawn uploaded by the business caller can be obtained. The above template information can include the template identifier (template ID) corresponding to the graphic template and the drawing data data required to draw the graphic template. The above template information can also include the identifier canvasId of the canvas object used to draw the graphic template. CanvasId is the id of the canvas tag in the wxml file, which is used to obtain the canvas object.

[0097] Exemplarily, the drawing data may include element information to be displayed in the graphic template, such as pictures of items to be displayed, titles of items to be displayed, prices of items to be displayed, etc., which may be set according to actual conditions, and the present disclosure does not impose any special limitation on this.

[0098] In step S120, the drawing method set corresponding to the graphic template is determined according to the mapping relationship between the template identifier, the pre-configured template identifier and the drawing method set.

[0099] In this step, the mapping relationship between the pre-configured template identifier and the drawing method set may be searched according to the template identifier to obtain the drawing method set corresponding to the graphic template to be drawn.

[0100] In step S130, the graphic template is drawn in the canvas object based on the drawing method set corresponding to the graphic template in combination with the drawing data.

[0101] In this step, the drawing data can be first verified according to the drawing requirements of the above-mentioned graphic template. Exemplarily, the data verification type can include any one or more of the following: null value verification (i.e., verifying whether the data is null), data integrity verification (i.e., verifying whether the data is complete and not missing), and website validity verification (i.e., verifying whether the website can be successfully accessed). It should be noted that during the verification process, if any verification process fails, there is no need to execute subsequent related processes, and the verification failure prompt can be directly returned.

[0102] If the result of data verification is passed, the graphic template can be drawn in the canvas object based on the drawing method set corresponding to the graphic template and the drawing data. Specifically, the above drawing method and drawing data can be input into the obtained canvas object to obtain the drawing result. After obtaining the drawing result, other business processing processes can be performed on this basis according to business needs.

[0103] The drawing result may be a URL address corresponding to the graphic template, through which the drawn graphic template can be located. A URL (Uniform Resource Locator) is a website address indicating the location of an image. A URL is a concise identifier of the location and access method of a resource available on the Internet. It is the address of a standard resource on the Internet. Each file on the Internet has a unique URL, which contains information indicating the location of the file and how the browser should handle it.

[0104] refer to Fig.11 , Fig.11 The overall flow diagram of graphics drawing in the mini-program in the embodiment of the present disclosure is shown, including steps S1101 to S1106:

[0105] In step S1101, start;

[0106] In step S1102, a canvas tag is added to the page wxml file;

[0107] In step S1103, drawing data processing;

[0108] In step S1104, the drawing method set corresponding to the template identifier is called to obtain a drawing result;

[0109] In step S1105, other related logics in the page are processed based on the drawing result;

[0110] In step S1106, end.

[0111] refer to Fig.12 , Fig.12 Show the above Fig.11 The processing flow diagram of step S1104 in the embodiment includes steps S1201 to S1205:

[0112] In step S1201, start;

[0113] In step S1202, the template information corresponding to the graphic template to be drawn, which is passed in by the service caller, is obtained. The template information includes canvasID, template ID and drawing data data;

[0114] In step S1203, the drawing method set corresponding to the template ID is called;

[0115] In step S1204, the drawing result is exported as a picture URL;

[0116] In step S1205, end.

[0117] Based on the above technical solutions, the present disclosure has at least the following technical effects:

[0118] First, the present disclosure independently encapsulates the drawing methods corresponding to each graphic template, making them easy to switch, easy to understand, easy to expand, and increasing flexibility;

[0119] Second, the drawing method in the present disclosure can be reused and directly called when needed by other pages of the system, thereby avoiding many repeated copy and paste tasks;

[0120] Third, the present disclosure utilizes technologies such as combination, delegation, and polymorphism to effectively avoid multiple conditional selection statements and prevent the drawing function from being too large.

[0121] The present disclosure also provides a graphics drawing device in a small program, Fig.13 A schematic diagram showing the structure of a graphics drawing device in a small program in an exemplary embodiment of the present disclosure; Fig.13 As shown, the graphics drawing device 1300 in the applet may include a template information receiving module 1310, a drawing method set search module 1320 and a graphics drawing module 1330. Among them:

[0122] The template information receiving module 1310 is used to obtain the template information corresponding to the graphic template to be drawn; the template information includes the template identifier corresponding to the graphic template, the drawing data required to draw the graphic template, and the canvas identifier, and the canvas identifier is the identifier of the canvas object used to draw the graphic template;

[0123] A drawing method set search module 1320, configured to determine the drawing method set corresponding to the graphic template according to the mapping relationship between the template identifier, the pre-configured template identifier and the drawing method set;

[0124] The graphic drawing module 1330 is used to draw the graphic template in the canvas object based on the drawing method set corresponding to the graphic template and the drawing data.

[0125] In an exemplary embodiment of the present disclosure, the mapping relationship between the template identifier and the drawing method set is configured in the following manner:

[0126] Acquire a plurality of pre-screened standard graphic templates; each of the standard graphic templates corresponds to a template identifier;

[0127] According to the style features of the display elements contained in each of the standard graphic templates, a drawing method set corresponding to each of the standard graphic templates is configured;

[0128] The mapping relationship between the template identifier of each standard graphic template and its drawing method set is stored.

[0129] In an exemplary embodiment of the present disclosure, the drawing method set search module 1320 configures a drawing method set corresponding to each standard graphic template according to the style features of the display elements included in each standard graphic template, including:

[0130] Screening out first-category display elements and second-category display elements from the display elements included in each standard graphic template; wherein the drawing complexity of the second-category display elements is higher than the drawing complexity of the first-category display elements;

[0131] Obtaining a canvas original application programming interface method required to be called for drawing the first type of display elements, and obtaining a tool class method required to be called for drawing the second type of display elements;

[0132] The canvas original application programming interface method and the tool class method are integrated to obtain a drawing method set corresponding to each standard graphic template.

[0133] In an exemplary embodiment of the present disclosure, the tool class method required to draw the second type of display element is configured in the following manner:

[0134] Obtain at least two canvas original application programming interface methods required to draw the second type of display elements;

[0135] The at least two canvas original application programming interface methods are encapsulated to obtain the tool class method.

[0136] In an exemplary embodiment of the present disclosure, the graphics drawing module 1330 draws the graphics template in the canvas object based on the drawing method set corresponding to the graphics template in combination with the drawing data, including:

[0137] According to the drawing requirements of the graphic template, performing data verification on the drawing data;

[0138] In response to a result of the data verification being passed, the graphic template is drawn in the canvas object based on a drawing method set corresponding to the graphic template in combination with the drawing data.

[0139] In an exemplary embodiment of the present disclosure, the type of data verification includes any one or more of the following: null value verification, data integrity verification, and website validity verification.

[0140] In an exemplary embodiment of the present disclosure, the graphics drawing module 1330 draws the graphics template in the canvas object based on the drawing method set corresponding to the graphics template in combination with the drawing data, including:

[0141] Based on the drawing method set corresponding to the graphic template and the drawing data, input the canvas object to obtain a drawing result;

[0142] The drawing result includes a resource access address corresponding to the graphic template.

[0143] The specific details of each module in the graphics drawing device in the above-mentioned applet have been described in detail in the graphics drawing method in the corresponding applet, so they will not be repeated here.

[0144] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0145] In addition, although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0146] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a mobile terminal, or a network device, etc.) to execute the method according to the implementation of the present disclosure.

[0147] The present application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device.

[0148] The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0149] Computer-readable storage media can send, propagate or transmit programs for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable storage medium can be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0150] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by an electronic device, the electronic device implements the method described in the above embodiments.

[0151] In addition, an electronic device capable of implementing the above method is also provided in an embodiment of the present disclosure.

[0152] Those skilled in the art will appreciate that various aspects of the present disclosure may be implemented as systems, methods or program products. Therefore, various aspects of the present disclosure may be specifically implemented in the following forms, namely: complete hardware implementation, complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which may be collectively referred to herein as "circuits", "modules" or "systems".

[0153] Refer to the following Fig.14 1400 according to this embodiment of the present disclosure is described. Fig.14 The electronic device 1400 shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0154] like Fig.14As shown, the electronic device 1400 is in the form of a general computing device. The components of the electronic device 1400 may include, but are not limited to: the at least one processing unit 1410, the at least one storage unit 1420, a bus 1430 connecting different system components (including the storage unit 1420 and the processing unit 1410), and a display unit 1440.

[0155] The storage unit stores program codes, which can be executed by the processing unit 1410, so that the processing unit 1410 performs the steps according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of this specification. For example, the processing unit 1410 can perform the following steps: Figure 1 As shown in: Step S110, obtaining template information corresponding to the graphic template to be drawn; the template information includes a template identifier corresponding to the graphic template, drawing data required for drawing the graphic template, and a canvas identifier, and the canvas identifier is an identifier of a canvas object used to draw the graphic template; Step S120, determining a drawing method set corresponding to the graphic template according to a mapping relationship between the template identifier, a pre-configured template identifier and a drawing method set; Step S130, drawing the graphic template in the canvas object based on the drawing method set corresponding to the graphic template in combination with the drawing data.

[0156] The storage unit 1420 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 14201 and / or a cache storage unit 14202 , and may further include a read-only storage unit (ROM) 14203 .

[0157] The storage unit 1420 may also include a program / utility 14204 having a set (at least one) of program modules 14205, such program modules 14205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0158] Bus 1430 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0159] The electronic device 1400 may also communicate with one or more external devices 1500 (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 1400, and / or communicate with any device that enables the electronic device 1400 to communicate with one or more other computing devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 1450. Furthermore, the electronic device 1400 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) via a network adapter 1460. As shown, the network adapter 1460 communicates with other modules of the electronic device 1400 via a bus 1430. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 1400, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0160] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure. The specification and examples are to be considered as exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims.

Claims

1. A graphics drawing method in a small program, characterized in that: include: Acquire template information corresponding to the graphic template to be drawn; the template information includes a template identifier corresponding to the graphic template, drawing data required to draw the graphic template, and a canvas identifier, wherein the canvas identifier is an identifier of a canvas object used to draw the graphic template; Determining the drawing method set corresponding to the graphic template according to the mapping relationship between the template identifier, the pre-configured template identifier and the drawing method set; Based on the drawing method set corresponding to the graphic template and the drawing data, the graphic template is drawn in the canvas object.

2. The method according to claim 1, characterized in that The mapping relationship between the template identifier and the drawing method set is obtained by configuring in the following way: Acquire a plurality of pre-screened standard graphic templates; each of the standard graphic templates corresponds to a template identifier; According to the style features of the display elements contained in each of the standard graphic templates, a drawing method set corresponding to each of the standard graphic templates is configured; The mapping relationship between the template identifier of each standard graphic template and its drawing method set is stored.

3. The method according to claim 2, characterized in that The step of configuring a drawing method set corresponding to each standard graphic template according to the style features of the display elements contained in each standard graphic template includes: Screening out first-category display elements and second-category display elements from the display elements included in each standard graphic template; wherein the drawing complexity of the second-category display elements is higher than the drawing complexity of the first-category display elements; Obtaining a canvas original application programming interface method required to be called for drawing the first type of display elements, and obtaining a tool class method required to be called for drawing the second type of display elements; The canvas original application programming interface method and the tool class method are integrated to obtain a drawing method set corresponding to each standard graphic template.

4. The method according to claim 3, characterized in that The tool class method required to draw the second type of display element is configured in the following way: Obtain at least two canvas original application programming interface methods required to draw the second type of display elements; The at least two canvas original application programming interface methods are encapsulated to obtain the tool class method.

5. The method according to any one of claims 1 to 4, characterized in that: The drawing method set corresponding to the graphic template combined with the drawing data, drawing the graphic template in the canvas object, comprises: According to the drawing requirements of the graphic template, performing data verification on the drawing data; In response to a result of the data verification being passed, the graphic template is drawn in the canvas object based on a drawing method set corresponding to the graphic template in combination with the drawing data.

6. The method according to claim 5, characterized in that The types of data verification include any one or more of the following: null value verification, data integrity verification, and website validity verification.

7. The method according to claim 5, characterized in that The drawing method set corresponding to the graphic template combined with the drawing data, drawing the graphic template in the canvas object, comprises: Based on the drawing method set corresponding to the graphic template and the drawing data, input the canvas object to obtain a drawing result; The drawing result includes a resource access address corresponding to the graphic template.

8. A graphics drawing device in a small program, characterized in that: include: A template information receiving module is used to obtain template information corresponding to the graphic template to be drawn; The template information includes a template identifier corresponding to the graphic template, drawing data required for drawing the graphic template, and a canvas identifier, wherein the canvas identifier is an identifier of a canvas object used to draw the graphic template; A drawing method set search module, used to determine the drawing method set corresponding to the graphic template according to the mapping relationship between the template identifier, the pre-configured template identifier and the drawing method set; A graphics drawing module is used to draw the graphics template in the canvas object based on a drawing method set corresponding to the graphics template in combination with the drawing data.

9. A computer storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the graphics drawing method in the applet described in any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: include: processor; as well as A memory, configured to store executable instructions of the processor; The processor is configured to execute the graphics drawing method in the applet described in any one of claims 1 to 7 by executing the executable instructions.

Images