Connecting line avoiding method and device for online editor elements, equipment and medium

Abstract

The invention provides a connecting line avoiding method and device for online editor elements, equipment and a medium, and relates to the technical field of computers, in particular to the technical field of online document chart editing. According to the specific implementation scheme, boundary coordinates of a starting point element and an end point element are obtained; acquiring a starting point coordinate and a starting point extension direction of the connecting line, and an end point coordinate and an end point termination direction of the connecting line, and determining an included angle of the connecting line according to the starting point extension direction and the end point termination direction of the connecting line; and determining an adjustment value of the connecting line according to the type of the connecting line, the included angle and the relative position relationship between the starting point element and the end point element, so as to obtain a connecting path of the starting point element and the end point element through the adjustment value. According to the method and the device, overlapping of the connecting line and other elements can be avoided, and the path of the connecting line between the starting point element and the end point element is optimal through accurate calculation of the adjustment value.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, specifically to the field of online document chart editing technology, and in particular to a method, device, electronic device and storage medium for avoiding connection lines of online editor elements. Background Art

[0002] In the field of modern graphic design and information visualization, online editing scenes have become a key component, especially when creating complex graphics such as mind maps, flowcharts, organizational charts, etc. The effectiveness of these graphics relies on their clarity and intuitiveness, both of which are closely related to the design and behavior of connectors. The role of a connector is to clearly connect two logical or visual elements.

[0003] However, when elements move on a graphical interface, traditional connecting lines may not be able to adapt to such dynamic changes. Without a proper handling mechanism, connecting lines may cross elements, resulting in a messy layout, which not only affects the aesthetics of the graphics but also may lead to a poor user experience. In addition, connecting lines crossing elements may also cause visual confusion, making the graphics difficult to read and understand. Summary of the invention

[0004] The present invention provides a method, device, electronic device and storage medium for avoiding connection lines of online editor elements.

[0005] According to one aspect of the present disclosure, a method for avoiding connection lines of online editor elements is provided, the method comprising:

[0006] Get the boundary coordinates of the starting and ending elements;

[0007] Obtaining the starting point coordinates and the extending direction of the starting point of the connecting line, as well as the ending point coordinates and the terminating direction of the ending point of the connecting line, and determining the angle of the connecting line according to the extending direction of the starting point and the terminating direction of the ending point of the connecting line;

[0008] An adjustment value of the connection line is determined according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end point element, so as to obtain a connection path between the starting element and the end point element through the adjustment value.

[0009] According to another aspect of the present disclosure, a connection line avoidance device for online editor elements is provided, comprising:

[0010] A first acquisition module is used to acquire the boundary coordinates of the starting point element and the end point element;

[0011] A second acquisition module is used to acquire the starting point coordinates and the extending direction of the starting point of the connecting line, and the ending point coordinates and the terminating direction of the ending point of the connecting line, and determine the angle of the connecting line according to the extending direction of the starting point and the terminating direction of the ending point of the connecting line;

[0012] A determination module is used to determine the adjustment value of the connection line according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end element, so as to obtain the connection path between the starting element and the end element through the adjustment value.

[0013] According to a third aspect of the present disclosure, there is provided an electronic device, including:

[0014] at least one processor; and

[0015] a memory communicatively connected to the at least one processor; wherein,

[0016] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute any method in any of the above technical solutions.

[0017] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute any one of the methods described in the above technical solutions.

[0018] According to a fifth aspect of the present disclosure, a computer program product is provided, including a computer program, wherein the computer program implements any one of the methods described in the above technical solutions when executed by a processor.

[0019] The present disclosure provides a method, device, equipment and storage medium for avoiding connecting lines of online editor elements. The present disclosure obtains the boundary coordinates of the starting point and end point elements, as well as the parameters such as the starting point coordinates, the end point coordinates, the starting point extension direction and the end point termination direction of the connecting line, and then can calculate the precise connecting line adjustment value according to these parameters. By adjusting the connecting line with the precise adjustment value, the connection path of the obtained connecting line is more accurate. In this way, the method can not only avoid the overlap of the connecting line with other elements, but also make the path of the connecting line between the starting point element and the end point element optimal by accurately calculating the adjustment value. In addition, the scheme of the present application not only improves the clarity and aesthetics of the graphic layout, reduces visual confusion, but also significantly improves the user's interactive experience and the work efficiency of engineering personnel through the automated and intelligent avoidance process.

[0020] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure.

[0022] Figure 1 is a schematic diagram of the steps of a method for avoiding connection lines of online editor elements in an embodiment of the present disclosure;

[0023] Figure 2 is a schematic diagram of a first type of connection line that exits from the east and enters the west in an embodiment of the present disclosure;

[0024] Figure 3 is a schematic diagram of an east-out east-in connection line of the first type in an embodiment of the present disclosure;

[0025] Figure 4 This is a schematic diagram of a second type of connecting line that exits from the east and enters the north in an embodiment of the present disclosure, and the end point element is located in the first quadrant interval;

[0026] Figure 5 This is a schematic diagram of another embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the north, and the terminal element is located in the first quadrant interval;

[0027] Figure 6 This is a schematic diagram of a second type of connecting line that exits from the east and enters the north in an embodiment of the present disclosure, and the end point element is located in the second quadrant interval;

[0028] Figure 7 This is a schematic diagram of an east-out and north-in connection line of the second type in an embodiment of the present disclosure, with the terminal element located in the third quadrant;

[0029] Figure 8 This is a schematic diagram of another embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the north, and the terminal element is located in the third quadrant interval;

[0030] Fig. 9 This is a schematic diagram of a second type of connecting line that exits from the east and enters the south in an embodiment of the present disclosure, and the terminal element is located in the second quadrant interval;

[0031] Fig.10 This is a schematic diagram of a second type of connecting line that exits from the east and enters the south in an embodiment of the present disclosure, and the end point element is located in the third quadrant interval;

[0032] Fig.11 This is a schematic diagram of a second type of connecting line that exits from the east and enters the south in an embodiment of the present disclosure, with the terminal element located in the fourth quadrant;

[0033] Fig.12 This is a schematic diagram of another embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the south, and the terminal element is located in the fourth quadrant interval;

[0034] Fig.13 This is a schematic diagram of a third type of connecting line that goes east and west in an embodiment of the present disclosure, with the end point element located in the second quadrant;

[0035] Fig.14 This is a schematic diagram of a third type of connecting line that goes east and west in another embodiment of the present disclosure, with the terminal element located in the second quadrant;

[0036] Fig.15 This is a schematic diagram of a third type of connecting line that goes east and west in an embodiment of the present disclosure, with the terminal element located in the third quadrant;

[0037] Fig.16 This is a schematic diagram of another embodiment of the present disclosure, which is a third type of connecting line that goes out from the east and goes west, and the terminal element is located in the third quadrant interval;

[0038] Fig.17 It is a schematic diagram of an east-out and east-in connection line of the third type in an embodiment of the present disclosure, and the terminal element is located in the first quadrant interval;

[0039] Fig.18 It is a schematic diagram of an east-out and east-in connection line of the third type in an embodiment of the present disclosure, and the terminal element is located in the second quadrant interval;

[0040] Fig.19 It is a schematic diagram of an east-out and east-in connection line of the third type in an embodiment of the present disclosure, and the terminal element is located in the third quadrant interval;

[0041] Fig. 20 It is a schematic diagram of an east-out and east-in connection line of the third type in an embodiment of the present disclosure, and the terminal element is located in the fourth quadrant interval;

[0042] Fig.21 A principle block diagram of a connection line avoidance device for online editor elements in an embodiment of the present disclosure;

[0043] Fig. 22 The present invention is a block diagram of an electronic device for implementing the method for avoiding connection lines of online editor elements according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0044] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0045] The present disclosure provides a method for avoiding the connection line of an online editor element. Figure 1 As shown, Figure 1 : is a schematic diagram of the steps of a method for avoiding connection lines of online editor elements in an embodiment of the present disclosure. The method can be applied to a server side. The method includes:

[0046] Step S101, obtaining the boundary coordinates of the starting point element and the end point element.

[0047] Specifically, obtaining the boundary coordinates of the starting element and the end element refers to obtaining the exact positions of two key elements, namely the starting element and the end element, from the online editor or graphical interface. The starting element and the end element can be any graphic objects that need to be connected by connecting lines, such as text boxes, edited graphics, document icons, etc. The boundary coordinates of the starting element include the left boundary coordinates of the starting element (beginBounds.l), the right boundary coordinates of the starting element (beginBounds.r), the upper boundary coordinates of the starting element (beginBounds.t), and the lower boundary coordinates of the starting element (beginBounds.b). Assuming that the coordinates of the upper left corner of the starting element are known to be (x1, y1), as well as the width and height of the starting element, the boundary coordinates of the starting element can be finally obtained based on this information. Similarly, the boundary coordinates of the end element include the left boundary coordinates of the end element (endBounds.l), the right boundary coordinates of the end element (endBounds.r), the upper boundary coordinates of the end element (endBounds.t), and the lower boundary coordinates of the end element (endBounds.b). Assuming that the coordinates of the upper left corner of the end point element are known to be (x2, y2), as well as the width and height of the start point element, the boundary coordinates of the end point element can be finally obtained based on this information.

[0048] Step S102, obtaining the starting point coordinates and the extending direction of the starting point, as well as the ending point coordinates and the terminating direction of the ending point of the connecting line, and determining the angle of the connecting line according to the extending direction of the starting point and the terminating direction of the ending point of the connecting line.

[0049] The starting point and ending point coordinates of the connection line refer to the coordinate values ​​of the starting and ending positions of the connection line, respectively. These coordinates are usually determined by the user through the graphical interface operation or generated by the automatic layout algorithm. The starting point extension direction refers to the direction of the connection line with the starting point as the reference point, and the ending point termination direction refers to the final direction when the end point of the connection line reaches the end point element.

[0050] Specifically, the starting coordinates and the extension direction of the starting point of the connecting line are obtained, that is, the boundary of the starting element with which the starting point of the connecting line intersects, and the direction in which it extends, so that the starting coordinates and the extension direction of the starting point of the connecting line can be determined. Similarly, for obtaining the terminal coordinates and the termination direction of the terminal, that is, obtaining the boundary of the terminal element with which the terminal of the connecting line intersects, the terminal coordinates and the termination direction of the terminal can be determined. Subsequently, the angle between the starting point and the end point of the connecting line is calculated, which involves calculating the angle between the two direction vectors. The determination of the angle is crucial to understanding how the connecting line bends and turns in two-dimensional space. If the connecting line needs to avoid other interface elements, the angle information will be used to calculate the new path, which may include introducing additional turning points in the connecting line to achieve avoidance.

[0051] It is understandable that if the position or extension direction of the starting point or end point of the connection line changes, the angle needs to be recalculated and the path of the connection line adjusted accordingly. This dynamic adjustment ensures that the connection line maintains its functionality and aesthetics even after the elements are moved or reoriented. In this way, the present solution improves the interactivity and flexibility of the graphic editor, allowing users to focus more on creativity and logical structure when designing a graphical interface, rather than manually adjusting the details of the connection line.

[0052] Step S103, determining an adjustment value of the connection line according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end element, so as to obtain a connection path between the starting element and the end element through the adjustment value.

[0053] Among them, the type of connection line refers to the classification of the connection line in terms of geometric form, such as straight line, broken line or other complex curve types, each type has its own specific visual and functional characteristics. Specifically, the coordinates of the two end points of the connection line, the extension direction of the starting point and the termination direction of the end point are obtained, which define the basic direction and position of the connection line. Next, the relative position between the starting element and the end point element is analyzed, including their horizontal and vertical relationship on the interface. Subsequently, according to the type and angle of the connection line, the necessary adjustment values ​​are calculated, which may include the position of the inflection point, the length of the connection line, and the interval with the element. The calculation of these adjustment values ​​needs to take into account the obstacles that the connection line needs to avoid, the interval to be maintained, and the coordination of the overall layout. Through these adjustment values, a new and optimized connection path can be determined, which will serve as the final layout of the connection line, ensuring that it is visually clear, functionally effective, and consistent with the user's design intent.

[0054] It should be noted that if the position of an element changes, the adjustment value will be dynamically recalculated to adapt to the new design requirements. In this way, the problem of complex connection line layout and poor readability in traditional graphic editing can be effectively solved, and the optimization avoidance of each connection line in graphic programming can be achieved, the layout of the connection line is optimized, the readability of the graphic is enhanced, and the efficiency of engineering personnel is improved.

[0055] The present disclosure provides a method, device, equipment and storage medium for avoiding connecting lines of online editor elements. The present disclosure obtains the boundary coordinates of the starting point and end point elements, as well as the parameters such as the starting point coordinates, the end point coordinates, the starting point extension direction and the end point termination direction of the connecting line, and then can calculate the precise connecting line adjustment value according to these parameters. By adjusting the connecting line with the precise adjustment value, the connection path of the obtained connecting line is more accurate. In this way, the method can not only avoid the overlap of the connecting line with other elements, but also make the path of the connecting line between the starting point element and the end point element optimal by accurately calculating the adjustment value. In addition, the scheme of the present application not only improves the clarity and aesthetics of the graphic layout, reduces visual confusion, but also significantly improves the user's interactive experience and the work efficiency of engineering personnel through the automated and intelligent avoidance process.

[0056] In some optional embodiments, determining the angle of the connection line according to the extension direction of the starting point of the connection line and the termination direction of the end point includes:

[0057] If the starting point of the connecting line extends in the first direction and the ending point of the connecting line terminates in the second direction, the angle of the connecting line is 0 degrees;

[0058] If the starting point of the connecting line extends in the first direction and the ending point of the connecting line terminates in the third direction, the angle of the connecting line is 90 degrees.

[0059] If the extension direction of the starting point of the connecting line and the termination direction of the end point are both the first direction, the angle of the connecting line is 180 degrees;

[0060] If the starting point of the connecting line extends in the first direction and the end point of the connecting line terminates in the fourth direction, then the included angle of the connecting line is 270 degrees.

[0061] It should be noted that the extension direction of the starting point is the first direction, wherein the first direction can be any one of east, west, south, and north. By determining the first direction, a reference point is provided for the avoidance of the connecting line. For the determination of the east, west, south, and north directions, in this scheme, a two-dimensional coordinate system with a horizontal line as the X-axis and a vertical line as the Y-axis is established as a reference, wherein the positive direction of the X-axis is the right, and the positive direction of the Y-axis is the top. The north direction of this scheme refers to the positive direction of the Y-axis, the south direction refers to the opposite direction of the Y-axis, the east direction refers to the positive direction of the X-axis, and the west direction refers to the opposite direction of the X-axis. This scheme is illustrated by taking the first direction as the east as an example, but the same principle can be applied to other directions, which are not listed one by one here. When the first direction is set to the east, this means that the starting point of the connecting line extends in the east. In this case, the second direction is defined as the west, the third direction is the south, and the fourth direction is the north.

[0062] For example, if the start point extends in the East direction and the end point terminates in the West direction, the angle is 0 degrees, indicating that the connector extends horizontally to the right without rotation. If the start point extends in the East direction and the end point terminates in the South direction, the angle is 90 degrees, indicating that the connector extends upward from the start point, forming an angle perpendicular to the horizontal line. If both the start point and the end point extend in the East direction, the angle is 180 degrees, meaning that the connector will extend horizontally to the left, in the opposite direction from the start point. Finally, if the start point extends in the East direction and the end point terminates in the North direction, the angle is 270 degrees, indicating that the connector will extend downward, perpendicular to the start point.

[0063] It should be noted that if the extension direction of the starting point of the connecting line is not in the east, it can be rotated to be in the east, so that it is applicable to the solution of the present application.

[0064] This angle information is then used to guide the drawing and avoidance algorithms of the connection lines, ensuring that the connection lines are drawn correctly according to their angles and the boundary coordinates of the elements, while avoiding overlap or intersection with other interface elements. This method improves the automation of the graphics editor, optimizes the layout of the connection lines, and enhances the readability of the graphics, thereby improving the efficiency and experience of engineers when designing and editing graphical interfaces.

[0065] In this way, by accurately defining the extension direction of the starting point and the termination direction of the connecting line, the angle of the connecting line relative to the horizontal reference line can be intelligently calculated, and the determination of the subsequent adjustment value is facilitated by determining the angle.

[0066] In some optional embodiments, determining the adjustment value of the connection line according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end element includes:

[0067] A quadrant interval is constructed with the starting point element as the center point, and the quadrant interval where the end point element is located is obtained according to the relative position relationship between the end point element and the starting point element, wherein the quadrant interval includes the first quadrant interval, the second quadrant interval, the third quadrant interval and the fourth quadrant interval;

[0068] If the end point element is located in the first quadrant or the fourth quadrant, and the type of the connecting line is the first type, and the angle of the connecting line is 0 degrees, the adjustment value of the connecting line is calculated based on the right boundary coordinates of the starting point element, the left boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line.

[0069] Specifically, first, a coordinate system is constructed based on the starting point element, which divides the plane into four quadrants, namely the first quadrant (upper right), the second quadrant (upper left), the third quadrant (lower left) and the fourth quadrant (lower right). Then, according to the position of the end point element relative to the starting point element, determine in which quadrant it is located. If the end point element is located in the first quadrant or the fourth quadrant, it means that the end point element is on the right side of the starting point element. In this case, if the connecting line type is defined as the first type, the first type of connecting line includes three line segments and has two inflection points. The first adjustment point is the offset of the first inflection point on the X-axis compared to the starting point, recorded as adj1.

[0070] See also Figure 2 , Figure 2It is a schematic diagram of a first type of connection line that goes out from the east and into the west in the embodiment of the present disclosure. If the angle of the connection line is 0 degrees, it means that the starting point of the connection line faces east, and the end point of the connection line faces west (i.e., it goes out from the east and into the west). If the end point element is located in the first quadrant interval or the fourth quadrant interval, the adjustment value satisfies: adj1 = (beginBounds.r + endBounds.l) / 2-beginPoint.x, where adj1 represents the adjustment value, beginBounds.r represents the right boundary coordinate of the starting point element, endBounds.l represents the left boundary coordinate of the end point element, and beginPoint.x represents the horizontal coordinate of the starting point of the connection line. This adjustment value is used to determine the specific position of the connection line on the right side of the starting point element, ensuring that the connection line can correctly extend from the starting point element to the end point element, while avoiding overlap with the starting point element or other interface elements. For the first type of connecting lines, it should be noted that, assuming that the coordinates of the starting point S of the connecting line are (Sx, Sy), and the coordinates of the end point E of the connecting line are (Ex, Ey), after calculating the adjustment value, the coordinates of the first inflection point are (Sx+adj1, Sy), and the coordinates of the second inflection point are (Sx+adj1, Ey). By concatenating the coordinates of the starting point of the connecting line, the coordinates of the first inflection point, the coordinates of the second inflection point, and the coordinates of the end point of the connecting line, the connection path of the starting point element and the end point element can be obtained.

[0071] In this way, when the end point element is located in the first quadrant interval or the fourth quadrant interval, and the connection line type is the first type, and the angle is 0 degrees, it indicates that the connection line needs to avoid in the horizontal direction. At this time, the adjustment value of the connection line is calculated based on the right boundary coordinates of the starting point element, the left boundary coordinates of the end point element, and the horizontal coordinates of the starting point of the connection line. These adjustment values ​​ensure that the connection line is correctly drawn on the right side of the starting point element, while maintaining an appropriate interval with the end point element to avoid overlap. In this way, the present solution can intelligently adjust the connection line path to adapt to the relative position changes between the starting point and end point elements, thereby improving the user's editing efficiency and experience while keeping the graphic layout clear and beautiful.

[0072] In some optional embodiments, the method further comprises:

[0073] If the end point element is located in any quadrant, the type of the connecting line is the first type, and the angle of the connecting line is 180 degrees, the adjustment value of the connecting line is calculated based on the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line.

[0074] Specifically, see Figure 3 , Figure 3It is a schematic diagram of the first type of connection line in the embodiment of the present disclosure, which goes out from the east and enters the east. The angle of the connection line is 180 degrees, which means that the starting point of the connection line faces east and the end point of the connection line faces east (i.e., goes out from the east and enters the east). If the end point element is located in any quadrant interval, that is, whether the end point element is located in the first quadrant interval, the second quadrant interval, the third quadrant interval or the fourth quadrant interval, the adjustment value satisfies adj1=Math.max(endBounds.r, beginBounds.r)+CONNECTOR_MARGIN-beginPoint.x, where adj1 represents the adjustment value, beginBounds.r represents the right boundary coordinate of the starting point element, endBounds.r represents the right boundary coordinate of the end point element, max represents the maximum value between endBounds.r and beginBounds.r, CONNECTOR_MARGIN is a known constant, such as 20, and beginPoint.x represents the horizontal coordinate of the starting point of the connection line. This adjustment value is used to determine the specific position of the connecting line on the right side of the starting element, ensuring that the connecting line can correctly extend from the starting element to the ending element while avoiding overlapping with the starting element or other interface elements. This method provides a mechanism for dynamically adjusting the path of the connecting line, so that the connecting line can adapt to changes in the layout of different elements, both horizontally and vertically. In this way, this solution can ensure that the layout of the connecting line in the graphical programming environment is clear and beautiful, and improve the flexibility of the design and the work efficiency of the user.

[0075] In this way, no matter which quadrant the end point element is located in, as long as the connection line is defined as the first type and the angle is 180 degrees, the required adjustment value of the connection line can be automatically calculated based on the boundary coordinates of the start point element and the end point element. This process not only ensures that the connection line can effectively connect the start point element and the end point element, but also avoids overlap or intersection with other interface elements through precise coordinate calculation, ensuring the clarity and aesthetics of the connection line.

[0076] In some optional embodiments, the method further comprises:

[0077] If the end point element is not located in the fourth quadrant, and the type of the connecting line is the second type, and the angle of the connecting line is 270 degrees, the first adjustment value of the connecting line is calculated according to the right boundary coordinates of the starting point element, the left boundary coordinates and the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line;

[0078] The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

[0079] Among them, the type of the connecting line is the second type, which includes four line segments and three inflection points. The first adjustment point is the offset of the first inflection point compared to the starting point on the X axis, recorded as adj1, and the second adjustment point is the offset of the second inflection point compared to the starting point on the Y axis, recorded as adj2. The angle of the connecting line is 270 degrees, which means that it goes out from the east and enters the north.

[0080] Specifically, for a scenario where the type of the connection line is the second type and the angle of the connection line is 270 degrees. Figure 4 , Figure 4 This is a schematic diagram of a second type of connecting line in an embodiment of the present disclosure, where the end point element is located in the first quadrant. If the end point element is located in the first quadrant, the adjustment value satisfies the formula:

[0081] adj1=(beginBounds.r+endBounds.l) / 2-beginPoint.x;

[0082] adj2=endBounds.t-CONNECTOR_MARGIN-beginPoint.y.

[0083] Among them, adj1 represents the first adjustment value, adj2 represents the second adjustment value, beginPoint.x represents the horizontal coordinate of the starting point of the connecting line, beginPoint.y represents the vertical coordinate of the starting point of the connecting line, and other parameters have been introduced above and will not be repeated here.

[0084] See also Figure 5 , Figure 5 This is a schematic diagram of another embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the north, and the end point element is located in the first quadrant interval. If the end point element is located in the first quadrant interval, the adjustment value satisfies the formula:

[0085] adj1=Math.max(beginBounds.r,endBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0086] adj2=endBounds.t-CONNECTOR_MARGIN-beginPoint.y.

[0087] Among them, adj1 is the first adjustment value, adj2 is the second adjustment value, beginPoint.y represents the vertical coordinate of the starting point of the connecting line, and other parameters have been introduced before and will not be repeated here.

[0088] See also Figure 6 , Figure 6This is a schematic diagram of a second type of connecting line in the embodiment of the present disclosure, where the end point element is located in the second quadrant interval. If the end point element is located in the second quadrant interval, the adjustment value satisfies the formula:

[0089] adj1=Math.max(beginBounds.r,endBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0090] adj2=Math.min(endBounds.t, beginBounds.t)-CONNECTOR_MARGIN-beginPoint.y, wherein min represents the minimum value between endBounds.t and beginBounds.t. Other parameters refer to the aforementioned embodiment and are not described here in detail.

[0091] See also Figure 7 , Figure 7 This is a schematic diagram of a second type of connecting line in an embodiment of the present disclosure, where the end point element is located in the third quadrant. If the end point element is located in the third quadrant, the adjustment value satisfies the formula:

[0092] adj1=beginBounds.r+CONNECTOR_MARGIN-beginPoint.x;

[0093] adj2=(beginBounds.b+endBounds.t) / 2-beginPoint.y.

[0094] See also Figure 8 , Figure 8 This is a schematic diagram of another embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the north, and the end point element is located in the third quadrant interval. A schematic diagram of a third quadrant interval where the end point element is located. If the end point element is located in the third quadrant interval, the adjustment value satisfies the formula:

[0095] adj1=beginBounds.r+CONNECTOR_MARGIN-beginPoint.x;

[0096] adj2=Math.min(endBounds.t,beginBounds.t)-CONNECTOR_MARGIN-beginPoint.y.

[0097] By calculating the first adjustment value of the connecting line, this value is used to adjust the position of the connecting line in the horizontal direction to ensure that it can avoid obstacles and correctly connect to the end point element. By calculating the second adjustment value, this value is used to adjust the position of the connecting line in the vertical direction to further ensure the avoidance and correct connection of the connecting line. It should be noted that for the second type of connecting line, assuming that the coordinates of the starting point S of the connecting line are (Sx, Sy), and the coordinates of the end point E of the connecting line are (Ex, Ey), after calculating the adjustment values, the coordinates of the first inflection point are (Sx+adj1, Sy), the coordinates of the second inflection point are (Sx+adj1, Sy+adj2), and the coordinates of the third inflection point are (Ex, Sy+adj2). By connecting the starting point coordinates of the connecting line, the first inflection point coordinates, the second inflection point coordinates, the third inflection point coordinates, and the end point coordinates of the connecting line, the connection path of the starting element and the end point element can be obtained.

[0098] In this way, when the end element is not in the fourth quadrant, the connecting line needs to use the boundary coordinates of the start and end elements to calculate two key adjustment values. The first adjustment value ensures that the connecting line is correctly positioned in the horizontal direction, avoids obstacles and accurately connects to the end element, while the second adjustment value is fine-tuned in the vertical direction to achieve precise positioning and avoidance of the connecting line. This can improve the automatic layout capability of the connecting line and ensure the clarity and aesthetics of the connecting line in a complex graphic environment. Through precise coordinate calculation, the connecting line can intelligently avoid other interface elements, reduce visual clutter, and improve the readability of the graphics.

[0099] In some optional embodiments, the method further comprises:

[0100] If the end point element is not located in the first quadrant, and the type of the connecting line is the second type, and the angle of the connecting line is 90 degrees, then the first adjustment value of the connecting line is calculated according to the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line;

[0101] The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

[0102] Specifically, the angle of the connecting line is 90 degrees, which means it goes out from the east and goes south. Fig. 9 , Fig. 9 This is a schematic diagram of a second type of connection line in the embodiment of the present disclosure, which exits from the east and enters the south, and the end point element is located in the second quadrant interval. If the end point element is located in the second quadrant interval, the adjustment value satisfies the formula:

[0103] adj1=beginBounds.r+CONNECTOR_MARGIN-beginPoint.x;

[0104] adj2=(beginBounds.t+endBounds.b) / 2-beginPoint.y.

[0105] See also Fig.10 , Fig.10 This is a schematic diagram of a second type of connection line in the embodiment of the present disclosure, which exits from the east and enters from the south, and the end point element is located in the third quadrant interval. If the end point element is located in the third quadrant interval, the adjustment value satisfies the formula:

[0106] adj1=Math.max(beginBounds.r,endBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0107] adj2=Math.max(endBounds.b,beginBounds.b)+CONNECTOR_MARGIN-beginPoint.y.

[0108] See also Fig.11 , Fig.11 This is a schematic diagram of an embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the south, and the end point element is located in the fourth quadrant interval. If the end point element is located in the fourth quadrant interval, the adjustment value satisfies the formula:

[0109] adj1=(beginBounds.r+endBounds.l) / 2-beginPoint.x;

[0110] adj2=endBounds.b+CONNECTOR_MARGIN-beginPoint.y.

[0111] See also Fig.12 , Fig.12 This is a schematic diagram of another embodiment of the present disclosure, which is a second type of connecting line that exits from the east and enters the south, and the end point element is located in the fourth quadrant interval. If the end point element is located in the fourth quadrant interval, the adjustment value satisfies the formula:

[0112] adj1=endBounds.r+CONNECTOR_MARGIN-beginPoint.x;

[0113] adj2=endBounds.b+CONNECTOR_MARGIN-beginPoint.y.

[0114] In this way, when the end element is not in the first quadrant, the boundary coordinates of the start and end elements are used to calculate two key adjustment values. The first adjustment value ensures that the connecting line is correctly positioned in the vertical direction, avoids obstacles and accurately connects to the end element, while the second adjustment value is fine-tuned in the horizontal direction to achieve precise positioning and avoidance of the connecting line. In this way, the automatic layout capability of the connecting line is improved, ensuring the clarity and aesthetics of the connecting line in a complex graphic environment. Through accurate coordinate calculation, the connecting line can intelligently avoid other interface elements, reduce visual clutter, and improve the readability of the graphics.

[0115] In some optional embodiments, the method further comprises:

[0116] If the end point element is located in the second quadrant interval or the third quadrant interval, and the type of the connecting line is the third type, and the angle of the connecting line is 0 degrees, then the first adjustment value of the connecting line is calculated according to the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line;

[0117] A second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates and the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line;

[0118] The third adjustment value of the connecting line is calculated according to the left boundary coordinate of the end point element and the horizontal coordinate of the starting point of the connecting line.

[0119] Among them, the type of the connecting line is the third type, which has 3 adjustment points and 4 inflection points. The first adjustment point is the offset of the first inflection point compared to the starting point on the X-axis, recorded as adj1; the second adjustment point is the offset of the second inflection point compared to the starting point on the Y-axis, recorded as adj2; the third adjustment point is the offset of the third inflection point compared to the starting point on the X-axis, recorded as adj3.

[0120] If the angle of the connecting line is 0 degrees, it means that the connecting line goes out from the east and goes in the west. Fig.13 , Fig.13 This is a schematic diagram of a third type of connecting line in an embodiment of the present disclosure, where the end point element is located in the second quadrant interval. If the end point element is located in the second quadrant interval, the adjustment value satisfies the formula:

[0121] adj1=beginBounds.r+CONNECTOR_MARGIN-beginPoint.x;

[0122] adj2=(endBounds.b+beginBounds.t) / 2.0-beginPoint.y;

[0123] adj3=endBounds.l-CONNECTOR_MARGIN-beginPoint.x.

[0124] See also Fig.14 , Fig.14 This is a schematic diagram of another embodiment of the present disclosure, which is a third type of connecting line that goes east and goes west, and the end point element is located in the second quadrant interval. If the end point element is located in the second quadrant interval, the adjustment value satisfies the formula:

[0125] adj1=Math.max(beginBounds.r,endBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0126] adj2=(Math.min(beginBounds.t,endBounds.t)-CONNECTOR_MARGIN-beginPoint.y;

[0127] adj3=endBounds.l-CONNECTOR_MARGIN-beginPoint.x.

[0128] See also Fig.15 , Fig.15 This is a schematic diagram of a third type of connecting line in an embodiment of the present disclosure, which is east-out and west-in, and the end point element is located in the third quadrant interval. If the end point element is located in the third quadrant interval, the adjustment value satisfies the formula:

[0129] adj1=beginBounds.r+CONNECTOR_MARGIN-beginPoint.x;

[0130] adj2=(endBounds.t+beginBounds.b) / 2.0-beginPoint.y;

[0131] adj3=endBounds.l-CONNECTOR_MARGIN-beginPoint.x.

[0132] See also Fig.16 , Fig.16 This is a schematic diagram of another embodiment of the present disclosure, which is a third type of connecting line that goes east and goes west, and the end point element is located in the third quadrant interval. If the end point element is located in the third quadrant interval, the adjustment value satisfies the formula:

[0133] adj1=Math.max(beginBounds.r,endBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0134] adj2=Math.max(beginBounds.b,endBounds.b)+CONNECTOR_MARGIN-beginPoint.y;

[0135] adj3=endBounds.l-CONNECTOR_MARGIN-beginPoint.x.

[0136] The first adjustment value is used to adjust the position of the connecting line in the horizontal direction to ensure that it can avoid obstacles and correctly connect to the end element. The second adjustment value. This value is used to adjust the position of the connecting line in the vertical direction to further ensure the avoidance and correct connection of the connecting line; the third adjustment value is used to fine-tune the shape of the connecting line near the starting point to achieve more refined avoidance or layout. It should be noted that for the third type of connecting line, assuming that the coordinates of the starting point S of the connecting line are (Sx, Sy), and the coordinates of the end point E of the connecting line are (Ex, Ey), after calculating the adjustment value, the coordinates of the first inflection point are (Sx+adj1, Sy), the coordinates of the second inflection point are (Sx+adj1, Sy+adj2), the coordinates of the third inflection point are (Sx+adj3, Sy+adj2), and the coordinates of the fourth inflection point are (Sx+adj3, Ey). The connection path of the starting element and the end point element can be obtained by connecting the coordinates of the starting point of the connecting line, the coordinates of the first inflection point, the coordinates of the second inflection point, the coordinates of the third inflection point, the coordinates of the fourth inflection point, and the coordinates of the end point of the connecting line.

[0137] In this way, when the end point element is located in the second quadrant (upper left) or the third quadrant (lower left), the first adjustment value is calculated to ensure that the connecting line is correctly positioned in the horizontal direction, avoids obstacles and accurately connects to the end point element, while the second and third adjustment values ​​are fine-tuned in the vertical direction to achieve precise positioning and avoidance of the connecting line. Through accurate coordinate calculation, the connecting line can intelligently avoid other interface elements, reduce visual clutter, and improve the readability of the graphics.

[0138] In some optional embodiments, the method further comprises:

[0139] If the end point element is located in any quadrant, the type of the connecting line is the third type, and the angle of the connecting line is 180 degrees, the first adjustment value of the connecting line is calculated according to the right boundary coordinate of the starting point element, the left boundary coordinate and the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line;

[0140] A second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line;

[0141] The third adjustment value of the connecting line is calculated according to the left boundary coordinate of the starting point element, the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line.

[0142] Specifically, if the angle of the connecting line is 180 degrees, it means that the connecting line goes out from the east and goes in from the east. Fig.17 , Fig.17 This is a schematic diagram of an east-out east-in connection line of the third type in an embodiment of the present disclosure, where the end point element is located in the first quadrant interval. If the end point element is located in the first quadrant interval, the adjustment value satisfies the formula:

[0143] adj1=(endBounds.l+beginBounds.r) / 2-beginPoint.x;

[0144] adj2=endBounds.t-CONNECTOR_MARGIN-beginPoint.y;

[0145] adj3=endBounds.r+CONNECTOR_MARGIN-beginPoint.x.

[0146] See also Fig.18 , Fig.18 This is a schematic diagram of an east-out east-in connection line of the third type in an embodiment of the present disclosure, where the end point element is located in the second quadrant interval. If the end point element is located in the second quadrant interval, the adjustment value satisfies the formula:

[0147] adj1=Math.max(endBounds.r,beginBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0148] adj2=beginBounds.t-CONNECTOR_MARGIN-beginPoint.y;

[0149] adj3=(endBounds.r+beginBounds.l) / 2-beginPoint.x.

[0150] See also Fig.19 , Fig.19 This is a schematic diagram of an east-out east-in connection line of the third type in an embodiment of the present disclosure, where the end point element is located in the third quadrant interval. If the end point element is located in the third quadrant interval, the adjustment value satisfies the formula:

[0151] adj1=Math.max(endBounds.r,beginBounds.r)+CONNECTOR_MARGIN-beginPoint.x;

[0152] adj2=beginBounds.b+CONNECTOR_MARGIN-beginPoint.y;

[0153] adj3=(endBounds.r+beginBounds.l) / 2-beginPoint.x.

[0154] See also Fig. 20 , Fig. 20 This is a schematic diagram of an east-out east-in connection line of the third type in an embodiment of the present disclosure, where the end point element is located in the fourth quadrant interval. If the end point element is located in the fourth quadrant interval, its adjustment value satisfies the formula:

[0155] adj1=(endBounds.l+beginBounds.r) / 2-beginPoint.x;

[0156] adj2=endBounds.t-CONNECTOR_MARGIN-beginPoint.y;

[0157] adj3=endBounds.r+CONNECTOR_MARGIN-beginPoint.x.

[0158] First adjustment value calculation: Calculate the first adjustment value of the connecting line based on the right boundary coordinate of the starting element, the left and right boundary coordinates of the ending element, and the horizontal coordinate of the starting point of the connecting line. This value is used to adjust the horizontal position of the connecting line at the starting point to ensure that it can start turning correctly.

[0159] Second adjustment value calculation: Next, the second adjustment value is calculated based on the upper and lower boundary coordinates of the starting element, the upper boundary coordinates of the end element, and the ordinate of the starting point of the connecting line. This value is used to adjust the position of the connecting line in the vertical direction to further ensure the avoidance and correct connection of the connecting line.

[0160] Third adjustment value calculation: Finally, the third adjustment value is calculated based on the left boundary coordinates of the starting element, the right boundary coordinates of the end element, and the horizontal coordinates of the starting point of the connecting line. This value may be used to fine-tune the path of the connecting line near the starting point to achieve more precise avoidance or layout.

[0161] In this way, when the end element is located in any quadrant, three key adjustment values ​​are calculated based on the boundary coordinates of the start and end elements, as well as the starting coordinates of the connecting line. The first adjustment value ensures that the connecting line starts turning correctly at the starting point, the second adjustment value optimizes the position of the connecting line in the vertical direction, and the third adjustment value fine-tunes the shape of the connecting line near the starting point to achieve more sophisticated avoidance or layout. In this way, the automation and intelligence level of the connecting line in the graphical programming environment is improved, ensuring that the connecting line avoids obstacles while maintaining a clear and beautiful layout. By accurately calculating the adjustment values, the connecting line can adapt to the dynamic changes of the starting and end elements, thereby improving the flexibility of the design and the work efficiency of the user. This method reduces the need for manual adjustment of connecting lines, reduces the error rate in the design process, and allows engineers to focus more on creative design work.

[0162] The following describes an apparatus embodiment of the present application, which can be used to execute the method for avoiding the connection line of the online editor element in the above-mentioned embodiment of the present application. For details not disclosed in the apparatus embodiment of the present application, please refer to the embodiment of the method for avoiding the connection line of the online editor element in the above-mentioned embodiment of the present application.

[0163] The present disclosure also provides a connection line avoidance device 2100 for online editor elements, such as Fig.21 As shown, including:

[0164] The first acquisition module 2101 is used to acquire the boundary coordinates of the starting element and the end element;

[0165] The second acquisition module 2102 is used to acquire the starting point coordinates and the extending direction of the starting point of the connection line, and the ending point coordinates and the terminating direction of the ending point of the connection line, and determine the angle of the connection line according to the extending direction of the starting point of the connection line and the terminating direction of the ending point;

[0166] The determination module 2103 is used to determine the adjustment value of the connection line according to the type and angle of the connection line and the relative position relationship between the starting element and the end element, so as to obtain the connection path of the starting element and the end element through the adjustment value.

[0167] In some optional embodiments, the second acquisition module 2102 determines the angle of the connection line according to the extension direction of the starting point of the connection line and the termination direction of the end point of the connection line, including:

[0168] If the starting point of the connecting line extends in the first direction and the ending point of the connecting line terminates in the second direction, the angle of the connecting line is 0 degrees;

[0169] If the starting point of the connecting line extends in the first direction and the ending point of the connecting line terminates in the third direction, the angle of the connecting line is 90 degrees.

[0170] If the extension direction of the starting point of the connecting line and the termination direction of the end point are both the first direction, the angle of the connecting line is 180 degrees;

[0171] If the starting point of the connecting line extends in the first direction and the end point of the connecting line terminates in the fourth direction, then the included angle of the connecting line is 270 degrees.

[0172] In some optional embodiments, the determination module 2103 determines the adjustment value of the connection line according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end element, including:

[0173] A quadrant interval is constructed with the starting point element as the center point, and the quadrant interval where the end point element is located is obtained according to the relative position relationship between the end point element and the starting point element, wherein the quadrant interval includes the first quadrant interval, the second quadrant interval, the third quadrant interval and the fourth quadrant interval;

[0174] If the end point element is located in the first quadrant or the fourth quadrant, and the type of the connecting line is the first type, and the angle of the connecting line is 0 degrees, the adjustment value of the connecting line is calculated based on the right boundary coordinates of the starting point element, the left boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line.

[0175] In some optional embodiments, the determination module 2103 is also used to calculate the adjustment value of the connecting line based on the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element and the horizontal coordinate of the starting point of the connecting line if the end point element is located in any quadrant interval and the type of the connecting line is the first type and the angle of the connecting line is 180 degrees.

[0176] In some optional embodiments, the determination module 2103 is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinates of the starting point element, the left boundary coordinates and the right boundary coordinates of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the end point element is not located in the fourth quadrant interval, and the type of the connecting line is the second type, and the angle of the connecting line is 270 degrees;

[0177] The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

[0178] In some optional embodiments, the determination module 2103 is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinates of the starting point element, the right boundary coordinates of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the ending point element is not located in the first quadrant interval, and the type of the connecting line is the second type, and the angle of the connecting line is 90 degrees;

[0179] The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

[0180] In some optional embodiments, the determination module 2103 is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinates of the starting point element, the right boundary coordinates of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the end point element is located in the second quadrant interval or the third quadrant interval, and the type of the connecting line is the third type, and the angle of the connecting line is 0 degrees;

[0181] A second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates and the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line;

[0182] The third adjustment value of the connecting line is calculated according to the left boundary coordinate of the end point element and the horizontal coordinate of the starting point of the connecting line.

[0183] In some optional embodiments, the determination module 2103 is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinate of the starting point element, the left boundary coordinate and the right boundary coordinate of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the end point element is located in any quadrant interval, and the type of the connecting line is the third type, and the angle of the connecting line is 180 degrees;

[0184] A second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line;

[0185] The third adjustment value of the connecting line is calculated according to the left boundary coordinate of the starting point element, the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line.

[0186] In the technical solution disclosed herein, the acquisition, storage and application of user personal information involved are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0187] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.

[0188] Fig. 22A schematic block diagram of an example electronic device 2200 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0189] like Fig. 22 As shown, the electronic device 2200 includes a computing unit 2201, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 2202 or a computer program loaded from a storage unit 2208 into a random access memory (RAM) 2203. In the RAM 2203, various programs and data required for the operation of the device 2200 can also be stored. The computing unit 2201, the ROM 2202, and the RAM 2203 are connected to each other via a bus 2204. An input / output (I / O) interface 2205 is also connected to the bus 2204.

[0190] A number of components in the device 2200 are connected to the I / O interface 2205, including: an input unit 2206, such as a keyboard, a mouse, etc.; an output unit 2207, such as various types of displays, speakers, etc.; a storage unit 2208, such as a disk, an optical disk, etc.; and a communication unit 2209, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 2209 allows the device 2200 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0191] The computing unit 2201 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 2201 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 2201 performs the various methods and processes described above, such as the connection line avoidance method of the online editor element. For example, in some embodiments, the connection line avoidance method of the online editor element may be implemented as a computer software program, which is tangibly included in a machine-readable medium, such as a storage unit 2208. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 2200 via the ROM 2202 and / or the communication unit 2209. When the computer program is loaded into the RAM 2203 and executed by the computing unit 2201, one or more steps of the applet distribution described above may be performed. Alternatively, in other embodiments, the computing unit 2201 may be configured to execute the connection line avoidance method for the online editor element in any other appropriate manner (eg, by means of firmware).

[0192] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0193] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. The program code may be provided to a processor or controller of a general purpose computer, a special purpose computer, or other programmable online editor element's connection line avoidance device, so that the program code, when executed by the processor or controller, causes the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0194] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0195] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0196] The systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.

[0197] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship of client and server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server combined with a blockchain.

[0198] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.

[0199] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A method for avoiding connection lines of online editor elements, the method comprising: Get the boundary coordinates of the starting and ending elements; Obtaining the starting point coordinates and the extending direction of the starting point of the connecting line, as well as the ending point coordinates and the terminating direction of the ending point of the connecting line, and determining the angle of the connecting line according to the extending direction of the starting point of the connecting line and the terminating direction of the ending point; An adjustment value of the connection line is determined according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end point element, so as to obtain a connection path between the starting element and the end point element through the adjustment value.

2. The method according to claim 1, wherein: The step of determining the angle of the connecting line according to the extending direction of the starting point of the connecting line and the terminating direction of the ending point of the connecting line comprises: If the starting point of the connecting line extends in the first direction and the end point of the connecting line terminates in the second direction, then the angle of the connecting line is 0 degrees; If the starting point of the connecting line extends in the first direction and the end point terminates in the third direction, then the angle of the connecting line is 90 degrees; If the starting extension direction and the end termination direction of the connecting line are both the first direction, then the included angle of the connecting line is 180 degrees; If the starting point extension direction of the connecting line is the first direction and the end point termination direction is the fourth direction, then the included angle of the connecting line is 270 degrees.

3. The method according to claim 1 or 2, wherein: The determining the adjustment value of the connecting line according to the type of the connecting line, the angle, and the relative position relationship between the starting point element and the end point element includes: A quadrant interval is constructed with the starting point element as the center point, and the quadrant interval in which the end point element is located is obtained according to the relative position relationship between the end point element and the starting point element, wherein the quadrant interval includes a first quadrant interval, a second quadrant interval, a third quadrant interval and a fourth quadrant interval; If the endpoint element is located in the first quadrant interval or the fourth quadrant interval, and the type of the connecting line is the first type, and the angle of the connecting line is 0 degrees, then the adjustment value of the connecting line is calculated based on the right boundary coordinates of the starting point element, the left boundary coordinates of the endpoint element, and the horizontal coordinate of the starting point of the connecting line.

4. The method according to claim 3, wherein: The method further comprises: If the end point element is located in any quadrant interval, and the type of the connecting line is the first type, and the angle of the connecting line is 180 degrees, then the adjustment value of the connecting line is calculated based on the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line.

5. The method according to claim 3, wherein: The method further comprises: If the end point element is not located in the fourth quadrant, and the type of the connecting line is the second type, and the angle of the connecting line is 270 degrees, then the first adjustment value of the connecting line is calculated according to the right boundary coordinate of the starting point element, the left boundary coordinate and the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line; The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

6. The method according to claim 3, wherein: The method further comprises: If the end point element is not located in the first quadrant interval, and the type of the connecting line is the second type, and the angle of the connecting line is 90 degrees, then the first adjustment value of the connecting line is calculated according to the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line; The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

7. The method according to claim 3, wherein: The method further comprises: If the end point element is located in the second quadrant interval or the third quadrant interval, and the type of the connecting line is the third type, and the angle of the connecting line is 0 degrees, then the first adjustment value of the connecting line is calculated according to the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element, and the horizontal coordinate of the starting point of the connecting line; Calculate the second adjustment value of the connecting line according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates and the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line; A third adjustment value of the connecting line is calculated according to the left boundary coordinate of the end point element and the horizontal coordinate of the starting point of the connecting line.

8. The method according to claim 3, wherein: The method further comprises: If the end point element is located in any quadrant interval, and the type of the connecting line is the third type, and the angle of the connecting line is 180 degrees, then the first adjustment value of the connecting line is calculated according to the right boundary coordinate of the starting point element, the left boundary coordinate and the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line; The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line; The third adjustment value of the connecting line is calculated according to the left boundary coordinate of the starting point element, the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line.

9. A connection line avoidance device for online editor elements, comprising: A first acquisition module is used to acquire the boundary coordinates of the starting point element and the end point element; A second acquisition module is used to acquire the starting point coordinates and the extending direction of the starting point of the connecting line, and the ending point coordinates and the terminating direction of the ending point of the connecting line, and determine the angle of the connecting line according to the extending direction of the starting point and the terminating direction of the ending point of the connecting line; A determination module is used to determine the adjustment value of the connection line according to the type of the connection line, the angle, and the relative position relationship between the starting element and the end element, so as to obtain the connection path between the starting element and the end element through the adjustment value.

10. The device according to claim 9, wherein: The second acquisition module determines the angle of the connection line according to the extension direction of the starting point and the termination direction of the end point of the connection line, including: If the starting point of the connecting line extends in the first direction and the end point of the connecting line terminates in the second direction, then the angle of the connecting line is 0 degrees; If the starting point of the connecting line extends in the first direction and the end point terminates in the third direction, then the angle of the connecting line is 90 degrees; If the starting extension direction and the end termination direction of the connecting line are both the first direction, then the included angle of the connecting line is 180 degrees; If the starting point extension direction of the connecting line is the first direction and the end point termination direction is the fourth direction, then the included angle of the connecting line is 270 degrees.

11. The device according to claim 9 or 10, wherein: The determining module determines the adjustment value of the connecting line according to the type of the connecting line, the angle, and the relative position relationship between the starting point element and the end point element, including: A quadrant interval is constructed with the starting point element as the center point, and the quadrant interval in which the end point element is located is obtained according to the relative position relationship between the end point element and the starting point element, wherein the quadrant interval includes a first quadrant interval, a second quadrant interval, a third quadrant interval and a fourth quadrant interval; If the endpoint element is located in the first quadrant interval or the fourth quadrant interval, and the type of the connecting line is the first type, and the angle of the connecting line is 0 degrees, then the adjustment value of the connecting line is calculated based on the right boundary coordinates of the starting point element, the left boundary coordinates of the endpoint element, and the horizontal coordinate of the starting point of the connecting line.

12. The device according to claim 11, wherein The determination module is also used to calculate the adjustment value of the connecting line based on the right boundary coordinates of the starting point element, the right boundary coordinates of the end point element and the horizontal coordinate of the starting point of the connecting line if the end point element is located in any quadrant interval and the type of the connecting line is the first type and the angle of the connecting line is 180 degrees.

13. The device according to claim 11, wherein: The determination module is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinate of the starting point element, the left boundary coordinate and the right boundary coordinate of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the ending point element is not located in the fourth quadrant interval, and the type of the connecting line is the second type, and the angle of the connecting line is 270 degrees; The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

14. The device according to claim 11, wherein: The determining module is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinates of the starting point element, the right boundary coordinates of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the ending point element is not located in the first quadrant interval, and the type of the connecting line is the second type, and the angle of the connecting line is 90 degrees; The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line.

15. The device according to claim 11, wherein The determining module is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinates of the starting point element, the right boundary coordinates of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the ending point element is located in the second quadrant interval or the third quadrant interval, and the type of the connecting line is the third type, and the angle of the connecting line is 0 degrees; Calculate the second adjustment value of the connecting line according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates and the lower boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line; A third adjustment value of the connecting line is calculated according to the left boundary coordinate of the end point element and the horizontal coordinate of the starting point of the connecting line.

16. The device according to claim 11, wherein The determining module is further configured to calculate a first adjustment value of the connecting line according to the right boundary coordinate of the starting point element, the left boundary coordinate and the right boundary coordinate of the ending point element, and the horizontal coordinate of the starting point of the connecting line if the ending point element is located in any quadrant interval, the type of the connecting line is the third type, and the angle of the connecting line is 180 degrees; The second adjustment value of the connecting line is calculated according to the upper boundary coordinates and the lower boundary coordinates of the starting point element, the upper boundary coordinates of the end point element, and the ordinate of the starting point of the connecting line; The third adjustment value of the connecting line is calculated according to the left boundary coordinate of the starting point element, the right boundary coordinate of the end point element, and the horizontal coordinate of the starting point of the connecting line.

17. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 8.

18. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 1-8.

19. A computer program product, comprising a computer program, which, when executed by a processor, implements the method according to any one of claims 1 to 8.

Images