Graphic dragging automatic adsorption alignment method, device, computer equipment and medium

Abstract

The present invention discloses a method, device, computer equipment and medium for automatic adsorption alignment of graphic dragging, and the method is implemented, including: when monitoring the dragging of a first graphic in a canvas, judging whether there is at least one second graphic; when the judgment result is yes, monitoring and recording the original coordinate information of the first graphic, and the drag coordinate information generated by the first graphic during the dragging process; determining the dragging direction of the first graphic; according to the dragging direction, determining a second graphic that meets the preset adsorption conditions as a target graphic; calculating the first distance value between the first graphic and the target graphic, and when the first distance value is less than the preset adsorption threshold, aligning the first graphic to the target graphic. In the present application, the target graphic is determined according to the dragging direction of the first graphic, and when the distance between the dragged graphic and the target graphic is less than the preset adsorption threshold, adsorption alignment is performed, which reduces the cost of graphic calibration and improves the user experience.

Description

Technical Field

[0001] The present invention relates to the field of graphics drawing technology, and in particular to a method, device, computer equipment and medium for automatic adsorption alignment by dragging graphics. Background Art

[0002] JavaScript is a scripting language that runs on the browser. JavaScript mainly solves the problem of front-end interaction with users, including usage interaction and data interaction. The native JavaScript Draggable API tool is widely used in the field of software development related to image production.

[0003] However, the current native Javascript Draggable API can only realize the graphic dragging function when in use. When aligning and adsorbing graphics, manual settings are often required, which leads to cumbersome operations and high labor costs, which is not conducive to use. Summary of the invention

[0004] Based on this, it is necessary to provide a method, device, computer equipment and medium for automatic adsorption and alignment by dragging a graphic to address the above technical problems, so as to solve the problem in the prior art that manual alignment and adsorption of the graphic is required, the operation is cumbersome and the labor cost is high.

[0005] In a first aspect, a method for automatically aligning graphics by dragging is provided, comprising:

[0006] When the dragging of the first graphic in the canvas is detected, determining whether there is at least one second graphic;

[0007] When the judgment result is yes, monitoring and recording the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process;

[0008] Determining a drag direction of the first graphic according to the original coordinate information and the drag coordinate information;

[0009] According to the dragging direction, determining a second graphic that meets a preset adsorption condition as a target graphic;

[0010] A first distance value between the first graphic and the target graphic is calculated, and when the first distance value is less than a preset adsorption threshold, the first graphic is aligned and adsorbed onto the target graphic.

[0011] In one embodiment, aligning and adsorbing the first graphic onto the target graphic includes:

[0012] When the distance value is less than a preset adsorption threshold, determining whether the edge line and the center line of the target figure are on the same straight line as any edge line or center line of the first figure;

[0013] When the judgment result is yes, an alignment reference line between the first graphic and the target graphic is generated; and the first graphic is aligned and adsorbed onto the target graphic according to the alignment reference line.

[0014] In one embodiment, the first graphic and the second graphic are both plane graphics, and aligning and adsorbing the first graphic onto the target graphic includes:

[0015] Determining an adsorption reference vertex and an adsorption reference line of the target graphic;

[0016] Determining the edge to be adsorbed of the first figure according to the adsorption reference vertex and adsorption reference line of the target figure;

[0017] Generate adsorption adjustment information according to the adsorption reference vertex, the adsorption reference line and the edge to be adsorbed;

[0018] According to the adsorption adjustment information, the first graphic is rotated and moved so that the first graphic is aligned and adsorbed onto the target graphic.

[0019] In one embodiment, when both the first graphic and the target graphic are three-dimensional graphics, aligning and adsorbing the first graphic onto the target graphic includes:

[0020] Determining an adsorption reference plane and an adsorption reference point of the target graphic;

[0021] Determining the plane to be adsorbed of the first graphic according to the adsorption reference plane and the adsorption reference point of the target graphic;

[0022] Generate adsorption adjustment information according to the adsorption reference plane, adsorption reference point, and plane to be adsorbed of the target graphic;

[0023] The first graphic is rotated and moved according to the adsorption adjustment information, so that the first graphic is aligned and adsorbed onto the target graphic.

[0024] In one embodiment, determining, according to the dragging direction, a second graphic that meets a preset adsorption condition as a target graphic includes:

[0025] According to the dragging direction, determining a second graphic located within a preset range in the dragging direction;

[0026] When there are multiple second graphics located within the preset range of the dragging direction, a second graphic having the same adsorption line as the first graphic is determined among the second graphics located within the preset range of the dragging direction, or a second graphic having the same shape as the first graphic is determined;

[0027] A second graphic having the same adsorption line as the first graphic, or a second graphic having the same shape as the first graphic, is used as the target graphic.

[0028] In one embodiment, aligning and adsorbing the first graphic onto the target graphic includes:

[0029] Determine the preset snapping alignment mode;

[0030] According to the preset adsorption alignment method, the first graphic is adjusted, and the adjusted first graphic is aligned and adsorbed onto the target graphic;

[0031] In one embodiment, after aligning and adsorbing the first graphic onto the target graphic, the method further comprises:

[0032] When a drag operation on a third graphic is detected, a second distance value between the third graphic and the first graphic, and a third distance value between the third graphic and the target graphic are calculated respectively;

[0033] When the second distance value is greater than the third distance value, and the third distance value is less than the preset adsorption threshold, adsorbing the third graphic onto the target graphic;

[0034] When the second distance value is smaller than the third distance value, and the second distance value is smaller than the preset adsorption threshold, the third graphic is adsorbed onto the first graphic.

[0035] In a second aspect, a device for automatically aligning graphics by dragging is provided, comprising:

[0036] A determination unit, configured to determine whether there is at least one second graphic when a first graphic is dragged in the canvas;

[0037] a coordinate information acquisition unit, configured to monitor and record the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process when the judgment result is yes;

[0038] a drag direction determining unit, configured to determine the drag direction of the first graphic according to the original coordinate information and the drag coordinate information;

[0039] A target graphic acquisition unit, used to determine a second graphic that meets a preset adsorption condition according to the dragging direction, as the target graphic;

[0040] The alignment adsorption unit is used to calculate a first distance value between the first graphic and the target graphic, and when the first distance value is less than a preset adsorption threshold, align and adsorb the first graphic onto the target graphic.

[0041] In a third aspect, a computer device is provided, comprising a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, wherein the processor implements the above-described method for automatic adsorption and alignment of graphics by dragging when executing the computer-readable instructions.

[0042] In a fourth aspect, a readable storage medium of computer-readable instructions is provided, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the graphic dragging automatic adsorption alignment method as described above.

[0043] The above-mentioned method, device, computer equipment and medium for automatic adsorption alignment of dragged graphics, and its method implementation include: when monitoring the dragging of a first graphic in a canvas, judging whether there is at least one second graphic, and when the judgment result is yes, monitoring and recording the original coordinate information of the first graphic, and the drag coordinate information generated by the first graphic during the dragging process; determining the drag direction of the first graphic according to the original coordinate information and the drag coordinate information; determining a second graphic that meets the preset adsorption conditions according to the drag direction as the target graphic; calculating the first distance value between the first graphic and the target graphic, and when the first distance value is less than the preset adsorption threshold, aligning and adsorbing the first graphic to the target graphic. In the present application, when dragging a graphic in a canvas, the drag direction of the graphic is calculated, and the target graphic is determined according to the drag direction. When the distance between the dragged graphic and the target graphic is less than the preset adsorption threshold, the dragged graphic and the target graphic are automatically adsorbed and aligned without manual settings, which reduces the cost of graphic calibration and improves user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative labor.

[0045] Figure 1 is a flow chart of an implementation method of a graphic dragging automatic adsorption alignment method in one embodiment of the present invention;

[0046] Figure 2ais a schematic diagram of dragging a first graphic from top to bottom in one embodiment of the present invention;

[0047] Figure 2b is a schematic diagram of dragging a first graphic from bottom to top in one embodiment of the present invention;

[0048] Figure 2c is a schematic diagram of dragging a first graphic from left to right in one embodiment of the present invention;

[0049] Figure 2d is a schematic diagram of dragging a first graphic from right to left in one embodiment of the present invention;

[0050] Figure 3a It is a schematic diagram of the alignment and adsorption of two plane figures in one embodiment of the present invention Figure 1 ;

[0051] Figure 3b is a second schematic diagram of alignment and adsorption of two planar graphics in one embodiment of the present invention;

[0052] Figure 4a Schematic diagram of two three-dimensional figures aligned and adsorbed in one embodiment of the present invention Figure 1 ;

[0053] Figure 4b is a second schematic diagram of two three-dimensional figures being aligned and adsorbed in one embodiment of the present invention;

[0054] Figure 5 is a schematic diagram of graphic fusion in one embodiment of the present invention;

[0055] Figure 6 It is a structural schematic diagram of a device for automatic adsorption and alignment of graphics by dragging in one embodiment of the present invention;

[0056] Figure 7 is a schematic diagram of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION

[0057] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0058] In one embodiment, if Figure 1 As shown, a method for automatically aligning graphics by dragging is provided, and the method is applied in Figure 1 The server in the example is used as an example to illustrate the following steps:

[0059] In step S110, when it is detected that the first graphic is dragged in the canvas, it is determined whether there is at least one second graphic;

[0060] In the embodiment of the present application, the first graphic can be dragged in the canvas through the Draggable API tool provided by native Javascript. When the dragging of the first graphic is detected, the canvas can be further traversed to determine whether there is at least one second graphic in the canvas.

[0061] Among them, the first figure and the second figure can both be plane figures or three-dimensional figures, or the first figure can be a plane figure and the second figure can be a three-dimensional figure, or vice versa. Specifically, the first figure and the second figure can be vector graphics composed of external contour lines, and illustratively, they can be straight lines, cylinders, rectangles, curves, charts, etc. drawn by computers.

[0062] In one embodiment of the present application, the second graphic and the first graphic may be in the same canvas or in different canvases. When the second graphic and the first graphic are in different canvases, the canvas where the first graphic is located and the canvas where the second graphic is located may be opened simultaneously in the current interface. By dragging the first graphic, the first graphic may be dragged to the canvas where the second graphic is located. Alternatively, when the first graphic is dragged, a virtual first graphic consistent with the first graphic may be generated in the canvas where the second graphic is located. The virtual graphic is aligned and adsorbed to the target graphic. After successful adsorption, the first graphic is eliminated from the canvas of the first graphic, and the virtual first graphic is used as the actual first graphic.

[0063] In the embodiment of the present application, when there is no second graphic, there is no need to perform a subsequent alignment adsorption operation.

[0064] In step S120, when the judgment result is yes, the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process are monitored and recorded;

[0065] In an embodiment of the present application, when the first graphic is dragged, the coordinate information of the current vertices and center point of the first graphic can be automatically recorded. During the process of dragging the first graphic, the dragging coordinate information of the first graphic is recorded in real time. For example, when the mouse selects the first graphic for the first time, the original coordinate information (X0, Y0) of the first graphic is recorded. When the first graphic is dragged with the mouse, the dragging coordinate information (X1, Y1) of the first graphic is recorded in real time according to the position change of the first graphic during the dragging process.

[0066] In step S130, the dragging direction of the first graphic is determined according to the original coordinate information and the dragging coordinate information;

[0067] In the embodiment of the present application, the dragging direction of the first graphic can be calculated by the difference between the original coordinate information and the dragging coordinate information. The specific calculation method is as follows:

[0068] VarisRightward = x1-x0;

[0069] VarisDownward = Y1-Y0;

[0070] Among them, when isDownward>0, it means that the first figure is moving downward, otherwise it is moving upward. Similarly, if isRightward>0, it means that the first figure is moving rightward, otherwise it is moving leftward.

[0071] In the embodiment of the present application, the dragging direction may also be a diagonal line, for example, moving the upper left corner to the lower right corner, etc.

[0072] In step S140, according to the dragging direction, a second graphic that meets the preset adsorption condition is determined as a target graphic;

[0073] In the embodiment of the present application, when the drag direction of the first graphic is determined, it can be further determined whether there is a second graphic within the preset range of the drag direction. If the second graphic exists, the second graphic can be used as the target graphic. That is, when the drag direction is moving in the direction where the second graphic is located, the second graphic is used as the target graphic. When the drag direction is moving in the direction away from the second graphic, the second graphic is not used as the target graphic and cannot be adsorbed.

[0074] In one embodiment of the present application, when the preset range of the dragging direction includes multiple second graphics, the distance between the first graphic and the second graphic can be calculated, and the second graphic with the smaller distance can be used as the target graphic.

[0075] In one embodiment of the present application, when there are two second graphics at the same time and the distance between them is the same as that between the first graphics, different weights can be further assigned to the shape, type or adsorption characteristics of each second graphic, and the adsorption score can be calculated, and the second graphic with a larger adsorption score can be used as the target graphic.

[0076] In step S150, a first distance value between the first graphic and the target graphic is calculated, and when the first distance value is less than a preset adsorption threshold, the first graphic is aligned and adsorbed onto the target graphic.

[0077] In the embodiment of the present application, when the first graphic is dragged in different directions, the first distance value between the first graphic and the target graphic can be calculated as follows:

[0078] Assume that the first graphic and the target graphic are both rectangles, the first graphic Rect1 (length is 200, width is 100), and the target graphic Rect2 (length is 100, width is 100).

[0079] See also Figure 2a , the coordinates of the top left vertex of Rect1 are (100, 100), and the coordinates of the top left vertex of Rect2 are (100, 300), then, Rect1.bottom = Rect1.top + Rect1.height = 100 + 100 = 200, and Rect2.top = 300. When Rect1 moves from top to bottom, Rect1.bottom will gradually increase. When Rect2.top-Rect1.bottom<=preset adsorption threshold, Rect1.top can be set to Rect2.top-Rect1.height = 200. Then, Rect1 and Rect2 are automatically adsorbed.

[0080] See also Figure 2b , the coordinates of the top left corner of Rect1 are (100, 300), and the coordinates of the top left corner of Rect2 are (100, 100), then Rect2.bottom=Rect2.top+Rect2.height=100+100=200, and Rect1.Top=300 can be obtained at the same time. When Rect1 moves from bottom to top, Rect1.bottom will gradually become smaller. When Rect1.top-Rect1.bottom<=preset adsorption threshold, Rect1.top can be automatically set to Rect2.bottom=Rect2.top+Rect2.height=200. Then, the automatic adsorption of Rect1 and Rect2 is completed.

[0081] See also Figure 2c , the coordinates of the upper left corner of Rect1 are (100, 100), and the coordinates of the upper left corner of Rect2 are (500, 300), then Rect1.right = Rect1.left + Rect1.width = 100 + 200 = 300, and Rect2.left = 500 can be obtained at the same time. When Rect1 moves from left to right, Rect1.right will gradually increase. When Rect2.left-Rect1.right <= the preset adsorption threshold, Rect1.left can be automatically set to Rect2.left-Rect1.width = 300, thereby completing the automatic adsorption of Rect1 and Rect2.

[0082] See also Figure 2d, the coordinates of the upper left corner of Rect1 are (500, 100), and the coordinates of the upper left corner of Rect2 are (100, 300), then Rect2.right = Rect2.left + Rect2.width = 100 + 200 = 300, and Rect1.left = 500 can be obtained at the same time. When Rect1 moves from right to left, Rect1.left will gradually become smaller. When Rect1.left-Rect2.right <= the preset adsorption threshold, Rect1.left is automatically set to Rect2.left + Rect2.width = 300, thereby completing the automatic adsorption of Rect1 and Rect2.

[0083] In an embodiment of the present application, the preset adsorption threshold may be a specific numerical value, such as 3 pixel values, etc., which may be set according to actual conditions, and the present application does not limit it here.

[0084] In one embodiment of the present application, when the first distance value is less than the preset adsorption threshold, the first graphic can be aligned and adsorbed onto the target graphic by vertex adsorption, edge adsorption, surface adsorption, etc.

[0085] In an embodiment of the present application, a method for automatic adsorption and alignment of a graphic drag is provided, including: when a first graphic is detected to be dragged in a canvas, determining whether there is at least one second graphic, and when the judgment result is yes, monitoring and recording the original coordinate information of the first graphic, and the drag coordinate information generated by the first graphic during the dragging process; determining the drag direction of the first graphic according to the original coordinate information and the drag coordinate information; determining a second graphic that meets the preset adsorption conditions according to the drag direction as a target graphic; calculating a first distance value between the first graphic and the target graphic, and when the first distance value is less than a preset adsorption threshold, aligning and adsorbing the first graphic to the target graphic. In the present application, when a graphic is dragged in a canvas, the drag direction of the graphic is calculated, and the target graphic is determined according to the drag direction. When the distance between the dragged graphic and the target graphic is less than the preset adsorption threshold, the dragged graphic and the target graphic are automatically adsorbed and aligned without manual settings, which reduces the cost of graphic calibration and improves user experience.

[0086] In one embodiment, a process for implementing a method for automatically aligning graphics by dragging is provided, including:

[0087] In step S110, when it is detected that the first graphic is dragged in the canvas, it is determined whether there is at least one second graphic;

[0088] In the embodiment of the present application, the first graphic can be dragged in the canvas through the Draggable API tool provided by native Javascript. When the dragging of the first graphic is detected, the canvas can be further traversed to determine whether there is at least one second graphic in the canvas.

[0089] Among them, the first figure and the second figure can both be plane figures or three-dimensional figures, or the first figure can be a plane figure and the second figure can be a three-dimensional figure, or vice versa. Specifically, the first figure and the second figure can be vector graphics composed of external contour lines, and illustratively, they can be straight lines, cylinders, rectangles, curves, charts, etc. drawn by computers.

[0090] In one embodiment of the present application, the second graphic and the first graphic may be in the same canvas or in different canvases. When the second graphic and the first graphic are in different canvases, the canvas where the first graphic is located and the canvas where the second graphic is located may be opened simultaneously in the current interface. By dragging the first graphic, the first graphic may be dragged to the canvas where the second graphic is located. Alternatively, when the first graphic is dragged, a virtual first graphic consistent with the first graphic may be generated in the canvas where the second graphic is located. The virtual graphic is aligned and adsorbed to the target graphic. After successful adsorption, the first graphic is eliminated from the canvas of the first graphic, and the virtual first graphic is used as the actual first graphic.

[0091] In step S120, when the judgment result is yes, the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process are monitored and recorded;

[0092] In an embodiment of the present application, when the first graphic is dragged, the coordinate information of the current vertices and center point of the first graphic can be automatically recorded. During the process of dragging the first graphic, the dragging coordinate information of the first graphic is recorded in real time. For example, when the mouse selects the first graphic for the first time, the original coordinate information (X0, Y0) of the first graphic is recorded. When the first graphic is dragged with the mouse, the dragging coordinate information (X1, Y1) of the first graphic is recorded in real time according to the position change of the first graphic during the dragging process.

[0093] In step S130, the dragging direction of the first graphic is determined according to the original coordinate information and the dragging coordinate information;

[0094] In the embodiment of the present application, the dragging direction of the first graphic can be calculated by the difference between the original coordinate information and the dragging coordinate information. The specific calculation method is as follows:

[0095] VarisRightward = x1-x0;

[0096] VarisDownward = Y1-Y0;

[0097] Among them, when isDownward>0, it means that the first figure is moving downward, otherwise it is moving upward. Similarly, if isRightward>0, it means that the first figure is moving rightward, otherwise it is moving leftward.

[0098] In the embodiment of the present application, the dragging direction may also be a diagonal line, for example, moving the upper left corner to the lower right corner, etc.

[0099] In step S140, according to the dragging direction, a second graphic that meets the preset adsorption condition is determined as a target graphic;

[0100] In the embodiment of the present application, when the drag direction of the first graphic is determined, it can be further determined whether there is a second graphic within the preset range of the drag direction. If the second graphic exists, the second graphic can be used as the target graphic. That is, when the drag direction is moving in the direction where the second graphic is located, the second graphic is used as the target graphic. When the drag direction is moving in the direction away from the second graphic, the second graphic is not used as the target graphic and cannot be adsorbed.

[0101] In one embodiment of the present application, when the preset range of the dragging direction includes multiple second graphics, the distance between the first graphic and the second graphic can be calculated, and the second graphic with the smaller distance can be used as the target graphic.

[0102] In one embodiment of the present application, when there are two second graphics at the same time and the distance between them is the same as that between the first graphics, different weights can be further assigned to the shape, type or adsorption characteristics of each second graphic, and the adsorption score can be calculated, and the second graphic with a larger adsorption score can be used as the target graphic.

[0103] In an embodiment of the present application, determining, according to the dragging direction, a second graphic that meets a preset adsorption condition as a target graphic includes:

[0104] According to the dragging direction, determining a second graphic located within a preset range in the dragging direction;

[0105] When there are multiple second graphics located within the preset range of the dragging direction, a second graphic having the same adsorption feature as the first graphic is determined among the second graphics located within the preset range of the dragging direction, or a second graphic having the same shape as the first graphic is determined;

[0106] A second graphic having the same adsorption line as the first graphic, or a second graphic having the same shape as the first graphic, is used as the target graphic.

[0107] Specifically, when the second graphics include multiple ones, the target graphic can also be determined according to the type and shape of the second graphics. Specifically, when there are two second graphics, one of which is a rectangle and the other is a circle, and the first graphic is also a rectangle, the second graphic with a rectangular shape is used as the target graphic; or, when one of the second graphics is a three-dimensional graphic and the other second graphic is a plane graphic, and the first graphic is a plane graphic, the second graphic of the type of a plane graphic is used as the target graphic.

[0108] Furthermore, when the second graphic includes multiple graphics, the target graphic can also be determined based on the adsorption characteristics of the first graphic and the second graphic. Specifically, when the first graphic includes a 30-degree inclined line and the second graphic also includes a 30-degree inclined line, it can be used as the target graphic.

[0109] In step S150, the distance value between the first graphic and the target graphic is calculated, and when the distance value is less than a preset adsorption threshold, the first graphic is aligned and adsorbed onto the target graphic.

[0110] In an embodiment of the present application, the preset adsorption threshold may be a specific numerical value, such as 3 pixel values, etc., which may be set according to actual conditions, and the present application does not limit it here.

[0111] In one embodiment of the present application, when the first distance value is less than the preset adsorption threshold, the first graphic can be aligned and adsorbed onto the target graphic by vertex adsorption, edge adsorption, surface adsorption, etc.

[0112] In one embodiment, the step of aligning and adsorbing the first graphic onto the target graphic includes:

[0113] Determining whether the sideline and the centerline of the target figure are on the same straight line as any sideline or centerline of the first figure;

[0114] When the judgment result is yes, an alignment reference line between the first graphic and the target graphic is generated; and the first graphic is aligned and adsorbed onto the target graphic according to the alignment reference line.

[0115] Specifically, the coordinate information of all vertices and center points of the target graphic can be recorded in advance. When the distance value between the first graphic and the target graphic is less than a preset adsorption threshold, the coordinate information of each vertex of the first graphic can be determined to match the coordinate information of the recorded target graphic. When the coordinates of the edge line and center line of the target graphic are consistent with any edge line or center line of the first graphic, it can be determined that the edge line and center line of the target graphic are in a straight line with any edge line or center line of the first graphic. At this time, the alignment reference line can be generated on the edge line and center line of the target graphic respectively, so that the alignment adsorption method can be arbitrarily selected according to the alignment reference line. For example, taking the alignment reference line on the center line as an example, the first graphic and the target graphic can be aligned vertically with the center line.

[0116] In one embodiment of the present application, when dragging a first graphic, an alignment reference line of the first graphic can be generated on the side lines and / or center lines of the first graphic, so that a target graphic can be selected based on the alignment reference line of the first graphic, so that the first graphic can be dragged to the target position and aligned with the target graphic. For example, if the first graphic and the second graphic are both rectangles, the two long sides of the first graphic can be extended outward to form the alignment reference line. At this time, when dragging the first graphic left and right, the alignment reference line can be used to assist in aligning the target graphic, and a second graphic with the same width can be selected as the target graphic to make the graphics after adsorption and alignment more beautiful.

[0117] In an embodiment of the present application, the first graphic and the second graphic are both plane graphics, and when the distance value is less than a preset adsorption threshold, aligning and adsorbing the first graphic onto the target graphic includes:

[0118] Determining an adsorption reference vertex and an adsorption reference line of the target graphic;

[0119] Determining the edge to be adsorbed of the first figure according to the adsorption reference vertex and adsorption reference line of the target figure;

[0120] Generate adsorption adjustment information according to the adsorption reference vertex, the adsorption reference line and the edge to be adsorbed;

[0121] According to the adsorption adjustment information, the first graphic is rotated and moved so that the first graphic is aligned and adsorbed onto the target graphic.

[0122] In an embodiment of the present application, the adsorption reference vertex and adsorption reference line of the target figure can be determined according to the dragging direction of the first figure. For example, when the dragging direction of the first figure is from top to bottom, the edge line of the target figure close to the first figure is the adsorption reference line, and the vertex on the edge line that is closest to the first figure is the adsorption reference vertex.

[0123] In an embodiment of the present application, the adsorption reference vertex and the adsorption reference line can also be determined according to the shape of the target figure. For example, when the target figure is a right triangle, the right-angled vertex is the adsorption reference vertex, and the right-angled side closest to the first figure is the adsorption reference vertex.

[0124] See also Figure 3a In an embodiment of the present application, after determining the adsorption reference vertex and adsorption reference line of the target figure, the adsorption edge of the first figure can also be determined based on the adsorption reference vertex and the adsorption reference line. For example, when the target figure and the first figure are both right-angled triangles, the adsorption reference vertex is the right-angled vertex O, and the adsorption reference line is the F1 edge. Then, the adsorption edge of the first figure can be determined to be F2. At this time, the first figure can be rotated so that the F2 edge corresponds to the F1 edge, so that the first figure is adsorbed and aligned based on the F1 edge, the F2 edge and the right-angled vertex.

[0125] Referring to 3b, when the target figure and the first figure are both rectangles, the adsorption reference vertex of the target image is O, and the adsorption reference line is the F1 edge, then the adsorption edge of the first figure can be determined to be F2. At this time, the F2 edge of the first figure can be aligned with the F1 edge with the adsorption reference vertex O and adsorbed.

[0126] In an embodiment of the present application, when both the first graphic and the target graphic are three-dimensional graphics, when the distance value is less than a preset adsorption threshold, aligning and adsorbing the first graphic onto the target graphic includes:

[0127] Determining an adsorption reference plane and an adsorption reference point of the target graphic;

[0128] Determining the plane to be adsorbed of the first graphic according to the adsorption reference plane and the adsorption reference point of the target graphic;

[0129] Generate adsorption adjustment information according to the adsorption reference plane, adsorption reference point, and plane to be adsorbed of the target graphic;

[0130] The first graphic is rotated and moved according to the adsorption adjustment information, so that the first graphic is aligned and adsorbed onto the target graphic.

[0131] In an embodiment of the present application, the adsorption reference plane and the adsorption reference point of the target graphic can be determined according to the dragging direction of the first graphic. For example, when the dragging direction of the first graphic is from left to right, the plane of the target graphic close to the first graphic is the adsorption reference plane, and the vertex of the upper right corner of the target graphic that is closest to the first graphic is the adsorption reference vertex.

[0132] In an embodiment of the present application, the adsorption reference plane and the adsorption reference point of the target graphic can also be determined according to the shape and placement position of the target graphic. For example, when the target graphic is a cylinder, the top plane of the cylinder can be used as the adsorption reference plane, and the center of the top plane can be used as the adsorption reference point.

[0133] See also Figure 4a In an embodiment of the present application, when the adsorption reference plane and the adsorption reference point of the target graphic are determined, the adsorption reference plane of the first graphic can also be determined based on the adsorption reference plane and the adsorption reference point. For example, when the first graphic and the target graphic are both cylinders, the first graphic is dragged from right to left. At this time, the adsorption reference plane of the target graphic is the circular plane E1 at the top of the cylinder, and the adsorption reference point is the center O of the top circular plane. Then, the adsorption plane of the first graphic can be the top plane or the bottom plane E2 of the cylinder. At this time, the adsorption adjustment information can be obtained based on the adsorption reference plane E1, the adsorption reference point O and the adsorption plane E2 of the target graphic, so as to perform corresponding flipping or movement on the first graphic, so that the adsorption plane E2 is aligned and adsorbed with the adsorption reference plane E1 with the adsorption reference point O.

[0134] See also Figure 4b When the first figure and the target figure are both rectangular parallelepipeds, the first figure is dragged from right to left. At this time, the adsorption reference plane of the target figure is the right plane E1 of the rectangular parallelepiped, and the adsorption reference point is the lower right corner O of the right plane of the rectangular parallelepiped. Then, the adsorption surface of the first figure can be the left plane E2 (not shown in the figure). At this time, according to the adsorption reference plane E1, the adsorption reference point O and the adsorption surface E2, the coordinates of each vertex of the first figure are modified to move the first figure to the corresponding position and align and adsorb it with the target figure with the adsorption reference point O.

[0135] In one embodiment of the present application, when the first figure and the target figure are both three-dimensional figures, an edge line of the target figure can also be used as an adsorption reference line, and a vertex on the edge line can be used as an adsorption reference point to achieve alignment and adsorption of the edge lines and vertices of the target figure with the first figure.

[0136] In one embodiment of the present application, when the first figure is a three-dimensional figure and the target figure is a two-dimensional figure, the edge lines and vertices of the target figure can be used as the adsorption reference lines and adsorption reference points. When the target figure is a three-dimensional figure and the first figure is a two-dimensional figure, any plane and vertex of the target figure can be used as the adsorption reference plane and adsorption reference point.

[0137] In one embodiment of the present application, aligning and adsorbing the first graphic onto the target graphic includes:

[0138] Determine the preset snapping alignment mode;

[0139] According to the adsorption alignment method, the first graphic is adjusted, and the adjusted first graphic is aligned and adsorbed onto the target graphic;

[0140] In the embodiment of the present application, the adsorption alignment method includes, but is not limited to, any one of vertex alignment, vertical centerline alignment, edge alignment, horizontal alignment, left-right alignment, and top-bottom alignment, or any combination thereof.

[0141] In the embodiment of the present application, the adsorption alignment method can be determined according to the type and shape of the figure. For example, when the figure is a plane figure, it can be edge alignment, top-bottom alignment, left-right alignment, etc. When the figure is a three-dimensional figure, it can be vertex alignment, vertical centerline alignment, horizontal alignment, etc. When the shape of the figure is a cylinder, it can be vertical centerline alignment, and when the shape of the figure is a rectangle, it can be edge alignment. In addition, the above alignment methods can also be combined. For example, edge alignment and vertex alignment can be combined to satisfy both edge alignment and vertex alignment.

[0142] In one embodiment of the present application, after aligning and adsorbing the first graphic onto the target graphic, the method includes:

[0143] When a drag operation on a third graphic is detected, a second distance value between the third graphic and the first graphic, and a third distance value between the third graphic and the target graphic are calculated respectively;

[0144] When the second distance value is greater than the third distance value, and the third distance value is less than the preset adsorption threshold, adsorbing the third graphic onto the target graphic;

[0145] When the second distance value is smaller than the third distance value, and the second distance value is smaller than the preset adsorption threshold, the third graphic is adsorbed onto the first graphic.

[0146] Specifically, after the first graphic is adsorbed to the target graphic, when a drag operation on the third graphic is monitored, when the position of the target graphic is within the preset range of the drag direction of the third graphic, the second distance value between the first graphic and the third graphic, and the third distance value between the third graphic and the target graphic can be judged. When the second distance value is smaller and the second distance value is less than the preset adsorption threshold, the first graphic can be used as the target graphic and the third graphic can be aligned and adsorbed to the first graphic. When the third distance value is smaller and the third distance value is less than the preset adsorption threshold, the third graphic can be adsorbed to the target graphic to achieve aligned adsorption.

[0147] In one embodiment of the present application, when the graphics meet the overlapping adsorption conditions, the first graphic can be used as the target graphic for adsorption of the next graphic. For example, when the graphic is a circular plane and the area of ​​the third graphic is smaller than the area of ​​the first graphic, the third graphic can be adsorbed on the first graphic. When the area of ​​the fourth graphic is smaller than the third graphic, the third graphic is used as the target graphic and the fourth graphic is adsorbed onto the third graphic, and so on.

[0148] The overlapping adsorption method may adopt vertical center line alignment or horizontal center alignment.

[0149] In one embodiment of the present application, after the first graphic is aligned and adsorbed onto the target graphic, a reset operation may be performed on the adsorbed graphic, that is, the adsorption state is released so that the first graphic is restored to its original position.

[0150] See also Figure 5 In one embodiment of the present application, when the distance value is less than a preset adsorption threshold, the target graphic is liquefied and deformed, so as to align and adsorb the first graphic through the liquefied deformation area of ​​the target graphic, and form a new graphic. Specifically, the first target graphic is A, and the first graphic is B. When the distance between the first graphic B and the target graphic A is less than the preset adsorption threshold, the target graphic A can be liquefied and deformed, and the first graphic B is aligned and adsorbed through the liquefied deformation area, so as to merge the first graphic with the second graphic to form a new graphic. Alternatively, the target graphic and the first graphic can be liquefied and deformed at the same time, and the alignment and adsorption between the target graphic and the first graphic can be achieved through the liquefied deformation areas of the two.

[0151] Different graphics can be adsorbed and fused to form different new graphics, which increases animation effects and improves user experience.

[0152] In the present application, when a graphic is dragged in the canvas, the dragging direction of the graphic is calculated, and the target graphic is determined based on the dragging direction. When the distance between the dragged graphic and the target graphic is less than a preset adsorption threshold, the dragged graphic and the target graphic are automatically adsorbed and aligned without manual settings, thereby reducing the cost of graphic calibration and improving the user experience.

[0153] It should be understood that the order of execution of the steps in the above embodiment does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention.

[0154] In one embodiment, a device for automatically aligning a graphic by dragging and adsorbing is provided, and the device for automatically aligning a graphic by dragging and adsorbing corresponds to the method for automatically aligning a graphic by dragging and adsorbing in the above embodiment. Figure 6As shown, the automatic adsorption alignment device for dragging a graphic includes: a judgment unit 10, a coordinate information acquisition unit 20, a drag direction determination unit 30, a target graphic acquisition unit 40 and an alignment adsorption unit 50. The functional modules are described in detail as follows:

[0155] A determination unit 10, configured to determine whether there is at least one second graphic when a first graphic is dragged in the canvas;

[0156] The coordinate information acquisition unit 20 is used to monitor and record the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process when the judgment result is yes;

[0157] A drag direction determining unit 30, configured to determine the drag direction of the first graphic according to the original coordinate information and the drag coordinate information;

[0158] A target graphic acquisition unit 40 is used to determine, according to the dragging direction, a second graphic that meets a preset adsorption condition as a target graphic;

[0159] The alignment adsorption unit 50 is used to calculate a first distance value between the first graphic and the target graphic, and align and adsorb the first graphic onto the target graphic when the first distance value is less than a preset adsorption threshold.

[0160] In one embodiment, the target image acquisition unit 40 is further configured to:

[0161] According to the dragging direction, determining a second graphic located within a preset range in the dragging direction;

[0162] When there are multiple second graphics located within the preset range of the dragging direction, a second graphic having the same adsorption feature as the first graphic is determined among the second graphics located within the preset range of the dragging direction, or a second graphic having the same shape as the first graphic is determined;

[0163] A second graphic having the same adsorption line as the first graphic, or a second graphic having the same shape as the first graphic, is used as the target graphic.

[0164] In one embodiment, the alignment adsorption unit 50 is further used for:

[0165] When the first distance value is less than a preset adsorption threshold, determining whether the edge line and the center line of the target figure are on the same straight line as any edge line or center line of the first figure;

[0166] When the judgment result is yes, an alignment reference line between the first graphic and the target graphic is generated; and the first graphic is aligned and adsorbed onto the target graphic according to the alignment reference line.

[0167] In one embodiment, when the first graphic and the target graphic are both planar graphics, the alignment adsorption unit 50 is further used to:

[0168] Determining an adsorption reference vertex and an adsorption reference line of the target graphic;

[0169] Determining the edge to be adsorbed of the first figure according to the adsorption reference vertex and adsorption reference line of the target figure;

[0170] Generate adsorption adjustment information according to the adsorption reference vertex, the adsorption reference line and the edge to be adsorbed;

[0171] According to the adsorption adjustment information, the first graphic is rotated and moved so that the first graphic is aligned and adsorbed onto the target graphic.

[0172] In one embodiment, when the first graphic and the target graphic are both three-dimensional graphics, the alignment adsorption unit 50 is further used to:

[0173] Determining an adsorption reference plane and an adsorption reference point of the target graphic;

[0174] Determining the plane to be adsorbed of the first graphic according to the adsorption reference plane and the adsorption reference point of the target graphic;

[0175] Generate adsorption adjustment information according to the adsorption reference plane, adsorption reference point, and plane to be adsorbed of the target graphic;

[0176] The first graphic is rotated and moved according to the adsorption adjustment information, so that the first graphic is aligned and adsorbed onto the target graphic.

[0177] In one embodiment, the alignment adsorption unit 50 is further used for:

[0178] When the first distance value is less than a preset adsorption threshold, determining a preset adsorption alignment mode;

[0179] According to the preset adsorption alignment method, the first graphic is adjusted, and the adjusted first graphic is aligned and adsorbed onto the target graphic;

[0180] In one embodiment, the image dragging automatic adsorption alignment device further includes: a third graphic adsorption unit, which is used to:

[0181] When a drag operation on a third graphic is detected, a second distance value between the third graphic and the first graphic, and a third distance value between the third graphic and the target graphic are calculated respectively;

[0182] When the second distance value is greater than the third distance value, and the third distance value is less than the preset adsorption threshold, adsorbing the third graphic onto the target graphic;

[0183] When the second distance value is smaller than the third distance value, and the second distance value is smaller than the preset adsorption threshold, the third graphic is adsorbed onto the first graphic.

[0184] In the present application, when a graphic is dragged in the canvas, the dragging direction of the graphic is calculated, and the target graphic is determined based on the dragging direction. When the distance between the dragged graphic and the target graphic is less than a preset adsorption threshold, the dragged graphic and the target graphic are automatically adsorbed and aligned without manual settings, thereby reducing the cost of graphic calibration and improving the user experience.

[0185] For the specific definition of the automatic adsorption alignment device for dragging graphics, please refer to the definition of the automatic adsorption alignment method for dragging graphics above, which will not be repeated here. Each module in the above-mentioned automatic adsorption alignment device for dragging graphics can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0186] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 7 As shown. The computer device includes a processor, a memory, and a network interface connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a readable storage medium. The readable storage medium stores computer-readable instructions. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer-readable instructions are executed by the processor, a method for automatic adsorption and alignment of graphics dragging is implemented. The readable storage medium provided in this embodiment includes a non-volatile readable storage medium and a volatile readable storage medium.

[0187] In one embodiment, a computer device is provided, including a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, wherein the processor implements the above-described method for automatic adsorption and alignment of graphics by dragging when executing the computer-readable instructions.

[0188] In one embodiment, a readable storage medium of computer-readable instructions is provided. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the above-mentioned graphic dragging automatic adsorption alignment method.

[0189] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing related hardware through computer-readable instructions, and the computer-readable instructions can be stored in a non-volatile readable storage medium or a volatile readable storage medium. When the computer-readable instructions are executed, they may include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0190] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0191] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. A method for automatic adsorption alignment by dragging a graphic, characterized in that: The method comprises: When the dragging of the first graphic in the canvas is detected, determining whether there is at least one second graphic; When the judgment result is yes, monitoring and recording the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process; Determining a drag direction of the first graphic according to the original coordinate information and the drag coordinate information; According to the dragging direction, determining a second graphic that meets a preset adsorption condition as a target graphic; Calculating a first distance value between the first graphic and the target graphic, and when the first distance value is less than a preset adsorption threshold, liquefying and deforming the target graphic, so as to align and adsorb the first graphic through the liquefied deformation area of ​​the target graphic, and forming a new graphic, and different graphics are adsorbed and fused to form different new graphics; When the second graphic and the first graphic are in different canvases, the canvas where the first graphic is located and the canvas where the second graphic is located are opened simultaneously in the current interface, and the first graphic is dragged to the canvas where the second graphic is located by dragging the first graphic, or, when dragging the first graphic, a virtual first graphic consistent with the first graphic is generated in the canvas where the second graphic is located, and the virtual first graphic is aligned and adsorbed with the target graphic. After the adsorption is successful, the first graphic is eliminated from the canvas where the first graphic is located, and the virtual first graphic is used as the actual first graphic; The step of determining, according to the dragging direction, a second graphic that meets a preset adsorption condition as a target graphic includes: According to the dragging direction, determining a second graphic located within a preset range in the dragging direction; When there are multiple second graphics located within the preset range of the dragging direction, among the second graphics located within the preset range of the dragging direction, determine a second graphic having the same adsorption feature as the first graphic, or determine a second graphic having the same shape as the first graphic; A second graphic having the same adsorption line as the first graphic, or a second graphic having the same shape as the first graphic, is used as the target graphic.

2. A device for automatically aligning graphics by dragging, characterized in that: The device comprises: A determination unit, configured to determine whether there is at least one second graphic when a first graphic is dragged in the canvas; a coordinate information acquisition unit, configured to monitor and record the original coordinate information of the first graphic and the dragging coordinate information generated by the first graphic during the dragging process when the judgment result is yes; a drag direction determining unit, configured to determine the drag direction of the first graphic according to the original coordinate information and the drag coordinate information; A target graphic acquisition unit, used to determine a second graphic that meets a preset adsorption condition according to the dragging direction, as the target graphic; An alignment adsorption unit, used for calculating a first distance value between the first graphic and the target graphic, and when the first distance value is less than a preset adsorption threshold, liquefying and deforming the target graphic, so as to align and adsorb the first graphic through the liquefied deformation area of ​​the target graphic, and form a new graphic, and different graphics are adsorbed and fused to form different new graphics; The alignment adsorption unit is further used for: when the second graphic and the first graphic are in different canvases, opening the canvas where the first graphic is located and the canvas where the second graphic is located in the current interface at the same time, dragging the first graphic to the canvas where the second graphic is located by dragging the first graphic, or, when dragging the first graphic, generating a virtual first graphic consistent with the first graphic in the canvas where the second graphic is located, aligning and adsorbing the virtual first graphic with the target graphic, and after successful adsorption, eliminating the first graphic in the canvas where the first graphic is located, and using the virtual first graphic as the actual first graphic; Wherein, the target graphics acquisition unit includes: According to the dragging direction, determining a second graphic located within a preset range in the dragging direction; When there are multiple second graphics located within the preset range of the dragging direction, among the second graphics located within the preset range of the dragging direction, determine a second graphic having the same adsorption feature as the first graphic, or determine a second graphic having the same shape as the first graphic; A second graphic having the same adsorption line as the first graphic, or a second graphic having the same shape as the first graphic, is used as the target graphic.

3. A computer device comprising a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, characterized in that: When the processor executes the computer-readable instructions, the method for automatic adsorption and alignment of graphics by dragging is implemented as claimed in claim 1.

4. A computer-readable storage medium of computer-readable instructions, characterized in that: When the computer-readable instructions are executed by one or more processors, the one or more processors execute the graphic dragging automatic adsorption alignment method as claimed in claim 1.

Images