Component processing method and device

Abstract

The present disclosure provides a component processing method and device. The method comprises: in response to an operation instruction of a user on a component to be processed in a page, acquiring first attribute data of the component to be processed and second attribute data of a fixed component in the page in real time; and displaying an assistive operation identifier on the page when the first attribute data and the second attribute data meet a preset condition, so as to adjust, on the basis of the assistive operation identifier, the component to be processed. According to the technical scheme, determining is performed on the acquired attribute data of the fixed component and the component to be processed, and the identifier capable of assisting in user operations is displayed on the page, thereby improving users' component processing efficiency and accuracy.

Description

Component processing method and equipment

[0001] This application claims priority to the Chinese invention patent application entitled “Component Processing Method and Equipment” and application number 202310707177.4, filed on June 14, 2023. The entire contents of that application are incorporated herein by reference. Technical Field

[0002] The present disclosure relates to the field of computer technology, and in particular to a component processing method and device. Background Art

[0003] During page building, the most frequent operation is dragging and dropping components. Almost all key actions in page building are performed by dragging and dropping: adding components, moving components, or hiding components. The accuracy of dragging and dropping is positively correlated with the page's completeness and user experience, making its importance self-evident.

[0004] In the prior art, technicians often drag the movement of components, and rely on experience to move the components to a position that meets the requirements, or make corresponding adjustments to the size of the components.

[0005] However, this purely manual approach often results in components not displaying the desired effect, which often prevents them from displaying the desired effect when processing the components. Therefore, how to process components efficiently and accurately has become a technical problem that needs to be solved urgently.

[0006] Summary of the Invention

[0007] The present disclosure provides a component processing method and device to achieve the purpose of processing components efficiently and more accurately.

[0008] In a first aspect, an embodiment of the present disclosure provides a component processing method, comprising: in response to a user's operation instruction on a component to be processed on a page, obtaining in real time first attribute data of the component to be processed and second attribute data of a fixed component on the page; when the first attribute data and the second attribute data meet preset conditions, displaying an auxiliary operation identifier on the page to adjust the component to be processed based on the auxiliary operation identifier.

[0009] In second aspect, an embodiment of the present disclosure provides a component processing device, which includes: an acquisition module for acquiring, in real time, first attribute data of the component to be processed and second attribute data of the fixed component in the page in response to a user's operation instructions on the component to be processed in the page; a display module for displaying an auxiliary operation identifier on the page when the first attribute data and the second attribute data meet preset conditions, so as to adjust the component to be processed based on the auxiliary operation identifier.

[0010] In a third aspect, an embodiment of the present disclosure provides an electronic device, comprising: a processor, and a memory communicatively connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement the component processing method as described in the first aspect above.

[0011] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement the component processing method described in the first aspect above.

[0012] In a fifth aspect, an embodiment of the present disclosure provides a computer program product, including a computer program, which, when executed by a processor, implements the component processing method described in the first aspect above. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0014] FIG1 is a flow chart of a component processing method according to an embodiment of the present disclosure;

[0015] FIG2 is a second flow chart of a component processing method provided by an embodiment of the present disclosure;

[0016] FIG3 is a schematic diagram of component size adjustment according to an embodiment of the present disclosure;

[0017] FIG4 is a third flow chart of a component processing method provided in an embodiment of the present disclosure;

[0018] FIG5 is a first schematic diagram of component movement according to an embodiment of the present disclosure;

[0019] FIG6 is a second schematic diagram of component movement provided by an embodiment of the present disclosure;

[0020] FIG7 is a fourth flow chart of a component processing method provided in an embodiment of the present disclosure;

[0021] FIG8 is a schematic diagram of a canvas area provided by a disclosed embodiment;

[0022] FIG9 is a schematic structural diagram of a component processing device provided in an embodiment of the present disclosure;

[0023] FIG10 is a schematic structural diagram of an electronic device provided in an embodiment of the present disclosure.

[0024] The above drawings illustrate specific embodiments of the present disclosure, which will be described in more detail below. These drawings and textual descriptions are not intended to limit the scope of the present disclosure in any way, but rather to illustrate the concepts of the present disclosure to those skilled in the art by reference to specific embodiments. DETAILED DESCRIPTION

[0025] To make the objectives, technical solutions, and advantages of the embodiments of the present disclosure more clear, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present disclosure, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present disclosure without making any creative efforts shall fall within the scope of protection of the present disclosure.

[0026] Before introducing the embodiments of the present disclosure, the terms and application background involved in the embodiments of the present disclosure are first explained:

[0027] Components: The basic units that make up a page, such as buttons, images, and text.

[0028] Parent component: The outer component where the current component is located, such as the video list component of the video.

[0029] Adsorption: When dragging a component, if it is detected that the information U (distance, position, size) of the dragged component is close to the information V of other components (less than a certain threshold), U is set to V to achieve the adsorption effect.

[0030] Canvas: The workspace for page construction.

[0031] Anchor Point: When dragging an anchor point, you can freely scale the size of the component itself, making it easy to set the size of the component. The component can also be positioned according to its anchor point when dragging, and can also be scaled according to the anchor point when the component is selected.

[0032] Component anchor points are generally divided into 4, 6, and 8, with 8 being the most common. Taking a four-sided rectangle as an example, there are 4 vertices plus the midpoint of each side.

[0033] During page building, the most frequent operation is dragging and dropping components. Almost all key actions in page building are performed by dragging and dropping: adding components, moving components, or hiding components. The accuracy of dragging and dropping is positively correlated with the page's completeness and user experience, making its importance self-evident.

[0034] During the dragging process, it's difficult to guarantee the presentation quality if relying solely on user interaction. Typical scenarios include: Each video in a video list needs to be evenly spaced, but users often drag too far or too close; and each hotspot in an image needs to be the same size, making it difficult for users to maintain consistent size when dragging and zooming.

[0035] In existing technologies, technicians often drag components to move them to the desired position or adjust their size based on experience. This purely manual approach often results in inconsistent results and low efficiency. Therefore, how to more efficiently and accurately manipulate components has become a pressing technical issue.

[0036] Based on the above-mentioned technical problems, the inventors have come up with the following technical ideas: The existing technology mainly addresses the problem that when building a page, the distance between the various components on the page cannot be determined, and when the size of a component is adjusted, it cannot be consistent with the size of the fixed component. If the distance between the component to be processed and the fixed component can be detected in real time during the movement of the component, and when it is less than a pre-agreed threshold, the adsorption situation is triggered; or when the size of the component to be processed is adjusted, the size of the fixed component can be detected in real time, and when it is also less than a pre-agreed threshold, the adsorption situation is triggered. If a mark can be provided to assist the user in moving the component or adjusting the size of the component when the above-mentioned situations occur, the above-mentioned technical problems can be solved.

[0037] The technical solution of the present disclosure is described in detail below through specific embodiments. It should be noted that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0038] It is worth noting that the application fields of the component processing method and device disclosed herein are not limited and may include: the field of computer technology. Among them, the execution subject of the present disclosure is an electronic device, specifically a mobile phone, tablet, computer, server and other devices.

[0039] It should be understood that component processing can be applied to the scenario of page construction, that is, when the page is constructed, the component processing method involved in the present disclosure can be used to perform relevant processing on the page construction.

[0040] FIG1 is a flow chart of a component processing method according to an embodiment of the present disclosure. As shown in FIG1 , the method may include the following steps:

[0041] Step 11: In response to a user's operation instruction on a component to be processed on a page, first attribute data of the component to be processed and second attribute data of a fixed component on the page are acquired in real time.

[0042] In this step, when the user is building a page, the components in the canvas are divided into two types: components being dragged (i.e., components to be processed) and components statically placed (i.e., fixed components). At this time, when the user operates the components to be processed through a mouse, touch screen, etc., the electronic device responds to the operation instruction and obtains the first attribute data of the components to be processed in real time.

[0043] The attribute data may refer to the location of the component, the length, width, center point, etc. of the component.

[0044] At this time, since the fixed component is placed statically, its second attribute data is generally fixed and can be obtained once or in real time.

[0045] Optionally, in this implementation, step 11 is implemented as follows: detecting the displacement speed of the component to be processed being dragged, and when the displacement speed is less than a preset speed threshold, obtaining the first attribute data of the component to be processed and the second attribute data of the fixed component in the page in real time.

[0046] This implementation can serve as a trigger condition to assist users in dragging components. That is, when the displacement speed of the user dragging the component to be processed is not high, it is considered to detect the first attribute data of the component to be processed in real time to determine in real time whether to perform the following execution steps.

[0047] In one possible implementation, the preset speed threshold may be 0.5. When the displacement speed is greater than or equal to 0.5, no data acquisition is performed. When the displacement speed is less than 0.5, the first attribute data of the component to be processed and the second attribute data of the fixed component in the page are acquired in real time.

[0048] Optionally, the first attribute data includes position information or size information of the component to be processed, and the second attribute data includes position information or size information of the fixed component.

[0049] As an example, the position information may be the coordinates of the four vertices of the component in the page, and the size information may be the length and width of the component in the page.

[0050] Step 12: When the first attribute data and the second attribute data meet the preset conditions, an auxiliary operation mark is displayed on the page.

[0051] In some embodiments, the component to be processed is adjusted based on the auxiliary operation identifier.

[0052] In this step, after obtaining the first attribute data of the component to be processed and the second attribute data of the fixed component, it is first determined whether the first attribute data and the second attribute data meet the preset conditions. If the preset conditions are met, the auxiliary operation logo is displayed on the page.

[0053] Optionally, the attribute data obtained above includes: component size information or position information, and the auxiliary operation identifier displayed on the page based on the size information is used to trigger the realization of the target distance between the component to be processed and the fixed component in any direction; the auxiliary operation identifier displayed on the page based on the position information is used to trigger the realization of the consistency of size between the component to be processed and the fixed component.

[0054] As an example, the preset condition may include that the distance between the component to be processed and the fixed component in any direction is less than a first preset threshold or the size difference between the component to be processed and the fixed component is less than a second preset threshold.

[0055] The component processing method provided by the disclosed embodiments responds to user operation instructions on a component to be processed on a page by acquiring first attribute data of the component to be processed and second attribute data of a fixed component on the page in real time. If the first and second attribute data meet preset conditions, an auxiliary operation indicator is displayed on the page to adjust the component to be processed based on the auxiliary operation indicator. This technical solution improves the efficiency and accuracy of user component processing by determining the acquired attribute data of the fixed component and the component to be processed and displaying an indicator on the page to assist the user.

[0056] Based on the embodiment shown in FIG1 , when the first attribute data is used to represent the size information of the component to be processed, the second attribute data is used to represent the size information of the fixed component, and the operation instruction is an instruction to adjust the size of the component to be processed, the above step 12 can be implemented by the embodiment shown in FIG2 , that is, FIG2 is a second flow chart of the component processing method provided by the embodiment of the present disclosure. As shown in FIG2 , step 12 may include the following steps:

[0057] As an example, Figure 3 is a schematic diagram of component size adjustment provided by an embodiment of the present disclosure. Figure 3 illustrates the embodiment shown in Figure 2.

[0058] Step 21: If the difference between the size information of the component to be processed and the size information of the fixed component is less than a first preset threshold, it is determined that the first attribute data and the second attribute data meet a preset condition.

[0059] Optionally, the size information may include: the length of the component, the height of the component, or the length and height of the component.

[0060] In this step, the difference between the size information can be understood as the difference in length, height, or aspect ratio between the component to be processed and the fixed component.

[0061] As shown in FIG3 , the dimensions of the fixed components in the page are: height 20, length 25; the dimensions of the components to be processed (obtained through real-time detection) are: height 22, length 23.

[0062] Based on the different size information, Figure 3 can be divided into three possible implementations:

[0063] In Example 1 (page A1), the size information includes: the length of the component; then, the difference between the size information of the component to be processed and the size information of the fixed component is the length difference of the component: 25-23=2.

[0064] In Example 2 (page B1), the size information includes: the height of the component; then, the difference between the size information of the component to be processed and the size information of the fixed component is the height difference of the component: 22-20=2.

[0065] In Example 3 (page C1), the size information includes: the length and height of the component; then, the difference between the size information of the component to be processed and the size information of the fixed component is the difference corresponding to the length and height of the component respectively: the length difference is 25-23=2 and the height difference is 22-20=2.

[0066] Optionally, the acquisition of specific data in the size information may be determined by the user adjusting the length, height, or both the length and width of the component to be processed while dragging the component to be processed.

[0067] Furthermore, in order to provide an appropriate opportunity to trigger the display of the auxiliary operation identifier, a first preset threshold can be set. When the difference between the size information of the component to be processed and the size information of the fixed component is less than the first preset threshold, it means that the first attribute data and the second attribute data meet the preset conditions, that is, the following operations related to the auxiliary operation identifier can be triggered.

[0068] Continuing with the above example (taking the first preset threshold value of 3 as an example for explanation):

[0069] In Example 1 (page A1), the size information includes: the length of the component; if the difference 2 in the length of the component is less than 3, it means that the first attribute data and the second attribute data meet the preset conditions.

[0070] In Example 2 (page B1), the size information includes: the height of the component; if the height difference 2 of the component is less than 3, it means that the first attribute data and the second attribute data meet the preset conditions.

[0071] In Example 3 (page C1), the size information includes: the length and height of the component; if the length difference 2 and the height difference 2 of the component are both less than 3, it means that the first attribute data and the second attribute data meet the preset conditions.

[0072] It should be understood that in some scenarios, the aspect ratio can also be set based on the length and height of the component. The implementation principle is similar and will not be repeated here.

[0073] Furthermore, after the first attribute data and the second attribute data meet a preset condition, the auxiliary operation identifier is determined based on the size information of the fixed component.

[0074] The auxiliary operation identifier is a marker constructed based on the fixed anchor point in the component to be processed, and has the same size information as the fixed component. The fixed anchor point is a point that does not change position when the size of the component to be processed is adjusted. For example, when adjusting the length and width of a component, the fixed anchor point is the fixed point on the component that is opposite to the adjustment direction. For another example, when adjusting the length of a component, the fixed anchor point is any fixed point on the component that is opposite to the adjustment direction and is on the width side.

[0075] That is, take the fixed anchor point O and the auxiliary operation mark L (black dotted line in FIG3 ) as an example for explanation:

[0076] Example 1: On page A1, when it is detected that the length difference 2 between the component to be processed and the fixed component is less than 3, the fixed anchor point O in the component to be processed is used as the endpoint of the line, and the length 25 of the fixed component is used as the length of the line, and an auxiliary operation mark L is attached to the length of the component to be processed.

[0077] Example 2: On page B1, when it is detected that the height difference 2 between the component to be processed and the fixed component is less than 3, the fixed anchor point O in the component to be processed is used as the endpoint of the line, and the height 20 of the fixed component is used as the length of the line, and an auxiliary operation mark L is attached to the height of the component to be processed.

[0078] Example 3: In page C1, when it is detected that the length difference 2 and the height difference 2 between the component to be processed and the fixed component are both less than 3, the fixed anchor point O in the component to be processed is used as the endpoint of the line, the height 20 of the fixed component is used as the length of the line, and it is attached to the height of the component to be processed, and the length 25 of the fixed component is used as the length of the line, and it is attached to the length of the component to be processed as an auxiliary operation mark L.

[0079] Furthermore, when the user operates the component to be processed based on the auxiliary operation identifier, the page that appears may be as shown in FIG3 (page A1, page B2, page C2), so as to assist the user in building the page.

[0080] Optionally, in the drawings involved in the embodiments of the present disclosure, auxiliary operation identifiers are illustrated using lines and box diagrams as examples, and other types of identifiers may also be included in actual application scenarios.

[0081] It should be understood that in specific implementation scenarios, the position and size of a component can be fully described by four properties: Width, Height, Left, and Top. It should be noted that the eight anchor points of a component are fixed to the corresponding point during dragging, so the effects achieved will vary.

[0082] That is: Upper left anchor point: You can change the component's Width, Height, Left, and Top. Upper center anchor point: You can change the component's Height and Top. Upper right anchor point: You can change the component's Width, Height, and Top. Middle left anchor point: You can change the component's Width and Left. Middle right anchor point: You can change the component's Width. Lower left anchor point: You can change the component's Width, Height, and Left. Lower center anchor point: You can change the component's Height. Lower right anchor point: You can change the component's Width and Height.

[0083] Assuming that the coordinates of the endpoint pressed by the mouse are (x1, y1), and the coordinates of any time slice taken when the mouse moves are (x2, y2), the specific implementation logic of anchor point dragging is as follows: 1. Register the drag engine for each anchor point, and record the click coordinates (x1, y1) when the mouse is clicked; 2. When the mouse moves, get the coordinates of the mouse movement (x2, y2); 3. The absolute value of the subtraction between the two coordinates is used to obtain the drag distance; 4. Reset the component's Width, Height, Left, and Top according to the above rules and the drag distance.

[0084] In addition, if the difference between the size information of the component to be processed and the size information of the fixed component is greater than or equal to a first preset threshold, it is determined that the first attribute data and the second attribute data do not meet the preset condition.

[0085] That is, the difference between the size information of the component to be processed and the size information of the fixed component is large, indicating that the first attribute data and the second attribute data do not meet the preset conditions, that is, the auxiliary operation identifier is not determined and displayed.

[0086] The component processing method provided by the disclosed embodiments determines that the first attribute data and the second attribute data meet a preset condition if the difference between the size information of the component to be processed and the size information of the fixed component is less than a first preset threshold. This technical solution compares the difference between the size information of the component to be processed and the size information of the fixed component with a predetermined threshold to determine whether to perform an auxiliary operation identification on the component to be processed.

[0087] Based on the embodiment shown in FIG1 , when the first attribute data is used to represent the position information of the component to be processed, and the second attribute data is used to represent the position information of the fixed component, the operation instruction is an instruction to adjust the position of the component to be processed. The above step 12 can be implemented by the embodiment shown in FIG4 , that is, FIG4 is a flow diagram of the component processing method provided by the embodiment of the present disclosure. As shown in FIG4 , step 12 may include the following steps:

[0088] The fixing assembly includes a first sub-fixing assembly and a second sub-fixing assembly.

[0089] Step 41 : Determine whether the first attribute data and the second attribute data meet a preset condition based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component.

[0090] In this step, the user is assisted in adjusting the position of the component to be processed based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component.

[0091] Optionally, this step can be implemented as follows: Step 1, determine the positional relationship between the component to be processed, the first sub-fixed component and the second sub-fixed component based on the position information of the component to be processed, the position information of the first sub-fixed component and the position information of the second sub-fixed component; if the operation instruction is an instruction to adjust the position of the component to be processed, then the positional relationship between the component to be processed, the first sub-fixed component and the second sub-fixed component can be determined first based on the position information of each component to be processed, the position information of the first sub-fixed component and the position information of the second sub-fixed component.

[0092] Optionally, the positional relationship may be determined based on any direction. For example, a coordinate system is established based on the page, with the origin of the coordinate system being the center of the page. For example, the X-axis and Y-axis are:

[0093] Taking the X-axis as an example, the positional relationship between the component to be processed, the first sub-fixed component, and the second sub-fixed component on the X-axis can be determined by arranging the coordinate values ​​of each component on the Y-axis from large to small. The component corresponding to the coordinate value in the middle is located in the middle of the components corresponding to the other two coordinate values.

[0094] It should be understood that the Y-axis is taken as an example, or the implementation principles of other possible directions are similar, and no examples are given here. The following description will be made using the X-axis as an example.

[0095] In a possible implementation, the positional relationship may be: the component to be processed may be located between the first sub-fixed component and the second sub-fixed component, or the first sub-fixed component may be located between the component to be processed and the second sub-fixed component.

[0096] Step 2: If in any direction, the positional relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, and the distance difference between the component to be processed and the first sub-fixed component and the second sub-fixed component is less than the second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset conditions; in this implementation, the component to be processed is located between the first sub-fixed component and the second sub-fixed component.

[0097] To appropriately trigger the display of the auxiliary operation indicator, when the component to be processed is located between the first and second sub-mounting components, the distance difference between the component to be processed and each of the first and second sub-mounting components is determined. These two distance differences are then compared with a second preset threshold to determine whether the first and second attribute data meet a preset condition, thereby triggering the following operation associated with the auxiliary operation indicator.

[0098] Optionally, FIG5 is a schematic diagram of component movement provided in an embodiment of the present disclosure. As shown in FIG5:

[0099] Taking the X-axis direction as an example, it is determined based on the Y-axis coordinate of the component to be processed and the Y-axis coordinates corresponding to the first sub-fixed component and the second sub-fixed component respectively. The distance between the component to be processed and the first sub-fixed component is 28, and the distance between the component to be processed and the second sub-fixed component is 24. The difference between the two distances is 28-24=4.

[0100] In this embodiment, taking 5 as an example, which is less than the second preset threshold, if 4 is less than 5, it is determined that the first attribute data and the second attribute data meet the preset condition.

[0101] Furthermore, after the first attribute data and the second attribute data meet a preset condition, a first area having a target distance from both the first sub-fixing component and the second sub-fixing component is determined, and an auxiliary operation mark is displayed on the first area.

[0102] Here, the target distance may be the distance between the moved component to be processed and the first sub-fixed component and the second sub-fixed component, respectively.

[0103] 5 , the target distance may be (28+24) / 2=26, that is, the distance between the constructed first area and the first sub-fixed component and the second sub-fixed component is 26, as shown on the right page of FIG5 .

[0104] In addition, the first area may be configured with other limitations, such as lines defining the boundaries of the first area to assist the user in aligning the X-axis coordinates of the component to be processed with the first sub-fixed component, or to assist the user in aligning the X-axis coordinates of the component to be processed with the second sub-fixed component.

[0105] In addition, if in any direction, the positional relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, and the distance difference between the component to be processed and the first sub-fixed component and the second sub-fixed component is not less than the second preset threshold, it is determined that the first attribute data and the second attribute data do not meet the preset conditions.

[0106] Among them, the thick dotted line in Figure 5 is an auxiliary operation mark. For ease of understanding, the components to be processed are not displayed (they are still displayed in actual operation).

[0107] In this implementation, the conditions are similar to those in step 42, but if the distance difference is greater than or equal to the second preset threshold, it means that the first attribute data and the second attribute data do not meet the preset conditions, that is, the auxiliary operation identifier is not constructed and displayed.

[0108] Step 3. If in any direction, the positional relationship is that the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the distance difference between the first sub-fixed component and the second sub-fixed component and the distance between the first sub-fixed component and the component to be processed is less than a second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset conditions.

[0109] It should be understood that steps 2 and 3 are different scenarios in which the components to be processed are located. In one possible implementation, only one of them is executed.

[0110] In this implementation, the first sub-fixed component is located between the component to be processed and the second sub-fixed component.

[0111] Since the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the distance between the first sub-fixed component and the second sub-fixed component is fixed, the distance difference between the distance between the first sub-fixed component and the component to be processed and the distance between the first sub-fixed component and the second sub-fixed component is first determined, and then whether the first attribute data and the second attribute data meet the preset conditions is judged based on whether the distance difference is less than the second preset threshold.

[0112] In one possible implementation, Figure 6 is a second schematic diagram of component movement provided by an embodiment of the present disclosure. As shown in Figure 6, taking the X-axis direction as an example, based on the Y-axis coordinate of the component to be processed and the Y-axis coordinates of the first and second fixed sub-assemblies, the distance between the first and second fixed sub-assemblies is 26, and the distance between the first and second fixed sub-assemblies is 24. Therefore, the distance difference is 26-24=2.

[0113] In this embodiment, taking the second preset threshold value of 4 as an example, if 2 is less than 4, it is determined that the first attribute data and the second attribute data meet the preset condition.

[0114] Furthermore, an auxiliary operation mark is displayed on the second area, the second area is an area on the page far away from the second sub-fixed component, and the distance between the second area and the first sub-fixed component is the target distance.

[0115] Here, the target distance may be a distance at which the distance between the first sub-fixing assembly and the second sub-fixing assembly is consistent.

[0116] 6 , the target distance may be 26 between the first sub-fixed component and the second sub-fixed component, that is, the distance between the constructed second area and the first sub-fixed component is 26, as shown on the right page of FIG6 .

[0117] In addition, the setting of the second area can also add some other limitations, for example, in order to assist the user to align the coordinates of the component to be processed with the first sub-fixed component on the X-axis, or to assist the user to align the coordinates of the component to be processed with the second sub-fixed component on the X-axis, the added line to define the boundary of the second area.

[0118] 6 is an auxiliary operation mark. To make the figure clear and understandable, the components to be processed are not displayed (they are still displayed in actual operation).

[0119] In addition, if in any direction, the positional relationship is that the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the distance difference between the first sub-fixed component and the second sub-fixed component and the distance between the first sub-fixed component and the component to be processed is not less than the second preset threshold, then it is determined that the first attribute data and the second attribute data do not meet the preset conditions.

[0120] In addition, optionally, in a scenario where the component is moving, the size information of the component to be processed is consistent with the size information of the fixed component.

[0121] This limitation is one of the above scenarios, which is convenient for page construction. For example, the spacing between each video in the video list (the corresponding components of the videos have the same size) needs to be equal.

[0122] The component processing method provided by the disclosed embodiments determines whether first attribute data and second attribute data meet preset conditions based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component. After determining the positional relationship between the fixed component and the component to be processed, if the positional relationship indicates that the component to be processed is located between the two sub-fixed components, the method detects in real time whether the components have an identical margin within a certain threshold, thereby determining whether to perform an auxiliary operation identification on the component to be processed.

[0123] Based on the above embodiment, Figure 7 is a fourth flow chart of the component processing method provided by the embodiment of the present disclosure. Figure 8 is a schematic diagram of the canvas area provided by the embodiment of the disclosure. In conjunction with Figures 7 and 8, the process involved in component movement is described.

[0124] FIG7 includes: simulation area and canvas area.

[0125] Step 81: Drag the component to be processed.

[0126] Step 82: Get the Rect (ie, area) of the parent component, the sibling component (ie, the sibling component may be a fixed component), and the component to be processed.

[0127] Step 83: Generate four boundary Rects based on the parent component.

[0128] (For the following execution, select 1 (vertical adjustment position) and execute it to completion or 2 (horizontal adjustment position) and execute it to completion):

[0129] Step 84 (1), filter out the sibling components that intersect vertically or horizontally; or step 84 (2), filter out the sibling components that are not within the view of the component to be processed.

[0130] In step 85 (1), the boundary Top, Bottom Rect, the sibling component Rect, and the component to be processed Rect are sorted in Top order; or in step 85 (2), the boundary Left, Right Rect, the sibling component Rect, and the component to be processed Rect are sorted in Left order.

[0131] Step 86 (1), obtain all vertical margins; or step 86 (2), obtain adjacent horizontal margins.

[0132] Step 87 (1), remove the margin less than or equal to 0; or step 87 (2), remove the margin less than or equal to 0.

[0133] Step 88 (1), calculate whether the margins of the components to be processed have the same margins; or step 88 (2), calculate whether the margins of the components to be processed have the same margins.

[0134] Step 89 (1), if it exists, collect information of the same margin for rendering; or step 89 (2), if it exists, collect information of the same margin for rendering.

[0135] In some embodiments, the reference margin of a component to be processed is composed of: a parent component, sibling components that do not intersect with the component to be processed, and a reference line.

[0136] Upper side distance:

[0137] Top: Bottom of the adjacent upper component; Left: min(left component to be processed, left component to be adjacent upper component); Width: max(right component to be processed, right component to be adjacent upper component)-min(left component to be processed, left component to be adjacent upper component); Height: upper distance.

[0138] Bottom distance:

[0139] Top: Bottom of the component to be processed; Left: min(Left of the component to be processed, Left of the adjacent upper component); Width: max(Right of the component to be processed, Right of the adjacent upper component)-min(Left of the component to be processed, Left of the adjacent upper component); Height: bottom distance.

[0140] Left distance:

[0141] Top: min (Top of the component to be processed, Top of the adjacent upper component); Left: Right of the adjacent right component; Width: Left distance; Height: max (Bottom of the component to be processed, Bottom of the adjacent upper component) - min (Top of the component to be processed, Top of the adjacent upper component).

[0142] Right distance:

[0143] Top: min (Top of the component to be processed, Top of the adjacent upper component); Left: Right of the component to be processed; Width: Right distance; Height: max (Bottom of the component to be processed, Bottom of the adjacent upper component) - min (Top of the component to be processed, Top of the adjacent upper component).

[0144] The implementation principles and technical effects of the embodiments shown in FIG7 and FIG8 are similar to those of the above-mentioned embodiments and will not be described in detail here.

[0145] The component processing method and device provided by the disclosed embodiments, in response to a user's operation instructions on a component to be processed on a page, obtains first attribute data of the component to be processed and second attribute data of a fixed component on the page in real time. If the first attribute data and the second attribute data meet preset conditions, an auxiliary operation indicator is displayed on the page to adjust the component to be processed based on the auxiliary operation indicator. In this technical solution, by determining the obtained attribute data of the fixed component and the component to be processed, an indicator that can assist the user's operation is displayed on the page, thereby improving the user's efficiency and accuracy in processing components.

[0146] The following are embodiments of the apparatus disclosed herein, which can be used to implement the method embodiments disclosed herein. For details not disclosed in the apparatus embodiments disclosed herein, please refer to the method embodiments disclosed herein.

[0147] Figure 9 is a schematic diagram of the structure of a component processing device provided by an embodiment of the present disclosure. As shown in Figure 9, the device includes: an acquisition module 91 for acquiring, in real time, first attribute data of the component to be processed and second attribute data of the fixed component on the page in response to a user's operation instruction on the component to be processed on the page; and a display module 92 for displaying an auxiliary operation indicator on the page when the first attribute data and the second attribute data meet preset conditions, thereby adjusting the component to be processed based on the auxiliary operation indicator.

[0148] According to one or more embodiments of the present disclosure, the first attribute data includes position information or size information of the component to be processed, and the second attribute data includes position information or size information of the fixed component.

[0149] According to one or more embodiments of the present disclosure, the first attribute data includes size information of the component to be processed, the second attribute data includes size information of the fixed component, and the operation instruction is an instruction to adjust the size of the component to be processed.

[0150] Correspondingly, when the first attribute data and the second attribute data meet the preset conditions, before the auxiliary operation identifier is displayed on the page, the determination module is used to: if the difference between the size information of the component to be processed and the size information of the fixed component is less than the first preset threshold, then determine that the first attribute data and the second attribute data meet the preset conditions.

[0151] According to one or more embodiments of the present disclosure, before the auxiliary operation identifier is displayed on the page, a determination module is used to: determine the auxiliary operation identifier based on the size information of the fixed component, the auxiliary operation identifier is a mark constructed based on the fixed anchor point in the component to be processed and has the same size information as the fixed component, and the fixed anchor point is a vertex that does not change its position when the size of the component to be processed is adjusted.

[0152] According to one or more embodiments of the present disclosure, the first attribute data includes position information of the component to be processed, the second attribute data includes position information of the fixed component, the operation instruction is an instruction to adjust the position of the component to be processed, and the fixed component includes: a first sub-fixed component and a second sub-fixed component.

[0153] Correspondingly, when the first attribute data and the second attribute data meet the preset conditions, before the auxiliary operation identifier is displayed on the page, the determination module is used to: determine whether the first attribute data and the second attribute data meet the preset conditions based on the position information of the component to be processed, the position information of the first sub-fixed component and the position information of the second sub-fixed component.

[0154] According to one or more embodiments of the present disclosure, a determination module determines whether the first attribute data and the second attribute data meet a preset condition based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component. Specifically, the determination module is used to determine the positional relationship between the component to be processed, the first sub-fixed component, and the second sub-fixed component based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component. If, in any direction, the positional relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, and the distance difference between the component to be processed and the first sub-fixed component and the second sub-fixed component is less than a second preset threshold, then the first attribute data and the second attribute data meet the preset condition; or if, in any direction, the positional relationship is that the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the distance difference between the first sub-fixed component and the second sub-fixed component and the distance between the first sub-fixed component and the component to be processed is less than a second preset threshold, then the determination module determines that the first attribute data and the second attribute data meet the preset condition.

[0155] According to one or more embodiments of the present disclosure, the target distance is equal to the first distance and the second distance respectively, the first distance is the distance between the component to be processed and the first sub-fixed component, and the second distance is the distance between the component to be processed and the second sub-fixed component.

[0156] Accordingly, before the auxiliary operation mark is displayed on the page, the determination module is used to: determine a first area that is at a target distance from both the first sub-fixing component and the second sub-fixing component, and display the auxiliary operation mark on the first area.

[0157] According to one or more embodiments of the present disclosure, the target distance is the distance between the first sub-fixture assembly and the second sub-fixture assembly.

[0158] Correspondingly, before the auxiliary operation logo is displayed on the page, the determination module is used to: display the auxiliary operation logo on the second area, the second area is the area on the page away from the second sub-fixed component, and the distance between the second area and the first sub-fixed component is the target distance.

[0159] According to one or more embodiments of the present disclosure, the size information of the component to be processed is the same as the size information of the fixed component.

[0160] The component processing device provided in the embodiments of the present disclosure may be used to execute the component processing method in any of the above embodiments. The implementation principles and technical effects thereof are similar and will not be described in detail here.

[0161] It should be noted that it should be understood that the division of the various modules of the above devices is merely a division of logical functions. In actual implementation, they can be fully or partially integrated into one physical entity, or they can be physically separated. Moreover, these modules can all be implemented in the form of software called by processing elements; they can also all be implemented in the form of hardware; some modules can also be implemented in the form of software called by processing elements, and some modules can be implemented in the form of hardware. In addition, these modules can be fully or partially integrated together or implemented independently. The processing element described here can be an integrated circuit with signal processing capabilities. During implementation, each step of the above method or each of the above modules can be completed by hardware integrated logic circuits in the processor element or instructions in the form of software.

[0162] FIG10 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure. FIG10 illustrates a schematic diagram of the structure of an electronic device suitable for implementing an embodiment of the present disclosure, wherein the electronic device may be a terminal device or a server. The terminal device may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, personal digital assistants (PDAs), tablet computers (Portable Android Devices, PADs), portable multimedia players (PMPs), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers.

[0163] The electronic device shown in FIG10 is merely an example and should not limit the functions and scope of use of the embodiments of the present disclosure.

[0164] As shown in FIG10 , the electronic device may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 101, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 102 or a program loaded from a storage device 108 into a random access memory (RAM) 103. Various programs and data required for the operation of the electronic device are also stored in the RAM 103. The processing device 101, the ROM 102, and the RAM 103 are connected to each other via a bus 104. An input / output (I / O) interface 105 is also connected to the bus 104.

[0165] Typically, the following devices may be connected to the I / O interface 105: an input device 106 including, for example, a touch screen, a touchpad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 107 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 108 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 109. The communication device 109 may allow the electronic device to communicate with other devices wirelessly or by wire to exchange data. Although FIG10 illustrates an electronic device having various devices, it should be understood that it is not required to implement or have all of the devices shown. More or fewer devices may be implemented or have alternatively.

[0166] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network via the communication device 109, or installed from the storage device 108, or installed from the ROM 102. When the computer program is executed by the processing device 101, the above-mentioned functions defined in the method of the embodiment of the present disclosure are performed.

[0167] It should be noted that the computer-readable medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or component, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, device, or component. In the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium may be transmitted using any suitable medium, including but not limited to wires, optical cables, RF (radio frequency), etc., or any suitable combination thereof.

[0168] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0169] The computer-readable medium carries one or more programs. When the one or more programs are executed by the electronic device, the electronic device executes the method shown in the above embodiment.

[0170] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet Service Provider).

[0171] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of the boxes in the block diagram and / or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0172] The units involved in the embodiments described in this disclosure may be implemented in software or hardware. In some cases, the name of a unit does not limit the unit itself. For example, the first acquisition unit may also be described as a "unit for acquiring at least two Internet Protocol addresses."

[0173] The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, and without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chip (SOCs), complex programmable logic devices (CPLDs), and the like.

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

[0175] The electronic device provided in the embodiments of the present disclosure may be used to execute the component processing method provided in any of the above method embodiments, and its implementation principles and technical effects are similar and will not be described in detail here.

[0176] An embodiment of the present disclosure provides a computer-readable storage medium, wherein computer instructions are stored in the computer-readable storage medium. When the computer instructions are executed on a computer, the computer is enabled to execute the above-mentioned component processing method.

[0177] The computer-readable storage medium mentioned above may be implemented by any type of volatile or non-volatile memory device, or a combination thereof, such as static random access memory, electrically erasable programmable read-only memory, erasable programmable read-only memory, programmable read-only memory, read-only memory, magnetic storage, flash memory, magnetic disk, or optical disk. The computer-readable storage medium may be any available medium that can be accessed by a general-purpose or special-purpose computer.

[0178] Optionally, a readable storage medium is coupled to a processor so that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be an integral part of the processor. The processor and the readable storage medium can be located in an application specific integrated circuit (ASIC). Of course, the processor and the readable storage medium can also exist in the device as discrete components.

[0179] An embodiment of the present disclosure also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. At least one processor can read the computer program from the computer-readable storage medium, and the at least one processor can implement the above-mentioned component processing method when executing the computer program.

[0180] also:

[0181] In a first aspect, a component processing method is provided, comprising: in response to a user's operation instruction on a component to be processed on a page, obtaining in real time first attribute data of the component to be processed and second attribute data of a fixed component on the page; when the first attribute data and the second attribute data meet preset conditions, displaying an auxiliary operation identifier on the page to adjust the component to be processed based on the auxiliary operation identifier.

[0182] According to one or more embodiments of the present disclosure, the first attribute data includes position information or size information of the component to be processed, and the second attribute data includes position information or size information of the fixed component.

[0183] According to one or more embodiments of the present disclosure, the first attribute data includes size information of the component to be processed, the second attribute data includes size information of the fixed component, and the operation instruction is an instruction to adjust the size of the component to be processed.

[0184] Correspondingly, when the first attribute data and the second attribute data meet the preset conditions, before displaying the auxiliary operation identifier on the page, the method also includes: if the difference between the size information of the component to be processed and the size information of the fixed component is less than a first preset threshold, then determining that the first attribute data and the second attribute data meet the preset conditions.

[0185] According to one or more embodiments of the present disclosure, before displaying the auxiliary operation identifier on the page, the method further includes: determining the auxiliary operation identifier based on the size information of the fixed component, the auxiliary operation identifier being a mark constructed based on a fixed anchor point in the component to be processed and having the same size information as the fixed component, and the fixed anchor point being a vertex that does not change position when the size of the component to be processed is adjusted.

[0186] According to one or more embodiments of the present disclosure, the first attribute data includes position information of the component to be processed, the second attribute data includes position information of the fixed component, the operation instruction is an instruction to adjust the position of the component to be processed, and the fixed component includes: a first sub-fixed component and a second sub-fixed component.

[0187] Correspondingly, when the first attribute data and the second attribute data meet the preset conditions, before displaying the auxiliary operation identifier on the page, the method also includes: determining whether the first attribute data and the second attribute data meet the preset conditions based on the position information of the component to be processed, the position information of the first sub-fixed component and the position information of the second sub-fixed component.

[0188] According to one or more embodiments of the present disclosure, determining whether the first attribute data and the second attribute data meet the preset condition based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component includes: determining a positional relationship between the component to be processed, the first sub-fixed component, and the second sub-fixed component based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component;

[0189] If in any direction, the positional relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, and the difference in distance between the component to be processed and the first sub-fixed component and the second sub-fixed component is less than a second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset condition; or if in any direction, the positional relationship is that the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the difference in distance between the first sub-fixed component and the second sub-fixed component and the distance between the first sub-fixed component and the component to be processed is less than a second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset condition.

[0190] According to one or more embodiments of the present disclosure, the target distance is equal to a first distance and a second distance, respectively, wherein the first distance is the distance between the component to be processed and the first sub-fixed component, and the second distance is the distance between the component to be processed and the second sub-fixed component.

[0191] Correspondingly, before displaying the auxiliary operation logo on the page, the method further includes: determining a first area that is at the target distance from both the first sub-fixed component and the second sub-fixed component, and displaying the auxiliary operation logo on the first area.

[0192] According to one or more embodiments of the present disclosure, the target distance is the distance between the first sub-fixing assembly and the second sub-fixing assembly.

[0193] Correspondingly, before displaying the auxiliary operation identifier on the page, the method also includes: displaying the auxiliary operation identifier on a second area, the second area being an area on the page away from the second sub-fixed component, and the distance between the second area and the first sub-fixed component being the target distance.

[0194] According to one or more embodiments of the present disclosure, the size information of the component to be processed is the same as the size information of the fixed component.

[0195] According to one or more embodiments of the present disclosure, the operation includes a drag operation, and the real-time acquisition of the first attribute data of the component to be processed and the second attribute data of the fixed component in the page includes: detecting the displacement speed of the component to be processed when being dragged; when the displacement speed is less than a preset speed threshold, acquiring the first attribute data of the component to be processed and the second attribute data of the fixed component in real time.

[0196] In the second aspect, a component processing device is provided, which includes: an acquisition module for acquiring first attribute data of the component to be processed and second attribute data of the fixed component in the page in real time in response to the user's operation instructions on the component to be processed in the page; a display module for displaying an auxiliary operation identifier on the page when the first attribute data and the second attribute data meet preset conditions, so as to adjust the component to be processed based on the auxiliary operation identifier.

[0197] According to one or more embodiments of the present disclosure, the first attribute data includes position information or size information of the component to be processed, and the second attribute data includes position information or size information of the fixed component.

[0198] According to one or more embodiments of the present disclosure, the first attribute data includes size information of the component to be processed, the second attribute data includes size information of the fixed component, and the operation instruction is an instruction to adjust the size of the component to be processed.

[0199] Correspondingly, when the first attribute data and the second attribute data meet the preset conditions, before the auxiliary operation identifier is displayed on the page, the processing module is used to: if the difference between the size information of the component to be processed and the size information of the fixed component is less than a first preset threshold, then determine that the first attribute data and the second attribute data meet the preset conditions.

[0200] According to one or more embodiments of the present disclosure, before displaying the auxiliary operation identifier on the page, the method further includes: determining the auxiliary operation identifier based on the size information of the fixed component, the auxiliary operation identifier being a mark constructed based on a fixed anchor point in the component to be processed and having the same size information as the fixed component, and the fixed anchor point being a vertex that does not change position when the size of the component to be processed is adjusted.

[0201] According to one or more embodiments of the present disclosure, the first attribute data includes position information of the component to be processed, the second attribute data includes position information of the fixed component, the operation instruction is an instruction to adjust the position of the component to be processed, and the fixed component includes: a first sub-fixed component and a second sub-fixed component.

[0202] Correspondingly, when the first attribute data and the second attribute data meet the preset conditions, before the auxiliary operation identifier is displayed on the page, the processing module is used to: determine whether the first attribute data and the second attribute data meet the preset conditions based on the position information of the component to be processed, the position information of the first sub-fixed component and the position information of the second sub-fixed component.

[0203] According to one or more embodiments of the present disclosure, the processing module determines whether the first attribute data and the second attribute data meet the preset condition based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component. Specifically, the processing module is used to determine the positional relationship between the component to be processed, the first sub-fixed component, and the second sub-fixed component based on the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component. If, in any direction, the positional relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, and the difference in distance between the component to be processed and the first sub-fixed component and the second sub-fixed component is less than a second preset threshold, then the first attribute data and the second attribute data meet the preset condition; or if, in any direction, the positional relationship is that the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the difference in distance between the first sub-fixed component and the second sub-fixed component and the distance between the first sub-fixed component and the component to be processed is less than a second preset threshold, then the first attribute data and the second attribute data meet the preset condition.

[0204] According to one or more embodiments of the present disclosure, the target distance is equal to a first distance and a second distance, respectively, wherein the first distance is the distance between the component to be processed and the first sub-fixed component, and the second distance is the distance between the component to be processed and the second sub-fixed component.

[0205] Accordingly, before the auxiliary operation logo is displayed on the page, the processing module is used to: determine a first area that is at the target distance from both the first sub-fixed component and the second sub-fixed component, and display the auxiliary operation logo on the first area.

[0206] According to one or more embodiments of the present disclosure, the target distance is the distance between the first sub-fixing assembly and the second sub-fixing assembly.

[0207] Correspondingly, before the auxiliary operation logo is displayed on the page, the processing module is used to: display the auxiliary operation logo on a second area, the second area is an area of ​​the page away from the second sub-fixed component, and the distance between the second area and the first sub-fixed component is the target distance.

[0208] According to one or more embodiments of the present disclosure, the size information of the component to be processed is the same as the size information of the fixed component.

[0209] According to one or more embodiments of the present disclosure, the operation includes a dragging operation, and the real-time acquisition module is specifically used to: detect the displacement speed of the component to be processed being dragged; when the displacement speed is less than a preset speed threshold, acquire the first attribute data of the component to be processed and the second attribute data of the fixed component in real time.

[0210] In a third aspect, an embodiment of the present disclosure provides an electronic device, comprising: a processor, and a memory communicatively connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement the component processing method as described in the first aspect above.

[0211] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement the component processing method described in the first aspect above.

[0212] In a fifth aspect, an embodiment of the present disclosure provides a computer program product, including a computer program, which, when executed by a processor, implements the component processing method described in the first aspect above.

[0213] The above description is merely a preferred embodiment of the present disclosure and an illustration of the technical principles employed. Those skilled in the art should understand that the scope of disclosure involved in the present disclosure is not limited to the technical solutions formed by the specific combination of the above-mentioned technical features, but also includes other technical solutions formed by any combination of the above-mentioned technical features or their equivalents without departing from the above-mentioned disclosed concepts. For example, a technical solution formed by replacing the above-mentioned features with (but not limited to) technical features with similar functions disclosed in this disclosure.

[0214] In addition, although each operation is described in a specific order, this should not be understood as requiring these operations to be performed in the specific order shown or in a sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Similarly, although some specific implementation details have been included in the above discussion, these should not be interpreted as limiting the scope of the present disclosure. Some features described in the context of a separate embodiment can also be implemented in a single embodiment in combination. On the contrary, the various features described in the context of a single embodiment can also be implemented in multiple embodiments individually or in any suitable sub-combination mode.

[0215] Although the subject matter has been described in language specific to structural features and / or methodological logical acts, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are merely example forms of implementing the claims.

Claims

1. A component processing method, include: In response to a user's operation instruction on a component to be processed in a page, first attribute data of the component to be processed and second attribute data of a fixed component in the page are acquired in real time; When the first attribute data and the second attribute data meet a preset condition, an auxiliary operation identifier is displayed on the page to adjust the component to be processed based on the auxiliary operation identifier.

2. The method according to claim 1, in, The first attribute data includes position information or size information of the component to be processed, and the second attribute data includes position information or size information of the fixed component.

3. The method according to claim 2, in, The first attribute data includes size information of the component to be processed, the second attribute data includes size information of the fixed component, and the operation instruction is an instruction for adjusting the size of the component to be processed; Accordingly, when the first attribute data and the second attribute data meet the preset condition, before displaying the auxiliary operation mark on the page, the method further includes: If the difference between the size information of the component to be processed and the size information of the fixed component is less than a first preset threshold, it is determined that the first attribute data and the second attribute data meet the preset condition.

4. The method according to claim 3, in, Before displaying the auxiliary operation mark on the page, the method further includes: Based on the size information of the fixed component, the auxiliary operation identifier is determined, where the auxiliary operation identifier is a mark constructed based on the fixed anchor point in the component to be processed and has the same size information as the fixed component.

5. The method according to claim 2, in, The first attribute data includes the position information of the component to be processed, the second attribute data includes the position information of the fixed component, the operation instruction is an instruction to adjust the position of the component to be processed, and the fixed component includes: a first sub-fixed component and a second sub-fixed component; Accordingly, when the first attribute data and the second attribute data meet the preset condition, before displaying the auxiliary operation mark on the page, the method further includes: Determine whether the first attribute data and the second attribute data satisfy the requirements according to the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component. The preset conditions.

6. The method according to claim 5, in, The determining, according to the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component, whether the first attribute data and the second attribute data meet the preset condition comprises: Determine the positional relationship between the component to be processed, the first sub-fixed component, and the second sub-fixed component according to the position information of the component to be processed, the position information of the first sub-fixed component, and the position information of the second sub-fixed component; If in any direction, the positional relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, and the difference in distance between the component to be processed and the first sub-fixed component and the second sub-fixed component is less than a second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset condition; or if in any direction, the positional relationship is that the first sub-fixed component is located between the component to be processed and the second sub-fixed component, and the difference in distance between the first sub-fixed component and the second sub-fixed component and the distance between the first sub-fixed component and the component to be processed is less than a second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset condition.

7. The method according to claim 6, in, The target distance is respectively equal to a first distance and a second distance, wherein the first distance is the distance between the component to be processed and the first sub-fixed component, and the second distance is the distance between the component to be processed and the second sub-fixed component; Accordingly, before displaying the auxiliary operation mark on the page, the method further includes: A first area that is at the target distance from both the first sub-fixing component and the second sub-fixing component is determined, and the auxiliary operation mark is displayed on the first area.

8. The method according to claim 6, in, The target distance is the distance between the first sub-fixed component and the second sub-fixed component; Accordingly, before displaying the auxiliary operation mark on the page, the method further includes: The auxiliary operation mark is displayed on a second area, where the second area is an area of ​​the page far away from the second sub-fixed component, and the distance between the second area and the first sub-fixed component is the target distance.

9. The method according to any one of claims 5 to 8, in, The size information of the component to be processed is the same as the size information of the fixed component.

10. The method according to claim 1, in, The operation includes a drag operation, and the real-time acquisition of the first attribute data of the component to be processed and the second attribute data of the fixed component in the page includes: Detecting the displacement speed of the component to be processed being dragged; When the displacement speed is less than a preset speed threshold, the first attribute data of the component to be processed and the second attribute data of the fixed component are acquired in real time.

11. A component processing device, the device include: An acquisition module, configured to acquire, in real time, first attribute data of the component to be processed and second attribute data of the fixed component in the page in response to a user's operation instruction on the component to be processed in the page; The display module is used to display an auxiliary operation identifier on the page when the first attribute data and the second attribute data meet a preset condition, so as to adjust the component to be processed based on the auxiliary operation identifier.

12. An electronic device, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the method according to any one of claims 1 to 10.

13. A computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, wherein the computer-executable instructions are used to implement the method according to any one of claims 1 to 10 when executed by a processor.

14. A computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the method according to any one of claims 1 to 10 is implemented.

Images