Component processing method and device

Abstract

The invention provides a component processing method and device.The method comprises the steps that first attribute data of a to-be-processed component and second attribute data of a fixed component in a page are obtained in real time by responding to an operation instruction of a user for the to-be-processed component in the page, and under the condition that the first attribute data and the second attribute data meet preset conditions, the first attribute data and the second attribute data meet the preset conditions; and displaying an auxiliary operation identifier on the page so as to adjust the to-be-processed component based on the auxiliary operation identifier. According to the technical scheme, by judging the obtained attribute data of the fixed component and the to-be-processed component, the identifier capable of assisting the user to operate is displayed on the page, and the efficiency and accuracy of processing the component by the user are improved.

Description

Technical Field

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

[0002] In the process of page construction, the most frequent operation is dragging components. Almost all key behaviors in construction are performed by dragging: adding components, moving components, or hiding components. The accuracy of dragging is positively correlated with the degree of page perfection and user experience, and its importance is self-evident.

[0003] 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.

[0004] However, this purely manual approach often results in the component presentation effect not meeting the requirements, resulting in the component presentation effect not meeting the requirements being obtained when processing the component. Therefore, how to process the component efficiently and more accurately becomes a technical problem that needs to be solved urgently. Summary of the invention

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

[0006] In a first aspect, an embodiment of the present disclosure provides a component processing method, including:

[0007] 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;

[0008] When the first attribute data and the second attribute data satisfy 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.

[0009] In a second aspect, an embodiment of the present disclosure provides a component processing device, the device comprising:

[0010] 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;

[0011] 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.

[0012] In a third aspect, an embodiment of the present disclosure provides an electronic device, including: a processor, and a memory communicatively connected to the processor;

[0013] The memory stores computer-executable instructions;

[0014] The processor executes the computer-executable instructions stored in the memory to implement the component processing method as described in the first aspect above.

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

[0016] 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.

[0017] The component processing method and device provided by the embodiment of the present disclosure obtains 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 in response to the user's operation instruction on the component to be processed in the page, and displays the auxiliary operation mark on the page when the first attribute data and the second attribute data meet the preset conditions, so as to adjust the component to be processed based on the auxiliary operation mark. In this technical solution, by judging the acquired attribute data of the fixed component and the component to be processed, an mark that can assist the user's operation is displayed on the page, thereby improving the efficiency and accuracy of the user in processing components. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] 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.

[0019] Figure 1 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 1 ;

[0020] Figure 2 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 2 ;

[0021] Figure 3 A schematic diagram of component size adjustment provided for an embodiment of the present disclosure;

[0022] Figure 4 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 3 ;

[0023] Figure 5 Component movement diagram provided for the embodiment of the present disclosure Figure 1 ;

[0024] Figure 6 Component movement diagram provided for the embodiment of the present disclosure Figure 2 ;

[0025] Figure 7 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 4 ;

[0026] Figure 8 A schematic diagram of a canvas area provided for the disclosed embodiment;

[0027] Fig. 9 A schematic diagram of the structure of a component processing device provided in an embodiment of the present disclosure;

[0028] Fig.10 A schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure.

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

[0030] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present disclosure.

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

[0032] Component: The basic unit of a page, such as buttons, images, and text.

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

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

[0035] Canvas: The workspace for page construction.

[0036] Anchor point: The size of the component itself can be scaled at will when the anchor point is dragged, so the size of the component can be quickly set. The component can be adsorbed according to its anchor point when dragging, and the component can be scaled according to the anchor point when the component is selected.

[0037] Component anchor points are generally divided into 4, 6, or 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.

[0038] In the process of page construction, the most frequent operation is dragging components. Almost all key behaviors in construction are performed by dragging: adding components, moving components, or hiding components. The accuracy of dragging is positively correlated with the degree of page perfection and user experience, and its importance is self-evident.

[0039] During the dragging process, it is difficult to guarantee the presentation effect if only relying on the user's manual behavior. There are some typical scenarios: the spacing between each video in the video list needs to be equal, and the user often drags far or close; in the picture hot zone, each hot zone needs to be the same size, and it is difficult for the user to reach the same size when dragging and zooming.

[0040] In the prior art, technicians often drag components to move them to a desired position or adjust the size of components based on their experience. This purely manual approach often results in the effects of the components not meeting the requirements and low efficiency. Therefore, how to process components efficiently and accurately has become a technical problem that needs to be solved urgently.

[0041] On the basis of the above-mentioned technical problems, the inventor's technical conception is as follows: In the prior art, the distance between components in a page cannot be grasped when the page is built, and the size of a component cannot be consistent with the size of a fixed component when it is resized. 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 adsorption is triggered when it is less than a pre-agreed threshold, 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 adsorption is triggered when it is also less than a pre-agreed threshold. In the above situations, if a mark can be given to assist users in moving components or adjusting component sizes, the above technical problems can be solved.

[0042] 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 described in detail in some embodiments.

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

[0044] 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.

[0045] Figure 1 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 1 ,like Figure 1 As shown, the method may include the following steps:

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

[0047] 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 placed statically (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.

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

[0049] 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.

[0050] Optionally, in this implementation, step 11 is implemented as follows: detecting the displacement speed of the component to be processed when being dragged, and 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 the page in real time.

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

[0052] 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.

[0053] 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.

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

[0055] 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.

[0056] Wherein, the component to be processed is adjusted based on the auxiliary operation identifier.

[0057] 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 mark is displayed on the page.

[0058] 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 that the distance between the component to be processed and the fixed component in any direction reaches the target distance; the auxiliary operation identifier displayed on the page based on the position information is used to trigger the realization that the size of the component to be processed and the fixed component are consistent.

[0059] 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.

[0060] The component processing method provided by the embodiment of the present disclosure obtains 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 in response to the user's operation instruction on the component to be processed in the page, and displays the auxiliary operation mark on the page when the first attribute data and the second attribute data meet the preset conditions, so as to adjust the component to be processed based on the auxiliary operation mark. In this technical solution, by judging the acquired attribute data of the fixed component and the component to be processed, an mark that can assist the user's operation is displayed on the page, thereby improving the efficiency and accuracy of the user in processing components.

[0061] exist Figure 1 Based on the embodiment shown, 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 performed by Figure 2 The embodiment shown achieves that Figure 2Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 2 ,like Figure 2 As shown, step 12 may include the following steps:

[0062] As an example, Figure 3 This is a schematic diagram of component size adjustment provided in an embodiment of the present disclosure. Figure 3 right Figure 2 The illustrated embodiments are for illustration purposes only.

[0063] 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.

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

[0065] 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.

[0066] like Figure 3 As shown, the size of the fixed components in the page is: height 20, length 25; the size of the component to be processed (obtained by real-time detection) is: height 22, length 23.

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

[0068] In Example 1 (page A1), the size information includes: the length of the component;

[0069] 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 components: 25-23=2.

[0070] In Example 2 (page B1), the size information includes: the height of the component;

[0071] 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 components: 22-20=2.

[0072] In Example 3 (page C1), the size information includes: the length and height of the component;

[0073] 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.

[0074] 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 when dragging the component to be processed.

[0075] Furthermore, in order to give the right opportunity to trigger the display of the auxiliary operation logo, 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 logo can be triggered.

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

[0077] In Example 1 (page A1), the size information includes: the length of the component;

[0078] If the length difference 2 of the component is less than 3, it means that the first attribute data and the second attribute data meet the preset condition;

[0079] In Example 2 (page B1), the size information includes: the height of the component;

[0080] If the height difference value 2 of the component is less than 3, it means that the first attribute data and the second attribute data meet the preset condition;

[0081] In Example 3 (page C1), the size information includes: the length and height of the component;

[0082] If the length difference 2 and the height difference 2 of the components are both less than 3, it means that the first attribute data and the second attribute data meet the preset conditions.

[0083] 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.

[0084] Further, after the first attribute data and the second attribute data meet the preset conditions, the auxiliary operation identifier is determined based on the size information of the fixed component.

[0085] Among them, 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. The fixed anchor point is a point that does not change its 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 a fixed point on the component in the opposite direction of the adjustment; for another example, when adjusting the length of a component, the fixed anchor point is any fixed point on the component in the opposite direction of the adjustment and on the wide side.

[0086] That is, with the fixed anchor point O and the auxiliary operation mark L( Figure 3The black dotted line in the figure is used as an example to illustrate:

[0087] Example 1: In 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.

[0088] Example 2: In 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.

[0089] 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 the height of the component to be processed is attached to the height, and the length 25 of the fixed component is used as the length of the line, and the auxiliary operation mark L is attached to the length of the component to be processed.

[0090] Furthermore, when the user operates the component to be processed based on the auxiliary operation identifier, the page that appears after the user operates the component to be processed may be as follows: Figure 3 As shown in (page A1, page B2, page C2), it helps users to build pages.

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

[0092] It should be understood that in a specific implementation scenario, 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 opposite point when dragging, so the effects achieved are different.

[0093] That is: upper left anchor point: you can change the component's Width, Height, Left, and Top; upper middle 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 middle anchor point: you can change the component's Height; lower right anchor point: you can change the component's Width and Height.

[0094] 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 when it moves (x2, y2); 3. The absolute value of the subtraction of the two coordinates is used to obtain the dragging distance; 4. According to the above rules and the dragging distance, reset the component's Width, Height, Left, and Top.

[0095] 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.

[0096] 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 mark is not determined and displayed.

[0097] The component processing method provided by the embodiment of the present disclosure determines that the first attribute data and the second attribute data meet the 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 the first preset threshold. The 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 preset threshold to determine whether to perform the auxiliary operation identification for the component to be processed.

[0098] exist Figure 1 Based on the embodiment shown, when the first attribute data is used to represent the position information of the component to be processed, the second attribute data is used to represent the position information of the fixed component, and the operation instruction is an instruction to adjust the position of the component to be processed, the above step 12 can be performed by Figure 4 The embodiment shown achieves that Figure 4 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 3 ,like Figure 4 As shown, step 12 may include the following steps:

[0099] Wherein, the fixing component includes: a first sub-fixing component and a second sub-fixing component.

[0100] Step 41 : Determine whether the first attribute data and the second attribute data meet a preset condition 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.

[0101] 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.

[0102] Optionally, this step may be implemented as follows:

[0103] Step 1: 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;

[0104] If the operation instruction is an instruction to adjust the position of the component to be processed, 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.

[0105] 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 the Y-axis are used as examples:

[0106] 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, and the component corresponding to the middle coordinate value is located between the components corresponding to the other two coordinate values.

[0107] It should be understood that: taking the Y-axis as an example, or the implementation principles of other possible directions are similar, no examples are given here, and the following description will be given taking the X-axis as an example.

[0108] 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.

[0109] Step 2: If in any direction, the position 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;

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

[0111] In order to give the right opportunity to trigger the display of the auxiliary operation logo, when the position relationship is that the component to be processed is located between the first sub-fixed component and the second sub-fixed component, the distance difference between the component to be processed and the first sub-fixed component and the second sub-fixed component is determined, and then the two distance differences are compared with the second preset threshold to determine whether the first attribute data and the second attribute data meet the preset conditions, that is, the following operations related to the auxiliary operation logo can be triggered.

[0112] Optional, Figure 5 Component movement diagram provided for the embodiment of the present disclosure Figure 1 .like Figure 5 As shown:

[0113] 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.

[0114] 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.

[0115] Further, after the first attribute data and the second attribute data meet the 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.

[0116] 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.

[0117] Continue with the above Figure 5 , the target distance value 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, such as Figure 5 As shown on the right side of the page.

[0118] In addition, the setting of the first 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, an added line to define the boundary of the first area.

[0119] 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 respectively 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, Figure 5 The medium-thick dotted line is an auxiliary operation mark. For ease of understanding, the components to be processed are not displayed (they are still displayed in actual operation).

[0121] 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 mark is not constructed and displayed.

[0122] 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.

[0123] It should be understood that step 2 and step 3 are different scenarios in which the components to be processed are located, and in a possible implementation, they are only a one-for-one execution relationship.

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

[0125] 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.

[0126] In one possible implementation, Figure 6 Component movement diagram provided for the embodiment of the present disclosure Figure 2 .like Figure 6 As shown,

[0127] 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 first sub-fixed component and the second sub-fixed component is 26, and the distance between the first sub-fixed component and the component to be processed is 24. The distance difference is 26-24=2.

[0128] 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.

[0129] Furthermore, an auxiliary operation mark is displayed on the second area, 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.

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

[0131] Continue with the above Figure 6 , the target distance value may be the distance between the first sub-fixed component and the second sub-fixed component 26, that is, the distance between the constructed second area and the first sub-fixed component is 26, such as Figure 6 As shown on the right side of the page.

[0132] 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, an added line to define the boundary of the second area.

[0133] in, Figure 6 The medium-thick dotted line is an auxiliary operation mark. To make the drawings clear and understandable, the components to be processed are not displayed (they are still displayed in actual operations).

[0134] 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 a second preset threshold, then it is determined that the first attribute data and the second attribute data do not meet the preset conditions.

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

[0136] 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 component sizes corresponding to the videos are consistent) needs to be equal.

[0137] The component processing method provided by the embodiment of the present disclosure determines whether the first attribute data and the second attribute data meet the preset conditions 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. In this technical solution, after determining the positional relationship between the fixed component and the component to be processed, when the positional relationship is that the component to be processed is between the two sub-fixed components, it is detected in real time whether there is an identical margin within a certain threshold between the components to determine whether to perform the auxiliary operation identification for the component to be processed.

[0138] Based on the above embodiments, Figure 7 Schematic diagram of the process of the component processing method provided in the embodiment of the present disclosure Figure 4 , Figure 8 A schematic diagram of a canvas area provided for the disclosed embodiment, combined with Figure 7 and Figure 8 , the processes involved in component movement are explained.

[0139] Figure 7 Includes: simulation area and canvas area.

[0140] Step 81, drag the component to be processed;

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

[0142] Step 83, generate 4 boundary Rects based on the parent component;

[0143] (For the following execution, select 1 (vertical adjustment position) to execute until completion or 2 (horizontal adjustment position) to execute until completion).

[0144] Step 84 (1), filtering out the brother components that intersect vertically or horizontally; or step 84 (2), filtering out the brother components that are not in the view of the component to be processed;

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

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

[0147] Step 87(1), remove the margin that is less than or equal to 0; or Step 87(2), remove the margin that is less than or equal to 0;

[0148] Step 88(1), calculating whether the margins of the components to be processed have the same margins; or Step 88(2), calculating whether the margins of the components to be processed have the same margins;

[0149] 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.

[0150] The reference margin of the component to be processed is composed of: the parent component, the sibling components that do not intersect with the component to be processed, and the reference line.

[0151] Upper distance:

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

[0153] Distance from bottom:

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

[0155] Distance to left:

[0156] 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);

[0157] Distance to right:

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

[0159] Figure 7 and Figure 8 The implementation principle and technical effect of the illustrated embodiment are similar to those of the above-mentioned implementation, and will not be described in detail here.

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

[0161] Fig. 9 This is a schematic diagram of the structure of the component processing device provided in the embodiment of the present disclosure. Fig. 9 As shown, the device includes:

[0162] The acquisition module 91 is used to acquire 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 in response to the user's operation instruction on the component to be processed in the page;

[0163] The display module 92 is used to display the auxiliary operation identifier on the page when the first attribute data and the second attribute data meet the preset conditions, so as to adjust the component to be processed based on the auxiliary operation identifier.

[0164] 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.

[0165] 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;

[0166] Accordingly, when the first attribute data and the second attribute data meet the preset conditions, before the auxiliary operation mark is displayed on the page, the determination module is used to:

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

[0168] According to one or more embodiments of the present disclosure, before displaying the auxiliary operation mark on the page, a determination module is used to:

[0169] Based on the size information of the fixed component, an auxiliary operation identifier is determined. 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. The fixed anchor point is a vertex that does not change position when the size of the component to be processed is adjusted.

[0170] 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;

[0171] Accordingly, when the first attribute data and the second attribute data meet the preset conditions, before the auxiliary operation mark is displayed on the page, the determination module is used to:

[0172] 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, it is determined whether the first attribute data and the second attribute data meet the preset condition.

[0173] According to one or more embodiments of the present disclosure, the determination module determines whether the first attribute data and the second attribute data meet a preset condition 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, and is specifically used to:

[0174] 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;

[0175] 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 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 the second preset threshold, then it is determined that the first attribute data and the second attribute data meet the preset condition.

[0176] 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;

[0177] Accordingly, before the auxiliary operation indicator is displayed on the page, a module is determined for:

[0178] A first area that is at 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.

[0179] According to one or more embodiments of the present disclosure, the target distance is the distance between the first sub-fixed assembly and the second sub-fixed assembly;

[0180] Accordingly, before the auxiliary operation indicator is displayed on the page, a module is determined for:

[0181] An auxiliary operation mark is displayed on the second area, 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.

[0182] 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.

[0183] 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 principle and technical effects thereof are similar and will not be described in detail herein.

[0184] It should be noted that it should be understood that the division of the various modules of the above devices is only 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. And these modules can all be implemented in the form of software calling through processing elements; they can also be all implemented in the form of hardware; some modules can also be implemented in the form of software calling through processing elements, and some modules can be implemented in the form of hardware. In addition, all or part of these modules can be integrated together or implemented independently. The processing element described here can be an integrated circuit with signal processing capabilities. In the implementation process, each step of the above method or each module above can be completed by an integrated logic circuit of hardware in the processor element or instructions in the form of software.

[0185] Fig.10 A schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure, such as Fig.10 , which shows a schematic diagram of the structure of an electronic device suitable for implementing the embodiments of the present disclosure, and 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), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc.

[0186] Fig.10 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0187] like Fig.10 As shown, 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 to 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.

[0188] Typically, the following devices may be connected to the I / O interface 105: an input device 106 including, for example, a touch screen, a touch pad, 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 Fig.10 An electronic device having various devices is shown, but it should be understood that it is not required to implement or possess all the devices shown. More or fewer devices may be implemented or possessed instead.

[0189] 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 contains 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 through 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 executed.

[0190] It should be noted that the computer-readable medium disclosed above may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, 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 containing or storing a program that may be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The computer readable signal medium may also be any computer readable medium other than a computer readable storage medium, which may send, propagate or transmit 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 of the above.

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

[0192] 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.

[0193] 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 an independent software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via 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).

[0194] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square 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 square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

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

[0196] The functions described above herein may be performed at least in part by one or more hardware logic components. For example, 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 chips (SOCs), complex programmable logic devices (CPLDs), and the like.

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

[0198] 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 principle and technical effects are similar and will not be described in detail here.

[0199] An embodiment of the present disclosure provides a computer-readable storage medium, in which computer instructions are stored. When the computer instructions are executed on a computer, the computer executes the above-mentioned component processing method.

[0200] The computer-readable storage medium mentioned above can be implemented by any type of volatile or non-volatile storage 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 memory, flash memory, magnetic disk or optical disk. The readable storage medium can be any available medium that can be accessed by a general or special-purpose computer.

[0201] 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 a component 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.

[0202] An embodiment of the present disclosure also provides a computer program product, which includes a computer program. The computer program is stored in a computer-readable storage medium. At least one processor can read the computer program from the computer-readable storage medium. When the at least one processor executes the computer program, the above-mentioned component processing method can be implemented.

[0203] also:

[0204] In a first aspect, a component processing method is provided, comprising:

[0205] 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;

[0206] When the first attribute data and the second attribute data satisfy 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.

[0207] 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.

[0208] 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;

[0209] 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:

[0210] 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.

[0211] According to one or more embodiments of the present disclosure, before displaying the auxiliary operation mark on the page, the method further includes:

[0212] Based on the size information of the fixed component, the auxiliary operation identifier is determined. 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. The fixed anchor point is a vertex that does not change its position when the size of the component to be processed is adjusted.

[0213] 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;

[0214] 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:

[0215] It is determined whether the first attribute data and the second attribute data meet the preset condition 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.

[0216] 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 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 includes:

[0217] 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;

[0218] 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.

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

[0220] Accordingly, before displaying the auxiliary operation mark on the page, the method further includes:

[0221] 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.

[0222] According to one or more embodiments of the present disclosure, the target distance is the distance between the first sub-fixed assembly and the second sub-fixed assembly;

[0223] Accordingly, before displaying the auxiliary operation mark on the page, the method further includes:

[0224] 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.

[0225] 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.

[0226] 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:

[0227] Detecting the displacement speed of the component to be processed being dragged;

[0228] 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.

[0229] In a second aspect, a component processing device is provided, the device comprising:

[0230] 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;

[0231] 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.

[0232] 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.

[0233] 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;

[0234] Accordingly, when the first attribute data and the second attribute data meet the preset condition, before the auxiliary operation mark is displayed on the page, the processing module is used to:

[0235] 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.

[0236] According to one or more embodiments of the present disclosure, before displaying the auxiliary operation mark on the page, the method further includes:

[0237] Based on the size information of the fixed component, the auxiliary operation identifier is determined. 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. The fixed anchor point is a vertex that does not change its position when the size of the component to be processed is adjusted.

[0238] 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;

[0239] Accordingly, when the first attribute data and the second attribute data meet the preset condition, before the auxiliary operation mark is displayed on the page, the processing module is used to:

[0240] It is determined whether the first attribute data and the second attribute data meet the preset condition 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.

[0241] 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 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, and is specifically used to:

[0242] 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;

[0243] 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.

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

[0245] Accordingly, before the auxiliary operation mark is displayed on the page, the processing module is used to:

[0246] 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.

[0247] According to one or more embodiments of the present disclosure, the target distance is the distance between the first sub-fixed assembly and the second sub-fixed assembly;

[0248] Accordingly, before the auxiliary operation mark is displayed on the page, the processing module is used to:

[0249] 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.

[0250] 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.

[0251] According to one or more embodiments of the present disclosure, the operation includes a drag operation, and the real acquisition module is specifically configured to:

[0252] Detecting the displacement speed of the component to be processed being dragged;

[0253] 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.

[0254] In a third aspect, an embodiment of the present disclosure provides an electronic device, including: a processor, and a memory communicatively connected to the processor;

[0255] The memory stores computer-executable instructions;

[0256] The processor executes the computer-executable instructions stored in the memory to implement the component processing method as described in the first aspect above.

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

[0258] 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.

[0259] The above description is only a preferred embodiment of the present disclosure and an explanation of the technical principles used. 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 a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosed concept. For example, the above features are replaced with the technical features with similar functions disclosed in the present disclosure (but not limited to) by each other to form a technical solution.

[0260] 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 are 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.

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

Claims

1. A component processing method, characterized in that: 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 satisfy 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, characterized in that 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, characterized in that 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, characterized in that 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, characterized in that: 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: It is determined whether the first attribute data and the second attribute data meet the preset condition 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.

6. The method according to claim 5, characterized in that 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, characterized in that 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, characterized in that 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, characterized in that: 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, characterized in that 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, characterized in that: The device comprises: 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, characterized in that: 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, characterized in that: 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 method according to any one of claims 1 to 10.

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

Images