Visual programming graphic element auxiliary alignment method and device, electronic equipment and storage medium
By automatically aligning the positions of graphic elements, the problem of difficult alignment of graphic elements in existing technologies is solved, improving the efficiency of visual programming and user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- BEIJING SIFANG JIBAO ENG TECH
- Filing Date
- 2025-12-30
- Publication Date
- 2026-04-14
AI Technical Summary
In existing visual programming, the drag-and-drop adjustment of graphic elements lacks auxiliary alignment functions, which requires users to try multiple times to place the graphic elements in the right position, affecting the programming experience and efficiency.
By acquiring the positions of the moving graphic element and the graphic element to be matched, the starting matching point group and the target matching point group are determined. The elements are automatically aligned based on the principle of pin priority and from near to far. The alignment line is displayed and the position of the graphic element is automatically adjusted when the distance is less than the threshold.
It enables rapid alignment of graphical components, improving the efficiency of visual programming and user experience.
Smart Images
Figure CN121858093A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer software technology, and more specifically to a method, apparatus, electronic device, and storage medium for visual programming-assisted alignment of graphical elements. Background Technology
[0002] In the field of industrial automation control, visual programming languages such as CFC implement related logic by arranging and connecting graphical elements. To ensure the correctness of visual programming functions and the readability of the logic, programmers manually drag and drop graphics to adjust their positions. However, existing drag-and-drop methods lack alignment assistance, requiring users to drag repeatedly to place graphical elements in the correct positions, impacting the programming experience and reducing user efficiency. Summary of the Invention
[0003] In view of this, embodiments of the present invention provide a method, apparatus, and electronic device for visual programming-assisted alignment of graphical elements.
[0004] To achieve the above objectives, the embodiments of the present invention provide the following technical solutions:
[0005] A visual programming-assisted alignment method for graphical elements, comprising:
[0006] Obtain moving graphic elements and matching graphic elements within the visible area, wherein the matching graphic elements are non-moving graphic elements within the visible area;
[0007] Determine the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched. The starting matching point group includes: target points and pins on the side of the moving graphic element facing the graphic element to be matched. The target matching point group includes target points and pins on the side of the graphic element to be matched facing the moving graphic element. The target points include vertices and midpoints.
[0008] The first alignment point of the starting matching point group of the moving graphic element and the second alignment point in the target matching point group of the graphic element to be matched are determined based on pin priority and a near-to-far approach.
[0009] When the first alignment point and the second alignment point are detected to be aligned, the alignment line is displayed;
[0010] When the first alignment point and the second alignment point are not aligned, it is determined whether the distance between the first alignment point and the second alignment point in a first direction is less than the adsorption threshold, wherein the first direction is perpendicular to the alignment line;
[0011] When the distance is less than the adsorption threshold, the moving graphic element is automatically moved to the target position in a second direction, which is parallel to the first direction and toward the second alignment point. The target position is the position where the first alignment point and the second alignment point are aligned in the first direction.
[0012] Optionally, in the above-described visual programming-assisted alignment method for graphical elements, determining the first alignment point of the starting matching point group of the moving graphical element and the second alignment point in the target matching point group of the graphical element to be matched, based on pin priority and a near-to-far approach, includes:
[0013] When pins exist in both the starting matching point group and the target matching point group;
[0014] The two pins that are closest to each other in the first direction in the starting matching point group and the target matching point group are respectively designated as the first alignment point and the second alignment point.
[0015] Optionally, in the above-described graphical element-assisted alignment method for visual programming, when the starting matching point group or the target matching point group does not have pins;
[0016] Traverse the target points in the initial matching point group and record the traversed target points as the first target point;
[0017] Obtain the target point in the target matching point group that matches the first target point, and denote it as the second target point;
[0018] Calculate the distance between the first target point and the second target point in the first direction;
[0019] The distance values corresponding to each target point in the initial matching point group are compared, and the first target point and the second target point corresponding to the minimum distance value are recorded as the first alignment point and the second alignment point, respectively.
[0020] Optionally, in the above-described method for assisted alignment of graphical elements in visual programming, when the first target point is the upper left vertex of the moving graphical element, the second target point is the upper right vertex of the graphical element to be matched.
[0021] When the first target point is the lower left vertex of the moving graphic element, the second target point is the lower right vertex of the graphic element to be matched;
[0022] When the first target point is the left middle vertex of the moving graphic element, the second target point is the right middle vertex of the graphic element to be matched;
[0023] When the first target point is the upper right vertex of the moving graphic element, the second target point is the upper left vertex of the graphic element to be matched;
[0024] When the first target point is the lower right vertex of the moving graphic element, the second target point is the lower left vertex of the graphic element to be matched.
[0025] When the first target point is the right middle vertex of the moving graphic element, the second target point is the left middle vertex of the graphic element to be matched;
[0026] When the first target point is the upper left vertex of the moving graphic element, the second target point is the lower left vertex of the graphic element to be matched;
[0027] When the first target point is the upper right vertex of the moving graphic element, the second target point is the lower right vertex of the graphic element to be matched.
[0028] When the first target point is the upper middle vertex of the moving graphic element, the second target point is the lower middle vertex of the graphic element to be matched.
[0029] When the first target point is the lower left vertex of the moving graphic element, the second target point is the upper left vertex of the graphic element to be matched.
[0030] When the first target point is the lower right vertex of the moving graphic element, the second target point is the upper right vertex of the graphic element to be matched.
[0031] When the first target point is the lower middle vertex of the moving graphic element, the second target point is the upper middle vertex of the graphic element to be matched.
[0032] Optionally, in the above-described method for assisted alignment of graphical elements in visual programming, determining the starting matching point group of the moving graphical element and the target matching point group of the graphical element to be matched includes:
[0033] Identify the orientation information of the graphic element to be matched relative to the moving graphic element, the orientation information including above, below, left and right;
[0034] When the graphic element to be matched is located above the moving graphic element, the target point and pin on the upper side of the moving graphic element are used as the starting matching point group, and the target point and pin on the lower side of the graphic element to be matched are used as the target matching point group.
[0035] When the graphic element to be matched is located below the moving graphic element, the target point and pin on the lower side of the moving graphic element are used as the starting matching point group, and the target point and pin on the upper side of the graphic element to be matched are used as the target matching point group.
[0036] When the graphic element to be matched is located to the left of the moving graphic element, the target point and pin on the left side of the moving graphic element are taken as the starting matching point group, and the target point and pin on the right side of the graphic element to be matched are taken as the target matching point group.
[0037] When the graphic element to be matched is located to the right of the moving graphic element, the target point and pin on the right side of the moving graphic element are taken as the starting matching point group, and the target point and pin on the left side of the graphic element to be matched are taken as the target matching point group.
[0038] Optionally, in the above-described method for assisted alignment of graphical elements in visual programming, the two endpoints of the alignment line are the first alignment point and the second alignment point, respectively.
[0039] Optionally, in the above-described method for assisted alignment of graphical elements in visual programming, the alignment line is a dashed line set on the top layer.
[0040] A graphical element alignment aid for visual programming, comprising:
[0041] A graphic recognition unit is used to acquire moving graphic elements and matching graphic elements within a visible area, wherein the matching graphic elements are non-moving graphic elements within the visible area.
[0042] A matching point grouping unit is used to determine the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched. The starting matching point group includes: target points and pins on the side of the moving graphic element facing the graphic element to be matched. The target matching point group includes target points and pins on the side of the graphic element to be matched facing the moving graphic element. The target points include vertices and intermediate points.
[0043] The alignment point determination unit is used to determine the first alignment point of the starting matching point group of the moving graphic element and the second alignment point in the target matching point group of the graphic element to be matched, based on pin priority and a near-to-far approach.
[0044] An alignment line display unit is used to display an alignment line when the first alignment point and the second alignment point are detected to be aligned.
[0045] An adsorption judgment unit is used to determine whether the distance between the first alignment point and the second alignment point in a first direction is less than an adsorption threshold when the first alignment point and the second alignment point are not aligned, wherein the first direction is perpendicular to the alignment line.
[0046] An adsorption unit is used to automatically move the moving graphic element to a target position in a second direction when the distance is less than the adsorption threshold. The second direction is parallel to the first direction and toward the second alignment point. The target position is the position where the first alignment point and the second alignment point are aligned in the first direction.
[0047] An electronic device, comprising:
[0048] It includes at least one processing device and a storage device connected to the processing device, wherein:
[0049] The storage device is used to store computer programs;
[0050] The processing device is used to execute the computer program so that the electronic device can implement any of the above-described visual programming graphic element-assisted alignment methods.
[0051] A storage medium carrying one or more computer programs, which, when executed by an electronic device, enable the electronic device to implement any of the above-described visual programming graphical element-assisted alignment methods.
[0052] Based on the above technical solution, the solution provided by the embodiments of the present invention automatically determines the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched based on the positions of the moving graphic element and the graphic element to be matched. It also determines the first alignment point and the second alignment point based on the principle of pin priority and proximity. When the first alignment point and the second alignment point are aligned, the alignment line is displayed. When the first alignment point and the second alignment point are not aligned, it is determined whether the distance between the first alignment point and the second alignment point in the first direction is less than the adsorption threshold. When the distance is less than the adsorption threshold, the moving graphic element is automatically moved to the target position in the second direction so that the first alignment point and the second alignment point are aligned. This assists developers in quickly adjusting the graphic position and improves the efficiency of visual programming. Attached Figure Description
[0053] To more clearly illustrate the technical solutions in the embodiments of the present 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 only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.
[0054] Figure 1 A flowchart illustrating the graphical element alignment method for visual programming provided in this application embodiment;
[0055] Figure 2 This is a schematic diagram of the matching point grouping of a single graphic element disclosed in an embodiment of this application;
[0056] Figure 3 This is a schematic diagram of the grouping of matching points for the multiple graphic elements disclosed in the embodiments of this application;
[0057] Figure 4 This is a schematic diagram illustrating the matching point group matching method between the moving graphic element and the graphic element to be matched, as disclosed in an embodiment of this application.
[0058] Figure 5 A schematic diagram of the alignment lines between a movable graphic element and a graphic element to be matched, provided in a specific embodiment of this application;
[0059] Figure 6 This is a schematic diagram of the adsorption scenario provided in the embodiments of this application;
[0060] Figure 7 A schematic diagram of the structure of the graphical element alignment device for visual programming provided in the embodiments of this application. Detailed Implementation
[0061] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.
[0062] To address the shortcomings of existing technologies, this invention proposes a visual programming-assisted alignment scheme for graphical elements. This scheme displays alignment prompts for moving visually programmed graphical elements and implements an alignment snapping function to improve drawing efficiency.
[0063] See Figure 1 The graphical element alignment method for visual programming disclosed in this application may include:
[0064] Step S101: Obtain the moving graphic elements and the graphic elements to be matched within the visible area, wherein the graphic elements to be matched are the non-moving graphic elements within the visible area.
[0065] The visible area refers to the drawing area of the drawing software. Users can select and move selected graphic elements within the visible area using the cursor or keyboard. The selected and moved graphic element is called the moved graphic element, while other graphic elements not selected by the user are called matching graphic elements. The types of graphic elements drawn vary across different fields. For example, when drawing logic configuration diagrams, graphic elements may include input elements, output elements, operational block elements, and annotation elements, all of which can serve as the aforementioned moved and matching graphic elements.
[0066] Step S102: Determine the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched.
[0067] In this scheme, the matching points on the moving graphic element (the pins, midpoints of the edges, and vertices of the graphic element) are recorded as the starting matching points, and the matching points on the graphic element to be matched (the pins, midpoints of the edges, and vertices of the graphic element) are recorded as the target matching points. Based on the different orientations of the matching points on the moving graphic element, the starting matching points of the moving graphic element are divided into four matching point groups: horizontal upward (HU), horizontal downward (HD), vertical left (VL), and vertical right (VR). Similarly, the target matching points of the non-moving graphic element to be matched are also divided into four matching point groups: horizontal upward (HU), horizontal downward (HD), vertical left (VL), and vertical right (VR). Figure 2 , Figure 3 The diagram shows the grouping of matching points for single and multiple graphic elements.
[0068] In this embodiment, once the moving graphic element and the graphic element to be matched are determined, the starting matching point group and the target matching point group that need to be focused on are also determined. Specifically, the starting matching point group includes: target points and pins on the side of the moving graphic element facing the graphic element to be matched; the target matching point group includes target points and pins on the side of the graphic element to be matched facing the moving graphic element; the target points include vertices and midpoints. The starting matching point group and the target matching point group are matched in groups, where the matching relationship between the starting matching point group and the target matching point group is: {(HU, HD), (HD, HU), (VL, VR), (VR, VL)}, where the first element in the parentheses represents the starting matching point group, and the second element represents the target matching point group. For example... Figure 4As shown, when the graphic to be matched is above the moving graphic, the starting matching point group is the horizontal upward matching point group HU of the moving graphic element, and the target matching point group is the horizontal downward matching point group HD of the graphic element to be matched. When the graphic to be matched is below the moving graphic, the starting matching point group is the horizontal downward matching point group HD of the moving graphic element, and the target matching point group is the horizontal upward matching point group HU of the graphic element to be matched. When the graphic to be matched is to the left of the moving graphic, the starting matching point group is the vertical left-facing matching point group VL of the moving graphic element, and the target matching point group is the vertical right-facing matching point group VR of the graphic element to be matched. When the graphic to be matched is to the right of the moving graphic, the starting matching point group is the vertical right-facing matching point group VR of the moving graphic element, and the target matching point group is the vertical left-facing matching point group VL of the graphic element to be matched.
[0069] Step S103: Determine the first alignment point of the starting matching point group of the moving graphic element and the second alignment point in the target matching point group of the graphic element to be matched based on pin priority and the near-to-far method.
[0070] The first alignment point and the second alignment point are reference points during the alignment process between the moving graphic element and the graphic element to be matched. These reference points are not fixed and can be automatically switched according to the position changes of the moving graphic.
[0071] In this scheme, the first and second alignment points are determined based on pin priority and a near-to-far approach. The "near-to-far" approach refers to the distance between two points in a first direction increasing from near to far. Specifically, when matching the position of a moving graphic with a graphic to be matched, if both the starting and target matching point groups contain pins, the pin in the starting matching point group is used as the first alignment point, and the pin in the target matching point group is used as the second alignment point. Matching and alignment begin with the pins. If neither the starting nor target matching point group contains a pin, then one of the vertices or intermediate points in both groups is used as the first and second alignment points, and matching and alignment are performed accordingly. This is the pin priority principle. When both the starting and target matching point groups contain at least one pin, the pin in the starting matching point group is used as the first alignment point, and the pin in the target matching point group is used as the second alignment point. When both the starting matching point group and the target matching point group contain pins, and the number of pins in either group is greater than one, the distance between each pin in the starting matching point group and each pin in the target matching point group in the first direction is calculated. The two pins closest to each other in the starting and target matching point groups are designated as the first alignment point and the second alignment point, respectively. When neither the starting nor the target matching point group contains pins, the vertices and midpoints in both groups are designated as first target points. The distance between each first target point in the starting matching point group and its corresponding second target point in the target matching point group in the first direction is calculated. The pair of closest first and second target points is selected as the first alignment point and the second alignment point, respectively. Specifically, the process may include: traversing the target points (which can be vertices and midpoints) in the initial matching point group, recording the traversed target points as first target points, obtaining the target points in the target matching point group that match the first target points as second target points, calculating the distance between the first target points and the second target points in the first direction, comparing the distance values corresponding to each target point in the initial matching point group, and recording the first target point and the second target point corresponding to the minimum distance value as the first alignment point and the second alignment point, respectively. This is a matching principle from near to far.
[0072] When selecting a second target point, the following principles can be used as a basis for selection:
[0073] When the first target point is the top left vertex of the moving graphic element, the second target point is the top right vertex of the graphic element to be matched; when the first target point is the bottom left vertex of the moving graphic element, the second target point is the bottom right vertex of the graphic element to be matched; when the first target point is the middle left vertex of the moving graphic element, the second target point is the middle right vertex of the graphic element to be matched; when the first target point is the top right vertex of the moving graphic element, the second target point is the top left vertex of the graphic element to be matched; when the first target point is the bottom right vertex of the moving graphic element, the second target point is the bottom left vertex of the graphic element to be matched; when the first target point is the middle right vertex of the moving graphic element, the second target point is the middle left vertex of the graphic element to be matched. When the first target point is the top left vertex of the moving graphic element, the second target point is the bottom left vertex of the graphic element to be matched; when the first target point is the top right vertex of the moving graphic element, the second target point is the bottom right vertex of the graphic element to be matched; when the first target point is the top middle vertex of the moving graphic element, the second target point is the bottom middle vertex of the graphic element to be matched; when the first target point is the bottom left vertex of the moving graphic element, the second target point is the top left vertex of the graphic element to be matched; when the first target point is the bottom right vertex of the moving graphic element, the second target point is the top right vertex of the graphic element to be matched; when the first target point is the bottom middle vertex of the moving graphic element, the second target point is the top middle vertex of the graphic element to be matched.
[0074] When there are multiple sets of pins or multiple sets of first target points and second target points that are equidistant in the first direction, the first alignment point and the second alignment point can be selected in the order from left to right and from top to bottom.
[0075] Based on the above matching principles, the specific implementation plan is as follows: Figure 5 As shown, the moving graphic element is inst1. When the graphic element to be matched is inst2, the upper left vertex of inst1 is used as the first alignment point, and the lower left vertex of inst2 is used as the second alignment point. When the graphic element to be matched is inst4, the lower left vertex of inst1 is used as the first alignment point, and the upper left vertex of inst4 is used as the second alignment point. When the graphic element to be matched is inst3, the IN1 pin of inst1 is used as the first alignment point, and the OUT1 pin of inst3 is used as the second alignment point. When the graphic element to be matched is inst5, the OUT1 pin of inst1 is used as the first alignment point, and the IN1 pin of inst5 is used as the second alignment point.
[0076] Step S104: When the first alignment point and the second alignment point are detected to be aligned, the alignment line is displayed.
[0077] When the first alignment point on the moving graphic element and the second alignment point on the graphic element to be matched are detected to be aligned (horizontally or vertically), an alignment line is displayed. Both the first and second alignment points are located on the alignment line. Specifically, the line connecting the first and second alignment points can be used as the alignment line. The alignment line can be a dashed line set in the top layer, and the two ends of the dashed line can be solid circles or hollow circles. For example... Figure 5 As shown, when the first alignment point is located to the left of the moving graphic element and the second alignment point is located to the right of the graphic element to be matched, once the first and second alignment points are detected to be aligned in the horizontal direction, a horizontal alignment hint line (alignment line) to the left is drawn and displayed; when the first alignment point is located to the right of the moving graphic element and the second alignment point is located to the left of the graphic element to be matched, once the first and second alignment points are detected to be aligned in the horizontal direction, a horizontal alignment hint line to the right is drawn and displayed; when the first alignment point is located above the moving graphic element and the second alignment point is located below the graphic element to be matched, once the first and second alignment points are detected to be aligned in the vertical direction, a vertically upward alignment hint line is drawn and displayed; when the first alignment point is located below the moving graphic element and the second alignment point is located above the graphic element to be matched, once the first and second alignment points are detected to be aligned in the vertical direction, a vertically downward alignment hint line is drawn and displayed.
[0078] In one specific embodiment of this application, when the first alignment point and the second alignment point are not aligned, the alignment line is in a hidden state; when the first alignment point and the second alignment point are aligned, the alignment line enters a displayed state. When the user releases the movable graphic element, the alignment line returns to a hidden state.
[0079] Step S105: When it is detected that the first alignment point and the second alignment point are not aligned, determine whether the distance between the first alignment point and the second alignment point in the first direction is less than the adsorption threshold, wherein the first direction is perpendicular to the alignment line.
[0080] Step S106: When the distance is less than the adsorption threshold, the moving graphic element is automatically moved to the target position in the second direction.
[0081] In this step, to achieve quick alignment of the moving graphic element and the graphic element to be matched, see [link to relevant documentation]. Figure 6In this solution, when the distance between the first alignment point and the second alignment point in the first direction is less than a preset adsorption threshold, the moving graphic element can be automatically adsorbed to the target position along the second direction. The second direction is parallel to the first direction and towards the second alignment point. The target position is the position where the first alignment point and the second alignment point are aligned in the first direction. When adsorbing the moving graphic element to the target position, the coordinates of the target graphic element only change in the first direction. The adsorption threshold can be selected according to design requirements; for example, the adsorption threshold can be any number between 3 and 9 pixels. Taking an adsorption threshold of 5 as an example, when the distance between the first alignment point and the second alignment point in the first direction is less than 5 pixels, the moving graphic element is automatically adsorbed to the target position so that the first alignment point and the second alignment point are aligned.
[0082] Furthermore, in this embodiment, the moving graphic element can identify different graphic elements to be matched in different orientations. In this solution, the steps of the above method can be implemented for multiple graphic elements to be matched. However, when automatically snapping to the moving graphic element, the following situation may occur: when the moving graphic element meets the automatic snapping strategy for two or more graphic elements to be matched, and the target positions corresponding to these automatic snapping strategies are different, the system can prioritize snapping the moving graphic element to the nearest target position. When these automatic snapping strategies can correspond to the same target position, the moving graphic element can be directly snapped to that target position.
[0083] As can be seen from the above scheme, the graphical element-assisted alignment method for visual programming disclosed in this application can automatically determine the starting matching point group of the moving graphical element and the target matching point group of the target graphical element based on the positions of the moving graphical element and the graphical element to be matched. It determines the first alignment point and the second alignment point based on the principle of pin priority and from near to far. When the first alignment point and the second alignment point are aligned, it is determined that the moving graphical element and the graphical element to be matched are aligned, and the alignment line is displayed. When the first alignment point and the second alignment point are not aligned, it is determined whether the distance between the first alignment point and the second alignment point in the first direction is less than the adsorption threshold. When the distance is less than the adsorption threshold, the moving graphical element is automatically moved to the target position in the second direction so that the first alignment point and the second alignment point are aligned. This can help developers quickly adjust the position of graphics and improve the efficiency of visual programming.
[0084] In this embodiment, corresponding to the above method, this application also discloses a graphical element-assisted alignment device for visual programming. For the specific working content of each unit in the device, please refer to the content of the above method embodiment.
[0085] The following describes the graphic element alignment device for visual programming provided in the embodiments of the present invention. The graphic element alignment device for visual programming described below can be referred to in correspondence with the graphic element alignment method for visual programming described above.
[0086] For details, see Figure 7 The device may include:
[0087] The graphic recognition unit 10, which corresponds to step S101 in the above method, is used to acquire moving graphic elements and matching graphic elements within the visible area, wherein the matching graphic elements are non-moving graphic elements within the visible area.
[0088] Matching point grouping unit 20, which corresponds to step S102 in the above method, is used to determine the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched. The starting matching point group includes: target points and pins on the side of the moving graphic element facing the graphic element to be matched. The target matching point group includes target points and pins on the side of the graphic element to be matched facing the moving graphic element. The target points include vertices and intermediate points.
[0089] Alignment point determination unit 30, which corresponds to step S103 in the above method, is used to determine the first alignment point of the starting matching point group of the moving graphic element and the second alignment point in the target matching point group of the graphic element to be matched based on pin priority and the near-to-far manner.
[0090] The alignment line display unit 40 corresponds to step S104 in the above method and is used to display the alignment line when the first alignment point and the second alignment point are detected to be aligned.
[0091] The adsorption judgment unit 50, which corresponds to step S105 in the above method, is used to determine whether the distance between the first alignment point and the second alignment point in a first direction is less than the adsorption threshold when the first alignment point and the second alignment point are not aligned. The first direction is perpendicular to the alignment line.
[0092] Adsorption unit 60, which corresponds to step S106 in the above method, is used to automatically move the moving graphic element to a target position in a second direction when the distance is less than the adsorption threshold. The second direction is parallel to the first direction and toward the second alignment point. The target position is the position where the first alignment point and the second alignment point are aligned in the first direction.
[0093] Furthermore, based on the above-described solutions provided by this invention, those skilled in the art can readily conceive of obtaining a computer program product based on the aforementioned alignment method. The computer program product may include a computer-readable storage medium on which computer-readable program instructions are loaded to cause a processor to implement the various steps of the methods disclosed herein. Specifically, this application also discloses an electronic device for drawing, comprising at least one processing device and a storage device connected to the processing device, wherein: the storage device is used to store a computer program; the processing device is used to execute the computer program to enable the electronic device to implement any of the above-described visual programming graphic element-assisted alignment methods. The electronic device in this document may be a server, PC, PAD, mobile phone, etc.
[0094] Accordingly, this application also discloses a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the aforementioned graphical element-assisted alignment method applied to visual programming.
[0095] For ease of description, the above system is described by dividing it into various modules based on their functions. Of course, in implementing this invention, the functions of each module can be implemented in one or more software and / or hardware components.
[0096] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, for system or system embodiments, since they are basically similar to method embodiments, the description is relatively simple, and relevant parts can be referred to the descriptions in the method embodiments. The systems and system 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 creative effort.
[0097] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.
[0098] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.
[0099] It should also be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0100] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A method for aligning graphical elements in a visual programming context, characterized in that, include: Obtain moving graphic elements and matching graphic elements within the visible area, wherein the matching graphic elements are non-moving graphic elements within the visible area; Determine the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched. The starting matching point group includes: target points and pins on the side of the moving graphic element facing the graphic element to be matched. The target matching point group includes target points and pins on the side of the graphic element to be matched facing the moving graphic element. The target points include vertices and midpoints. The first alignment point of the starting matching point group of the moving graphic element and the second alignment point in the target matching point group of the graphic element to be matched are determined based on pin priority and a near-to-far approach. When the first alignment point and the second alignment point are detected to be aligned, the alignment line is displayed; When the first alignment point and the second alignment point are not aligned, it is determined whether the distance between the first alignment point and the second alignment point in a first direction is less than the adsorption threshold, wherein the first direction is perpendicular to the alignment line; When the distance is less than the adsorption threshold, the moving graphic element is automatically moved to the target position in a second direction, which is parallel to the first direction and toward the second alignment point. The target position is the position where the first alignment point and the second alignment point are aligned in the first direction.
2. The method for assisted alignment of graphical elements in visual programming according to claim 1, characterized in that, Determining the first alignment point of the starting matching point group and the second alignment point of the target matching point group of the moving graphic element based on pin priority and a near-to-far approach includes: When pins exist in both the starting matching point group and the target matching point group; The two pins that are closest to each other in the first direction in the starting matching point group and the target matching point group are respectively designated as the first alignment point and the second alignment point.
3. The method for assisted alignment of graphical elements in visual programming according to claim 2, characterized in that, When the starting matching point group or the target matching point group does not have a pin, the method further includes: Traverse the target points in the initial matching point group and record the traversed target points as the first target point; Obtain the target point in the target matching point group that matches the first target point, and denote it as the second target point; Calculate the distance between the first target point and the second target point in the first direction; The distance values corresponding to each target point in the initial matching point group are compared, and the first target point and the second target point corresponding to the minimum distance value are recorded as the first alignment point and the second alignment point, respectively.
4. The method for assisted alignment of graphical elements in visual programming according to claim 3, characterized in that, When the first target point is the upper left vertex of the moving graphic element, the second target point is the upper right vertex of the graphic element to be matched; When the first target point is the lower left vertex of the moving graphic element, the second target point is the lower right vertex of the graphic element to be matched; When the first target point is the left middle vertex of the moving graphic element, the second target point is the right middle vertex of the graphic element to be matched; When the first target point is the upper right vertex of the moving graphic element, the second target point is the upper left vertex of the graphic element to be matched; When the first target point is the lower right vertex of the moving graphic element, the second target point is the lower left vertex of the graphic element to be matched. When the first target point is the right middle vertex of the moving graphic element, the second target point is the left middle vertex of the graphic element to be matched; When the first target point is the upper left vertex of the moving graphic element, the second target point is the lower left vertex of the graphic element to be matched; When the first target point is the upper right vertex of the moving graphic element, the second target point is the lower right vertex of the graphic element to be matched. When the first target point is the upper middle vertex of the moving graphic element, the second target point is the lower middle vertex of the graphic element to be matched. When the first target point is the lower left vertex of the moving graphic element, the second target point is the upper left vertex of the graphic element to be matched. When the first target point is the lower right vertex of the moving graphic element, the second target point is the upper right vertex of the graphic element to be matched. When the first target point is the lower middle vertex of the moving graphic element, the second target point is the upper middle vertex of the graphic element to be matched.
5. The method for assisted alignment of graphical elements in visual programming according to claim 1, characterized in that, Determining the starting matching point set of the moving graphic element and the target matching point set of the graphic element to be matched includes: Identify the orientation information of the graphic element to be matched relative to the moving graphic element, the orientation information including above, below, left and right; When the graphic element to be matched is located above the moving graphic element, the target point and pin on the upper side of the moving graphic element are used as the starting matching point group, and the target point and pin on the lower side of the graphic element to be matched are used as the target matching point group. When the graphic element to be matched is located below the moving graphic element, the target point and pin on the lower side of the moving graphic element are used as the starting matching point group, and the target point and pin on the upper side of the graphic element to be matched are used as the target matching point group. When the graphic element to be matched is located to the left of the moving graphic element, the target point and pin on the left side of the moving graphic element are taken as the starting matching point group, and the target point and pin on the right side of the graphic element to be matched are taken as the target matching point group. When the graphic element to be matched is located to the right of the moving graphic element, the target point and pin on the right side of the moving graphic element are taken as the starting matching point group, and the target point and pin on the left side of the graphic element to be matched are taken as the target matching point group.
6. The method for assisted alignment of graphical elements in visual programming according to claim 1, characterized in that, The two endpoints of the alignment line are the first alignment point and the second alignment point, respectively.
7. The method for assisted alignment of graphical elements in visual programming according to claim 1, characterized in that, The alignment line is a dashed line set on the top layer.
8. A graphical element alignment aid for visual programming, characterized in that, include: A graphic recognition unit is used to acquire moving graphic elements and matching graphic elements within a visible area, wherein the matching graphic elements are non-moving graphic elements within the visible area. A matching point grouping unit is used to determine the starting matching point group of the moving graphic element and the target matching point group of the graphic element to be matched. The starting matching point group includes: target points and pins on the side of the moving graphic element facing the graphic element to be matched. The target matching point group includes target points and pins on the side of the graphic element to be matched facing the moving graphic element. The target points include vertices and intermediate points. The alignment point determination unit is used to determine the first alignment point of the starting matching point group of the moving graphic element and the second alignment point in the target matching point group of the graphic element to be matched, based on pin priority and a near-to-far approach. An alignment line display unit is used to display an alignment line when the first alignment point and the second alignment point are detected to be aligned. An adsorption judgment unit is used to determine whether the distance between the first alignment point and the second alignment point in a first direction is less than an adsorption threshold when the first alignment point and the second alignment point are not aligned, wherein the first direction is perpendicular to the alignment line. An adsorption unit is used to automatically move the moving graphic element to a target position in a second direction when the distance is less than the adsorption threshold. The second direction is parallel to the first direction and toward the second alignment point. The target position is the position where the first alignment point and the second alignment point are aligned in the first direction.
9. An electronic device, characterized in that, include: It includes at least one processing device and a storage device connected to the processing device, wherein: The storage device is used to store computer programs; The processing device is used to execute the computer program to enable the electronic device to implement the graphical element-assisted alignment method of visual programming as described in any one of claims 1 to 7.
10. A storage medium, characterized in that, The storage medium carries one or more computer programs that, when executed by an electronic device, enable the electronic device to implement the graphical element-assisted alignment method for visual programming as described in any one of claims 1 to 7.