WO2023040443A1

WO2023040443A1 - Method and device for drawing canvas

Info

Publication number: WO2023040443A1
Application number: PCT/CN2022/105414
Authority: WO
Inventors: 张娟
Original assignee: 北京沃东天骏信息技术有限公司; 北京京东世纪贸易有限公司
Priority date: 2021-09-17
Filing date: 2022-07-13
Publication date: 2023-03-23
Also published as: CN113760289A

Abstract

Embodiments of the present disclosure disclose a method and device for drawing a canvas. A specific embodiment of the method comprises: receiving a canvas drawing request of a user, displaying a canvas drawing page, the canvas drawing page comprising an element component list and a canvas view, the canvas view comprising a construction area corresponding to a plurality of constituent elements, the element component list comprising at least one canvas element component of a constituent element corresponding to the user and multi-dimensional classification information of each canvas element component; in response to detecting an operation by the user on the canvas element components, and when a target position of the operation is located in the construction area corresponding to the canvas element components, displaying, at the target position of the construction area, a canvas element corresponding to the canvas element components, the operation being triggered by the user selecting the canvas element components according to the multi-dimensional classification information; and generating a target canvas according to the canvas element in the construction area.

Description

Method and apparatus for drawing canvas

This disclosure claims the priority of the Chinese patent application with the application number 202111094641.4 and the invention title "Method and Device for Drawing Canvas" filed on September 17, 2021, the entire contents of which are incorporated by reference in this disclosure.

technical field

The embodiments of the present disclosure relate to the field of computer technology, in particular to the field of data processing technology, and in particular to a method and device for drawing a canvas.

Background technique

At present, the building activity page is mainly composed of multiple template floors. The operator selects the required template in the visual building system, customizes the configuration style and materials, previews and releases the activity page, and finally forms an online activity page. . Among them, the templates that operators can choose come from the inherent nature of the visualization system. When there is a new template requirement, it needs to go through a series of processes such as requirement raising, redevelopment, and regression testing before it can be used online.

However, whether it is the fine-tuning of existing templates or new templates, manual maintenance by multi-terminal developers is required, resulting in low access efficiency and high cost. At the same time, the currently built page cannot perform operations such as hot update and hot repair on the online event page. If any problems occur, R&D personnel need to release a version to solve them, which undoubtedly increases the risk of online problems.

Contents of the invention

Embodiments of the present disclosure provide a method and device for drawing a canvas.

In a first aspect, an embodiment of the present disclosure provides a method for drawing a canvas, including: receiving a canvas drawing request from a user, and displaying a canvas drawing page, where the canvas drawing page includes a list of element components and a canvas view, and the canvas view includes multiple components In the construction area corresponding to the element, the element component list includes at least one canvas element component corresponding to the user and the multi-dimensional classification information of each canvas element component; in response to detecting the user's operation on the canvas element component, and the target position of the operation When located in the construction area corresponding to the canvas element component, the canvas element corresponding to the canvas element component is displayed at the target position of the construction area, and the operation is triggered by the user selecting the canvas element component according to the multi-dimensional classification information; according to the construction area corresponding to the constituent element The canvas element inside, generate the target canvas.

In some embodiments, the multi-dimensional classification information of each canvas element component includes at least the data type of the canvas element corresponding to the canvas element component and the style type of the canvas element corresponding to the canvas element component.

In some embodiments, the style type of the canvas element corresponding to the canvas element component is pre-generated, and the generation process includes: responding to the detection of the element style creation instruction sent by the user, according to the user's selection operation in the element style creation interface and/or The input content establishes a corresponding relationship between the data type of the selected canvas element and the style of the canvas element, and generates the style type of the canvas element. The style type includes at least: basic class, custom class and co-construction class.

In some embodiments, the canvas element corresponding to the canvas element component and the data type of the canvas element are predetermined according to the atomic element corresponding to the canvas element and the data source of the atomic element. The atomic element is stored in the element library, and the atomic element in the element library is based on Business requirements and/or design requirements are updated in real time.

In some embodiments, the canvas drawing page also includes a canvas configuration area, and the canvas configuration area includes at least one configuration item of the canvas element component; before generating the target canvas according to the canvas elements in the construction area corresponding to the constituent elements, it also includes: a response The canvas element corresponding to the corresponding canvas element component displayed in the construction area is updated upon detection of the user's modification operation on the configuration item of the canvas element component.

In some embodiments, the canvas configuration area further includes check items; after generating the target canvas according to the canvas elements in the construction area corresponding to the constituent elements, it also includes: in response to detecting the user's selection operation on the check items, The target canvas performs compliance verification and generates indication information of the verification results.

In some embodiments, before generating the target canvas according to the canvas elements in the construction area corresponding to the constituent elements, it further includes: using the component library of the software package manager to render the canvas elements in the construction area corresponding to the constituent elements.

In some embodiments, the method further includes: generating a corresponding canvas protocol based on the canvas drawing page and the target canvas.

In a second aspect, an embodiment of the present invention provides a device for drawing a canvas, including: a display unit configured to receive a user's canvas drawing request, and display a canvas drawing page, where the canvas drawing page includes an element component list and a canvas view , the canvas view includes construction areas corresponding to a plurality of constituent elements, and the element component list includes at least one canvas element component of the constituent elements corresponding to the user and multi-dimensional classification information of each canvas element component; the drawing unit is configured to respond to the detected When the user operates on the canvas element component, and the target position of the operation is within the construction area corresponding to the canvas element component, the canvas element corresponding to the canvas element component is displayed at the target position of the construction area, and the operation is performed by the user on the canvas element according to the multi-dimensional classification information The component is selected and triggered; the first generation unit is configured to generate the target canvas according to the canvas elements in the construction area corresponding to the constituent elements.

In some embodiments, the multi-dimensional classification information of each canvas element component in the display unit includes at least the data type of the canvas element corresponding to the canvas element component and the style type of the canvas element corresponding to the canvas element component.

In some embodiments, the style type of the canvas element corresponding to the canvas element component in the display unit is pre-generated. The selection operation and/or input content in the element style creation interface establishes a corresponding relationship between the data type of the selected canvas element and the canvas element style, and generates the style type of the canvas element. The style type includes at least: basic class, custom class and co-construction classes.

In some embodiments, the canvas element corresponding to the canvas element component in the display unit and the data type of the canvas element are predetermined according to the atomic element corresponding to the canvas element and the data source of the atomic element, the atomic element is stored in the element library, and the element library The Atomic Elements are updated in real-time based on business needs and/or design requirements.

In some embodiments, the canvas drawing page in the display unit further includes a canvas configuration area, and the canvas configuration area includes at least one configuration item of the canvas element component; The modification operation of the configuration item of the component updates the canvas element corresponding to the corresponding canvas element component displayed in the construction area.

In some embodiments, the canvas configuration area in the display unit further includes check items; the device further includes: a check unit, configured to perform compliance check on the target canvas in response to detecting that the user selects a check item. check, and generate an indication message of the check result.

In some embodiments, the apparatus further includes: a rendering unit configured to use the component library of the software package manager to render the canvas elements in the construction area corresponding to the constituent elements.

In some embodiments, the device further includes: a third generating unit configured to generate a corresponding canvas protocol based on the target canvas and the canvas drawing page.

In the third aspect, the embodiment of the present disclosure provides a terminal device, including: one or more processors; Execute, so that one or more processors implement the method described in any implementation manner of the first aspect.

In a fourth aspect, an embodiment of the present disclosure provides a computer-readable medium on which a computer program is stored, wherein when the computer program is executed by a processor, the method described in any implementation manner in the first aspect is implemented.

It should be understood that what is described in this section is not intended to identify key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will be readily understood through the following description.

Description of drawings

Other characteristics, objects and advantages of the present disclosure will become more apparent by reading the detailed description of non-limiting embodiments made with reference to the following drawings:

FIG. 1 is an exemplary system architecture diagram to which some embodiments of the present disclosure can be applied;

FIG. 2 is a flowchart of one embodiment of a method for drawing a canvas according to the present disclosure;

FIG. 3 is a schematic diagram of an application scenario of a method for drawing a canvas according to the present disclosure;

FIG. 4 is a flowchart of another embodiment of a method for drawing a canvas according to the present disclosure;

Fig. 5 is a schematic structural diagram of an embodiment of a device for drawing a canvas according to the present disclosure;

FIG. 6 is a schematic structural diagram of an electronic device suitable for implementing an embodiment of the present disclosure.

Detailed ways

The present disclosure will be further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain related inventions, rather than to limit the invention. It should also be noted that, for the convenience of description, only the parts related to the related invention are shown in the drawings.

It should be noted that, in the case of no conflict, the embodiments in the present disclosure and the features in the embodiments can be combined with each other. The present disclosure will be described in detail below with reference to the accompanying drawings and embodiments.

Fig. 1 shows an exemplary system architecture 100 to which the method for drawing a canvas or the device for drawing a canvas according to an embodiment of the present disclosure can be applied.

As shown in FIG. 1 , a system architecture 100 may include

terminal devices

101 , 102 , 103 , a network 104 and a server 105 . The network 104 is used as a medium for providing communication links between the

terminal devices

101 , 102 , 103 and the server 105 . Network 104 may include various connection types, such as wires, wireless communication links, or fiber optic cables, among others.

Users can use

terminal devices

101 , 102 , 103 to interact with server 105 through network 104 to send transmission requests or receive transmission data, and so on. The

terminal devices

101, 102, and 103 can process the data based on the user's instruction, and display the processing result (such as the target canvas) to the user. Various communication client applications can be installed on the

terminal devices

101, 102, 103, such as shopping applications, delivery applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc.

The

terminal devices

101, 102, and 103 may be hardware or software. When the

terminal devices

101, 102, 103 are hardware, they can be various electronic devices with display screens supporting information browsing, including but not limited to smart phones, tablet computers, e-book readers, laptop computers and desktop computers, etc. wait. The

terminal devices

101, 102, 103 can interact with the server through the network 104 to obtain information and the like. When the

terminal devices

101, 102, 103 are software, they can be installed in the electronic devices listed above. It can be implemented, for example, as a plurality of software or software modules for providing distributed services, or as a single software or software module. No specific limitation is made here.

The server 105 may be an application server that provides various services, for example, an application server that supports the transmission requests of the

terminal devices

101 , 102 , 103 . The application server can perform processing such as data acquisition on the received transmission request, and feed back the acquisition result (such as atomic elements in the element library) to the terminal device.

It should be noted that the server 105 may be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster composed of multiple servers, or as a single server. When the server is software, it can be implemented as multiple software or software modules (for example, for providing distributed services), or as a single software or software module. No specific limitation is made here.

It should be noted that the operations performed by the server 105 may also be performed by other electronic devices.

It should be noted that the method for drawing a canvas provided by the embodiments of the present disclosure is generally executed by the

terminal devices

101 , 102 , and 103 , and the corresponding apparatus for drawing a canvas is generally provided on the

terminal devices

101 , 102 , and 103 .

It should be understood that the numbers of terminal devices, networks and servers in Fig. 1 are only illustrative. According to the implementation needs, there can be any number of terminal devices, networks and servers.

Continuing to refer to FIG. 2 , a flow 200 of an embodiment of the method for drawing a canvas according to the present disclosure is shown. The method for drawing the canvas includes the following steps:

Step 201, receiving a canvas drawing request from a user, and displaying a canvas drawing page.

In this embodiment, the execution subject (the terminal device as shown in Figure 1) can receive the user's canvas draw request. The canvas drawing request may be a canvas drawing request initiated after a user triggers a certain event, or a certain request monitored by a terminal device. Then the execution body displays the canvas drawing page according to the canvas drawing request.

Wherein, the canvas drawing page includes an element component list and a canvas view, the canvas view includes a construction area corresponding to multiple constituent elements, and the element component list includes at least one canvas element component corresponding to the user's constituent elements and the multi-dimensional classification of each canvas element component information. Multi-dimensional classification information is preset by users based on business or application requirements. Multi-dimensional classification information refers to the sum of the classification information of each dimension generated by classifying the canvas elements corresponding to each canvas element component from multiple dimensions. Multiple dimensions can at least include: element content, element data source, element Styles and attributes of elements. For example, the multi-dimensional classification information is: graphics, pictures, and basic styles. Users can be ordinary users who use terminal devices to browse various activity pages, or operators or merchants who use terminal devices to develop, maintain, and configure various software.

Step 202 , in response to detecting the user's operation on the canvas element component, and when the target position of the operation is within the construction area corresponding to the canvas element component, display the canvas element corresponding to the canvas element component at the target position of the construction area.

In this embodiment, when the execution body detects that the user operates on the canvas element component, and the target position of the operation is within the construction area corresponding to the canvas element component, the canvas element corresponding to the canvas element component is displayed at the target position of the construction area.

Wherein, the operation is triggered by the user selecting the canvas element component according to the multi-dimensional classification information. Operations refer to various operations preset in the canvas drawing page for performing actions or configurations on canvas elements, and may at least include dragging, updating, sorting, sorting and previewing operations. Canvas elements can include various hot-swappable element modules for active pages such as pictures, text, prices, shopping carts, progress bars, and countdown timers.

Step 203: Generate a target canvas according to the canvas elements in the construction area corresponding to the constituent elements.

In this embodiment, the execution subject may use a canvas generation method to generate a target canvas according to the canvas elements in the construction area corresponding to the constituent elements. Wherein, the canvas may be a Canvas canvas, such as the element Canvas in html5. The generated target canvas can be the template required by the operator, or the active page required by the user.

Continue referring to FIG. 3 , which is a schematic diagram 300 of an application scenario of the method for drawing a canvas according to this embodiment. The method for drawing a canvas in this embodiment runs in the electronic device 301 . First, the electronic device 301 receives the user's canvas drawing request, and displays the canvas drawing page 302. Then, when the electronic device 301 detects the user's operation on the canvas element component, and the target position of the operation is within the corresponding construction area of the canvas element component, the The target position of the area displays the canvas element 303 corresponding to the canvas element component, and finally the electronic device 301 generates the target canvas 304 according to the canvas elements in the construction area corresponding to the constituent elements, and displays the target canvas on the electronic device.

The method for drawing a canvas provided by an embodiment of the present disclosure displays a canvas drawing page by receiving a canvas drawing request from a user. The canvas drawing page includes a list of element components and a canvas view, and the canvas view includes a construction area corresponding to multiple constituent elements. The component list includes at least one canvas element component corresponding to the user and the multi-dimensional classification information of each canvas element component; in response to detecting the user's operation on the canvas element component, and the target position of the operation is located in the structure corresponding to the canvas element component When inside the area, the canvas element corresponding to the canvas element component is displayed at the target position of the construction area, and the operation is triggered by the user selecting the canvas element component according to the multi-dimensional classification information; according to the canvas element in the construction area corresponding to the constituent element, the target is generated Canvas, to achieve a more flexible and personalized method for drawing canvas, and realize the construction of different template canvases. It solves the problems of low efficiency and high cost in the existing formwork construction, and the currently constructed formwork cannot be hot updated, hot repaired and other operations, which easily increases the risk of formwork construction. By classifying elements in multiple dimensions and drawing canvases based on the classified elements, diversified element sources and flexible and convenient construction of template canvases are realized, which reduces the investment of production and R&D personnel and improves the efficiency of page construction. Use flexible and personalized templates to build a system to achieve maximum internal empowerment and optimization of production and research capabilities, and provide more effective template solutions for online event pages.

Further referring to FIG. 4 , it shows the flow of another embodiment of the method for drawing a canvas. The flow 400 of the method for drawing a canvas includes the following steps:

Step 401, receiving a canvas drawing request from a user, and displaying a canvas drawing page.

In this embodiment, the execution subject may receive the user's canvas drawing request, and then display the canvas drawing page according to the canvas drawing request. Wherein, the canvas drawing page includes an element component list, a canvas view and a canvas configuration area, the canvas view includes a construction area corresponding to multiple constituent elements, and the element component list includes at least one canvas element component and each canvas element component corresponding to the constituent elements of the user The multi-dimensional classification information, the canvas configuration area includes at least one configuration item of the canvas element component.

Specifically, the multi-dimensional classification information of each canvas element component includes at least the data type of the canvas element corresponding to the canvas element component and the style type of the canvas element corresponding to the canvas element component. The style type of the canvas element corresponding to the canvas element component is pre-generated, and the generation process of the style type of the canvas element corresponding to the canvas element component includes: in response to detecting the element style creation instruction sent by the user, according to the user's selection in the element style creation interface The content of the operation and/or input establishes a corresponding relationship between the data type of the selected canvas element and the style of the canvas element. By abstracting the style of the canvas element, the style type of the canvas element is generated. The style type at least includes: Indicates the provision of basic services The basic class, the custom class that provides customized services, and the co-construction class that provides various personalized services. The input content may at least include: key factors such as style type identification, data binding, event correlation, and bottom-up display.

In some optional implementation manners of this embodiment, the canvas element corresponding to the canvas element component and the data type of the canvas element are predetermined according to the atomic element corresponding to the canvas element and the data source of the atomic element. Atomic elements are stored in the element library, and the atomic elements in the element library are updated in real time according to business requirements and/or design requirements. The atomic element represents the smallest unit element for constructing the canvas, and the data type can at least include commodity, graphic and content. Developers maintain the element library to make the information of each element in the library accurate and effective, and more in line with business needs.

Step 402 , in response to detecting the user's operation on the canvas element component, and when the target position of the operation is within the construction area corresponding to the canvas element component, display the canvas element corresponding to the canvas element component at the target position of the construction area.

In this embodiment, when the execution body detects that the user operates on the canvas element component, and the target position of the operation is within the construction area corresponding to the canvas element component, the interaction protocol is used to display the corresponding canvas element component at the target position of the construction area. Canvas element.

Wherein, the above execution subject may encapsulate the interaction protocol between the canvas element component and the canvas view, and the interaction protocol at least includes a description of the path of the canvas element and the position of the canvas element in the canvas. The interaction protocol is to represent the interaction agreement between the canvas element and the canvas view. The interaction protocol can be a program file in JSON (JavaScript Object Notation) data format, which is used to define the behavior and data of at least one canvas element. The interactive protocol carries expandable fields at the same time, which can constrain the processing logic of elements at each end, as the cornerstone of opening up and co-construction, and open multiple business scenarios for co-construction.

In some optional implementations of this embodiment, the canvas configuration area also includes check items; after generating the target canvas according to the canvas elements in the construction area corresponding to the constituent elements, it also includes: The selection operation of verification items, the compliance verification of the target canvas, and the generation of verification result instruction information. Through the verification function, the drawing of the target canvas is more accurate and effective.

Step 403 , updating the canvas element corresponding to the corresponding canvas element component displayed in the construction area in response to detecting that the user modifies the configuration item of the canvas element component.

In this embodiment, when the execution body detects that the user modifies the configuration item of the canvas element component, it updates the canvas element corresponding to the corresponding canvas element component displayed in the construction area. The configuration items can at least include adjusting various attributes of the canvas element, and by changing the attribute value, the updated result can be previewed in the canvas view intuitively and in real time.

Step 404: Generate a target canvas according to the canvas elements in the construction area corresponding to the constituent elements.

In some optional implementations of this embodiment, before generating the target canvas according to the canvas elements in the construction area corresponding to the constituent elements, it also includes: using the component library of the software package manager NPM (Node Package Manager), to The canvas elements in the construction area corresponding to the constituent elements are rendered. The NPM package is a standard package manager for Node.js. Front-end developers can quickly and easily use the tools provided by the NPM package to share software packages. By using the NPM component library in flexible canvas rendering, it is not only used for operator or business configuration preview, but also enables ordinary users to render pages, so that users can preview online effects in real time during configuration, improve construction efficiency, and avoid repeated operations.

In some optional implementations of this embodiment, the method further includes: drawing the page and the target canvas based on the canvas, generating a corresponding canvas protocol, and exporting the canvas template and data configured by the user as a canvas of each end through the canvas The agreement effectively improves the consistency of the effects at each end and enhances the system's personalized expansion capabilities.

In this embodiment, the specific operation of step 404 is basically the same as the operation of step 203 in the embodiment shown in FIG. 2 , and will not be repeated here.

It can be seen from FIG. 4 that, compared with the embodiment corresponding to FIG. 2, the process 400 for drawing the canvas in this embodiment abstracts the style of the canvas element to generate the style type of the canvas element, and the style type at least includes: The basic class, custom class and co-construction class enable the canvas drawing to have co-construction and customization functions, enhance the drawing ability of the template canvas, and improve the flexibility of the template canvas. By including the canvas configuration area on the canvas drawing page, in response to detecting the user's modification operation on the configuration item of the canvas element component, the canvas element corresponding to the corresponding canvas element component displayed in the construction area is updated, expanding the function and flexibility of canvas drawing sex.

The terminology used in the present disclosure is for the purpose of describing particular embodiments only, and is not intended to limit the present disclosure. As used in this disclosure and the appended claims, the singular forms "a", "" and "the" are intended to include the plural forms as well, unless the context clearly dictates otherwise. It should also be understood that the term "and/or" as used herein refers to and includes any and all possible combinations of one or more of the associated listed items. It should be understood that although the terms first, second, third, etc. may be used in the present disclosure to describe various information, the information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, without departing from the scope of the present disclosure, first information may also be called second information, and similarly, second information may also be called first information. Depending on the context, the word "if" as used herein may be interpreted as "at" or "when" or "in response to a determination."

Further referring to FIG. 5 , as an implementation of the methods shown in FIGS. 2 to 4 above, the present disclosure provides an embodiment of a device for drawing a canvas, which is similar to the method embodiment shown in FIG. 2 Correspondingly, the device can be specifically applied to various electronic devices.

As shown in FIG. 5 , the apparatus 500 for drawing a canvas in this embodiment includes: a display unit 501 , a drawing unit 502 and a first generating unit 503 . Wherein, the display unit is configured to receive a canvas drawing request from the user, and display a canvas drawing page, the canvas drawing page includes a list of element components and a canvas view, the canvas view includes construction areas corresponding to a plurality of constituent elements, and the list of element components includes user corresponding At least one canvas element component and the multi-dimensional classification information of each canvas element component; the drawing unit is configured to respond to the detection of the user's operation on the canvas element component, and the target position of the operation is located in the structure corresponding to the canvas element component When inside the area, the canvas element corresponding to the canvas element component is displayed at the target position of the construction area, and the operation is triggered by the user selecting the canvas element component according to the multi-dimensional classification information; the first generating unit is configured to Canvas elements in the area to generate the target canvas.

In this embodiment, the specific processing of the display unit 501, the drawing unit 502, and the first generating unit 503 of the device 500 for drawing the canvas and the technical effects brought about by them can refer to the steps in the embodiment corresponding to FIG. 2 Relevant descriptions from step 201 to step 203 will not be repeated here.

In some optional implementations of this embodiment, the multi-dimensional classification information of each canvas element component in the display unit includes at least the data type of the canvas element corresponding to the canvas element component and the style type of the canvas element corresponding to the canvas element component .

In some optional implementations of this embodiment, the style type of the canvas element corresponding to the canvas element component in the display unit is pre-generated, and the device further includes: a second generating unit configured to respond to the detection of the element sent by the user The style creation instruction, according to the user's selection operation and/or input content in the element style creation interface, establishes a corresponding relationship between the data type of the selected canvas element and the canvas element style, and generates the style type of the canvas element. The style type is at least Including: basic class, custom class and co-construction class.

In some optional implementations of this embodiment, the canvas element corresponding to the canvas element component in the display unit and the data type of the canvas element are predetermined according to the atomic element corresponding to the canvas element and the data source of the atomic element, and the atomic element is stored in In the element library, the atomic elements in the element library are updated in real time according to business requirements and/or design requirements.

In some optional implementations of this embodiment, the canvas drawing page in the display unit further includes a canvas configuration area, and the canvas configuration area includes at least one configuration item of the canvas element component; the device further includes: an update unit configured to respond to The canvas element corresponding to the corresponding canvas element component displayed in the construction area is updated upon detection of the user's modification operation on the configuration item of the canvas element component.

In some optional implementations of this embodiment, the canvas configuration area in the display unit further includes check items; the device further includes: a check unit configured to, in response to detecting a selection operation of the check item by the user, Perform a compliance check on the target canvas, and generate an indication of the check result.

In some optional implementations of this embodiment, the device further includes: a rendering unit configured to use the component library of the software package manager to render the canvas elements in the construction area corresponding to the constituent elements.

In some optional implementation manners of this embodiment, the device further includes: a third generating unit configured to generate a corresponding canvas protocol based on the target canvas and the canvas drawing page.

Referring now to FIG. 6 , it shows a schematic structural diagram of an electronic device 600 suitable for implementing an embodiment of the present disclosure. The terminal equipment in the embodiment of the present disclosure may include but not limited to such as mobile phone, notebook computer, digital broadcast receiver, PDA (personal digital assistant), PAD (tablet computer), PMP (portable multimedia player), vehicle terminal (such as mobile terminals such as car navigation terminals) and fixed terminals such as digital TVs, desktop computers and the like. The electronic device shown in FIG. 6 is only an example, and should not limit the functions and application scope of the embodiments of the present disclosure.

As shown in FIG. 6, an electronic device 600 may include a processing device (such as a central processing unit, a graphics processing unit, etc.) 601, which may be randomly accessed according to a program stored in a read-only memory (ROM) 602 or loaded from a storage device 608. Various appropriate actions and processes are executed by programs in the memory (RAM) 603 . In the RAM 603, various programs and data necessary for the operation of the electronic device 600 are also stored. The processing device 601, ROM 602, and RAM 603 are connected to each other through a bus 604. An input/output (I/O) interface 605 is also connected to the bus 604 .

Typically, the following devices can be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a liquid crystal display (LCD), speaker, vibration an output device 607 such as a computer; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. While FIG. 6 shows electronic device 600 having various means, it should be understood that implementing or having all of the means shown is not a requirement. More or fewer means may alternatively be implemented or provided. Each block shown in FIG. 6 may represent one device, or may represent multiple devices as required.

In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, where the computer program includes program code for executing the method shown in the flowchart. In such an embodiment, the computer program may be downloaded and installed from a network via communication means 609, or from storage means 608, or from ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the methods of the embodiments of the present disclosure are performed.

It should be noted that the computer-readable medium in the embodiments of the present disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. A 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, electrical connections with one or more wires, portable computer diskettes, hard disks, random access memory (RAM), read-only memory (ROM), erasable Programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above. In the embodiments of the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program, and the program may be used by or in combination with an instruction execution system, apparatus, or device. However, in the embodiments of the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, in which computer-readable program codes are carried. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which can transmit, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device . Program code embodied on a computer readable medium may be transmitted by any appropriate medium, including but not limited to wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

The above-mentioned computer-readable medium may be included in the above-mentioned electronic device, or may exist independently without being incorporated into the electronic device. The above-mentioned computer-readable medium carries one or more programs, and when the above-mentioned one or more programs are executed by the electronic device, the electronic device: receives a user's canvas drawing request, displays a canvas drawing page, and the canvas drawing page includes element components list and canvas view, the canvas view includes construction areas corresponding to multiple constituent elements, and the element component list includes at least one canvas element component of the constituent elements corresponding to the user and multi-dimensional classification information of each canvas element component; in response to detecting that the user targets When the canvas element component is operated, and the target position of the operation is in the construction area corresponding to the canvas element component, the canvas element corresponding to the canvas element component is displayed at the target position of the construction area, and the operation is performed by the user on the canvas element component according to the multi-dimensional classification information Triggered by selection; generate the target canvas according to the canvas elements in the construction area corresponding to the constituent elements.

Computer program code for carrying out operations of embodiments of the present disclosure may be written in one or more programming languages, or combinations thereof, including object-oriented programming languages—such as Java, Smalltalk, C++, and conventional A procedural programming language—such as "C" or a similar programming language. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (for example, using an Internet service provider to connected via the Internet).

The flowchart and block diagrams in the Figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in a flowchart or block diagram may represent a module, program segment, or portion of code that contains one or more logical functions for implementing specified executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or they may sometimes be executed in the reverse order, depending upon the functionality involved. It should also be noted that each block of the block diagrams and/or flowchart illustrations, and combinations of blocks in the block diagrams and/or flowchart illustrations, can be implemented by a dedicated hardware-based system that performs the specified functions or operations , or may be implemented by a combination of dedicated hardware and computer instructions.

The units involved in the embodiments described in the present disclosure may be implemented by software or by hardware. The described units may also be set in a processor, for example, it may be described as: a processor includes a display unit, a rendering unit, and a first generating unit. The names of these units do not limit the unit itself under certain circumstances. For example, the display unit may also be described as "a unit that receives a user's canvas drawing request and displays a canvas drawing page".

The above description is only a preferred embodiment of the present disclosure and an illustration of the applied technical principles. Those skilled in the art should understand that the scope of the invention involved in the embodiments of the present disclosure is not limited to the technical solution formed by the specific combination of the above-mentioned technical features, and should also cover the technical solution obtained by the above-mentioned technology without departing from the above-mentioned inventive concept. Other technical solutions formed by any combination of features or equivalent features. For example, a technical solution formed by replacing the above-mentioned features with technical features having similar functions disclosed in (but not limited to) the embodiments of the present disclosure.

Claims

A method for drawing on a canvas, comprising:

Receive the user's canvas drawing request, display the canvas drawing page, the canvas drawing page includes an element component list and a canvas view, the canvas view includes a plurality of construction areas corresponding to the constituent elements, and the element component list includes the user's corresponding At least one canvas element component of the constituent elements and multi-dimensional classification information of each canvas element component;

In response to detecting the user's operation on the canvas element component, and when the target position of the operation is located in the construction area corresponding to the canvas element component, display the corresponding canvas element, the operation is triggered by the user selecting the canvas element component according to the multi-dimensional classification information;

A target canvas is generated according to the canvas elements in the construction area corresponding to the constituent elements.
The method according to claim 1, wherein the multi-dimensional classification information of each canvas element component includes at least the data type of the canvas element corresponding to the canvas element component and the style type of the canvas element corresponding to the canvas element component.
The method according to claim 2, wherein the style type of the canvas element corresponding to the canvas element component is pre-generated, and the generating process includes:

In response to detecting the element style creation instruction sent by the user, according to the user's selection operation and/or input content in the element style creation interface, establish a correspondence between the data type of the selected canvas element and the canvas element style relationship, to generate the style type of the canvas element, and the style type at least includes: basic class, custom class and co-constructed class.
The method according to claim 2, wherein the canvas element corresponding to the canvas element component and the data type of the canvas element are predetermined according to the atomic element corresponding to the canvas element and the data source of the atomic element, the The atomic elements are stored in an element library, and the atomic elements in the element library are updated in real time according to business requirements and/or design requirements.
The method according to claim 1, wherein, the canvas drawing page further includes a canvas configuration area, and the canvas configuration area includes at least one configuration item of the canvas element component; The canvas elements in the area, before generating the target canvas, also include:

In response to detecting that the user modifies the configuration item of the canvas element component, the canvas element corresponding to the corresponding canvas element component displayed in the construction area is updated.
The method according to claim 5, wherein the canvas configuration area further includes check items; after the target canvas is generated according to the canvas elements in the construction area corresponding to the constituent elements, it further includes:

In response to detection of the user's selection operation on the verification item, compliance verification is performed on the target canvas, and indication information of a verification result is generated.
The method according to claim 1, wherein, before generating the target canvas according to the canvas elements in the construction area corresponding to the constituent elements, further comprising:

The component library of the software package manager is used to render the canvas elements in the construction area corresponding to the constituent elements.
The method according to claim 1, further comprising:

Based on the canvas drawing page and the target canvas, a corresponding canvas protocol is generated.
An apparatus for drawing a canvas, comprising:

The display unit is configured to receive a canvas drawing request from a user, and display a canvas drawing page, the canvas drawing page includes a list of element components and a canvas view, the canvas view includes construction areas corresponding to a plurality of constituent elements, and the list of element components including at least one canvas element component of the constituent elements corresponding to the user and multi-dimensional classification information of each canvas element component;

The drawing unit is configured to, in response to detecting that the user operates on the canvas element component, and when the target position of the operation is located in the construction area corresponding to the canvas element component, display the a canvas element corresponding to the canvas element component, and the operation is triggered by the user selecting the canvas element component according to the multi-dimensional classification information;

The first generation unit is configured to generate a target canvas according to the canvas elements in the construction area corresponding to the constituent elements.
The device according to claim 9, wherein the multi-dimensional classification information of each canvas element component in the display unit includes at least the data type of the canvas element corresponding to the canvas element component and the data type of the canvas element corresponding to the canvas element component. style type.
The device according to claim 10, wherein the style type of the canvas element corresponding to the canvas element component in the display unit is pre-generated, and the device further comprises:

The second generation unit is configured to, in response to detecting the element style creation instruction sent by the user, according to the user's selection operation and/or input content in the element style creation interface, in the data type of the selected canvas element A corresponding relationship is established between the style of the canvas element and the style type of the canvas element is generated, and the style type at least includes: a basic class, a customized class and a co-built class.
The device according to claim 9, wherein the canvas drawing page in the display unit further includes a canvas configuration area, and the canvas configuration area includes at least one configuration item of the canvas element component; the device further includes :

The updating unit is configured to update the canvas element corresponding to the corresponding canvas element component displayed in the construction area in response to detecting that the user modifies the configuration item of the canvas element component.
An electronic device comprising:

one or more processors;

a storage device having one or more programs stored thereon;

When the one or more programs are executed by the one or more processors, the one or more processors are made to implement the method according to any one of claims 1-8.
A computer-readable medium, on which a computer program is stored, wherein, when the program is executed by a processor, the method according to any one of claims 1-8 is realized.