Graphical processing method, device and equipment of device relationship, and storage medium

Abstract

Embodiments of the present application provide a kind of graphical processing method, device and storage medium of equipment relationship.The method comprises: creating graph canvas;Add the first graph corresponding to a plurality of target devices in target scene respectively on the graph canvas;According to the connection relationship between target device in the target scene, draw the connection relationship between the first graph corresponding to the plurality of target devices respectively on the graph canvas.In the above scheme, the network relationship between devices is recorded, compared with the traditional way of photographing uploading and artificial recording, it is more convenient and efficient, and it is convenient to check and use later, and user experience is good.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a graphical processing method, apparatus, device, and storage medium for device relationships. Background Technology

[0002] Currently, the relationship between equipment during on-site investigations is generally documented through photo uploads and manual recording, which focuses more on fixing the physical environment of the scene. However, there is no good way to record the network relationship between equipment, which may lead to the interruption of important clues and affect the case handling process. Summary of the Invention

[0003] This invention provides a graphical processing method, apparatus, device, and storage medium for device relationships, in order to solve the technical problem of the lack of a good recording scheme for network relationships between devices.

[0004] Specifically, the embodiments of the present invention provide the following technical solutions:

[0005] In a first aspect, embodiments of the present invention provide a graphical processing method for device relationships, including:

[0006] Create a graph canvas;

[0007] Add the first graphics corresponding to the multiple target devices in the target scene to the map canvas;

[0008] Based on the connection relationships between target devices in the target scene, the connection relationships between the first graphics corresponding to the multiple target devices are drawn on the graph canvas.

[0009] In a second aspect, embodiments of the present invention provide a graphical processing apparatus for device relationships, comprising:

[0010] The preprocessing module is used to create the graph canvas;

[0011] The processing module is used to add the first graphics corresponding to multiple target devices in the target scene onto the map canvas;

[0012] The processing module is further configured to draw the connection relationship between the first graphics corresponding to the plurality of target devices on the graph canvas according to the connection relationship between the target devices in the target scene.

[0013] Thirdly, embodiments of the present invention also provide an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to perform the steps of graphical processing of device relationships as described in the first aspect.

[0014] Fourthly, embodiments of the present invention also provide a non-transitory computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of graphical processing of device relationships as described in the first aspect.

[0015] Fifthly, embodiments of the present invention also provide a computer program product, including a computer program that, when executed by a processor, implements the steps of graphical processing of device relationships as described in the first aspect.

[0016] The graphical processing method, apparatus, device, and storage medium for device relationships provided in this invention create a graphical canvas; multiple target devices in a target scene are added to the graphical canvas in the form of first graphics; further, based on the connection relationships between the target devices in the target scene, connection relationships are established between the first graphics corresponding to the multiple target devices on the graphical canvas. Compared with the traditional method of taking photos and uploading and manual recording, this is more convenient and efficient, and also easier to view and use later, resulting in a better user experience. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in this invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0018] Figure 1 This is one of the flowcharts illustrating the graphical processing method for device relationships provided in this embodiment of the invention;

[0019] Figure 2 This is one of the schematic diagrams of the graphical processing method for device relationships provided in the embodiments of the present invention;

[0020] Figure 3 This is the second schematic diagram of the graphical processing method for device relationships provided in this embodiment of the invention;

[0021] Figure 4 This is the third schematic diagram of the graphical processing method for device relationships provided in this embodiment of the invention;

[0022] Figure 5 This is a relative angle principle diagram of the graphical processing method for device relationships provided in the embodiments of the present invention;

[0023] Figure 6 This is an implementation framework diagram of the graphical processing method for device relationships provided in the embodiments of the present invention;

[0024] Figure 7 This is a schematic diagram of the operation flow of the graphical processing method for device relationships provided in the embodiments of the present invention;

[0025] Figure 8 This is a schematic diagram of the structure of the graphical processing device for device relationships provided by the present invention;

[0026] Figure 9 This is a schematic diagram of the structure of the electronic device provided by the present invention. Detailed Implementation

[0027] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0028] The following is combined with Figures 1-7 The technical solutions of the embodiments of the present invention will be described in detail with reference to specific examples. The following specific examples can be combined with each other, and the same or similar concepts or processes may not be described again in some examples.

[0029] Figure 1 This is one of the flowcharts illustrating the graphical processing method for device relationships provided in this embodiment of the invention. For example... Figure 1 As shown, the method provided in this embodiment includes:

[0030] Step 101: Create a graph canvas;

[0031] Specifically, create a graph canvas corresponding to the target scene, which can be stored, for example, as a JSON file; the target scene may include:

[0032] Step 102: Add the first graphics corresponding to the multiple target devices in the target scene to the graph canvas;

[0033] Specifically, the first graphic corresponding to the target device can be added to the graphic canvas automatically by the device or manually by the user.

[0034] The device can automatically add parameters based on the user-input parameters of the first graphic corresponding to the target device (such as the number of target devices, the shape, size, color, etc. of the first graphic).

[0035] Manual addition, for example, by adding the first graphic corresponding to each target device on the graphic canvas in the display interface through user input devices (such as mouse, keyboard, etc.).

[0036] For example, such as Figure 2 As shown, the graph canvas has added the first graphics corresponding to target devices 1 to 5. Figure 2 The first graphic is represented by a rectangle, but in other embodiments it can also be represented by other shapes. In addition, different types of devices can also be represented by different shapes.

[0037] Step 103: Based on the connection relationship between target devices in the target scene, draw the connection relationship between the first graphics corresponding to multiple target devices on the graph canvas.

[0038] Specifically, the connection relationships between multiple first graphics can be drawn automatically or manually by the user onto the graph canvas.

[0039] Automatic drawing, for example, draws the connection relationships between multiple first graphics based on the connection relationships between target devices in the target scene input by the user (e.g., which target devices have connection relationships, and / or which target devices do not have connection relationships); optionally, the user can also input parameters corresponding to the connection relationships, such as the line type, color, thickness, etc. of the connection lines.

[0040] Manual drawing, for example, involves drawing the connection relationship of multiple first graphics on a graph canvas in the display interface using a user-operated input device (such as a mouse, keyboard, etc.).

[0041] like Figure 2 As shown, target device 1 and target device 2 are connected, target device 2 and target device 4 are connected, and target device 3 and target device 4 are connected.

[0042] Furthermore, the data of the graph canvas corresponding to the target scene can be saved in a JSON file for easy viewing later.

[0043] The method in this embodiment creates a graph canvas; multiple target devices in the target scene are added to the graph canvas in the form of a first graphic; further, according to the connection relationship between the target devices in the target scene, the connection relationship between the first graphics corresponding to the multiple target devices is established on the graph canvas. Compared with the traditional method of taking pictures and uploading and manual recording, it is more convenient and efficient, and it is also easier to view and use later, resulting in a better user experience.

[0044] In one embodiment, step 102 can be implemented as follows:

[0045] In the case of multiple overlapping first graphics, a second graphic is obtained based on the multiple overlapping first graphics, and the area where the second graphic is located includes the area where the multiple overlapping first graphics are located.

[0046] The positions of the overlapping first graphics are updated based on the relative angle between the second graphic and the first target graphic or the second target graphic among the overlapping first graphics; after the position update, there is no overlap between the overlapping first graphics; the first target graphic is any one of the overlapping first graphics, and the second target graphic is any other first graphic among the overlapping first graphics except the first target graphic.

[0047] Specifically, such as Figure 3 As shown, during the process of adding the first graphic corresponding to the target device, overlapping of the first graphics may occur. To avoid overlapping of the first graphics on the graphic canvas, the positions of all or part of the overlapping first graphics can be updated, such as... Figure 3 As shown, there is an overlap between the two first graphics corresponding to target device 5 and target device 6. Therefore, the position of any one of the first graphics can be updated so that there is no overlap between the two updated first graphics, such as... Figure 4 As shown. Figure 3 In the figure 20, the second graphic is defined as follows: if the first target graphic is the first graphic corresponding to target device 5, then the second target graphic is the first graphic corresponding to target device 6.

[0048] For example, the positions of multiple overlapping first graphics can be updated based on the relative angles between the second graphics and the first target graphics or between the second graphics and each of the second target graphics. The relative angles can be determined based on the relative positional relationship between the center points of the second graphics and any first graphics.

[0049] Optionally, the second figure can be a circumscribed polygon of multiple first figures, such as a circumscribed quadrilateral. The circumscribed quadrilateral can be the smallest circumscribed quadrilateral.

[0050] Optionally, updating the positions of multiple overlapping first graphics can be done in the following way:

[0051] The angle between the lines connecting the center point of the first target graphic or the second target graphic, and the center point of the second graphic, to the origin of the reference coordinate system is taken as the relative angle.

[0052] The direction of position update is determined based on the relative angle and at least one preset angle range;

[0053] The positions of the first target graphic and / or the second target graphic are updated according to the direction and the preset update step size.

[0054] Specifically, such as Figure 5As shown, for example, the angle α between the lines connecting the center point 51 of the first target graphic (the first graphic 5 corresponding to the target device 5) and the center point 201 of the second graphic 20 to the origin of the coordinate system is taken as the relative angle.

[0055] The relative angle is compared with at least one preset angle range to determine the direction of position update, that is, to determine which direction the first figure should move in; for example, if the relative angle belongs to a certain preset angle range, the direction of update is determined to be direction 1, and if the relative angle belongs to another preset angle range, the direction of update is determined to be direction 2.

[0056] Along this direction, the first target graphic and / or the second target graphic are moved, for example, once or multiple times, until they no longer overlap. A preset distance can be moved at a time, which is equal to the length of a preset update step.

[0057] Optionally, the at least one preset angle range includes a first preset angle range, a second preset angle range, a third preset angle range, and a fourth preset angle range, determining the direction of position update, which can be implemented in the following way:

[0058] If the relative angle falls within a first preset angle range, then the direction is determined to be along the X-axis of the reference coordinate system; the first preset angle range is [-45°, 45°].

[0059] If the relative angle falls within the second preset angle range, then the direction is determined to be along the Y-axis of the reference coordinate system; the second preset angle range is [45°, 135°].

[0060] If the relative angle falls within a third preset angle range, then the direction is determined to be the direction opposite to the X-axis of the reference coordinate system; the third preset angle range is [135°, -135°].

[0061] If the relative angle falls within the fourth preset angle range, then the direction is determined to be the direction opposite to the Y-axis of the reference coordinate system; the fourth preset angle range is [-135°, -45°].

[0062] For example, for a preset angle range [-45°, 45°], the image can be shifted 20 pixels to the right along the X-axis; for the same preset angle range, it can be shifted 20 pixels upwards along the Y-axis (e.g., starting from the center point of the first image), and so on until there is no overlap. Multiple overlapping first images can move simultaneously in opposite directions. If overlap still exists after one movement, the movement distance can be increased to avoid overlap.

[0063] In the above embodiments, the overlap of the first graphic in the graph canvas can be avoided, and the network spatial structure relationship between devices can be intuitively represented.

[0064] In one embodiment, step 103 can be implemented as follows:

[0065] For any two target devices, the direction of the connection is determined based on the positional relationship of the first graphics corresponding to the two target devices on the map canvas.

[0066] Draw the connection relationship between the two first figures according to the direction of the line.

[0067] Specifically, for two target devices that are connected, the direction of the connecting line can be determined based on the positional relationship of the first graphics corresponding to the two target devices on the graph canvas, and then the connection relationship between the first graphics corresponding to the two target devices can be drawn based on the direction of the connecting line.

[0068] Optionally, the connection between the two first figures can be drawn according to the direction of the line as follows:

[0069] Determine whether there are other first shapes in the region between two first shapes;

[0070] If other first figures exist, they are treated as obstacles, and the connection between the two first figures is drawn according to the direction of the connecting line and the obstacles.

[0071] Specifically, in the process of drawing the connection between two first figures, it is necessary to ensure that the connecting line does not intersect with other figures or connecting lines. Therefore, in the process of drawing, other first figures existing in the area between the two first figures are regarded as obstacles, and the connecting line is drawn to avoid the obstacles.

[0072] For example, the A-Star algorithm can be used for drawing. The direction of the connection is used as the input of the algorithm. The graph canvas is drawn with the connection in units of n pixels, where n is a value such as 5 or 10. Other graphics or connections near the connection between the two first graphics are regarded as obstacles. The optimal path of the connection is calculated and then drawn.

[0073] For example, to avoid the starting or ending point of the connection being too far from the edge of the first shape, the connection can be made to extend appropriately into the first shape.

[0074] The above implementation can avoid the overlap of the first graphic and connecting lines in the graph canvas, and can intuitively reflect the spatial structure relationship of the device network. Compared with the traditional method of taking pictures and uploading and manual recording, it is more convenient and efficient.

[0075] like Figure 6As shown, during the process of adding the first graphic corresponding to the target device to the graphic canvas, the optimal position can be determined based on the positions of other first graphics and the lines connecting them, avoiding overlap. Similarly, during the process of drawing the connection relationships between the first graphics, the optimal connection effect is calculated based on the positions of other first graphics and the lines connecting them. During or after adding or drawing, the target scene can be confirmed, and data on the graphic canvas can be added, deleted, or modified to ensure consistency with the target scene.

[0076] In one embodiment, the method further includes:

[0077] Receive the user's first input;

[0078] In response to the first input, a target operation is performed on the first graphic in the graph canvas, and / or the connection relationship between multiple first graphics, the target operation including at least one of the following: move, update, delete; or,

[0079] In response to the first input, a first graphic is added to the graphic canvas, and / or the connection relationship between multiple first graphics.

[0080] Specifically, users can also manipulate the data in the graph canvas corresponding to the target scene, such as updating the shape and position of the first graphic, deleting certain first graphics or connections, or adding first graphics and connections corresponding to other devices.

[0081] like Figure 7 As shown, during operation, the user can use an input device, such as a mouse, to select a specific graphic or a line connecting the graphic elements (i.e., ...). Figure 7 (Selection box method): For example, first record the initial coordinates of the mouse pointer in the graphic canvas. While the pointer moves, obtain the pointer's position coordinates again. Draw a selection box based on multiple position coordinates, for example, using a transparent rectangle. When the pointer is released, all graphic elements within the selection box are selected.

[0082] For example, users can also drag the map canvas. First, record the position coordinates of the mouse pointer relative to the map container when it is pressed. Move the map canvas accordingly as the pointer moves. Note that the relative coordinates of the pointer relative to the map container need to be updated after each movement, otherwise map drift will occur. This is to prevent the relative coordinates of the pointer relative to the map container from deviating during subsequent dragging.

[0083] In the above embodiments, in addition to automatically adding device information to the graph canvas, device information can also be added manually and the association between devices can be established, which provides great flexibility.

[0084] Optionally, the method further includes:

[0085] Receive the user's second input;

[0086] In response to the second input, the map canvas is scaled according to the position corresponding to the second input;

[0087] The scaled-down map canvas is displayed in the display interface; the pointer of the input device remains in the same position in the display interface.

[0088] Specifically, such as Figure 7 As shown, users can also zoom in and out on the map canvas corresponding to the target scene. The second input is the position, such as the current position of the mouse pointer. The coordinates of the current pointer position are used as the center point. For example, one unit of the scroll wheel represents a scale of 0.1. The map canvas is zoomed in or out. Then, the pointer position is not changed after zooming. At the same time, the zoomed ratio is returned to the UI interface for refresh display.

[0089] In the above embodiments, users can operate and control the map canvas to zoom in and out; this facilitates the observation of target device information and the relationships between target devices in the map canvas, resulting in a more user-friendly interactive experience.

[0090] The graphical processing apparatus for device relationships provided by the present invention will be described below. The graphical processing apparatus for device relationships described below and the graphical processing method for device relationships described above can be referred to in correspondence with each other.

[0091] Figure 8 This is a schematic diagram of the structure of the graphical processing device for device relationships provided by the present invention.

[0092] like Figure 8 As shown, the graphical processing device for device relationships provided in this embodiment includes:

[0093] Preprocessing module 210 is used to create the graph canvas;

[0094] Processing module 220 is used to add the first graphics corresponding to multiple target devices in the target scene onto the map canvas;

[0095] The processing module 220 is further configured to draw the connection relationship between the first graphics corresponding to the plurality of target devices on the graph canvas according to the connection relationship between the target devices in the target scene.

[0096] Optionally, the processing module 220 is specifically used for:

[0097] In the case of multiple overlapping first graphics, a second graphic is obtained based on the multiple overlapping first graphics, and the area where the second graphic is located includes the area where the multiple overlapping first graphics are located.

[0098] The positions of the overlapping first graphics are updated based on the relative angle between the second graphic and the first target graphic or the second target graphic among the overlapping first graphics; after the position update, there is no overlap between the overlapping first graphics; the first target graphic is any one of the overlapping first graphics, and the second target graphic is any other first graphic among the overlapping first graphics besides the first target graphic.

[0099] Optionally, the processing module 220 is specifically used for:

[0100] The relative angle is defined as the angle between the lines connecting the center point of the first target graphic or the second target graphic, and the center point of the second graphic, to the origin of the reference coordinate system.

[0101] The direction of position update is determined based on the relative angle and at least one preset angle range;

[0102] The positions of the first target graphic and / or the second target graphic are updated according to the direction of the position update and the preset update step size.

[0103] Optionally, the processing module 220 is specifically used for:

[0104] If the relative angle falls within a first preset angle range, then the direction is determined to be along the X-axis of the reference coordinate system; the first preset angle range is [-45°, 45°].

[0105] If the relative angle falls within the second preset angle range, then the direction is determined to be along the Y-axis of the reference coordinate system; the second preset angle range is [45°, 135°].

[0106] If the relative angle falls within a third preset angle range, then the direction is determined to be the direction opposite to the X-axis of the reference coordinate system; the third preset angle range is [135°, -135°].

[0107] If the relative angle falls within the fourth preset angle range, then the direction is determined to be the direction opposite to the Y-axis of the reference coordinate system; the fourth preset angle range is [-135°, -45°].

[0108] Optionally, the processing module 220 is specifically used for:

[0109] The outer polygons of the plurality of first graphics are used as the second graphics.

[0110] Optionally, the processing module 220 is specifically used for:

[0111] For any two target devices, the direction of the connection is determined based on the positional relationship of the first graphics corresponding to the two target devices on the map canvas.

[0112] Draw the connection relationship between the two first figures according to the direction of the connecting line.

[0113] Optionally, the processing module 220 is specifically used for:

[0114] Determine whether there are other first shapes in the region between the two first shapes;

[0115] If other first shapes exist, these other first shapes are used as obstacles, and the connection relationship between the two first shapes is drawn according to the direction of the connecting line and the obstacles.

[0116] Optionally, the processing module 220 is further configured to:

[0117] Receive the user's first input;

[0118] In response to the first input, a target operation is performed on the first graphic in the graph canvas, and / or the connection relationship between multiple first graphics, the target operation including at least one of the following: move, update, delete; or,

[0119] In response to the first input, a first graphic is added to the graphic canvas, and / or the connection relationship between multiple first graphics.

[0120] Optionally, the processing module 220 is further configured to:

[0121] Receive the user's second input;

[0122] In response to the second input, the map canvas is scaled according to the position corresponding to the second input;

[0123] The scaled-down map canvas is displayed in the display interface; the pointer of the input device remains in the same position relative to the map canvas.

[0124] The apparatus of this embodiment is used to execute the method in any of the foregoing method embodiments, and its implementation principle and technical effects are described in the method embodiments.

[0125] Figure 9 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 9As shown, the electronic device may include: a processor 810, a communications interface 820, a memory 830, and a communication bus 840, wherein the processor 810, the communications interface 820, and the memory 830 communicate with each other via the communication bus 840. The processor 810 can call logical instructions in the memory 830 to execute a graphical processing method for device relationships, which includes:

[0126] Create a graph canvas;

[0127] Add the first graphics corresponding to the multiple target devices in the target scene to the map canvas;

[0128] Based on the connection relationships between target devices in the target scene, the connection relationships between the first graphics corresponding to the multiple target devices are drawn on the graph canvas.

[0129] Furthermore, the logical instructions in the aforementioned memory 830 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, essentially, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0130] On the other hand, the present invention also provides a computer program product, the computer program product comprising a computer program stored on a non-transitory computer-readable storage medium, the computer program comprising program instructions, wherein when the program instructions are executed by a computer, the computer is able to execute the graphical processing method for device relationships provided by the above methods, the method comprising:

[0131] Create a graph canvas;

[0132] Add the first graphics corresponding to the multiple target devices in the target scene to the map canvas;

[0133] Based on the connection relationships between target devices in the target scene, the connection relationships between the first graphics corresponding to the multiple target devices are drawn on the graph canvas.

[0134] In another aspect, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the graphical processing method for device relationships provided above, the method comprising:

[0135] Create a graph canvas;

[0136] Add the first graphics corresponding to the multiple target devices in the target scene to the map canvas;

[0137] Based on the connection relationships between target devices in the target scene, the connection relationships between the first graphics corresponding to the multiple target devices are drawn on the graph canvas.

[0138] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0139] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0140] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A graphical processing method for device relationships, characterized in that, include: Create a graph canvas; Add the first graphics corresponding to the multiple target devices in the target scene to the map canvas; Based on the connection relationship between target devices in the target scene, draw the connection relationship between the first graphics corresponding to the multiple target devices on the map canvas; Adding the first graphics corresponding to multiple target devices in the target scene to the map canvas includes: In the case of multiple overlapping first graphics, a second graphic is obtained based on the multiple overlapping first graphics, and the area where the second graphic is located includes the area where the multiple overlapping first graphics are located. The positions of the overlapping first graphics are updated based on the relative angle between the second graphic and the first target graphic or the second target graphic among the overlapping first graphics. The step of updating the position of the overlapping plurality of first graphics based on the relative angle between the second graphic and the first target graphic or the second target graphic among the overlapping plurality of first graphics includes: The relative angle is defined as the angle between the lines connecting the center point of the first target graphic or the second target graphic, and the center point of the second graphic, to the origin of the reference coordinate system. The direction of position update is determined based on the relative angle and at least one preset angle range; The positions of the first target graphic and / or the second target graphic are updated according to the direction of the position update and the preset update step size.

2. The method according to claim 1, characterized in that, There is no overlap between the multiple first graphics after the position update; the first target graphic is any one of the multiple overlapping first graphics, and the second target graphic is any other first graphic among the multiple overlapping first graphics except for the first target graphic.

3. The method according to claim 1, characterized in that, The at least one preset angle range includes a first preset angle range, a second preset angle range, a third preset angle range, and a fourth preset angle range. Determining the direction of the position update based on the relative angle and the at least one preset angle range includes: If the relative angle falls within a first preset angle range, then the direction is determined to be along the X-axis of the reference coordinate system; the first preset angle range is [-45°, 45°]. If the relative angle falls within a second preset angle range, then the direction is determined to be along the Y-axis of the reference coordinate system; the second preset angle range is [45°, 135°]. If the relative angle falls within a third preset angle range, then the direction is determined to be along the direction opposite to the X-axis of the reference coordinate system; the third preset angle range is [135°, -135°]; If the relative angle falls within the fourth preset angle range, then the direction is determined to be the direction opposite to the Y-axis of the reference coordinate system; the fourth preset angle range is [-135°, -45°].

4. The method according to claim 2, characterized in that, The second graphic is obtained by overlapping multiple first graphics, including: The outer polygons of the plurality of first graphics are used as the second graphics.

5. The method according to any one of claims 1-4, characterized in that, The step of drawing the connection relationships between the first graphics corresponding to the multiple target devices on the map canvas according to the connection relationships between the target devices in the target scene includes: For any two target devices, the direction of the connection is determined based on the positional relationship of the first graphics corresponding to the two target devices on the map canvas. Draw the connection relationship between the two first figures according to the direction of the connecting line.

6. The method according to claim 5, characterized in that, The step of drawing the connection relationship between the two first figures according to the direction of the connecting line includes: Determine whether there are other first shapes in the region between the two first shapes; If other first shapes exist, these other first shapes are used as obstacles, and the connection relationship between the two first shapes is drawn according to the direction of the connecting line and the obstacles.

7. The method according to any one of claims 1-4, characterized in that, The method further includes: Receive the user's first input; In response to the first input, a target operation is performed on the first graphic in the graph canvas, and / or the connection relationship between multiple first graphics, the target operation including at least one of the following: move, update, delete; or, In response to the first input, a first graphic is added to the graphic canvas, and / or the connection relationship between multiple first graphics.

8. The method according to any one of claims 1-4, characterized in that, The method further includes: Receive the user's second input; In response to the second input, the map canvas is scaled according to the position corresponding to the second input; The scaled-down map canvas is displayed in the display interface; the pointer of the input device remains in the same position relative to the map canvas.

9. A graphical processing device for device relationships, characterized in that, A graphical processing method for implementing the device relationships according to any one of claims 1-8 includes: The preprocessing module is used to create the graph canvas; The processing module is used to add the first graphics corresponding to multiple target devices in the target scene onto the map canvas; The processing module is further configured to draw the connection relationship between the first graphics corresponding to the plurality of target devices on the graph canvas according to the connection relationship between the target devices in the target scene.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the graphical processing method for device relationships as described in any one of claims 1 to 8.

11. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the computer program implements a graphical processing method for device relationships as described in any one of claims 1 to 8.

Images