Method, device, electronic device and storage medium for positioning graphics in canvas

Abstract

The embodiment of the present application provides a method, device, electronic device and storage medium for positioning a graphic in a canvas, wherein the method includes: monitoring a click event generated by a canvas area, obtaining an initial position and a current position of the graphic corresponding to the click event; obtaining a tolerance value of the graphic according to the current position; obtaining a target position and a tolerance range; and moving the graphic to a target position or an initial position according to the tolerance range and the tolerance value. The implementation of the embodiment of the present application reduces the tedious operations consumed in the positioning process of the graphic, further reduces the waste of human resources, and makes the positioning and adjustment of the graphic easier and more efficient.

Description

Technical Field

[0001] The present application relates to the field of graphics processing technology, and in particular to a method, device, electronic device and computer-readable storage medium for positioning graphics in a canvas. Background Art

[0002] As productivity demands continue to grow, there is more and more awareness and use of low-code development platforms, which has also prompted the development of low-code development technologies and platforms. Low-code development technologies have been applied in many fields. Low-code development platforms provide interactive tools that can generate applications without coding or with a small amount of coding, which not only lowers the threshold for application development, but also improves the efficiency of application development.

[0003] At present, common low-code development platforms include process designers. Commonly used process designers include desktop client mode and web mode. However, the performance cannot meet the requirements, especially the canvas designer in web mode. Frequent adjustments to a canvas require a lot of manpower, and are not even as fast as direct code development in the front and back ends, which loses the meaning of low code. Summary of the invention

[0004] The purpose of the embodiments of the present application is to provide a method, device, electronic device and computer-readable storage medium for positioning graphics in a canvas, thereby reducing the tedious operations consumed in the positioning process of the graphics, further reducing the waste of human resources, and making the positioning and adjustment of the graphics simpler and more efficient.

[0005] In a first aspect, an embodiment of the present application provides a method for positioning a graphic in a canvas, the method comprising:

[0006] Listening to the click event generated in the canvas area, and obtaining the initial position and current position of the graphic corresponding to the click event;

[0007] Obtaining a tolerance value of the graphic according to the current position;

[0008] Get the target position and tolerance range;

[0009] The graphic is moved to the target position or the initial position according to the tolerance range and the tolerance value.

[0010] In the above implementation process, the tolerance values ​​of the graphics are compared, and the appropriate position is selected to move the graphics, which reduces the tedious operations consumed in the positioning process of the graphics, further reduces the waste of human resources, and makes the positioning and adjustment of the graphics easier and more efficient.

[0011] Furthermore, the step of obtaining the target position and the tolerance range includes:

[0012] Get the target location and the ID of the graphic;

[0013] The tolerance range is obtained according to the target position and the ID.

[0014] In the above implementation process, the target position and the tolerance range are locked, so that the positioning of the graphics is more accurate and the errors that may occur during the positioning process are reduced. At the same time, controlling the tolerance range can also make the operation more convenient.

[0015] Further, the step of moving the graphic to the target position or the initial position according to the tolerance range and the tolerance value includes:

[0016] Determine whether the tolerance value is within the tolerance range;

[0017] If so, move the graphic to the target position;

[0018] If not, move the graphic to the initial position.

[0019] In the above implementation process, the graphic is moved according to the tolerance value and the tolerance range to ensure that the graphic can be accurately moved to the corresponding position, reduce the error caused during the movement, and ensure the accuracy of the movement of the graphic.

[0020] Furthermore, the step of moving the graphic to the target position includes:

[0021] Get the type of the graphic;

[0022] If the type of the graphic is a connecting line, moving the centroid of the connecting line to the target position;

[0023] If the type of the graphic is a linear graphic, the linear graphic is moved to the target position.

[0024] In the above implementation process, the connecting lines and the linear graphics are distinguished and positioned in different ways to avoid errors caused by graphic differences, so that the connecting lines and the linear graphics can be moved to more accurate positions.

[0025] Furthermore, the step of moving the linear graphic to the target position comprises:

[0026] Obtaining a plurality of boundary tolerance values ​​of the linear graphic;

[0027] Obtaining the minimum boundary tolerance value among the multiple boundary tolerance values;

[0028] The center point of the boundary corresponding to the minimum boundary tolerance value is moved to the target position.

[0029] In the above implementation process, multiple boundary tolerance values ​​of the linear graphics are compared respectively to determine a closer boundary tolerance value, so that the positioning of the linear graphics is more accurate, the error caused by the difference in graphics is reduced, and the moving operation is also easier.

[0030] Furthermore, after the step of moving the centroid of the connecting line to the target position, the method further includes:

[0031] Obtain the centroid X-axis coordinate value and the centroid Y-axis coordinate value corresponding to the current position of the connecting line;

[0032] Scale data is obtained according to the centroid X-axis coordinate value and the centroid Y-axis coordinate value.

[0033] In the above implementation process, the ruler data can more conveniently locate the connecting line, making the movement of the connecting line more accurate, reducing errors and cumbersome processes during the movement, and making the positioning of the connecting line more accurate.

[0034] Furthermore, the step of obtaining scale data according to the centroid X-axis coordinate and the centroid Y-axis coordinate comprises:

[0035] Obtaining positions of multiple nodes in the canvas except the connecting lines;

[0036] Traversing the X-axis coordinate values ​​and Y-axis coordinate values ​​corresponding to the positions of the multiple nodes;

[0037] If the centroid X-axis coordinate value is equal to any one of the multiple X-axis coordinate values, obtain an X-axis scale;

[0038] If the Y-axis coordinate value of the centroid is equal to any one of the multiple Y-axis coordinate values, a Y-axis scale is obtained.

[0039] In the above implementation process, obtaining the X-axis ruler and the Y-axis ruler can make the positioning of the connecting line more accurate, and can reduce the tedious operations in the positioning process, making the positioning simpler and avoiding minor errors in the positioning process of the connecting line.

[0040] In a second aspect, an embodiment of the present application further provides a device for positioning a graphic in a canvas, the device comprising:

[0041] A monitoring module, used to monitor the click events generated in the canvas area, and obtain the initial position and current position of the graphic corresponding to the click event;

[0042] An acquisition module, used to obtain the tolerance value of the graphic according to the current position; and also used to obtain the target position and the tolerance range;

[0043] A positioning module is used to move the graphic to the target position or the initial position according to the tolerance range and the tolerance value.

[0044] In the above implementation process, by comparing the tolerance values ​​of the graphics and selecting a suitable position to move the graphics, the tedious operations consumed in the positioning process of the graphics are reduced, further reducing the waste of human resources, making the positioning and adjustment of the graphics easier and more efficient.

[0045] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method described in any one of the first aspects when executing the computer program.

[0046] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which instructions are stored. When the instructions are executed on a computer, the computer executes the method as described in any one of the first aspects.

[0047] In a fifth aspect, an embodiment of the present application provides a computer program product, which, when running on a computer, enables the computer to execute the method as described in any one of the first aspects.

[0048] Other features and advantages of the present disclosure will be set forth in the following description, or some features and advantages may be inferred or unambiguously determined from the description, or may be learned by implementing the above-mentioned technology of the present disclosure.

[0049] And it can be implemented according to the contents of the specification. The following is a detailed description of the preferred embodiments of the present application with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments of the present application will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0051] Figure 1 A schematic diagram of a flow chart of a method for positioning a graphic in a canvas provided in an embodiment of the present application;

[0052] Figure 2 A schematic diagram of the structural composition of a device for positioning graphics in a canvas provided in an embodiment of the present application;

[0053] Figure 3A schematic diagram of the structural composition of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0054] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.

[0055] It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings. At the same time, in the description of this application, the terms "first", "second", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance.

[0056] The specific implementation methods of the present application are further described in detail below in conjunction with the accompanying drawings and examples. The following examples are used to illustrate the present application but are not intended to limit the scope of the present application.

[0057] Embodiment 1

[0058] Figure 1 is a flow chart of a method for positioning a graphic in a canvas provided in an embodiment of the present application, such as Figure 1 As shown, the method includes:

[0059] S1, monitor the click event generated in the canvas area, and obtain the initial position and current position of the graphic corresponding to the click event;

[0060] S2, obtain the tolerance value of the graphic according to the current position;

[0061] S3, obtaining the target position and tolerance range;

[0062] S4, moving the graphic to the target position or the initial position according to the tolerance range and the tolerance value.

[0063] In the above implementation process, by comparing the tolerance values ​​of the graphics and selecting a suitable position to move the graphics, the tedious operations consumed in the positioning process of the graphics are reduced, further reducing the waste of human resources, making the positioning and adjustment of the graphics easier and more efficient.

[0064] In S1, the canvas's customized addEventLister method (used to add an event handle to a specified element) is used to listen to the click event of the connecting line, the LineLayerMixin class is defined, and the handleClick event is added (determines the el.closest (target element) of the connecting line's target), so that the graphics inherit the event.

[0065] The tolerance value is the tolerance, which refers to the pixel value set when the canvas selects graphics or colors. The larger the tolerance, the larger the selection range. The value range is between 0-255.

[0066] Furthermore, S3 includes:

[0067] Get the target location and the ID of the graphic;

[0068] Get the tolerance range based on the target position and ID.

[0069] Optionally, the IDs of all graphics are obtained, and the IDs of graphics within a certain range of the target position and the target position are selected to obtain the range of tolerance values ​​of these graphics, that is, to obtain the tolerance range.

[0070] In the above implementation process, the target position and the tolerance range are locked, so that the positioning of the graphics is more accurate and the errors that may occur during the positioning process are reduced. At the same time, controlling the tolerance range can also make the operation more convenient.

[0071] Furthermore, S4 includes:

[0072] Determine whether the tolerance value is within the tolerance range;

[0073] If so, move the graphic to the target location;

[0074] If not, move the graphic to its initial position.

[0075] Furthermore, the step of moving the graphic to the target position includes:

[0076] Get the type of graphics;

[0077] If the type of the graphic is a connecting line, move the centroid of the connecting line to the target position;

[0078] If the graphic type is a linear graphic, move the linear graphic to the target position.

[0079] Exemplarily, first determine the two nodes at both ends of the connection line, drag the arrow between the two nodes of the connection line, and determine whether the dragged position of the arrow exceeds a specific tolerance range to achieve automatic adsorption so that the connection line between every two nodes inherits the event.

[0080] Get the ID and target position of the linear graph, gather the points when dragging the connecting line between two nodes, get the position of the arrow in real time, and compare it with the current node position in the current position to determine the tolerance value between the two. If it is within the tolerance value, it will automatically return to the original target point position.

[0081] In the above implementation process, the connecting lines and the linear graphics are distinguished and positioned in different ways to avoid errors caused by graphic differences, so that the connecting lines and the linear graphics can be moved to more accurate positions.

[0082] Furthermore, if the graphic is a linear graphic, the step of moving the linear graphic to the target position includes:

[0083] Get multiple boundary tolerance values ​​of linear graphics;

[0084] Compare multiple boundary tolerance values ​​to obtain the minimum boundary tolerance value among the multiple boundary tolerance values;

[0085] Move the center point of the boundary corresponding to the minimum boundary tolerance value to the target location.

[0086] In the above implementation process, multiple boundary tolerance values ​​of the linear graphics are compared respectively to determine a closer boundary tolerance value, so that the positioning of the linear graphics is more accurate, the error caused by the difference in graphics is reduced, and the moving operation is also easier.

[0087] Furthermore, if the graphic is a connecting line, after the step of moving the centroid of the connecting line to the target position, the method further includes:

[0088] Get the X-axis coordinate value and Y-axis coordinate value of the centroid corresponding to the current position of the connecting line;

[0089] The scale data is obtained according to the centroid X-axis coordinate value and the centroid Y-axis coordinate value.

[0090] In the above implementation process, the ruler data can more conveniently locate the connecting line, making the movement of the connecting line more accurate, reducing errors and cumbersome processes during the movement, and making the positioning of the connecting line more accurate.

[0091] Furthermore, the step of obtaining scale data according to the centroid X-axis coordinate and the centroid Y-axis coordinate includes:

[0092] Get the positions of multiple nodes in the canvas except the connecting lines;

[0093] Traverse the X-axis coordinate values ​​and Y-axis coordinate values ​​corresponding to the positions of multiple nodes;

[0094] If the X-axis coordinate value of the centroid is equal to any one of the multiple X-axis coordinate values, obtain the X-axis scale;

[0095] If the Y-axis coordinate value of the centroid is equal to any one of the multiple Y-axis coordinate values, the Y-axis scale is obtained.

[0096] In the above implementation process, obtaining the X-axis ruler and the Y-axis ruler can make the positioning of the connecting line more accurate, and can reduce the tedious operations in the positioning process, making the positioning simpler.

[0097] Furthermore, the step of obtaining the scale data according to the centroid X-axis coordinate and the centroid Y-axis coordinate also includes:

[0098] If the centroid X-axis coordinate value is equal to any one of multiple X-axis coordinate values ​​and the centroid Y-axis coordinate value is equal to any one of multiple Y-axis coordinate values, the X-axis ruler and the Y-axis ruler are obtained at the same time.

[0099] In the above implementation process, obtaining the X-axis ruler and the Y-axis ruler at the same time makes the positioning of the connecting line in the X-axis and Y-axis directions more accurate, avoids minor errors in the positioning of the connecting line, and makes the operation process simpler.

[0100] Embodiment 2

[0101] In order to execute the method corresponding to the above embodiment 1 to achieve the corresponding functions and technical effects, a positioning device for graphics in a canvas is provided below, such as Figure 2 As shown, the device comprises:

[0102] Monitoring module 1, used to monitor the click events generated in the canvas area, and obtain the initial position and current position of the graphic corresponding to the click event;

[0103] Acquisition module 2, used to obtain the tolerance value of the graphic according to the current position; and also used to obtain the target position and the tolerance range;

[0104] The positioning module 3 is used to move the graphic to a target position or an initial position according to a tolerance range and a tolerance value.

[0105] In the above implementation process, by comparing the tolerance values ​​of the graphics and selecting a suitable position to move the graphics, the tedious operations consumed in the positioning process of the graphics are reduced, further reducing the waste of human resources, making the positioning and adjustment of the graphics easier and more efficient.

[0106] Furthermore, the acquisition module 2 is also used for:

[0107] Get the target location and the ID of the graphic;

[0108] Get the tolerance range based on the target position and ID.

[0109] Furthermore, the positioning module 3 is also used for:

[0110] Get the type of graphics;

[0111] If the type of the graphic is a connecting line, move the centroid of the connecting line to the target position;

[0112] If the graphic type is a linear graphic, move the linear graphic to the target position.

[0113] Furthermore, the positioning module 3 is also used for:

[0114] Get multiple boundary tolerance values ​​of linear graphics;

[0115] Compare multiple boundary tolerance values ​​to obtain the minimum boundary tolerance value among the multiple boundary tolerance values;

[0116] Move the center point of the boundary corresponding to the minimum boundary tolerance value to the target location.

[0117] Furthermore, the positioning module 3 is also used for:

[0118] Get the X-axis coordinate value and Y-axis coordinate value of the centroid corresponding to the current position of the connecting line;

[0119] The scale data is obtained according to the centroid X-axis coordinate value and the centroid Y-axis coordinate value.

[0120] Furthermore, the positioning module 3 is also used for:

[0121] Get the positions of multiple nodes in the canvas except the connecting lines;

[0122] Traverse the X-axis coordinate values ​​and Y-axis coordinate values ​​corresponding to the positions of multiple nodes;

[0123] If the X-axis coordinate value of the centroid is equal to any one of the multiple X-axis coordinate values, obtain the X-axis scale;

[0124] If the Y-axis coordinate value of the centroid is equal to any one of the multiple Y-axis coordinate values, the Y-axis scale is obtained.

[0125] Furthermore, the positioning module 3 is also used for:

[0126] Determine whether the tolerance value is within the tolerance range;

[0127] If so, move the graphic to the target location;

[0128] If not, move the graphic to its initial position.

[0129] The above-mentioned device for positioning graphics in the canvas can implement the method of the above-mentioned embodiment 1. The options in the above-mentioned embodiment 1 are also applicable to this embodiment and will not be described in detail here.

[0130] The rest of the contents of the embodiments of the present application can refer to the contents of the above-mentioned embodiment 1, and will not be repeated in this embodiment.

[0131] Embodiment 3

[0132] An embodiment of the present application provides an electronic device, including a memory and a processor, wherein the memory is used to store a computer program, and the processor runs the computer program to enable the electronic device to execute the method for positioning a graphic in a canvas of the first embodiment.

[0133] Optionally, the above-mentioned electronic device may be a server.

[0134] See also Figure 3 , Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. The electronic device may include a processor 31, a communication interface 32, a memory 33 and at least one communication bus 34. The communication bus 34 is used to realize direct connection and communication between these components. The communication interface 32 of the device in the embodiment of the present application is used to communicate signaling or data with other node devices. The processor 31 may be an integrated circuit chip with signal processing capabilities.

[0135] The processor 31 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor can be a microprocessor or the processor 31 can also be any conventional processor, etc.

[0136] The memory 33 may be, but is not limited to, a random access memory (RAM), a read only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable read-only memory (EEPROM), etc. The memory 33 stores computer-readable instructions. When the computer-readable instructions are executed by the processor 31, the device can execute the above-mentioned Figure 1 The method embodiment involves various steps.

[0137] Optionally, the electronic device may further include a storage controller and an input / output unit. The memory 33, the storage controller, the processor 31, the peripheral interface, and the input / output unit are electrically connected to each other directly or indirectly to achieve data transmission or interaction. For example, these components may be electrically connected to each other via one or more communication buses 34. The processor 31 is used to execute executable modules stored in the memory 33, such as software function modules or computer programs included in the device.

[0138] The input and output unit is used to provide users with the task creation and to create an optional time period or preset execution time for the task to enable interaction between the user and the server. The input and output unit can be, but is not limited to, a mouse and a keyboard.

[0139] Understandably, Figure 3 The structure shown is for illustration only. The electronic device may also include Figure 3 More or fewer components as shown, or with Figure 3 Different configurations are shown. Figure 3 Each component shown in the figure can be implemented by hardware, software or a combination thereof.

[0140] In addition, an embodiment of the present application further provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the method for positioning graphics in a canvas of the first embodiment.

[0141] The embodiment of the present application also provides a computer program product, which, when running on a computer, enables the computer to execute the method described in the method embodiment.

[0142] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the flowcharts and block diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to multiple embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of boxes in the block diagram and / or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0143] In addition, the functional modules in the various embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

[0144] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard drives, ROM, RAM, magnetic disks, or optical disks.

[0145] The above description is only an embodiment of the present application and is not intended to limit the scope of protection of the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application. It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in the subsequent drawings.

[0146] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0147] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

Claims

1. A method for positioning a graphic in a canvas, characterized in that: The method comprises: Listening to the click event generated in the canvas area, and obtaining the initial position and current position of the graphic corresponding to the click event; Obtaining a tolerance value of the graphic according to the current position; Get the target position and tolerance range; According to the tolerance range and the tolerance value, moving the graphic to the target position or the initial position; The step of obtaining the target position and the tolerance range includes: Get the IDs of all graphics, select the target position and the IDs of graphics within a certain range, and get the range of tolerance values ​​of these graphics, that is, get the tolerance range; The step of moving the graphic to the target position or the initial position according to the tolerance range and the tolerance value comprises: Determine whether the tolerance value is within the tolerance range; If so, move the graphic to the target position; If not, move the graphic to the initial position.

2. The method for positioning a graphic in a canvas according to claim 1, characterized in that: The step of moving the graphic to the target position comprises: Get the type of the graphic; If the type of the graphic is a connecting line, moving the centroid of the connecting line to the target position; If the type of the graphic is a linear graphic, the linear graphic is moved to the target position.

3. The method for positioning a graphic in a canvas according to claim 2, characterized in that: The step of moving the linear graphic to the target position comprises: Obtaining a plurality of boundary tolerance values ​​of the linear graphic; Obtaining the minimum boundary tolerance value among the multiple boundary tolerance values; The center point of the boundary corresponding to the minimum boundary tolerance value is moved to the target position.

4. The method for positioning a graphic in a canvas according to claim 2, characterized in that: After the step of moving the centroid of the connecting line to the target position, the method further includes: Obtain the centroid X-axis coordinate value and the centroid Y-axis coordinate value corresponding to the current position of the connecting line; Scale data is obtained according to the centroid X-axis coordinate value and the centroid Y-axis coordinate value.

5. The method for positioning a graphic in a canvas according to claim 4, characterized in that: The step of obtaining scale data according to the centroid X-axis coordinate and the centroid Y-axis coordinate comprises: Obtaining positions of multiple nodes in the canvas except the connecting lines; Traversing the X-axis coordinate values ​​and Y-axis coordinate values ​​corresponding to the positions of the multiple nodes; If the centroid X-axis coordinate value is equal to any one of the multiple X-axis coordinate values, obtain an X-axis scale; If the Y-axis coordinate value of the centroid is equal to any one of the multiple Y-axis coordinate values, a Y-axis scale is obtained.

6. A device for positioning a graphic in a canvas, characterized in that: The device comprises: A monitoring module, used to monitor the click events generated in the canvas area, and obtain the initial position and current position of the graphic corresponding to the click event; An acquisition module, used to obtain the tolerance value of the graphic according to the current position; and also used to obtain the target position and the tolerance range; A positioning module, used for moving the graphic to the target position or the initial position according to the tolerance range and the tolerance value; The acquisition module is also used for: Get the IDs of all graphics, select the target position and the IDs of graphics within a certain range, and get the range of tolerance values ​​of these graphics, that is, get the tolerance range; The positioning module is also used for: Determine whether the tolerance value is within the tolerance range; If so, move the graphic to the target position; If not, move the graphic to the initial position.

7. An electronic device, characterized in that: It comprises a memory and a processor, wherein the memory is used to store a computer program, and the processor runs the computer program to enable the electronic device to execute the method for positioning a graphic in a canvas according to any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that: It stores a computer program, which, when executed by a processor, implements the method for positioning graphics in a canvas as described in any one of claims 1 to 5.

Images