WO2022160727A1

WO2022160727A1 - Docking operation method for component, and terminal

Info

Publication number: WO2022160727A1
Application number: PCT/CN2021/117525
Authority: WO
Inventors: 王少星
Original assignee: 北京达佳互联信息技术有限公司
Priority date: 2021-01-29
Filing date: 2021-09-09
Publication date: 2022-08-04
Also published as: CN112764654A; CN112764654B

Abstract

The present disclosure relates to the technical field of networks. Disclosed are a docking operation method for a component, and a terminal. The method comprises: displaying a component editing interface, wherein the component editing interface comprises a plurality of editable components; determining at least one second component in response to a drag operation for a first component in the component editing interface; determining a target component from among the at least one second component on the basis of the distance between the first component and each second component, and the moving speed of the drag operation; and docking the first component to the target component.

Description

Component adsorption operation method and terminal

The present disclosure is based on a Chinese patent application with an application date of January 29, 2021 and an application number of 202110124740.6, and claims the priority of the Chinese patent application, the entire contents of which are incorporated herein by reference.

technical field

The present disclosure relates to the field of network technologies, and in particular, to an adsorption operation method and a terminal of a component.

Background technique

At present, the web page supports the component editing function, and the user usually completes the editing operation on the component by means of the mouse. In this process, when the user drags a component with the mouse, the web page often provides auxiliary functions for the component. For example, when the distance between the component and the target component in the current interface is relatively short, the component is provided with an adsorption function, that is, the component is adsorbed to the target component.

In the related art, in the process of the user dragging the component through the mouse, the terminal calculates the distance between the component and the target component in the current interface in real time, and in response to the distance between the component and the target component being less than the preset distance, then Snap the component to the target component.

SUMMARY OF THE INVENTION

The present disclosure provides an adsorption operation method and terminal of a component. The technical solutions of the present disclosure are as follows:

According to a first aspect of the embodiments of the present disclosure, there is provided an adsorption operation method for a component, which is performed by a terminal, including:

Display the component editing interface, which includes multiple editable components;

In response to a drag operation of the first component in the component editing interface, determining at least one second component;

determining a target component from the at least one second component based on the distance between the first component and each second component and the moving speed of the drag operation;

Snap the first component to the target component.

In the solution provided by the present disclosure, when the user wants to adsorb two components together, by dragging one of the components, the terminal can automatically determine a The target component is automatically adsorbed to the target component, which reduces the adsorption time and improves the operation efficiency of component editing.

According to a second aspect of the embodiments of the present disclosure, there is provided an adsorption operation device for components, including:

a display unit, configured to display a component editing interface, where the component editing interface includes a plurality of editable components;

a determining unit, configured to determine at least one second component in response to a drag operation of the first component in the component editing interface;

The determining unit is configured to determine a target component from the at least one second component based on the distance between the first component and each second component and the moving speed of the dragging operation;

The adsorption unit is configured to adsorb the first component to the target component.

According to a third aspect of the embodiments of the present disclosure, a terminal is provided, including:

processor;

memory for storing instructions executable by the processor;

Wherein, the processor is configured to execute the instruction, so as to realize the above-mentioned component adsorption operation method.

According to a fourth aspect of the embodiments of the present disclosure, a non-volatile storage medium is provided. When an instruction in the non-volatile storage medium is executed by a processor of a terminal, the terminal can perform the adsorption operation method of the above-mentioned components. .

According to a fifth aspect of the embodiments of the present disclosure, there is provided a computer program product, including computer programs/instructions, when the computer program/instructions are executed by a processor, the above-mentioned component adsorption operation method is implemented.

Description of drawings

The accompanying drawings, which are incorporated into 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 and do not unduly limit the present disclosure.

FIG. 1 is an implementation environment diagram of an adsorption operation method of a component according to an exemplary embodiment;

FIG. 2 is a flow chart of a method for adsorbing a component according to an exemplary embodiment;

FIG. 3 is a flow chart of a method for adsorbing a component according to an exemplary embodiment;

Fig. 4 is a schematic diagram showing an adsorption operation method of a component according to an exemplary embodiment;

Fig. 5 is a schematic diagram showing an adsorption operation method of a component according to an exemplary embodiment;

FIG. 6 is a schematic diagram illustrating an adsorption operation method of a component according to an exemplary embodiment;

Fig. 7 is a schematic diagram showing an adsorption operation method of a component according to an exemplary embodiment;

Fig. 8 is a schematic diagram showing an adsorption operation method of a component according to an exemplary embodiment;

FIG. 9 is a flow chart of a method for adsorbing a component according to an exemplary embodiment;

Fig. 10 is a block diagram of an adsorption operation device of a component according to an exemplary embodiment;

Fig. 11 is a block diagram of a terminal according to an exemplary embodiment.

Detailed ways

The user information involved in this disclosure is the information authorized by the user or fully authorized by all parties.

FIG. 1 is an implementation environment diagram of a component adsorption operation method according to an exemplary embodiment. Referring to FIG. 1 , the implementation environment includes: a terminal 10 and a server 20 . The terminal 10 and the server 20 communicate through a network.

A target application program associated with the server 20 is installed in the terminal 10 , and data interaction with the server 20 is realized through the target application program. For example, the terminal 10 obtains multiple editable components from the server 20 based on the target application, and then displays a component editing interface including multiple editable components, and the user edits the multiple editable components, for example, the user drags Move a component, change the shape of the component, edit the content displayed within the component. In addition, in some embodiments, in the process of editing a component by the user, the terminal 10 provides an auxiliary operation for the component, and the auxiliary operation includes a suction operation or adding an auxiliary line, etc. In the embodiments of the present disclosure, the suction operation of a component is taken as an example Be explained.

The target application is any application that can realize the component editing function; for example, the target application is a browser, PPT (electronic slideshow), visio (a kind of drawing software) and other applications. The terminal 10 is a mobile phone, a tablet computer, a PC (Personal Computer) device, a watch, a wearable device, an MP3 player (Moving Picture Experts Group Audio Layer III, moving image expert compression standard audio layer 3), MP4 (Moving Picture Experts Group Audio Layer III) IV, at least one of the moving image expert compression standard audio layer 4) player and other devices. The server 20 is at least one of a server, multiple servers, a cloud server, a cloud computing platform and a virtualization center.

Fig. 2 is a flow chart of an adsorption operation method of a component according to an exemplary embodiment. As shown in Fig. 2 , the adsorption operation method of the component is performed by a terminal, and includes the following steps.

In step S21, a component editing interface is displayed, and the component editing interface includes a plurality of editable components;

In step S22, in response to the drag operation of the first component in the component editing interface, at least one second component is determined;

In step S23, a target component is determined from the at least one second component based on the distance between the first component and each second component and the moving speed of the dragging operation;

In step S24, the first component is adsorbed to the target component.

In some embodiments, determining at least one second component in response to a drag operation on the first component in the component editing interface includes:

In response to a drag operation of the first component in the component editing interface, at least one second component is determined from the component editing interface based on the moving direction of the drag operation.

In some embodiments, determining at least one second component from the component editing interface based on a moving direction of the drag operation in response to a drag operation on the first component in the component editing interface includes:

In response to the drag operation of the first component in the component editing interface, the terminal determines, based on the moving direction of the drag operation, the component located in the moving direction in the component editing interface as the second component.

In some embodiments, the determining the target component from the at least one second component based on the distance between the first component and each second component and the movement speed of the drag operation includes:

In the case where the moving speed of the drag operation is not greater than the first speed threshold, the target component is determined from the at least one second component based on the distance between the first component and each second component, the first component The distance between the component and this target component is not greater than the distance threshold.

In some embodiments, the method further includes:

In the case where the moving speed of the dragging operation is not greater than the first speed threshold and greater than the second speed threshold, in response to the slowing down of the moving speed of the dragging operation, the first component is detached from the target component, and reducing the moving speed of the drag operation by a first preset multiple to obtain a first moving speed, and move the first component based on the first moving speed, wherein the second speed threshold is smaller than the first speed threshold.

In some embodiments, the method further includes:

In the case that the moving speed of the drag operation is not greater than the second speed threshold, reduce the moving speed of the drag operation by a second preset multiple to obtain a second moving speed, and move the first component based on the second moving speed , wherein the second speed threshold is less than the first speed threshold;

In response to the moving direction of the drag operation changing, and the distance between the first component and the target component is greater than the distance threshold, the first component is moved based on the moving speed of the drag operation.

In some embodiments, the method further includes:

In the case where the moving speed of the drag operation is greater than the first speed threshold, the first component is moved based on the moving speed of the drag operation.

In some embodiments, the method further includes:

A prompt area is determined in the component editing interface, and the distance between the first component and the target component is displayed in the prompt area.

In some embodiments, the method further includes:

Run the rendering thread, and execute the step of displaying the editing interface of the component through the rendering thread;

Running a computing thread, through which the determining at least one second component is performed; based on the distance between the first component and each second component and the moving speed of the drag operation, from the at least one second component Steps to determine this target component.

In some embodiments, the method further includes:

The calculation thread is run, and through the calculation thread, the base terminal determines the component located in the movement direction in the component editing interface based on the movement direction of the drag operation as the second component.

In some embodiments, the method further includes:

In response to the terminal supporting a multi-threaded tool, the computing thread is created by running the script file of the multi-threaded tool;

In response to the terminal not supporting the multi-threading tool, the running the computing thread includes running the computing thread by means of the server through a communication connection between the terminal and the server.

FIG. 3 is a flow chart of a method for adsorbing a component according to an exemplary embodiment. As shown in FIG. 3 , the method for adsorbing a component is performed by a terminal, and includes the following steps.

In step 301, the terminal displays a component editing interface, and the component editing interface includes a plurality of editable components.

The target application program is installed on the terminal, and the user triggers the target application program to trigger the terminal to display the home page interface corresponding to the target application program; in response to the user's trigger operation, the terminal displays the home page interface corresponding to the target application program, and the user can Add multiple components to the home page interface, and then trigger the terminal to display the component editing interface. For example, the home page interface includes a component area and an editing area, and the component area includes multiple components. The user drags and drops components in the component area to the editing area, thereby triggering the terminal to display the component editing interface.

The target application is any application such as browser, PPT or visio. For example, if the target application is a browser, the component editing interface is a web page editing interface, and the web page editing interface includes multiple editable components downloaded from the server corresponding to the browser; for example, the target application is PPT or visio, etc. application, the component editing interface is a non-web page editing interface, and the non-web page editing interface includes multiple editable components stored locally in PPT or visio.

In some embodiments, multiple editable components are the same type of components. In other embodiments, the plurality of editable components are different types of components. For example, the plurality of editable components are flowchart type components, electrical diagram type components, organization chart type components, and the like. Also, in some embodiments, each component is the same shape. In other embodiments, each component has a different shape. For example, the shape of the component is heart, pentagram, circle, square, etc.

For example, in the embodiment of the present disclosure, the multiple editable components are the same type of components as an example for description. Referring to FIG. 4 , the component editing interface includes multiple editable components, namely A component, B component, C component, D component, E component, F component and G component.

In some embodiments, the user edits the component by dragging, and in response to receiving the user's dragging operation, the terminal edits the component. In some embodiments, the terminal determines that the drag operation is received by: in response to the first component in the component editing interface being selected, the terminal changes the state of the first component from an inactive state to an active state, and in the first component When a component is in an activated state, in response to the first moving component being dragged, the terminal determines that the drag operation is received.

The components that are not selected in the component editing interface are still in an inactive state. For example, referring to FIG. 5 , the first component is a B component, the mouse pointer stays on the B component, and the mouse pointer is pressed, it is determined that the B component is selected, and the state of the B component is set to an active state. Since the A component is not selected, the A component is in an inactive state.

In step 302, the terminal determines at least one second component in response to a drag operation of the first component in the component editing interface.

The first component is the component selected by the user, and the second component is any component other than the first component in the component editing interface. The user can make the terminal adsorb the first component to the second component by dragging the first component. In some embodiments, snapping refers to automatically combining a component with other components without the need for continuous drag and drop operations on the component. In other words, adsorption refers to the automatic combination (or automatic connection) of two or more components together. For example, taking the shape of component A and component B as square as an example, adsorption refers to fitting the right side of component A with the left side of component B, or adsorption refers to completely overlapping the right side of component A with the left side of component B, Alternatively, the adsorption refers to overlapping the right side of the A component with the left part of the B component, which is not limited in the present disclosure. In some embodiments, this way of automatically combining two or more components together through adsorption is called an adsorption operation, which is not limited in the present disclosure. In some embodiments, before determining the at least one second component, the terminal needs to determine the moving direction of the drag operation. In some embodiments, this step is implemented by: the terminal determines the moving direction of the drag operation based on the current position of the first component before the drag and the current position after the drag.

In some embodiments, the current position of the component is expressed as the coordinates of the component in the component editing interface, and the coordinates include the abscissa x and the ordinate y. The representation of the moving direction can be set and changed according to requirements, which is not limited in the present disclosure. In some embodiments, the moving direction is decomposed into a horizontal direction and a vertical direction, for example, if the moving direction is upper left, the horizontal direction is left, and the vertical direction is up; in some embodiments, the moving direction is relative to the first Any direction of the component's upper left, lower left, upper right, lower right, right left, right right, upper right, and lower right.

For example, the first component is component A, the position of component A before dragging is (x1, y1), x1=2, y1=4; the position of component A after dragging is (x2, y2), x2=1 , y2=6; it can be seen that if x1 is greater than x2, the horizontal direction is left, and y1 is less than y2, then the vertical direction is up, and the horizontal direction and the vertical direction are combined into a moving direction to obtain the moving direction of the drag operation of dragging the A component. for the upper left.

In some embodiments, after determining the moving direction of the drag operation, the terminal determines the at least one second component by: determining at least one second component from the component editing interface based on the moving direction of the drag operation .

Wherein, in the process of dragging the first component, when the first component needs to be adsorbed to the second component, the first component needs to be dragged to the vicinity of the second component, therefore, the at least one second component It is a component that can be approached after the first component moves according to the moving direction. In some embodiments, the terminal determines, based on the moving direction of the drag operation, a component located in the moving direction in the component editing interface as the second component. For example, the moving direction is divided into an upper left direction, and the terminal determines a component located in the upper left direction of the first component in the component editing interface as the second component.

For example, referring to FIG. 6 , the first component is the B component, the coordinates of the B component are (5, 4), the moving direction is the upper left direction, and the other components in the component editing interface are the A component, the C component, and the D component respectively. , E component, F component, G component and H component, the coordinates of these components are (6, 3), (7, 3), (8, 2.5), (7, 1.5), (6.5, 2) and ( 6.5, 1), in the case that the abscissa of the A component is less than the abscissa of the B component, and the ordinate of the A component is greater than the ordinate of the A component, the terminal determines that the current position of the A component is located at the left and the top of the B component, This A component is determined as the second component.

In some embodiments, after determining the at least one second component, the terminal composes the at least one second component into a component set. During the dragging process, the terminal can periodically determine the target component to be adsorbed by the first component, for example, the terminal determines the target component every 200 ms. Therefore, by forming at least one second component into a component set, it is convenient for the terminal to directly determine the target component from the component set when the target component is subsequently determined periodically, without the need to determine from the entire component editing interface, thereby reducing the need for The number of components to be compared when the terminal determines the target component, which improves the operation efficiency of component editing. For example, the terminal combines the at least one second component into a component set a. During the dragging process, when the terminal periodically determines the target component, the terminal can directly determine the target component from the component set a.

In this embodiment of the present disclosure, the terminal determines at least one second component based on the moving direction of the dragging operation, and further, in the subsequent editing operation process, it is only necessary to determine, from the at least one second component, the one that needs to be adsorbed by the first component. The target component is sufficient, and there is no need to perform operations on all components in the component editing interface, thereby reducing the amount of computation in the component editing process and improving the operational efficiency of component editing.

In step 303, for each second component, the terminal determines the distance between the first component and the second component based on the current location of the first component and the current location of the second component.

Wherein, in the case of dragging the first component based on the dragging operation, the current position of the first component will change. Therefore, in the process of changing the position of the first component, the terminal needs to start from the at least one first component. Among the two components, a second component that is gradually approached by the first component is determined, that is, the distance between the second component and the first component decreases as the position of the first component changes.

In this step, the terminal determines the distance between the first component and the second component based on the current position and size information of the first component and the current position and size information of the second component.

Wherein, for any component, the size information of the component indicates the width (width) and height (height) of the component. For example, the first component is component B, the current position of component B is (x1, y1), the size information is width1, height1, the second component is component A, the current position of component A is (x2, y2), and the size information is width2, height2. When the A component is located in the upper left direction of the B component, the difference between x1 and x2 is determined as the first difference, the difference between the first difference and width2 is determined as the second difference, and the first difference is determined as the second difference. The two difference values are used as the distance between the A component and the B component.

In the embodiment of the present disclosure, the distance between the two components is determined by the current positions of the two components, which provides data support for the subsequent determination of the target component.

In some embodiments, before executing step 304, the terminal needs to determine the moving speed of the dragging operation, and execute step 304 based on the moving speed. In some embodiments, since the drag operation is triggered by dragging the first component with the mouse pointer, in some embodiments, the terminal determines the moving speed of the drag operation by: the terminal determines the preset time closest to the current time. The displacement of the mouse pointer within the duration is set, and the ratio of the displacement to the preset duration is used as the moving speed of the dragging operation.

The preset duration can be set and changed according to requirements. The embodiment of the present disclosure does not specifically limit the preset duration, for example, the preset duration is 200ms, 300ms, and the like. In some embodiments, in determining the displacement of the mouse pointer, the mouse pointer always selects the first component.

In the embodiment of the present disclosure, the displacement of the mouse pointer is sampled every preset duration, and the real-time moving speed of the drag operation is determined by the displacement and the preset duration, thereby ensuring the accuracy of the moving speed.

In step 304, the terminal determines a target component from the at least one second component based on the distance between the first component and each second component and the moving speed of the dragging operation.

Among them, in the process of editing the component, the moving speed of the dragging operation is not fixed; for example, when the first component needs to be moved a large distance, the first component needs to be dragged quickly; When the first component moves a small distance, the first component needs to be dragged at a slow speed to prevent the moving speed from being too fast, causing the moving distance of the first component to exceed the required distance. Therefore, the terminal can determine to which second component the user wants to adsorb the first component based on the distance between the first component and each second component and the moving speed of the dragging operation.

In some embodiments, the terminal determines whether the first component needs to be adsorbed to other components based on the moving speed of the drag operation. Illustratively, the following two cases are included.

In the first case, when the moving speed of the drag operation is relatively large, in order to save computing resources, the terminal does not determine the target component. In some embodiments, when the moving speed of the drag operation is greater than the first speed threshold, the terminal moves the first component based on the movement speed of the drag operation.

The first speed threshold can be set and changed according to requirements, which is not limited in this embodiment of the present disclosure; for example, the first speed threshold is 1 pixel/20ms.

In this embodiment of the present disclosure, if the moving speed is greater than the first speed threshold, it indicates that the dragging operation is in a fast speed state. In this case, the terminal does not determine the target component, that is, does not adsorb the first component to other components , thereby reducing the waste of terminal performance.

In the second case, when the moving speed of the drag operation is not large, the distance between the first component and the second component changes according to the drag of the drag operation. In some embodiments, the terminal determines from the at least one second component based on the distance between the first component and each second component under the condition that the moving speed of the drag operation is not greater than the first speed threshold A target component, the distance between the first component and the target component is not greater than a distance threshold.

The distance threshold can be set and changed according to requirements, which is not limited in this embodiment of the present disclosure; for example, the distance threshold is 8 pixels, 10 pixels, and the like. In the case that the moving speed of the drag operation is not large and the distance between the first component and the second component is relatively short, it indicates that the user wants to adsorb the first component to the second component, and the terminal will set the first component to the second component. The second component is determined as the target component.

For example, referring to FIG. 7 , the first component is the B component, the second component is the A component, the distance threshold is 10 pixels, the moving speed is not greater than the first speed threshold, and the distance between the B component and the A component is 5 pixels number, that is, the distance between the B component and the A component is less than the distance threshold, the terminal determines the A component as the target component, and adsorbs the B component to the A component.

In this embodiment of the present disclosure, when the moving speed of the drag operation is not large and the distance between components is smaller than the distance threshold, the second component is used as the object to be adsorbed by the first component, so that the user does not need to continue dragging the component. The first component saves operation time and improves the operation efficiency of component editing.

In some embodiments, when the terminal has adsorbed the first component to the determined target component and the dragging operation on the first component has not stopped, the terminal detaches the first component from the target component, and the terminal removes the first component from the target component by zooming out The method of the moving speed of the drag operation amplifies the ratio between the moving speed of the drag operation and the moving speed of the first component, wherein the moving speed of the first component refers to the speed of the first component approaching the target component. speed. In some embodiments, under the condition that the moving speed of the drag operation is not greater than the first speed threshold and greater than the second speed threshold, in response to the decrease of the moving speed of the drag operation, the terminal removes the first component from the first speed threshold. The target component is disengaged, and the moving speed of the dragging operation is reduced by a first preset multiple to obtain a first moving speed, and the first component is moved based on the first moving speed.

Wherein, the second speed threshold is smaller than the first speed threshold. For example, when the first speed threshold is 1 pixel/20ms, the second speed threshold is 1 pixel/30ms. In some embodiments, the second speed threshold can be set and changed according to requirements, which is not limited in this embodiment of the present disclosure. In some embodiments, the first preset multiple can be set and changed according to requirements, for example, the first preset multiple is 5, 4, or the like, which is not limited in this embodiment of the present disclosure.

Wherein, the moving speed of the drag operation is not greater than the first speed threshold, and greater than the second speed threshold indicates that the drag operation is in a medium-speed state. In the case that the first component has been adsorbed to the target component, the user is still using the terminal By dragging the first component, it indicates that the user's intention is not to attach the first component to the target component. Therefore, the first component should be detached from the target component, so as to avoid the failure to make small adjustments to the first component due to mis-adsorption. The phenomenon of distance movement.

In this embodiment of the present disclosure, when the first component has been adsorbed to the target component and the dragging operation has not stopped, the terminal detaches the first component from the target component and reduces the moving speed of the dragging operation. , to drag the first component, so as to realize the refined operation of the first component, avoid the phenomenon that the first component cannot be moved at a small distance due to false adsorption, and improve the accuracy of component editing operations.

In other embodiments, when the moving speed of the drag operation is relatively low, the terminal amplifies the difference between the movement speed of the drag operation and the movement speed of the first component by amplifying the movement speed of the drag operation. The moving speed of the first component refers to the speed at which the first component approaches the target component. In some embodiments, when the moving speed of the dragging operation is not greater than the second speed threshold, the terminal reduces the moving speed of the dragging operation by a second preset multiple to obtain a second moving speed, based on the second speed The movement speed moves the first component.

Wherein, the moving speed of the drag operation is not greater than the second speed threshold, indicating that the drag operation is in a slow speed state, indicating that the user wants to perform a refined operation on the first component. Therefore, the terminal uses the second preset multiple The movement speed is reduced to obtain a second movement speed, and the first component is moved based on the second movement speed. In some embodiments, the second preset multiple can be set and changed according to requirements, for example, the second preset multiple is 5, 4 or others. In some embodiments, the second preset multiple is the same as the first preset multiple, and in other embodiments, the second preset multiple is different from the first preset multiple, which is not made in the embodiments of the present disclosure. limited.

For example, when the moving speed of the dragging operation is in a fast speed state, the ratio between the moving speed of the dragging operation and the moving speed of the first component is 1:1, that is, the moving speed of the dragging operation and the moving speed of the first component are 1:1. The moving speed of a component is equal, that is, under the dragging operation, if the mouse moves n pixels in the same time, the corresponding first component will also move n pixels; and after reducing the moving speed of the drag operation, If the second preset multiple is reduced, the second movement speed is obtained. At this time, the ratio between the second movement speed and the movement speed of the first component is 4:1, that is, the mouse moves 4 pixels in the same time, and the corresponding The first component is moved by 1 pixel.

In some embodiments, when the moving direction of the drag operation changes, the target component sometimes changes. Therefore, when the moving speed of the drag operation is reduced by a preset multiple, the terminal restores the control of the first component. movement speed. In some embodiments, the terminal moves the first component based on the moving speed of the drag operation in response to a change in the moving direction of the drag operation and the distance between the first component and the target component is greater than a distance threshold.

Wherein, when the moving direction of the drag operation changes, it means that the user's intention may not be to adsorb the first component to the target component. Therefore, when the distance between the first component and the target component is large, The first component is moved based on the moving speed of the dragging operation, that is, the moving speed is no longer reduced by a preset multiple.

In the embodiments of the present disclosure, on the one hand, when the moving speed of the drag operation is slow, it indicates that the user may want to perform a refined operation on the first component, so by reducing the moving speed of the drag operation and the first component to drag the first component, so as to realize the refined operation of the first component; on the other hand, when the distance between the first component and the target component is greater than the distance threshold, the terminal does not need to The ratio between the moving speed of the dragging operation and the moving speed of the first component is further reduced, so the normal dragging operation can be restored, thereby facilitating the user to perform other editing operations on the first component and improving the operation efficiency of component editing.

In some embodiments, when the distance between the first component and the target component is not greater than the distance threshold, that is, in the component editing interface, the distance between the first component and the target component is relatively short, and the terminal is in this Set a prompt area in the component editing interface. In some embodiments, the terminal determines a prompt area in the component editing interface, and displays the distance between the first component and the target component in the prompt area.

The embodiment of the present disclosure does not limit the setting position of the prompt area. For example, the terminal sets the prompt area above the first component and the target component; or sets the prompt area around the component editing interface. For example, referring to Fig. 8, the first component is component B, the target component is component A, the distance threshold is 10 pixels, and the distance between component B and component A is 4 pixels, then the terminal determines in the component editing interface Prompt area in which the distance between the B component and the A component is displayed.

In this embodiment of the present disclosure, the terminal sets a prompt area in a magnifying glass-like manner to prompt the user the distance between the first component and the target component, so that the user can drag the first component to a desired position based on the distance, and further In this way, the prompt area can be prevented from obscuring other components and affecting editing operations. Moreover, by displaying the prompt area, the user can perform a refined drag operation on the first component only by using a mouse, without using a keyboard or other devices, thereby effectively improving the operation efficiency of component editing.

In step 305, the terminal adsorbs the first component to the target component.

Wherein, after the target component is determined, the terminal adsorbs the first component to the target component. In some embodiments, the terminal adsorbs the first component to the target component when the dragging operation is stopped, for example, the terminal adsorbs the first component when the mouse no longer drags the first component to the target component.

In some embodiments, during the process of dragging the first component based on the dragging operation, since the dragging operation is dragging the first component, the current position of the first component is changed, and the dragging operation The moving speed of the first component may also change. In this case, the terminal re-determines the target component based on the moving speed of the dragging operation and the current position of the first component. The process of the terminal re-determining the target component is the same as the above steps 302-304, and details are not repeated here.

In the embodiment of the present disclosure, when the user wants to adsorb two components together, by dragging one of the components, the terminal can automatically determine the distance between the component and the other components and the dragging speed. A target component, so that the component is automatically adsorbed to the target component, which reduces the adsorption time and improves the operation efficiency of component editing. At the same time, the user only needs to change the moving speed of the drag operation to realize the adsorption of the component to the target component, so that there is no need to continuously use the mouse to operate the component, and there is no need to use devices other than the mouse (such as a keyboard, etc.) to operate. components, thereby effectively improving the operational efficiency of component editing.

FIG. 9 is a flow chart of a method for adsorbing a component according to an exemplary embodiment. As shown in FIG. 9 , the method for adsorbing a component is performed by a terminal, and includes the following steps.

In step 901, the terminal runs a rendering thread, and through the rendering thread, a component editing interface is displayed, and the component editing interface includes a plurality of editable components.

The terminal runs the rendering thread through the rendering engine, displays the plurality of editable components on the display interface of the terminal, and obtains the component editing interface.

In step 902, the terminal runs a calculation thread in response to the drag operation of the first component in the component editing interface, and determines at least one second component through the calculation thread.

Among them, since the operation process of the adsorption operation is only related to the current position and size information of the component, the terminal abstracts the component in the component editing interface into an object with only the current position and size information, that is, the component is input into the calculation engine in the form of pure data, The compute thread is run by the compute engine.

The computing thread is used to determine at least one second component based on the current position and size information of the component. In this step, the implementation of the terminal running the computing thread includes:

In some embodiments, in response to the current terminal supporting a multi-threaded tool, the terminal creates the computing thread by running a script file of the multi-threaded tool, and runs the computing thread.

In this step, in response to the browser in the current terminal supporting Web Workers (multi-threaded tool), the terminal creates a calculation thread by running the script file of the Web Workers, and through the calculation thread, the first component and the component editing interface are Calculate the current position and size information of other components, determine at least one second component, and obtain the operation result.

In other embodiments, in response to the current terminal not supporting the multi-threading tool, the terminal runs the computing thread by means of the server through a communication connection between the current terminal and the server.

Among them, in the case that the terminal does not support Web Workers, the terminal sends a computing thread creation request to the server through the communication connection with the server. In some embodiments, the communication protocol of the communication connection is WebSocket (a communication protocol for full-duplex communication between a terminal and a server). The server receives the calculation thread creation request, creates the calculation thread, and calculates the current position and size information of the first component and other components in the component editing interface through the calculation thread, determines at least one second component, and obtains the calculation result , the server sends the operation result to the terminal, and the terminal receives the operation result.

In the embodiment of the present disclosure, the computing operation is performed by an independent computing thread in the terminal or the server, and then the computing operation is separated from the rendering thread, so that the terminal can make full use of multi-core CPU (processor) resources, and improve the The computational efficiency of the adsorption operation for components is improved.

The implementation of this step is the same as the implementation of step 302, and details are not repeated here.

In step 903, for each second component, the terminal determines the distance between the first component and the second component based on the current position of the first component and the current position of the second component through the calculation thread.

The implementation manner of this step is the same as the implementation manner of step 303, and details are not repeated here.

In step 904, the terminal determines, through the calculation thread, a target component from the at least one second component based on the distance between the first component and each second component and the moving speed of the drag operation.

The implementation of this step is the same as the implementation of step 304, and details are not repeated here.

In step 905, the terminal attaches the first component to the target component through the rendering thread.

For example, the rendering thread adsorbs the first component to the target component in the component editing interface, and displays the adsorption state in the component editing interface.

In the embodiment of the present disclosure, the components in the component editing interface are abstracted into the form of pure data, the target component to be adsorbed with the first component is determined by the computing thread, the interface rendering is performed by the rendering thread, and the The target component performs the adsorption operation on the first component and the target component, so that the determination of the adsorption operation is independent from the rendering thread and completed by the computing thread, that is, the rendering operation and the determination operation are completed through two threads, thereby improving the performance of the target component. Computational efficiency of snapping components.

FIG. 10 is a block diagram of an auxiliary operation device 100 showing a component according to an exemplary embodiment. Referring to FIG. 10 , the apparatus 100 includes: a display unit 1001 , a determination unit 1002 and an adsorption unit 1003 .

The presentation unit 1001 is configured to present a component editing interface, where the component editing interface includes a plurality of editable components;

a determining unit 1002, configured to determine at least one second component in response to a drag operation of the first component in the component editing interface;

The determining unit 1002 is configured to determine a target component from the at least one second component based on the distance between the first component and each second component and the moving speed of the dragging operation;

The adsorption unit 1003 is configured to adsorb the first component to the target component.

In some embodiments, the determining unit 1002 is configured to, in response to a drag operation of the first component in the component editing interface, determine at least one first component from the component editing interface based on the moving direction of the drag operation Two components.

In some embodiments, the determining unit 1002 is configured to, in response to a drag operation of the first component in the component editing interface, based on the moving direction of the drag operation, locate the component editing interface in the moving direction The component above is determined as the second component.

In some embodiments, the determining unit 1002 is configured to, based on the distance between the first component and each second component, from the A target component is determined in at least one second component, and the distance between the first component and the target component is not greater than a distance threshold.

In some embodiments, the apparatus further includes:

The moving unit is configured to reduce the moving speed of the drag operation in response to the slowing down of the moving speed of the drag operation, and remove the first component from the first speed threshold when the moving speed of the drag operation is not greater than the first speed threshold and greater than the second speed threshold The target component is disengaged, and the moving speed of the drag operation is reduced by a first preset multiple to obtain a first moving speed, and the first component is moved based on the first moving speed, wherein the second speed threshold is smaller than the first speed threshold. a speed threshold.

In some embodiments, the moving unit is configured to reduce the moving speed of the dragging operation by a second preset multiple to obtain the second movement when the moving speed of the dragging operation is not greater than a second speed threshold. a speed to move the first component based on the second movement speed, wherein the second speed threshold is less than the first speed threshold;

The moving unit is configured to move the first component based on the moving speed of the drag operation in response to a change in the moving direction of the drag operation and the distance between the first component and the target component is greater than a distance threshold.

In some embodiments, the moving unit is configured to move the first component based on the moving speed of the dragging operation if the moving speed of the dragging operation is greater than the first speed threshold.

In some embodiments, the apparatus further includes:

The prompt unit is configured to determine a prompt area in the component editing interface, and display the distance between the first component and the target component in the prompt area.

In some embodiments, the apparatus further includes:

The running unit is configured to run the rendering thread, and the component editing interface is displayed through the rendering thread;

The running unit is configured to run a calculation thread, through which at least one second component is determined; based on the distance between the first component and each of the second components and the moving speed of the drag operation, from the The target component is determined in at least one second component.

In some embodiments, the running unit is configured to run the calculation thread, and through the calculation thread, based on the moving direction of the dragging operation, the component in the component editing interface that is located in the moving direction is determined as the second components.

In some embodiments, the apparatus further includes:

The creation unit is configured to create the computing thread by running the script file of the multi-threaded tool in response to the current terminal supporting the multi-threaded tool;

The running unit is configured to, in response to the current terminal not supporting the multi-threading tool, run the computing thread by means of the server through the communication connection between the current terminal and the server.

Regarding the apparatus in the above-mentioned embodiment, the specific manner in which each component performs the operation has been described in detail in the embodiment of the method, and will not be described in detail here.

FIG. 11 is a block diagram of a terminal 10 according to an exemplary embodiment. In some embodiments, the terminal 10 is a smart phone, a tablet computer, a notebook computer or a desktop computer, and the like. In some embodiments, terminal 10 is referred to as user equipment, portable terminal, laptop terminal, desktop terminal, and the like by other names.

Generally, the terminal 10 includes: a processor 101 and a memory 102 .

In some embodiments, the processor 101 includes one or more processing cores, such as a 4-core processor, an 8-core processor, and the like. In some embodiments, the processor 101 adopts at least one of DSP (Digital Signal Processing, digital signal processing), FPGA (Field-Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array, programmable logic array). A form of hardware implementation. In some embodiments, the processor 101 also includes a main processor and a co-processor. The main processor is a processor for processing data in a wake-up state, also referred to as a CPU (Central Processing Unit, central processing unit). ; a coprocessor is a low-power processor for processing data in a standby state. In some embodiments, the processor 101 is integrated with a GPU (Graphics Processing Unit, image processor), and the GPU is used for rendering and drawing the content that needs to be displayed on the display screen. In some embodiments, the processor 101 further includes an AI (Artificial Intelligence, artificial intelligence) processor, where the AI processor is used to process computing operations related to machine learning.

In some embodiments, memory 102 includes one or more non-volatile storage media that are non-transitory. In some embodiments, memory 102 also includes high-speed random access memory, and non-volatile memory, such as one or more disk storage devices, flash storage devices. In some embodiments, the non-volatile storage medium in the memory 102 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 101 to implement the adsorption operation method of the component provided by the method embodiment of the present disclosure .

In some embodiments, the terminal 10 may optionally further include: a peripheral device interface 103 and at least one peripheral device. In some embodiments, the processor 101, the memory 102 and the peripheral device interface 103 are connected through a bus or a signal line. In some embodiments, each peripheral device is connected to the peripheral device interface 103 through a bus, signal line or circuit board. Specifically, the peripheral device includes: at least one of a radio frequency circuit 104 , a display screen 105 , a camera assembly 106 , an audio circuit 107 , a positioning assembly 108 and a power supply 109 .

The peripheral device interface 103 may be used to connect at least one peripheral device related to I/O (Input/Output) to the processor 101 and the memory 102 . In some embodiments, processor 101, memory 102, and peripherals interface 103 are integrated on the same chip or circuit board; in some other embodiments, any one of processor 101, memory 102, and peripherals interface 103 or The two are implemented on a separate chip or circuit board, which is not limited in this embodiment.

The radio frequency circuit 104 is used for receiving and transmitting RF (Radio Frequency, radio frequency) signals, also called electromagnetic signals. The radio frequency circuit 104 communicates with the communication network and other communication devices via electromagnetic signals. The radio frequency circuit 104 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals into electrical signals. In some embodiments, radio frequency circuitry 104 includes an antenna system, an RF transceiver, one or more amplifiers, tuners, oscillators, digital signal processors, codec chipsets, subscriber identity module cards, and the like. In some embodiments, radio frequency circuitry 104 communicates with other terminals via at least one wireless communication protocol. The wireless communication protocol includes but is not limited to: World Wide Web, Metropolitan Area Network, Intranet, various generations of mobile communication networks (2G, 3G, 4G and 5G), wireless local area network and/or WiFi (Wireless Fidelity, Wireless Fidelity) network. In some embodiments, the radio frequency circuit 104 further includes a circuit related to NFC (Near Field Communication, short-range wireless communication), which is not limited in the present disclosure.

The display screen 105 is used for displaying UI (User Interface, user interface). In some embodiments, the UI includes graphics, text, icons, video, and any combination thereof. When the display screen 105 is a touch display screen, the display screen 105 also has the ability to acquire touch signals on or above the surface of the display screen 105 . In some embodiments, the touch signal is input to the processor 101 as a control signal for processing. At this time, the display screen 105 is also used to provide virtual buttons and/or virtual keyboards, also called soft buttons and/or soft keyboards. In some embodiments, there is one display screen 105, which is arranged on the front panel of the terminal 10; in other embodiments, there are at least two display screens 105, which are respectively arranged on different surfaces of the terminal 10 or in a folded design; In some embodiments, the display screen 105 is a flexible display screen disposed on a curved or folded surface of the terminal 10 . Even, the display screen 105 is also set as a non-rectangular irregular figure, that is, a special-shaped screen. In some embodiments, the display screen 105 is made of materials such as LCD (Liquid Crystal Display, liquid crystal display), OLED (Organic Light-Emitting Diode, organic light emitting diode).

The camera assembly 106 is used to capture images or video. In some embodiments, the camera assembly 106 includes a front-facing camera and a rear-facing camera. Usually, the front camera is arranged on the front panel of the terminal, and the rear camera is arranged on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth-of-field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth-of-field camera to realize the background blur function, the main camera It is integrated with the wide-angle camera to achieve panoramic shooting and VR (Virtual Reality, virtual reality) shooting functions or other integrated shooting functions. In some embodiments, the camera assembly 106 also includes a flash. In some embodiments, the flash is a single color temperature flash, and in some embodiments, the flash is a dual color temperature flash. Dual color temperature flash refers to the combination of warm light flash and cold light flash, which is used for light compensation under different color temperatures.

In some embodiments, the audio circuit 107 includes a microphone and a speaker. The microphone is used to collect the sound waves of the user and the environment, convert the sound waves into electrical signals, and input them to the processor 101 for processing, or input them to the radio frequency circuit 104 to realize voice communication. For the purpose of stereo collection or noise reduction, in some embodiments, there are multiple microphones, which are respectively disposed at different parts of the terminal 10 . In some embodiments, the microphones are array microphones or omnidirectional collection microphones. The speaker is used to convert the electrical signal from the processor 101 or the radio frequency circuit 104 into sound waves. In some embodiments, the loudspeaker is a conventional thin-film loudspeaker, and in some embodiments, the loudspeaker is a piezoelectric ceramic loudspeaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert electrical signals into sound waves audible to humans, but also convert electrical signals into sound waves inaudible to humans for distance measurement and other purposes. In some embodiments, the audio circuit 107 also includes a headphone jack.

The positioning component 108 is used to locate the current geographic location of the terminal 10 to implement navigation or LBS (Location Based Service). In some embodiments, the positioning component 107 is a positioning component based on the GPS (Global Positioning System, Global Positioning System) of the United States, the Beidou system of China or the Galileo system of Russia.

The power supply 109 is used to power various components in the terminal 10 . In some embodiments, the power source 109 is alternating current, direct current, a disposable battery, or a rechargeable battery. When the power source 109 includes a rechargeable battery, the rechargeable battery is a wired rechargeable battery or a wireless rechargeable battery. Wired rechargeable batteries are batteries that are charged through wired lines, and wireless rechargeable batteries are batteries that are charged through wireless coils. The rechargeable battery is also used to support fast charging technology.

In some embodiments, the terminal 10 further includes one or more sensors 110 . The one or more sensors 110 include, but are not limited to, an acceleration sensor 111 , a gyro sensor 112 , a pressure sensor 113 , a fingerprint sensor 114 , an optical sensor 115 and a proximity sensor 116 .

In some embodiments, the acceleration sensor 111 detects the magnitude of acceleration on the three coordinate axes of the coordinate system established by the terminal 10 . For example, the acceleration sensor 111 is used to detect the components of the gravitational acceleration on the three coordinate axes. In some embodiments, the processor 101 controls the display screen 105 to display the user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 111. In some embodiments, the acceleration sensor 111 is also used for game or user movement data collection.

In some embodiments, the gyro sensor 112 detects the body direction and rotation angle of the terminal 10 , and the gyro sensor 112 cooperates with the acceleration sensor 111 to collect 3D actions of the user on the terminal 10 . The processor 101 can implement the following functions according to the data collected by the gyro sensor 112 : motion sensing (such as changing the UI according to the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.

In some embodiments, the pressure sensor 113 is disposed on the side frame of the terminal 10 and/or the lower layer of the display screen 105 . When the pressure sensor 113 is disposed on the side frame of the terminal 10 , it can detect the user's holding signal of the terminal 10 , and the processor 101 performs left and right hand identification or shortcut operations according to the holding signal collected by the pressure sensor 113 . When the pressure sensor 113 is disposed on the lower layer of the display screen 105 , the processor 101 controls the operability controls on the UI interface according to the user's pressure operation on the display screen 105 . The operability controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

The fingerprint sensor 114 is used to collect the user's fingerprint, and the processor 101 identifies the user's identity according to the fingerprint collected by the fingerprint sensor 114 , or the fingerprint sensor 114 identifies the user's identity according to the collected fingerprint. When the user's identity is identified as a trusted identity, the processor 101 authorizes the user to perform relevant sensitive operations, including unlocking the screen, viewing encrypted information, downloading software, paying, and changing settings. In some embodiments, the fingerprint sensor 114 is disposed on the front, back, or sides of the terminal 10 . When the terminal 10 is provided with a physical button or a manufacturer's logo, the fingerprint sensor 114 is integrated with the physical button or the manufacturer's logo.

The optical sensor 115 is used to collect ambient light intensity. In one embodiment, the processor 101 controls the display brightness of the display screen 105 according to the ambient light intensity collected by the optical sensor 115 . Specifically, when the ambient light intensity is high, the display brightness of the display screen 105 is increased; when the ambient light intensity is low, the display brightness of the display screen 105 is decreased. In another embodiment, the processor 101 also dynamically adjusts the shooting parameters of the camera assembly 106 according to the ambient light intensity collected by the optical sensor 115 .

The proximity sensor 116 , also referred to as a distance sensor, is usually provided on the front panel of the terminal 10 . The proximity sensor 116 is used to collect the distance between the user and the front of the terminal 10 . In one embodiment, when the proximity sensor 116 detects that the distance between the user and the front of the terminal 10 is gradually decreasing, the processor 101 controls the display screen 105 to switch from the bright screen state to the off screen state; 116 When it is detected that the distance between the user and the front of the terminal 10 gradually increases, the processor 101 controls the display screen 105 to switch from the screen-off state to the screen-on state.

Those skilled in the art can understand that the structure shown in FIG. 11 does not constitute a limitation on the terminal 10, and can include more or less components than the one shown, or combine some components, or adopt different component arrangements.

In an exemplary embodiment, a non-volatile storage medium is also provided, when the instructions in the non-volatile storage medium are executed by the processor of the terminal, the terminal can execute the components in the above-mentioned embodiments. adsorption method.

In an exemplary embodiment, a computer program product is also provided, including a computer program/instruction, when the computer program/instruction is executed by a processor, the method for adsorbing the components in the above-mentioned embodiment is implemented.

In addition, the present disclosure provides an adsorption operation method of a component, the method comprising:

In response to the drag operation of the first component in the component editing interface, determining at least one second component to be adsorbed by the first component;

for each second component, determining the distance between the first component and the second component based on the current location of the first component and the current location of the second component;

determining a target component from the at least one second component based on the moving speed of the drag operation and the distance between the first component and each of the second components;

The first component and the target component are adsorbed.

In some embodiments, the determining of at least one second component to be adsorbed by the first component includes:

Based on the moving direction of the drag operation, at least one second component to be adsorbed by the first component is determined from the component editing interface.

In some embodiments, the determining the target component from the at least one second component based on the moving speed of the drag operation and the distance between the first component and each second component includes:

In the case where the moving speed of the drag operation is not greater than the first speed threshold, based on the distance between the first component and each of the second components, from the at least one second component, determine that the distance is not greater than the distance threshold target component.

In some embodiments, the method further includes:

In the case where the moving speed of the drag operation is not greater than the first speed threshold and greater than the second speed threshold, in response to the decrease in the moving speed of the drag operation, the first component and the target component are released from the adsorption state, and reduce the moving speed of the drag operation by a preset multiple, and move the first component based on the reduced moving speed.

In some embodiments, the method further includes:

In the case that the movement speed of the drag operation is not greater than the second speed threshold, reduce the movement speed of the drag operation by a preset multiple, and move the first component based on the reduced movement speed;

In response to the movement direction of the drag operation changing and the distance between the first component and the target component increases to be greater than a distance threshold, the first component is moved based on the movement speed of the drag operation.

In some embodiments, the method further includes:

Running a calculation thread, through the calculation thread, executing the determining of at least one second component to be adsorbed by the first component; for each second component, based on the current position of the first component and the current position of the second component, determine the distance between the first component and the second component; determining the target component from the at least one second component based on the moving speed of the drag operation and the distance between the first component and each second component A step of.

In some embodiments, the running computational thread includes:

In response to the current terminal supporting a multi-threaded tool, the computing thread is created by running the script file of the multi-threaded tool, and the computing thread is run;

In response to the current terminal not supporting the multi-threading tool, the computing thread is run by means of the server through a communication connection between the current terminal and the server.

All the embodiments of the present disclosure can be implemented independently or in combination with other embodiments, which are all regarded as the protection scope required by the present disclosure.

Claims

An adsorption operation method of a component, performed by a terminal, includes:

Displaying a component editing interface, the component editing interface includes a plurality of editable components;

determining at least one second component in response to a drag operation on the first component in the component editing interface;

determining a target component from the at least one second component based on the distance between the first component and each of the second components and the speed of movement of the drag operation;

Snap the first component to the target component.
The component adsorption operation method according to claim 1, wherein the determining at least one second component in response to a drag operation on the first component in the component editing interface comprises:

In response to a drag operation on a first component in the component editing interface, at least one second component is determined from the component editing interface based on a movement direction of the drag operation.
The component adsorption operation method according to claim 1, wherein, in response to a drag operation on the first component in the component editing interface, based on the moving direction of the drag operation, the component is edited from the component. Determining at least one second component in the interface includes:

In response to the drag operation on the first component in the component editing interface, based on the moving direction of the drag operation, determine the component located in the moving direction in the component editing interface as the second component .
The suction operation method for components according to claim 1, wherein said at least one component is obtained from the at least one Determining the target component in the second component includes:

In the case where the moving speed of the drag operation is not greater than a first speed threshold, determining the at least one second component based on a distance between the first component and each of the second components A target component, the distance between the first component and the target component is not greater than a distance threshold.
The adsorption operation method of the assembly according to claim 4, wherein the method further comprises:

In the case where the moving speed of the drag operation is not greater than the first speed threshold and greater than the second speed threshold, in response to the slowing down of the moving speed of the drag operation, the first component is removed from the The target component is disengaged from the top, and the moving speed of the drag operation is reduced by a first preset multiple to obtain a first moving speed, and the first component is moved based on the first moving speed, wherein the second speed threshold is less than the first speed threshold.
The adsorption operation method of the assembly according to claim 4, wherein the method further comprises:

In the case where the moving speed of the drag operation is not greater than the second speed threshold, the moving speed of the drag operation is reduced by a second preset multiple to obtain a second moving speed, and the moving speed is moved based on the second moving speed. the first component, wherein the second speed threshold is less than the first speed threshold;

In response to the movement direction of the drag operation changing and the distance between the first component and the target component is greater than the distance threshold, the first component is moved based on the movement speed of the drag operation.
The adsorption operation method of the assembly according to claim 4, wherein the method further comprises:

In the case where the moving speed of the drag operation is greater than the first speed threshold, the first component is moved based on the moving speed of the drag operation.
The adsorption operation method of a component according to any one of claims 1-7, wherein the method further comprises:

A prompt area is determined in the component editing interface, and the distance between the first component and the target component is displayed in the prompt area.
The adsorption operation method of the assembly according to claim 1, wherein the method further comprises:

Running a rendering thread, and executing the step of displaying the component editing interface through the rendering thread;

Running a computing thread, through which the determining at least one second component is performed; based on the distance between the first component and each of the second components and the moving speed of the dragging operation, from the the step of determining the target component in the at least one second component.
The adsorption operation method of the assembly according to claim 9, wherein the method further comprises:

The calculation thread is run, and the calculation thread is used to perform a step of determining a component located in the moving direction in the component editing interface based on the moving direction of the dragging operation as the second component.
The adsorption operation method of the assembly according to claim 9, wherein the method further comprises:

In response to the terminal supporting a multi-threaded tool, the computing thread is created by running a script file of the multi-threaded tool;

In response to the terminal not supporting the multi-threading tool, the running a computing thread includes running the computing thread by means of the server through a communication connection between the terminal and a server.
An adsorption operation device of a component, comprising:

a presentation unit configured to present a component editing interface, the component editing interface including a plurality of editable components;

a determining unit, configured to determine at least one second component in response to a drag operation on the first component in the component editing interface;

the determining unit configured to determine a target component from the at least one second component based on the distance between the first component and each of the second components and the moving speed of the dragging operation;

The adsorption unit is configured to adsorb the first component to the target component.
The component adsorption operation device according to claim 12, wherein the determining unit is configured to, in response to a drag operation on the first component in the component editing interface, move direction based on the drag operation , and at least one second component is determined from the component editing interface.
The component adsorption operation device according to claim 12, wherein the determining unit is configured to, in response to a drag operation on the first component in the component editing interface, move direction based on the drag operation , and determine the component located in the moving direction in the component editing interface as the second component.
The suction operation device for a component according to claim 12, wherein the determination unit is configured to, in the case where the moving speed of the dragging operation is not greater than a first speed threshold value, based on the relationship between the first component and each The distance between each of the second components, the target component is determined from the at least one second component, and the distance between the first component and the target component is not greater than a distance threshold.
The suction operation device of the assembly according to claim 15, wherein the device further comprises:

a moving unit, configured to slow down the moving speed of the drag operation in response to the slowing down of the moving speed of the drag operation, and move the The first component is detached from the target component, and the moving speed of the dragging operation is reduced by a first preset multiple to obtain a first moving speed, and the first component is moved based on the first moving speed, wherein, The second speed threshold is less than the first speed threshold.
The suction operation device of the assembly according to claim 15, wherein,

The moving unit is configured to reduce the moving speed of the dragging operation by a second preset multiple when the moving speed of the dragging operation is not greater than a second speed threshold to obtain a second moving speed, based on the second movement speed moves the first component, wherein the second speed threshold is less than the first speed threshold;

The moving unit is configured to change the moving direction in response to the drag operation, and the distance between the first component and the target component is greater than the distance threshold, based on the moving speed of the drag operation , move the first component.
The suction operation device of the assembly according to claim 15, wherein,

The moving unit is configured to move the first component based on the moving speed of the drag operation when the moving speed of the drag operation is greater than the first speed threshold.
The adsorption operation device of the assembly according to any one of claims 12-18, wherein the device further comprises:

A prompting unit, configured to determine a prompting area in the component editing interface, and displaying the distance between the first component and the target component in the prompting area.
The suction operation device of the assembly according to claim 12, wherein the device further comprises:

a running unit, configured to run a rendering thread, and display the component editing interface through the rendering thread;

The running unit is configured to run a calculation thread, and through the calculation thread, at least one second component is determined; based on the distance between the first component and each of the second components and the drag operation a speed of movement, the target component is determined from the at least one second component.
The component adsorption operation device according to claim 20, wherein the running unit is configured to run the calculation thread, and the component is edited based on the moving direction of the drag operation through the calculation thread. The component located in the moving direction in the interface is determined as the second component.
The suction operation device of the assembly according to claim 20, wherein the device further comprises:

A creation unit configured to create the computing thread by running a script file of the multi-threaded tool in response to the current terminal supporting the multi-threaded tool;

The running unit is configured to, in response to the current terminal not supporting the multi-threaded tool, run the computing thread by means of the server through a communication connection between the current terminal and the server.
A terminal that includes:

processor;

a memory for storing the processor-executable instructions;

wherein the processor is configured to execute the instructions to implement the following steps:

Displaying a component editing interface, the component editing interface includes a plurality of editable components;

determining at least one second component in response to a drag operation on the first component in the component editing interface;

determining a target component from the at least one second component based on the distance between the first component and each of the second components and the speed of movement of the drag operation;

Snap the first component to the target component.
The terminal of claim 23, wherein the processor is further configured to execute the instructions to implement the steps of:

In response to a drag operation on a first component in the component editing interface, at least one second component is determined from the component editing interface based on a movement direction of the drag operation.
The terminal of claim 23, wherein the processor is further configured to execute the instructions to implement the steps of:

In response to the drag operation on the first component in the component editing interface, based on the moving direction of the drag operation, determine the component located in the moving direction in the component editing interface as the second component .
The terminal of claim 23, wherein the processor is further configured to execute the instructions to implement the steps of:

In the case where the moving speed of the drag operation is not greater than a first speed threshold, determining the at least one second component based on a distance between the first component and each of the second components A target component, the distance between the first component and the target component is not greater than a distance threshold.
The terminal of claim 26, wherein the processor is further configured to execute the instructions to implement the steps of:

In the case where the moving speed of the drag operation is not greater than the first speed threshold and greater than the second speed threshold, in response to the slowing down of the moving speed of the drag operation, the first component is removed from the The target component is disengaged from the top, and the moving speed of the drag operation is reduced by a first preset multiple to obtain a first moving speed, and the first component is moved based on the first moving speed, wherein the second speed threshold is less than the first speed threshold.
The terminal of claim 26, wherein the processor is further configured to execute the instructions to implement the steps of:

In the case where the moving speed of the drag operation is not greater than the second speed threshold, the moving speed of the drag operation is reduced by a second preset multiple to obtain a second moving speed, and the moving speed is moved based on the second moving speed. the first component, wherein the second speed threshold is less than the first speed threshold;

In response to the movement direction of the drag operation changing and the distance between the first component and the target component is greater than the distance threshold, the first component is moved based on the movement speed of the drag operation.
The terminal of claim 26, wherein the processor is further configured to execute the instructions to implement the steps of:

In the case where the moving speed of the drag operation is greater than the first speed threshold, the first component is moved based on the moving speed of the drag operation.
The terminal of any one of claims 23-29, wherein the processor is further configured to execute the instructions to implement the following steps:

A prompt area is determined in the component editing interface, and the distance between the first component and the target component is displayed in the prompt area.
The terminal of claim 23, wherein the processor is further configured to execute the instructions to implement the steps of:

Running a rendering thread, and executing the step of displaying the component editing interface through the rendering thread;

Running a computing thread, through which the determining at least one second component is performed; based on the distance between the first component and each of the second components and the moving speed of the dragging operation, from the the step of determining the target component in the at least one second component.
The terminal of claim 31, wherein the processor is further configured to execute the instructions to implement the steps of:

Running the computing thread, executing the moving direction based on the dragging operation through the computing thread, and after moving the first component in the component editing interface according to the moving direction, the first component can approach The component is identified as the second component step.
The terminal of claim 31, wherein the processor is further configured to execute the instructions to implement the steps of:

In response to the terminal supporting a multi-threaded tool, the computing thread is created by running a script file of the multi-threaded tool;

In response to the terminal not supporting the multi-threading tool, the running the computing thread includes: running the computing thread by means of the server through a communication connection between the terminal and the server.
A non-volatile storage medium, when the instructions in the non-volatile storage medium are executed by a processor of a terminal, the terminal can perform the following steps:

Displaying a component editing interface, the component editing interface includes a plurality of editable components;

determining at least one second component in response to a drag operation on the first component in the component editing interface;

determining a target component from the at least one second component based on the distance between the first component and each of the second components and the speed of movement of the drag operation;

Snap the first component to the target component.
A computer program product, comprising a computer program/instruction, wherein the computer program/instruction, when executed by a processor, implements the following steps:

Displaying a component editing interface, the component editing interface includes a plurality of editable components;

determining at least one second component in response to a drag operation on the first component in the component editing interface;

determining a target component from the at least one second component based on the distance between the first component and each of the second components and the speed of movement of the drag operation;

Snap the first component to the target component.