Method and system for determining relative position of atomic components, electronic device and medium
By determining whether a background layer contains a second atomic component in a low-code platform, and using coordinate positioning and component hierarchy priority, the problem of unreasonable layout and poor stability when combining atomic components is solved. This achieves efficient determination of the relative positions of atomic components, improving user experience and design efficiency.
Patent Information
- Application Number
- CN202211139692.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-09-19
- Publication Date
- 2026-01-23
- Estimated Expiration
- 2042-09-19
AI Technical Summary
Existing low-code platforms suffer from issues such as unreasonable front-end page layout, limited combination options, and poor stability when composing atomic components.
By determining whether the background layer contains a second atomic component, the relative position of the first atomic component and the second atomic component or the background layer is determined based on the determination result. A coordinate positioning method is used, including the coordinates of the top left and bottom right corners or the coordinates of the bottom left and top right corners. Combined with component hierarchy priority and matrix intersection detection, the relative position relationship is dynamically obtained.
It improves the efficiency of users designing atomic components and enhances the user experience, ensures the accurate positioning of atomic components in complex combinations, reduces conflict warnings, and optimizes component layout.
Smart Images
Figure CN115390844B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present disclosure relates to the technical field of visualizing configuration of atomic components in a configuration platform, and particularly relates to a method and system for determining relative positions of atomic components, an electronic device and a medium. BACKGROUND
[0002] When designing a front-end page, a low-code platform is usually selected for design. When adjusting and designing the layout of the front-end page in the low-code platform, a large amount of time is not spent on modifying the code, and even project staff without code-related background knowledge can directly adjust or modify the front-end page by dragging and attribute configuring relevant atomic components in the low-code platform, saving a large amount of time cost.
[0003] At present, in the case that the form of atomic component combination is relatively complex, the low-code platform usually performs absolute position positioning on the coordinate origin. This method for positioning the atomic components is prone to defects such as unreasonable front-end page layout scheme, limited combination scheme of atomic components in the front-end page, and poor overall stability. SUMMARY
[0004] The technical problem to be solved by the present disclosure is to overcome the defects of unreasonable front-end page layout scheme, limited combination scheme of atomic components in the front-end page, and poor overall stability in the prior art by using the coordinate origin for absolute position positioning, and to provide a method and system for determining relative positions of atomic components, an electronic device and a medium.
[0005] The present disclosure solves the above technical problems by the following technical solutions:
[0006] A method for determining relative positions of atomic components, comprising:
[0007] adding a first atomic component to a background layer;
[0008] determining whether the background layer contains a second atomic component:
[0009] if yes, determining relative positions of the first atomic component and the second atomic component according to coordinates;
[0010] if no, determining relative positions of the background layer and the first atomic component according to coordinates;
[0011] The first atomic component is an atomic component to be added, and the second atomic component is an atomic component that has been added to the background layer.
[0012] Optionally, the step of determining relative positions of the background layer and the first atomic component according to coordinates further comprises:
[0013] define the first atomic component as a child element of the background layer.
[0014] Optionally, the determining the relative position of the first atomic component and the second atomic component according to the coordinates comprises:
[0015] obtaining a component hierarchy priority of the second atomic component;
[0016] determining whether the first atomic component intersects with the second atomic component, and sequentially determining the first atomic component and the second atomic component according to the component hierarchy priority;
[0017] if the first atomic component intersects with the second atomic component for the first time, determining the relative position of the first atomic component and the second atomic component which intersects with the first atomic component for the first time, and ending the determination, and defining the first atomic component as a child element of the second atomic component;
[0018] if the first atomic component does not intersect with any second atomic component, determining the relative position of the background layer and the first atomic component, and defining the first atomic component as a child element of the background layer.
[0019] Optionally, if the first atomic component intersects with the second atomic component, sending a prompt information.
[0020] Optionally, the coordinates are upper left corner coordinates and right lower foot coordinates; and / or,
[0021] the coordinates are lower left corner coordinates and right upper foot coordinates.
[0022] Optionally, the component hierarchy priority is determined by the order of adding the first atomic component to the background layer.
[0023] and / or,
[0024] The first atomic component and the second atomic component comprise at least one of a picture atomic component, a text atomic component, a button atomic component, and a background atomic component.
[0025] Optionally, the steps before adding the first atomic component to the background layer comprise:
[0026] adding the background layer to a page layer in a front-end page.
[0027] A system for determining the relative position of atomic components, the system comprising:
[0028] an adding module, configured to add a first atomic component to a background layer;
[0029] A judging module is configured to judge whether the background layer contains a second atomic component; if yes, a first relative position determining module is called; if no, a second relative position determining module is called.
[0030] The first relative position determining module is configured to determine the relative position between the first atomic component and the second atomic component according to the coordinates.
[0031] The second relative position determining module is configured to determine the relative position between the background layer and the first atomic component according to the coordinates.
[0032] The first atomic component is an atomic component to be added, and the second atomic component is an atomic component that has been added to the background layer.
[0033] An electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor executes the computer program to implement the atomic component relative position determining method of any one of the above.
[0034] A computer readable storage medium has a computer program stored thereon, and the computer program is executable on a processor to implement the atomic component relative position determining method of any one of the above.
[0035] The positive progress effect of the present disclosure is that the relative position relationship between the first atomic component and the second atomic component or the relative position relationship between the first atomic component and the background layer is determined according to the judgment result by judging whether the background layer contains the second atomic component. The present disclosure can obtain the relative position relationship between the atomic component dragged into the background layer and the added background layer or atomic component, improve the efficiency of the user in designing the atomic component, and improve the user experience. BRIEF DESCRIPTION OF DRAWINGS
[0036] Figure 1 A flowchart of another atomic component relative position determining method of embodiment 1 of the present disclosure.
[0037] Figure 2 A schematic diagram of adding the first atomic component of embodiment 1 of the present disclosure.
[0038] Figure 3 A schematic diagram of another adding the first atomic component of embodiment 1 of the present disclosure.
[0039] Figure 4 A flowchart of another atomic component relative position determining method of embodiment 1 of the present disclosure.
[0040] Figure 5 A schematic diagram of another adding the first atomic component of embodiment 1 of the present disclosure.
[0041] Figure 6 Fig. 1 is a schematic diagram of an atomic component according to an embodiment of the present application.
[0042] Figure 7 Fig. 2 is a schematic diagram of a module of a relative position determination system of an atomic component according to an embodiment of the present application.
[0043] Figure 8 Fig. 3 is a schematic diagram of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION
[0044] The present disclosure will be further described below by way of examples, but the present disclosure is not limited to the examples.
[0045] Embodiment 1
[0046] The present embodiment provides a method for determining a relative position of an atomic component, Figure 1 A flowchart of the present embodiment is shown. Referring to Fig. 1, the method for determining a relative position of an atomic component according to the present embodiment comprises the following steps: Figure 1 Step S1, adding a first atomic component to a background layer;
[0047] Step S2, determining whether the background layer contains a second atomic component, if yes, executing step S21, if no, executing step S22:
[0048] Step S21, determining a relative position of the first atomic component and the second atomic component according to coordinates;
[0049] Step S22, determining a relative position of the background layer and the first atomic component according to coordinates;
[0050] The first atomic component is an atomic component to be added, and the second atomic component is an atomic component that has been added to the background layer.
[0051] Referring to Fig. 1, it is assumed that the atomic component C1 is to be added to the background layer BG2, at this time, the atomic component C1 is the first atomic component. First, it is determined whether the background layer BG2 contains a second atomic component (the second atomic component is an atomic component that has been added to the background layer BG2 before the first atomic component C1 is added). At this time, the background layer BG2 does not contain a second atomic component, and a relative position of the background layer BG2 and the first atomic component C1 is determined according to coordinates.
[0052] Figure 2 Referring to Fig. 1, it is assumed that the atomic component C1 is to be added to the background layer BG2, at this time, the atomic component C1 is the first atomic component. First, it is determined whether the background layer BG2 contains a second atomic component (the second atomic component is an atomic component that has been added to the background layer BG2 before the first atomic component C1 is added). At this time, the background layer BG2 does not contain a second atomic component, and a relative position of the background layer BG2 and the first atomic component C1 is determined according to coordinates.
[0053] Referring to Fig. 1, it is assumed that the atomic component C1 is to be added to the background layer BG2, at this time, the atomic component C1 is the first atomic component. First, it is determined whether the background layer BG2 contains a second atomic component (the second atomic component is an atomic component that has been added to the background layer BG2 before the first atomic component C1 is added). At this time, the background layer BG2 does not contain a second atomic component, and a relative position of the background layer BG2 and the first atomic component C1 is determined according to coordinates. Figure 3 After the atomic component C1 is added, the atomic component C1 is a second atomic component added to the background layer BG2. Assuming that the atomic component C2 is to be added to the background layer BG2, the atomic component C2 is a first atomic component at this time. First, it is determined whether the second atomic component is included in the background layer BG2. At this time, the second atomic component C1 is already included in the background layer BG2, and the relative position of the first atomic component C2 and the second atomic component C1 is determined according to the coordinates.
[0054] In the embodiment, first, it is determined whether the second atomic component is included in the background layer, and the relative position relationship of the first atomic component and the second atomic component or the relative position relationship of the first atomic component and the background layer is determined according to the result of the determination. The relative position relationship of the atomic component dragged into the background layer and the added background layer or atomic component can be obtained, the efficiency of the user in designing the atomic component is improved, and the user experience is improved.
[0055] Optionally, referring to Figure 4 , the step S1 further includes S0 before the step S1:
[0056] The background layer is added to the page layer in the front-end page.
[0057] Before the atomic component is added, a preset number of background layers are added to the page layer, and there is at least one background layer in the page layer, and the background layers have no intersection for area division. In addition, the length and width of the page layer, the coordinates of the page layer, and the coordinates of the background layer are set according to requirements. For example, referring to Figure 2 and Figure 3 Before the atomic component is added, the background layer BG1 and the background layer BG2 are added to the page layer M1. Assuming that the width of the page layer M1 is w, the height is h, the upper left corner of the page layer M1 is the origin of the coordinate axis, the coordinate is (0, 0), the lower left corner coordinate is (0, -h), the upper right corner coordinate is (w, 0), and the lower right corner coordinate is (w, -h). The upper left corner coordinate of the background layer BG2 is (x1, y1), and the lower right corner coordinate of the background layer BG2 is (x2, y2). The front-end page can be a marketing page used for a hotel, a travel website, or other types of front-end pages for interaction with a user.
[0058] Optionally, the step S22 further includes:
[0059] The first atomic component is defined as a child element of the background layer.
[0060] For example, referring to Figure 2 After the relative position of the background layer BG2 and the first atomic component C1 is determined according to the coordinates, the first atomic component C1 is defined as a child element of the background layer BG2, and the background layer BG2 is a parent element of the first atomic component C1.
[0061] In this embodiment, by defining child elements and parent elements, the relative dynamic positional relationship between atomic components and other atomic components or background layers can be dynamically determined when dragging multiple atomic components, thereby improving the efficiency of users designing atomic components and enhancing the user experience.
[0062] Optionally, the coordinates are the coordinates of the top left corner and the bottom right corner; and / or, the coordinates are the coordinates of the bottom left corner and the top right corner.
[0063] Among them, see Figure 2 In step S22, assuming the coordinates of the upper left corner of the background layer BG2 are (x1, y1) and the coordinates of the lower right corner are (x2, y2), the coordinates of the upper left corner of the first atomic component C1 are (C1x1, C1y1) and the coordinates of the lower right corner are (C1x2, C1y2), the positioning of the relative position of the first atomic component C1 with respect to the background layer BG2 is: (LEFT: C1x1-x1, TOP: y1-C1y1).
[0064] Furthermore, those skilled in the art should understand that, in addition to the top-left and bottom-right coordinates mentioned above, the bottom-left and top-right coordinates, as well as the coordinates of the four vertices of the atomic component (i.e., top-left, bottom-right, bottom-left, and top-right coordinates), can all be used to determine the relative position, and will not be elaborated further here.
[0065] In this embodiment, when dragging multiple atomic components to the background layer, the relative dynamic positional relationship between the atomic components and the background layer can be known, thereby improving the efficiency of users designing atomic components and enhancing the user experience.
[0066] Optionally, see Figure 4 Step S21 further includes:
[0067] Step S211: Obtain the component hierarchy priority of the second atomic component;
[0068] There are two cases, assuming there is a first atomic component C. i Second atomic component C k :
[0069] (1) When the background layer BG i Only the second atomic component C has been added. k Then add the first atomic component C i At that time, the second atomic component C k The component with the highest priority in the hierarchy.
[0070] (2) When the background layer BG i The second atomic components C1, C2…C have already been added. k …C fThen add the first atomic component C i At this time, it is necessary to first obtain C1, C2...C k …C f Component hierarchy priority.
[0071] Step S212: Determine whether the first atomic component intersects with the second atomic component. The first atomic component is judged with the second atomic component in turn according to the component hierarchy priority.
[0072] Among them, determining the background layer (BG) i The method for determining whether two atomic components intersect is matrix intersection detection. For example, to determine whether the first atomic component C... i Second atomic component C k When determining whether an intersecting region exists, first determine the first atomization component C. i The coordinates of the top left corner (C) i X1,C i Y1), lower right corner coordinates (C) i X2,C i Y2) and the second atomic component C k The coordinates of the top left corner (C) k X1,C k Y1), lower right corner coordinates (C) k X2, C k Y2) and background layer BG i The upper left corner coordinates are (X1, Y1), and the lower right corner coordinates are (X2, Y2). As shown in equations (1) and (2), the first atomization component C i High H Ci Width W Ci and the second atomic component C k High H Ck Width W Ck for:
[0073]
[0074]
[0075] As shown in equations (3) and (4), the first atomic component C i Center point coordinates (X Ci ,Y Ci ) and the second atomic component C k Center point coordinates (X Ck ,Y Ck Obtained through the following formula:
[0076]
[0077]
[0078] When both conditional (5) and conditional (6) below are true, then the two atomic components C are determined to be true. i C k Intersecting regions exist:
[0079]
[0080]
[0081] If the first atomic component intersects with the second atomic component for the first time, then proceed to step S213;
[0082] If the first atomic component does not intersect with any of the second atomic components, then proceed to step S214;
[0083] Step S213: Determine the relative position of the first atomic component and the second atomic component with the first intersecting region, and end the judgment. Define the first atomic component as a sub-element of the second atomic component.
[0084] If the first atomic component intersects with the second atomic component for the first time, there are two cases, continuing with the first atomic component C in step S211. i Second atomic component C k Make an assumption:
[0085] (1) When the background layer BG i Only the second atomic component C has been added. k Adding the first atomic component C i At that time, the second atomic component C k The component with the highest priority in the hierarchy. In this case, only the first atomic component C needs to be determined. i Is it related to the second atomic component C? k Intersecting regions exist: If they exist, determine the first atomic component C. i With the second atomic component C k Determine the relative positional relationship and end the judgment. Place the first atomic component C... i Defined as the second atomic component C k The child element, the second atomic component C k This is the first atomic component C. i The parent element. It can also be determined based on the first atomic component C. i Top left corner coordinates (C i X1,C i Y1) and the second atomic component C k Top left corner coordinates (C k X1,C k Y1) Calculation yields the first atomic component C iThe positioning of the first atomic component C k relative to the second atomic component C k is (LEFT:C i X1-C i X1, TOP:C k Y1-C i Y1).
[0086] (2) When the second atomic components C1, C2…C k …C f , a total of m second atomic components, have been added in the background layer BG i , to add the first atomic component C i , the component layer priority of C1, C2…C k …C f needs to be obtained first. Based on the component layer priority, it is judged in sequence whether the first atomic component C i and the m second atomic components (all existing atomic components in the background layer BG i ) have an intersection region, until the first atomic component C i stops at the second atomic component with which the first atomic component C i first has an intersection region. Assuming that the second atomic component with which the first atomic component C i first has an intersection region is C k , the relative position relationship between the first atomic component C i and the second atomic component C k is determined, and the judgment is ended. The first atomic component C i is defined as a child element of the second atomic component C k , and the second atomic component C k is a parent element of the first atomic component C i . The positioning of the first atomic component C i relative to the second atomic component C i can also be calculated based on the upper left corner coordinates (C i X1, C k Y1) of the first atomic component C k and the upper left corner coordinates (C k X1, C i Y1) of the second atomic component C k , which is (LEFT:C k X1-C i X1, TOP:C i Y1-C k Y1).
[0087] In step S214, the relative position of the background layer and the first atomic component is determined, and the first atomic component is defined as a child element of the background layer.
[0088] If the first atomic component does not have an intersection region with any second atomic component, the relative position of the background layer and the first atomic component is determined. The background layer BG i The coordinates of the upper left corner are (X1, Y1), and the coordinates of the lower right corner are (X2, Y2). The first atomic component C i The coordinates of the upper left corner are (X1, Y1), and the coordinates of the lower right corner are (X2, Y2). The first atomic component C i X1, C i Y1), and the coordinates of the lower right corner are (X2, Y2). The first atomic component C i X2, C i Y2). The relative position of the first atomic component C i relative to the background layer BG i is (LEFT: C i X1 - X1, TOP: C i Y1 - Y1). The first atomic component C i is defined as a child element of the background layer BG i , and the background layer BG i is defined as a parent element of the first atomic component C i .
[0089] In this embodiment, for example, referring to Figure 5 , after the atomic component C1 is added, the atomic component C1 is a second atomic component that has been added to the background layer BG2. The upper left corner coordinates (C1x1, C1y1) and the lower right corner coordinates (C1x2, C1y2) of the second atomic component C1, and the following are the processes of adding atomic components C2, C3, and C4:
[0090] (1) Add the first atomic component C2: The atomic component C2 is to be added to the background layer BG2, and at this time, the atomic component C2 is the first atomic component. At the time of addition, the background layer BG2 already contains the second atomic component C1. First, the component layer priority of the second atomic component is obtained. Since the background layer BG2 contains only the second atomic component C1 at this time, it is directly determined whether the first atomic component C2 and the second atomic component C1 have an intersection region. Specifically, it is determined whether the first atomic component C2 and the second atomic component C1 have an intersection region by using the above-mentioned matrix intersection detection method, and the detection result is that there is an intersection region. The upper left corner coordinates (C2x1, C2y1) and the lower right corner coordinates (C2x2, C2y2) of the first atomic component C2, the first atomic component C2 is a child element of the second atomic component C1, the second atomic component C1 is a parent element of the first atomic component C2, and the positioning of the first atomic component C2 relative to the second atomic component C1 is (LEFT: C1x1 - C2x1, TOP: C2y1 - C1y1).
[0091] (2) Adding the first atomic component C3: When the first atomic component C2 is added to the background layer, it is redefined as the second atomic component C2. The atomic component C3 is to be added to the background layer BG2, at this time, the atomic component C3 is as the first atomic component. First, the component level priority of the second atomic component is obtained, and the component level priority is: C2>C1. When the first atomic component C3 is added, the first atomic component C3 needs to be intersected with the second atomic component C2 in the background layer BG2 first, and the result is that there is no intersection area. The first atomic component C3 continues to be intersected with the second atomic component C1, and the detection result is that there is an intersection area. The upper left corner coordinates (C3x1, C3y1) and the lower right corner coordinates (C3x2, C3y2) of the first atomic component C3 are contained in the second atomic component C1, the first atomic component C3 is a child element of the second atomic component C1, the second atomic component C1 is a parent element of the first atomic component C3, and the positioning of the first atomic component C3 relative to the second atomic component C1 is: (LEFT: C1x1-C3x1, TOP: C3y1-C1y1).
[0092] (3) Adding the first atomic component C4: When the first atomic component C3 is added to the background layer, it is redefined as the second atomic component C3. The atomic component C4 is to be added to the background layer BG2, at this time, the atomic component C4 is as the first atomic component. First, the component level priority of the second atomic component is obtained, and the component level priority is: C3>C2>C1. When the first atomic component C4 is added, the first atomic component C4 needs to be intersected with the second atomic component C3 in the background layer BG2 first, and the result is that there is no intersection area. The first atomic component C4 continues to be intersected with the second atomic component C2, and the detection result is that there is no intersection area. The first atomic component C4 finally intersects with the second atomic component C1, and the detection result is that there is no intersection area. The upper left corner coordinates (C4x1, C4y1) and the lower right corner coordinates (C4x2, C4y2) of the first atomic component C4. Therefore, the first atomic component C4 directly becomes a child element in the background layer BG2, the background layer BG2 is a parent element of the first atomic component C4, and the positioning of the first atomic component C4 relative to the background layer BG2 is: (LEFT: C4x1-x1, TOP: y1-C4y1).
[0093] In the embodiment, the optimal intersecting parent element is found for all atomized components in the background layer in sequence, each component is positioned based on the parent element, and the relative position is ensured to be positioned correctly according to the parent element even in the case of complex combination of atomized components in the page. When more atomized components are dragged, the relative dynamic position relationship between the atomized components and the background layer can be dynamically obtained, the efficiency of designing atomized components by the user is improved, and the user experience is improved.
[0094] Optionally, if the first atomized component and the second atomized component have an intersecting region, a prompt message is sent.
[0095] When the first atomized component and the second atomized component have an intersecting region, it means that the newly added first atomized component may have a conflict with the second atomized component that has been added. Then, the designer is reminded of the probability of conflict by sending a prompt message. The form of sending a prompt message is not limited to sending a pop-up window, a sound prompt, etc.
[0096] In addition, after the step of sending a prompt message, a new position of the first atomized component can be actively found. The new position does not intersect with the second atomized component, and the new position is an optimal coordinate set according to requirements, and whether it needs to be moved to the new position is prompted.
[0097] In the embodiment, when it is judged that the first atomized component and the second atomized component have an intersecting region, a prompt message is sent to remind the designer that the first atomized component may have a conflict with the second atomized component, and a new position of the first atomized component can be actively found, the efficiency of designing atomized components by the user is improved, and the user experience is improved.
[0098] Optionally, the component hierarchy priority is determined by the order of adding the first atomized component to the background layer.
[0099] And / or,
[0100] The first atomized component and the second atomized component include at least one of a picture atomized component, a text atomized component, a button atomized component, and a background atomized component.
[0101] The component hierarchy priority is determined by the order of adding the first atomized component to the background layer. It is assumed that the second atomized components C1, C2, and C3 exist in the background layer, and the order in the adding process is that C1 is added first, C2 is added second, and C3 is added last. Then, the component hierarchy priority is zIndex(C3)>zIndex(C2)>zIndex(C1).
[0102] Referring to Figure 6The first atomic component and the second atomic component include at least one of a picture atomic component A1, a text atomic component A2, a button atomic component A3, and a background atomic component A4.
[0103] Embodiment 2
[0104] The embodiment of the present application provides a system for determining the relative position of atomic components. Figure 7 The module schematic diagram of the embodiment of the present application is shown. Referring to Figure 7 The system for determining the relative position of atomic components comprises:
[0105] The adding module 101 is configured to add the first atomic component to the background layer.
[0106] The judging module 102 is configured to judge whether the background layer contains the second atomic component: if yes, the first relative position determining module is called; if no, the second relative position determining module is called.
[0107] The first relative position determining module 103 is configured to determine the relative position of the first atomic component and the second atomic component according to the coordinates.
[0108] The second relative position determining module 104 is configured to determine the relative position of the background layer and the first atomic component according to the coordinates.
[0109] The first atomic component is an atomic component to be added, and the second atomic component is an atomic component that has been added to the background layer.
[0110] Referring to Figure 2 It is assumed that the first atomic component C1 is to be added to the background layer BG2. First, it is judged whether the background layer BG2 contains the second atomic component (the second atomic component is an atomic component that has been added to the background layer BG2 before the first atomic component C1 is added). At this time, the background layer BG2 does not contain the second atomic component, and the relative position of the background layer BG2 and the first atomic component C1 is determined according to the coordinates.
[0111] Referring to Figure 3 After the atomic component C1 is added, the atomic component C1 is the second atomic component that has been added to the background layer BG2, and it is assumed that the first atomic component C2 is to be added to the background layer BG2. First, it is judged whether the background layer BG2 contains the second atomic component. At this time, the background layer BG2 already contains the second atomic component C1, and the relative position of the first atomic component C2 and the second atomic component C1 is determined according to the coordinates.
[0112] In the embodiment, first, it is judged whether the second atomic component is contained in the background layer, and the relative position relationship between the first atomic component and the second atomic component or the relative position relationship between the first atomic component and the background layer is determined according to the judgment result. The relative position relationship between the atomic component dragged into the background layer and the added background layer or atomic component can be obtained, the efficiency of designing the atomic component by the user is improved, and the user experience is improved.
[0113] Embodiment 3
[0114] The embodiment provides an electronic device which can be in the form of a computing device (for example, can be a server device) including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the atomic component relative position determination method provided in the embodiment 1 when executing the computer program.
[0115] Figure 8 A hardware structure schematic diagram of the embodiment is shown, as shown in the figure, the electronic device 9 specifically includes: Figure 8
[0116] At least one processor 91, at least one memory 92, and a bus 93 for connecting different system components (including the processor 91 and the memory 92), wherein:
[0117] The bus 93 includes a data bus, an address bus and a control bus.
[0118] The memory 92 includes a volatile memory, for example, a random access memory (RAM) 921 and / or a cache memory 922, and can further include a read-only memory (ROM) 923.
[0119] The memory 92 further includes a program / utility 925 having a set of (at least one) program modules 924, such as an operating system, one or more application programs, other program modules, and program data, and each of these examples, or some combination thereof, can include implementation of a network environment.
[0120] The processor 91 performs various functional applications and data processing by running the computer program stored in the memory 92, for example, the atomic component relative position determination method provided in the embodiment 1 of the present disclosure.
[0121] The electronic device 9 can further communicate with one or more external devices 94 such as a keyboard, a pointing device, etc. through an input / output (I / O) interface 95. Further, the electronic device 9 can communicate with one or more networks, such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet, through a network adapter 96. The network adapter 96 communicates with the other modules of the electronic device 9 through the bus 93. It should be appreciated that other hardware and / or software modules can be used in conjunction with the electronic device 9, including but not limited to, microcode, device drivers, redundant processing units, external disk drive arrays, RAID (Redundant Array of Independent Disks) systems, tape drives, and data backup storage systems, etc.
[0122] It should be noted that although several units / modules or sub-units / modules of the electronic device are mentioned in the foregoing detailed description, such a division is merely exemplary and not mandatory. Indeed, according to embodiments of the present application, features and functions of two or more units / modules described above can be embodied in one unit / module. Conversely, features and functions of one unit / module described above can be further divided into embodied by a plurality of units / modules.
[0123] Embodiment 4
[0124] The embodiment provides a computer readable storage medium, and a computer program is stored on the computer readable storage medium. The program is executed by a processor to implement steps of the method for determining relative positions of atomic components provided in the embodiment 1.
[0125] More specifically, the readable storage medium can include, but is not limited to, a portable disc, a hard disk, a random access memory, a read-only memory, an erasable programmable read-only memory, an optical storage device, a magnetic storage device, or any suitable combination of the above.
[0126] In possible embodiments, the present disclosure can also be implemented in the form of a program product, which includes program codes for causing an end device to perform steps of the method for determining relative positions of atomic components described in the embodiment 1 when the program product is run on the end device.
[0127] The program codes for implementing the present disclosure can be written in any combination of one or more programming languages, and can be executed entirely on the user device, partially on the user device, as a stand-alone software package, partially on the user device and partially on a remote device, or entirely on a remote device.
[0128] Although the specific embodiments of the present disclosure are described above, those skilled in the art should understand that this is only an example, and the protection scope of the present disclosure is defined by the appended claims. Those skilled in the art can make various changes or modifications to the embodiments without departing from the principles and essence of the present disclosure, and these changes and modifications all fall within the protection scope of the present disclosure.
Claims
1. A method for determining the relative positions of atomic components, characterized in that, include: Add the first atomic component to the background layer; Determine whether the background layer contains a second atomic component: If so, determine the relative positions of the first atomic component and the second atomic component based on the coordinates; If not, determine the relative position of the background layer and the first atomic component based on the coordinates; The first atomic component is the atomic component to be added, and the second atomic component is the atomic component that has already been added to the background layer; Determining the relative positions of the first atomic component and the second atomic component based on coordinates includes: Get the component hierarchy priority of the second atomic component; Determine whether the first atomic component intersects with the second atomic component; the first atomic component is compared with the second atomic component in turn according to the component hierarchy priority. If the first atomic component intersects with the second atomic component for the first time, the relative position of the first atomic component and the second atomic component with the first intersecting region is determined, the judgment ends, and the first atomic component is defined as a sub-element of the second atomic component; If the first atomic component does not intersect with any second atomic component, the relative position of the background layer and the first atomic component is determined, and the first atomic component is defined as a child element of the background layer.
2. The method for determining the relative positions of atomic components as described in claim 1, characterized in that, The step of determining the relative position of the background layer and the first atomic component based on coordinates further includes: Define the first atomic component as a child element of the background layer.
3. The method for determining the relative positions of atomic components as described in claim 1, characterized in that, If the first atomic component and the second atomic component have an intersecting region, a prompt message is sent.
4. The method for determining the relative positions of atomic components as described in claim 1, characterized in that, The coordinates are the coordinates of the top left corner and the bottom right corner; And / or, The coordinates are the coordinates of the lower left corner and the upper right corner.
5. The method for determining the relative positions of atomic components as described in claim 1, characterized in that, The component hierarchy priority is determined by the order in which the first atomic component is added to the background layer; And / or, The first atomic component and the second atomic component include at least one of an image atomic component, a text atomic component, a button atomic component, and a background atomic component.
6. The method for determining the relative positions of atomic components as described in claim 3, characterized in that, The steps before adding the first atomic component to the background layer include: Add the background layer to the page layer in the front-end page.
7. A system for determining the relative positions of atomic components, characterized in that, The system includes: Add a module to add the first atomic component to the background layer; The determination module is used to determine whether the background layer contains a second atomic component: if yes, the first relative position determination module is called; if no, the second relative position determination module is called. The first relative position determination module is used to determine the relative position of the first atomic component and the second atomic component based on coordinates; The second relative position determination module is used to determine the relative position of the background layer and the first atomic component based on coordinates; The first atomic component is the atomic component to be added, and the second atomic component is the atomic component that has already been added to the background layer; The first relative position determination module is also used to obtain the component hierarchy priority of the second atomic component; Determine whether the first atomic component intersects with the second atomic component; the first atomic component is compared with the second atomic component in turn according to the component hierarchy priority. If the first atomic component intersects with the second atomic component for the first time, the relative position of the first atomic component and the second atomic component with the first intersecting region is determined, the judgment ends, and the first atomic component is defined as a sub-element of the second atomic component; If the first atomic component does not intersect with any second atomic component, the relative position of the background layer and the first atomic component is determined, and the first atomic component is defined as a child element of the background layer.
8. 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 computer program, it implements the method for determining the relative positions of atomic components as described in any one of claims 1-6.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method for determining the relative positions of atomic components as described in any one of claims 1-6.