WO2021098832A1 - Element control method, device, apparatus, and storage medium - Google Patents

Element control method, device, apparatus, and storage medium Download PDF

Info

Publication number
WO2021098832A1
WO2021098832A1 PCT/CN2020/130504 CN2020130504W WO2021098832A1 WO 2021098832 A1 WO2021098832 A1 WO 2021098832A1 CN 2020130504 W CN2020130504 W CN 2020130504W WO 2021098832 A1 WO2021098832 A1 WO 2021098832A1
Authority
WO
WIPO (PCT)
Prior art keywords
operation line
line
canvas
coordinate
touch
Prior art date
Application number
PCT/CN2020/130504
Other languages
French (fr)
Chinese (zh)
Inventor
丁琛
Original Assignee
广州视源电子科技股份有限公司
广州视睿电子科技有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 广州视源电子科技股份有限公司, 广州视睿电子科技有限公司 filed Critical 广州视源电子科技股份有限公司
Publication of WO2021098832A1 publication Critical patent/WO2021098832A1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range

Definitions

  • the embodiments of the present application relate to the technical field of electronic whiteboards, and in particular, to an element control method, device, equipment, and storage medium.
  • This application provides an element control method, device, equipment, and storage medium to solve the technical problem that the alignment control of elements cannot be accurately and reasonably realized in related technologies.
  • an element control method including:
  • the first element When the relative positional relationship between the operation line and the first element satisfies the adsorption condition, the first element is controlled to follow the operation line to move to the second element, and the operation line is relative to the second element When the positional relationship satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
  • the method when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the method further includes:
  • the second element is controlled to follow the operation line to move.
  • the method when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the method further includes:
  • the first element and the second element are both located on the first side of the operation line;
  • the method further includes:
  • the operation line In response to the received second touch operation, move the operation line to the second side of the operation line, and control the first element and the second element to follow the operation line to move, the second The side is the opposite side of the first side.
  • the operation line when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line;
  • the method includes:
  • the displaying the operation line in the canvas includes:
  • an operation line is drawn on the canvas.
  • the method includes:
  • the length of the operation line is adjusted, and the fifth touch operation acts on at least one end point of the operation line.
  • the operation line when the operation line is displayed in the canvas, it further includes:
  • the operation line After the operation line is displayed in the canvas, it includes:
  • the angle of the operation line is adjusted, and the sixth touch operation acts on the rotation point.
  • the operation line when the operation line is displayed in the canvas, it further includes:
  • the operation line After the operation line is displayed in the canvas, it includes:
  • the movement direction indicator is adjusted, and the seventh touch operation acts on the movement direction indicator.
  • a third element is also displayed on the canvas
  • the method further includes:
  • the method further includes:
  • the operation line is controlled to pass through the third element, and the display position of the third element is fixed.
  • the method before or after the operation line is displayed in the canvas, the method further includes:
  • the second element is selected.
  • the adsorption condition is that the operation line is tangent to the element in a set direction, or the operation line coincides with the set contour line of the element.
  • an embodiment of the present application also provides an element control method, including:
  • controlling the first element to move to the second element following the operation line includes:
  • the first element is moved according to the coordinate offset, so that the first element moves to the second element following the operation line.
  • the detecting that the relative positional relationship between the operation line and the first element satisfies an adsorption condition includes:
  • the operation line and the boundary coordinate set are empty.
  • the first element satisfies the adsorption condition.
  • the method further includes:
  • the method before or after the operation line is displayed in the canvas, the method further includes:
  • the first element and the second element are determined according to the display position of each element.
  • an element control device including:
  • the first display module is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
  • the first control module is configured to move the operation wire in response to the received first touch operation
  • the first alignment module is used to control the first element to follow the operation line to move to the second element when the relative positional relationship between the operation line and the first element meets the adsorption condition, and the operation line and When the relative positional relationship of the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
  • an embodiment of the present application also provides an element control device, including:
  • the second display module is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
  • the monitoring module is configured to monitor the movement event of the operation line in response to the received first touch operation
  • the second control module is configured to control the first element to follow the operation line to move to the second element when it is detected that the relative positional relationship between the operation line and the first element satisfies the adsorption condition;
  • the second alignment module is configured to confirm that the first element and the second element are aligned based on the operation line when it is detected that the relative positional relationship between the operation line and the second element satisfies the adsorption condition.
  • an embodiment of the present application also provides an element control device, including:
  • One or more processors are One or more processors;
  • Memory used to store one or more programs
  • the one or more processors When the one or more programs are executed by the one or more processors, the one or more processors implement the element control method according to the first aspect or the element control method according to the second aspect .
  • the embodiments of the present application also provide a computer-readable storage medium on which a computer program is stored.
  • the program is executed by a processor, the element control method as described in the first aspect or the element control method as described in the second aspect is implemented. The element control method described.
  • the above-mentioned element control method, device, equipment and storage medium display the operation line, the first element and the second element in the canvas, and when the first touch operation for the operation line is received, the operation line is moved, and the operation line is If it is confirmed that the relative positional relationship between the operation line and the first element meets the adsorption condition during the movement, when the operation line continues to move to the second element according to the first touch operation, the first element is controlled to follow the operation line and move on the operation line.
  • the relative positional relationship with the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
  • the operation line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operation line through the operation line, which not only realizes the reasonable and accurate alignment control of the elements, but also the realization method is simple, without the user one by one. Manually align the elements.
  • control method of the operation line is flexible, and the length of the operation line can be adjusted through the end point of the operation line to change the moving coverage of the operation line, thereby changing the number of elements to be aligned.
  • the control method of the operation line is flexible, and the length of the operation line can be adjusted through the end point of the operation line to change the moving coverage of the operation line, thereby changing the number of elements to be aligned.
  • you can change the angle of the operating line, and then change the alignment direction.
  • the moving direction of the operating line can be changed through the moving direction indicator to adjust the moving coverage of the operating line.
  • the alignment result is more in line with the user's needs, and the user's experience is improved.
  • FIG. 1 is a flowchart of an element control method provided by an embodiment of this application.
  • FIG. 2 is a first schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 3 is a second schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 4 is a third schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 5 is a fourth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 6 is a fifth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 7 is a flowchart of an element control method provided by an embodiment of this application.
  • FIG. 8 is a sixth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 9 is a seventh schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 10 is an eighth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 11 is a ninth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 12 is a tenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 13 is an eleventh schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 14 is a twelfth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 15 is a thirteenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 16 is a fourteenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 17 is a fifteenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 18 is a sixteenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 19 is a seventeenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 20 is an eighteenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 21 is a nineteenth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 22 is a twentieth schematic diagram of a canvas provided by an embodiment of this application.
  • FIG. 23 is a schematic diagram of the twenty-first canvas provided by an embodiment of this application.
  • FIG. 24 is a flowchart of an element control method provided by an embodiment of this application.
  • FIG. 25 is a flowchart of an element control method provided by an embodiment of this application.
  • FIG. 26 is a schematic structural diagram of an element control device provided by an embodiment of this application.
  • FIG. 27 is a schematic structural diagram of another element control device provided by an embodiment of this application.
  • FIG. 28 is a schematic structural diagram of an element control device provided by an embodiment of this application.
  • first and second are only used to distinguish one entity or operation or object from another entity or operation or object, and do not necessarily require or imply these entities Or any such actual relationship or sequence exists before the operation or object.
  • first and second of the first touch operation and the second touch operation are used to distinguish two different touch operations.
  • the element control method provided in the embodiments of this application can be executed by an element control device, which can be implemented by software and/or hardware.
  • the element control device can be composed of two or more physical entities, or it can be A physical entity constitutes.
  • the element control device may be a smart device such as a computer, a mobile phone, a tablet, or a smart interactive tablet.
  • a smart interactive tablet is used as an element control device for exemplary description.
  • the smart interactive tablet can be an integrated device that controls the content displayed on the display tablet through touch technology and realizes human-computer interaction. It integrates a projector, an electronic whiteboard, a screen, a sound, a TV, and a video conference. One or more functions such as a terminal.
  • the smart interactive tablet includes at least one display screen.
  • the smart interactive tablet is equipped with a display screen with touch function, and the display screen can be a capacitive screen, a resistive screen or an electromagnetic screen.
  • the user can use a finger or a stylus to touch the display screen to achieve a touch operation.
  • the smart interactive tablet detects the touch position, and determines the response plan according to the display content corresponding to the touch position, and then performs Respond to realize the touch function. For example, it is determined that the corresponding display content is a control of a certain function according to the touch position. At this time, the response scheme is to execute the function. It is understandable that in practical applications, users can also implement control operations through keyboards, mice, physical keys, and other methods.
  • the smart interactive tablet may install at least one application program based on the operating system.
  • an application program with a drawing function is used for exemplary description.
  • an electronic whiteboard application with a drawing function is installed in a smart interactive tablet.
  • the application program may be an application program that comes with the operating system, or an application program downloaded from a third-party device or server, and the element control device may also be the application program itself.
  • the application also has other editing functions, such as writing, inserting tables, inserting pictures, inserting multimedia, inserting graphics, and drawing tables.
  • an operable area is provided in the display interface of the application program, and the operable area may be recorded as a canvas, through which an interactive interface for drawing or editing may be displayed to the user.
  • the display position of the canvas can be set according to actual needs. It is understandable that the size of the canvas can be set according to actual conditions, and it can be a finite size or an infinite size.
  • a first coordinate system is established in the canvas, and the origin of the first coordinate system can be set according to actual conditions.
  • the infinite size of the canvas means that the canvas can be infinitely reduced or increased in the coordinate system according to the actual needs of the user.
  • a second coordinate system is established in the display screen, and the origin of the second coordinate system can also be set according to actual conditions.
  • the second coordinate system is a coordinate system with a fixed size.
  • the second coordinate system has a corresponding relationship with the electrical component that detects the touch operation.
  • the electrical component parameter at the corresponding position is detected to change.
  • the smart interactive tablet changes according to the electrical component parameter.
  • the situation determines the coordinate data of the touch operation in the second coordinate system, that is, the touch position of the touch operation is determined, and then, according to the mapping relationship between the second coordinate system and the first coordinate system, it is determined that the touch operation is in the first coordinate system Afterwards, respond to touch operations in the canvas based on the coordinate data.
  • the embodiment of the method for determining the mapping relationship is not limited.
  • the object drawn by the user on the canvas is recorded as an element.
  • the element may be a graphic, text box, table, handwriting, etc. drawn by the user, or a graphic, picture, etc. inserted by the user.
  • the user can edit the element, such as adjusting the element position, element size, element color, etc.
  • each element is generally independent of each other, that is, when the user controls an element, if there is no special restriction, other elements will not be synchronously controlled.
  • the embodiment of the present application takes the running of an application program with a drawing function as an example to describe the element control method.
  • Fig. 1 is a flowchart of an element control method provided by an embodiment of the application.
  • the element control method includes:
  • Step 110 The operation line is displayed in the canvas, and the first element and the second element are also displayed in the canvas.
  • the operation line refers to a line that assists the user in controlling the element, and it may be a straight line or a line segment.
  • the operation line can be drawn by the user or automatically generated by the smart interactive tablet.
  • the process of displaying the operation line can be: when it is detected that the element alignment mode is triggered, enter the element alignment mode, and then receive the user's touch operation, and obtain the touch position based on the touch operation. Then draw operation lines on the canvas according to the touch position.
  • the element alignment mode is only an optional name. In actual applications, it can also be set to alignment mode, adsorption mode, etc.
  • the trigger mode of the element alignment mode can be set according to the actual situation, for example, the trigger control is displayed in the set position of the canvas or in the menu bar, and the trigger element alignment mode is determined when the trigger control is detected to receive a click operation.
  • the process of displaying the operation line may also be: preset a shortcut operation for drawing the operation line, and when a shortcut operation is detected, it is determined to draw the operation line, and the operation line is drawn according to the shortcut operation.
  • the touch position draws operation lines on the canvas.
  • the implementation of the shortcut operation is not limited in this embodiment.
  • the process of displaying the operation line can be: preset the display position of the operation line, where the display position is the coordinate data in the first coordinate system, when it is detected that the element alignment mode is triggered , Based on the preset display position, draw operation lines on the canvas.
  • the display parameters of the operating line can be set by the user or the smart interactive tablet according to the actual situation.
  • the display parameters may include at least one or more of the following: line thickness, line color, and line style.
  • the user in the subsequent operation process, can modify the display parameters according to the actual situation, and the modification method is not limited in the embodiment.
  • the modification control is displayed at the set position of the canvas, and when it is detected that the modification control receives the order After the operation is clicked, the modification interface is displayed.
  • the modification interface covers all or part of the canvas, and the display content can be set according to the actual situation. At this time, the user can modify the display parameters through the modification interface.
  • one operation line is taken as an example for description.
  • the operating line may not pass through any element currently displayed, or pass through one or more elements, or be tangent to one or more elements.
  • the first element and the second element are respectively displayed in the canvas as an example.
  • the first element and the second element are elements that the user expects to be aligned.
  • the first element is the element contacted first during the movement of the operating line
  • the second element is the element contacted later during the movement of the operating line, that is, the element that contacts later than the first element.
  • both the first element and the second element may be at least one.
  • the first element is at least one and the second element is one as an example.
  • the first element and the second element may be determined according to the contact sequence during the movement of the operation line.
  • the first element and the second element may be automatically set by the smart interactive tablet or selected by the user. For example, the element in the moving direction of the operation line is obtained, and the element farthest from the operation line is confirmed as the second element, and other elements are confirmed as the first element.
  • the user is prompted to enter the number of elements to be aligned, and then the same number of elements are obtained in the moving direction of the operation line, and among the obtained elements, the element farthest from the operation line is confirmed as the second element, and the other elements are confirmed Is the first element.
  • the element selected by the selected operation is determined as the second element, and at the same time, the second element is combined with the operation The element between the lines is determined as the first element.
  • the first element and the second element are located on the same side.
  • the operation line is a horizontal line
  • the first element and the second element are located above or below the operation line at the same time.
  • Step 120 In response to the received first touch operation, move the operation line.
  • the user can move the operation line to control the elements through the operation line.
  • the operation of the user moving the operation line is recorded as the first touch operation.
  • the implementation of the first touch operation can be set according to actual conditions. For example, when a touch operation is detected, if it is determined that the touch operation is a drag operation on the operation line, it is confirmed that the first touch operation is received. Afterwards, responding to the first touch operation, that is, the control operation line moves synchronously with the touch position of the first touch operation.
  • the operating line can move in any direction, or move in a set moving direction.
  • the setting operation line moves along the set movement direction.
  • the set moving direction is related to the alignment direction desired by the user, and can be changed at any time according to the actual needs of the user.
  • the first element and the second element are located above the operation line, and at this time, the set moving direction is upward. It is understandable that when the finger is performing a drag operation, it may not move strictly in accordance with the set direction. At this time, the direction range can be set. As long as the user's dragging direction is within the direction range, it is determined that the first Touch operation.
  • the operation line includes a movable direction, which includes the first element and the second element.
  • the set movement direction is the current movable direction.
  • the operation line includes two movable relative directions, and one of the directions includes the first element and the second element.
  • the set moving direction is the direction including the first element and the second element. It can be understood that when there is no first element and/or second element in the moving direction of the operating line, the user can be prompted to modify the operating line so that the moving direction of the operating line includes the first element and the second element.
  • Step 130 When the relative position relationship between the operation line and the first element meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element. When the relative position relationship between the operation line and the second element meets the adsorption condition, the first element and the first element The two elements are aligned based on the operation line.
  • the relative positional relationship between the operating line and each first element is determined in real time.
  • the relative position relationship can be determined by the coordinate set of the operating line in the first coordinate system and the coordinate set of the first element in the first coordinate system.
  • the operation line is controlled to adsorb the first element, that is, the adsorption relationship between the operation line and the first element is established.
  • controlling the operation line to adsorb the first element refers to controlling the first element to follow the operation line to keep the relative positional relationship between the first element and the operation line always satisfying the adsorption condition.
  • the operation line can adsorb at least two first elements successively,
  • the at least two first elements are located on the same side of the operation line after being adsorbed. At this time, it can be considered that the at least two first elements after adsorption are aligned in the linear direction where the operation line is located.
  • the operation line adsorbs the first element
  • the user will continue to perform the first touch operation, that is, control the operation line to move to the second element.
  • the smart interactive tablet controls the operation line and the adsorbed first element to move to the second element according to the first touch operation.
  • the moving direction remains unchanged.
  • the relative position relationship between the operation line and the second element is determined in real time, and when the relative position relationship between the second element and the operation line satisfies the adsorption condition, it is determined that the first element and the second element are aligned based on the operation line.
  • the adsorption conditions corresponding to the second element are the same as the adsorption conditions corresponding to the first element.
  • the adsorption condition can be set according to actual conditions.
  • the set adsorption condition is that the operation line is tangent to the element in the set direction, or the operation line coincides with the set contour line of the element.
  • the tangent of the operation line and the element means that the operation line and the element have only one intersection point. It can be understood that the intersection point may not be equivalent to a first coordinate point or a second coordinate point, and the number of coordinate points occupied by the intersection point is related to the line thickness of the element contour line and the line thickness of the operation line.
  • the intersection point is located in the set direction of the element, where the set direction is related to the moving direction of the operation line.
  • the intersection point of the set direction means that the operation line and the element are independent of each other (that is, there is no overlapping part) and the operation line is along
  • the contour line refers to the outer contour line of the element, which may or may not be displayed in the canvas.
  • the outline of a square is four sides, and the outline of a table is the outer frame.
  • the coordinate set of the element in the first coordinate system is counted, and then the outermost coordinate point in the coordinate set is obtained, and the contour line is determined according to the outermost coordinate point.
  • the overlap of the operation line and the contour line of the element means that some points of the operation line overlap with all the points of a certain contour line of the element, and other points of the operation line are outside the element (that is, other points of the operation line are Elements do not overlap).
  • the setting only determines that the element and the operation line meet the adsorption condition when the operation line coincides with the set contour line of the element.
  • the set contour line refers to the contour line where the operation line and the element overlap for the first time when the operation line and the element are independent of each other (that is, there is no overlapping part) and the operation line moves along the moving direction.
  • the accurate adsorption of the element and the operating line can be ensured.
  • the first element is controlled to follow the operation line to ensure that the operation line is moving. It is always tangent to the first element in the set direction.
  • the other first element is controlled to move synchronously with the operating line to ensure the moving process of the operating line
  • the set contour line of the middle and the other first element always coincides.
  • the adsorption relationship between the second element and the operation line is established.
  • the first element and the second element Both can follow the operation line to move the aligned elements at the same time.
  • the user can cancel the adsorption relationship between the first element and the second element and the operation line.
  • the embodiment of the delete rule is not limited. For example, in the element alignment mode, a delete control is displayed at the set position of the canvas.
  • the delete control When it is detected that the delete control receives a click operation, the operation line and the first element and the operation line and the second element are released The adsorption relationship, and delete the operation line.
  • the operation line receives a setting operation (such as a double-click operation or a long-press operation)
  • it is determined to release the adsorption relationship between the operation line and the currently adsorbed element, and the operation line is deleted.
  • you can also retain the operation line.
  • the canvas setting position displays the adsorption relationship control control.
  • the operation line is released from the current adsorption It can be understood that after the adsorption relationship is released, if you want to control the first element and/or the second element again, you can control the operation line to the first element and the second element based on the first touch operation again.
  • the operation line is controlled to adsorb the first element and the second element. It should be noted that, in the embodiment, one operation line is taken as an example.
  • each operation line can be set with a corresponding adsorption relationship control control or delete control.
  • the display positions of the first element and the second element in the display screen are fixed, that is, the adsorption relationship between the first element and the operation line is cancelled.
  • the first touch operation continues to be performed, neither the first element nor the second element will continue to move with the operation line, so as to achieve the alignment of the elements.
  • the operation line when it is displayed, it may pass through one or more first elements, that is, some points of the operation line are inside the first element.
  • Move the operating line in the direction where the second element is located, or when instructing the user to move the operating line in the opposite direction to the direction where the second element is located determine whether the relative positional relationship between the operating line and the first element meets the adsorption condition, if it meets the adsorption condition, then The adsorption relationship between the operation line and the first element can be established directly. If the adsorption conditions are not met, the operation line can be moved continuously.
  • the first element meets the adsorption condition, if it is detected that the first touch operation is interrupted, the adsorption relationship between the first element and the operation line is maintained, and when the first touch operation is detected again, the first touch operation is controlled.
  • the element moves to the second element following the operation line.
  • FIG. 2 is a first schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 2, four elements are displayed in the current canvas, namely element 11, element 12, element 13, and element 14. At the same time, the operation line 15 is also displayed in the canvas. At this time, the first element is element 11 and element 13, and the second element is element 12.
  • FIG. 3 is a second schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. 3, the finger drags the operation line 15 in the direction indicated by the arrow.
  • the smart interactive tablet detects that the operation line 15 receives the drag operation, it confirms that the first touch operation is received, and the direction of the drag operation is the first The direction in which the first element and the second element are located. After that, respond to the first touch operation, that is, control the operation wire 15 to move along the dragging direction.
  • FIG. 4 is a third schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line.
  • the operation line 15 is determined The relative position relationship with the element 13 satisfies the adsorption condition, and the control element 13 moves following the operation line 15 so that the relative position relationship between the element 13 and the operation line 15 always meets the adsorption condition.
  • the operation line 15 is moved continuously based on the received first touch operation.
  • FIG. 5 is a fourth schematic diagram of the canvas provided by an embodiment of this application, which is a screenshot of the canvas during the movement of the operation line, refer to FIG. 5.
  • the operation line 15 moves to the current position
  • the element 13 moves to the corresponding position synchronously, and it is determined that the relative position relationship between the operation line 15 and the element 11 meets the adsorption condition.
  • the control element 11 moves with the operation line 15 to make the element
  • the relative positional relationship between 11 and the operating wire 15 always satisfies the suction condition.
  • the element 11 and the element 13 are aligned with respect to the operation line 15.
  • the operation line 15 is continued to be moved based on the first touch operation.
  • FIG. 6 is a fifth schematic diagram of the canvas provided by an embodiment of this application. It is a screenshot of the canvas during the movement of the operation line.
  • the element 13 and the element 11 move to the corresponding position synchronously, and it is determined that the relative position relationship between the operation line 15 and the element 12 corresponding to the second element satisfies the adsorption condition. At this time, confirm that the element 11 and element 12 are realized. Aligning the element 13 with respect to the operation line 15 realizes the control and alignment of the elements through the operation line.
  • the operation line is moved. If the relative position relationship of the elements meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element to keep the relative position relationship between the first element and the operation line unchanged. Later, when the relative position of the second element and the operation line When the relationship satisfies the adsorption condition, confirm that the first element and the second element are aligned based on the operation line.
  • the operation line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operation line through the operation line, which not only realizes reasonable and accurate alignment control of the elements, but also the alignment control process is simple and easy to operate , There is no need for the user to manually align each element one by one, which improves the user experience.
  • the setting further includes: controlling the second element to move along the operation line.
  • the smart interactive tablet continues to detect the first touch operation, and controls the first touch operation according to the first touch operation.
  • the element and the second element continue to move following the operation line.
  • the way of controlling the movement of the second element following the operation line is the same as the way of controlling the movement of the first element following the operation line.
  • the setting further includes: fixing the display positions of the first element and the second element.
  • the smart interactive tablet when the first element and the second element are aligned based on the operation line, regardless of whether the user continues to move the operation line, the smart interactive tablet will cancel the adsorption relationship between the first element and the operation line, and there is no need to establish the second element The adsorption relationship with the operating line. That is, the display positions of the first element and the second element in the canvas are fixed.
  • the display position of the first element and the second element is fixed to prompt the user that the current first element and the second element are aligned. It can be understood that after the display position is fixed, the user can adjust the display positions of the first element and the second element according to actual needs.
  • Fig. 7 is a flowchart of an element control method provided by an embodiment of the application. This embodiment is embodied on the basis of the above-mentioned embodiment. In one embodiment, it is assumed that both the first element and the second element are located on the first side of the operation line. Referring to FIG. 7, in one embodiment, the provided element control method includes:
  • Step 210 Display the operation line in the canvas, and the first element and the second element are also displayed in the canvas.
  • the operation line drawn by the user is taken as an example for description.
  • the step includes step 211 to step 212.
  • Step 211 In response to the received element alignment trigger instruction, enter the element alignment mode.
  • the element alignment trigger instruction is used to trigger the element alignment mode.
  • the trigger mode of the element alignment trigger instruction can be set according to the actual situation.
  • the display of the trigger control at the set position of the canvas is taken as an example.
  • the trigger control receives a click operation
  • the user cannot perform operations such as writing and drawing on the canvas. It can be understood that before entering the element alignment mode, the first element and the second element are displayed in the canvas.
  • the user can exit the element alignment mode at any time according to actual needs.
  • the embodiment of the way of exiting the element alignment mode is not limited. For example, when it is detected that the trigger control receives a click operation again, it is determined that the element alignment exit instruction is received, and the element alignment mode is exited in response to the element alignment exit instruction. Among them, the element alignment exit instruction is used to exit the element alignment mode.
  • the operation line displayed in the current canvas, the operation line is deleted synchronously when the element alignment mode is exited.
  • the aforementioned controls are deleted synchronously.
  • Step 212 In response to the received fourth touch operation, draw an operation line on the canvas.
  • the fourth touch operation is a touch operation of drawing an operation line.
  • the fourth touch operation is received, and real-time The touch position of the fourth touch operation is determined, and then the operation line is drawn in the touch position.
  • the user needs to modify the length of the operation line to adjust the moving coverage of the operation line.
  • the mobile coverage refers to the range that the operating line passes when it moves. Accordingly, after setting to perform step 210 in the embodiment, it further includes: in response to the received fifth touch operation, adjusting the length of the operation line, where the fifth touch operation acts on at least one end point of the operation line.
  • At least one end point of the operating wire can be used as an adjustment point for adjusting the length of the operating wire.
  • the description is made by taking the two end points as adjustment points as an example.
  • both ends of the operation line can be highlighted.
  • FIG. 8 is a sixth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 8, when the operation line 21 in the canvas is displayed, its two end points (end point 22 and end point 23) are highlighted.
  • the user can perform a touch operation on one adjustment point or two adjustment points to achieve length adjustment.
  • the user performs a touch operation on an adjustment point as an example.
  • the fifth touch operation is an operation for adjusting the length of the operation line.
  • the implementation manner of the fifth touch operation is not limited in the embodiment. For example, when it is detected that a drag operation is received at a certain adjustment point, it is determined that the fifth touch operation is received. For another example, if it is detected that a click operation is received at a certain adjustment point, and then the click operation is received again in another position of the canvas, it is determined that the fifth touch operation is received. In the embodiment, the drag operation is taken as an example.
  • the coordinate data of the current touch position of the fifth touch operation in the first coordinate system is acquired in real time, and then the coordinate data is determined in the line where the operation line is located. For the corresponding coordinate point, control the operating line to move the adjustment point to the coordinate point, and simultaneously adjust the length of the operating line to make the two endpoints continuous.
  • the adjustment point can be directly moved to the coordinate point corresponding to the coordinate data. If the fifth touch operation does not strictly move on the line where the operation line is located, it is necessary to determine the coordinate point corresponding to the coordinate data in the line where the operation line is located.
  • the embodiment of the method for determining the coordinate point is not limited, for example, Find the coordinate point closest to the coordinate data in the straight line. For another example, when the vertical line of a certain coordinate point of the set straight line passes through the coordinate data, the coordinate point is determined as the coordinate point corresponding to the coordinate data.
  • FIG. 9 is a seventh schematic diagram of a canvas provided by an embodiment of this application.
  • the operation line 21 when the operation line 21 is displayed, the end point 22 and the end point 23 are highlighted. At this time, the moving coverage of the operation line 21 is shown in shade.
  • the endpoint 22 has received the fifth touch operation, and the dragging direction is shown by the arrow in FIG. 9. At this time, the length of the operation line 21 is modified according to the coordinate data of the fifth touch operation.
  • FIG. 10 is an eighth schematic diagram of a canvas provided by an embodiment of the application, which is a screenshot of the canvas at a certain time in the process of responding to the fifth touch operation. Referring to FIG.
  • the length of the operation line 21 is extended according to the coordinate data of the fifth touch operation. At this time, compared to FIG. 9, the moving coverage area of the operating wire 21 in FIG. 10 is significantly increased. It is understandable that the moving coverage, fingers and arrows appearing in the above figures are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
  • step 210 when step 210 is set to be executed in the embodiment, it is also executed: display the rotation point, and the rotation point and the operation line satisfy the first set position relationship. And after step 210 is performed, the method further includes: in response to the received sixth touch operation, adjusting the angle of the operation line, the sixth touch operation acting on the rotation point.
  • the rotation point is a reference point for adjusting the angle of the operating line.
  • the alignment direction of the elements can be adjusted by adjusting the angle of the operation line.
  • the angle of the operating line is adjusted by rotating the point.
  • the rotation point when the operation line is displayed, the rotation point is displayed synchronously. Or, when the operation line receives a setting operation (such as a single-click operation or a double-click operation, etc.), the rotation point is displayed.
  • the rotation point and the operation line satisfy the first set position relationship.
  • the first set position relationship can be set according to actual conditions.
  • FIG. 11 is a ninth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG.
  • FIG. 12 is a tenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 12, when the operation line 26 is displayed on the canvas, the rotation point 27 is simultaneously displayed, and the rotation point 27 is located directly above the end point on one side of the operation line 26. In the embodiment, the rotation point is located directly above the middle point of the operation line as an example.
  • the sixth touch operation is an operation for adjusting the angle of the operation line, which acts on the rotation point.
  • the implementation manner of the sixth touch operation is not limited in the embodiment.
  • the rotation point is located directly above the middle point of the operation line.
  • the intermediate point can be considered as the center of rotation of the operating wire.
  • the connection line between the rotation point and the rotation center is perpendicular to the operation line.
  • the current touch position during the movement of the sixth touch operation is acquired in real time, and the coordinate data of the current touch position in the first coordinate system is confirmed, and then the rotation angle is determined based on the coordinate data and the rotation point, And take the middle point of the operation line as the center, and rotate the operation line based on the rotation angle to realize the change of the angle of the operation line.
  • the calculation method for determining the rotation angle based on the coordinate data and the rotation point can be set according to the actual situation. For example, determine the line between the coordinate data and the center of rotation, and the line between the rotation point and the center of rotation, and then obtain the angle between the two lines and use it as the angle of rotation.
  • FIG. 13 is an eleventh schematic diagram of a canvas provided by an embodiment of this application.
  • the operation line 24 is displayed on the canvas, the rotation point 25 is displayed synchronously. It is detected that the rotation point 25 has received the sixth touch operation, and the moving direction is shown by the arrow in FIG. 13.
  • the angle of the operation line 24 is modified according to the coordinate data of the sixth touch operation.
  • FIG. 14 is a twelfth schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas at a certain time during the sixth touch operation process. Referring to FIG. 14, the angle of the operation line 24 is modified according to the coordinate data of the sixth touch operation. Compared with FIG. 13, the angle of the operation line 25 in FIG.
  • step 210 when step 210 is set to be executed in the embodiment, it is also executed: display the movement direction indicator, the movement direction indicator and the operation line meet the second set position relationship, and the movement direction indicator is used to indicate the movement direction of the operation line. And after step 210 is performed, the method further includes: in response to the received seventh touch operation, adjusting the movement direction indicator, and the seventh touch operation acts on the movement direction indicator.
  • the movement direction identifier is used to indicate the movement direction of the operation line.
  • the logo style of the movement direction logo can be set according to actual conditions.
  • the movement direction indicator and the operation line satisfy the second set positional relationship.
  • the content of the second set position relationship can be set according to actual conditions.
  • FIG. 15 is a thirteenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 15, the movement direction indicator 28 is set at one end of the operation line 29 and indicates that the movement direction is a vertical downward direction and a vertical upward direction. At this time, the smart interactive tablet can determine the vertical downward direction as the set moving direction according to the position of the element. For another example, the movement direction indicator is set at a set distance above the middle of the operating line.
  • the seventh touch operation is an operation for rotating the movement direction indicator, which acts on the movement direction indicator.
  • the implementation manner of the seventh touch operation is not limited in the embodiment. For example, when a movement operation with a movement direction indicator as a starting point is detected, it is determined that the seventh touch operation is received.
  • the current touch position during the movement of the seventh touch operation is acquired in real time, and the coordinate data of the current touch position in the first coordinate system is confirmed, and then the center point identified based on the coordinate data and the movement direction After determining the rotation angle, the center point of the movement direction indicator is used as a reference, the movement direction of the seventh touch operation is used as the rotation direction, and the movement direction indicator is rotated based on the rotation angle.
  • the calculation method of the rotation angle can be set according to the actual situation. For example, set the vertical line where the center point of the movement direction indicator is located to 0°, obtain the connection line between the coordinate data and the center point, and use the angle between the connection line and the vertical line as the rotation angle.
  • FIG. 16 is a fourteenth schematic diagram of a canvas provided by an embodiment of this application.
  • the movement direction indicator 28 is displayed synchronously, and the movement direction is a vertical downward and upward direction. At this time, the movement coverage of the operation wire 29 is shown by the shade.
  • it is detected that the movement direction indicator 28 receives the seventh touch operation and the movement direction is shown by the arrow in FIG. 16. At this time, the movement direction indicator 28 is rotated according to the seventh touch operation.
  • FIG. 17 is a fifteenth schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas at a certain time during the seventh touch operation process. Referring to FIG.
  • the moving direction indicator 28 is rotated according to the coordinate data of the seventh touch operation. Compared with FIG. 16, the moving direction indicator 28 in FIG. 17 has changed. Therefore, the moving direction has changed. At this time, the moving coverage area follows the movement. The direction changes synchronously. It is understandable that the moving coverage, fingers and arrows appearing in the above figures are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
  • the endpoints, rotation points, and movement direction identifiers used to modify the length of the operation line can be displayed simultaneously when the operation line is displayed, or can be displayed again when the display instruction is received.
  • the trigger mode and trigger time of the display instruction are not limited in this embodiment. For example, setting a display control, when it is detected that the display control receives a click operation, it is determined that a display instruction is received. For another example, when the operation line receives a setting operation (such as a single-click operation or a double-click operation, etc.), it is determined that the display instruction is received.
  • the end point, the rotation point, and the movement direction indicator can be displayed at the same time using the same display instruction.
  • the endpoint, rotation point and movement direction indicator can be displayed separately using different display instructions.
  • the movement direction indicator can be adjusted synchronously, that is, when the angle is adjusted, the relative position relationship between the movement direction indicator and the operation wire is kept unchanged.
  • the moving direction indicator may be fixed, that is, when adjusting the angle, the relative positional relationship between the moving direction indicator and the operating line is kept unchanged.
  • Step 220 In response to the received ninth touch operation, the second element is selected.
  • the second element is set to be selected by the user.
  • the touch operation of selecting the second element is recorded as the ninth touch operation.
  • the embodiment of the trigger mode of the ninth touch operation is not limited. For example, when it is detected that any element receives a double-click operation, a single-click operation, or a long-press operation, it is confirmed that the ninth touch operation is received. After that, it is confirmed whether the element is located in the moving direction of the operating line, and if it is located in the moving direction of the operating line, the element is confirmed as the second element, and the set direction is verified at the same time. Otherwise, the user is prompted to reselect the second element.
  • the smart interactive tablet can determine the element between the second element and the operation line as the first element. It can be understood that the advantage of artificially selecting the second element is that the smart interactive tablet can clarify the elements that the current user expects to be aligned. When the second element is aligned, if the operation line continues to move and meets the adsorption condition with other elements, other elements will be ignored. That is, when the operation line and the second element meet the adsorption conditions, it is not checked whether the operation line and other elements meet the adsorption conditions.
  • the user can also select the first element.
  • the selection method of the first element may be different or the same as the selection method of the second element.
  • the element selected by the user that is farthest from the operation line can be determined as the second element, and the remaining elements can be determined as the first element.
  • Step 230 In response to the received first touch operation, move the operation line.
  • Step 240 When the relative position relationship between the operation line and the first element meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element. When the relative position relationship between the operation line and the second element meets the adsorption condition, the first element and the first element The two elements are aligned based on the operation line.
  • step 230 and step 240 can be regarded as moving to the first side of the operation line.
  • Step 250 In response to the received second touch operation, move the operation line to the second side of the operation line, and control the first element and the second element to follow the operation line.
  • the second side is the opposite side of the first side.
  • the setting operation line can also move in the opposite direction of the direction where the second element is located, that is, move to the second side of the operation line.
  • the second touch operation is an operation of controlling the operation line to move to the second side. Since the second side is the opposite side of the first side, the touch mode between the second touch operation and the first touch operation is the same, and the touch direction is opposite. It can be understood that the first touch operation and the second touch operation may be different operations, that is, the user may perform the first touch operation first and then perform the second touch operation.
  • the first touch operation and the second touch operation can also be the same touch operation, that is, when the second element is aligned with the first element, the user can move the operation line to the second side without leaving the screen.
  • the smart interactive tablet determines to change from the first touch operation to the second touch operation.
  • FIG. 18 is a sixteenth schematic diagram of the canvas provided by an embodiment of the application, which is an interface diagram of the canvas after the operation line is moved to the first side thereof.
  • the direction of the first side is a vertical downward direction.
  • the first element 202, the first element 204 and the second element 203 are adsorbed by the operation line 201 and aligned based on the operation line 201.
  • the smart interactive tablet detects that the operation line 201 receives a drag operation, and the drag operation points to the second side of the operation line, confirms that the second touch operation is received, and responds to the second touch operation.
  • FIG. 19 is a seventeenth schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. From FIG. 19, it can be seen that the first element 202, the first element 204, and the second element The element 203 follows the operation line 201 to move to the second side. It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
  • the adsorption relationship control control on the line where the operation line is located. If the adsorption relationship control control is not selected, when the operation line moves to the second side, the first element and the second element do not follow the movement, that is, the operation line Cancel the adsorption relationship with the first element and the second element. If the adsorption relationship control control is selected, when the operation line moves to the second side, the first element and the second element follow the movement. It is understandable that no matter whether the adsorption relationship control control is selected, when the operation line moves to the first side, as long as the relative position relationship between the first element and the operation line satisfies the adsorption condition, the first element can move synchronously with the operation line.
  • the operation line can also be set to move in any direction other than the first direction.
  • the first element can move arbitrarily following the operation line.
  • the operation line is moving, if Confirm that the relative position relationship between the operation line and the first element meets the adsorption condition, then control the first element to follow the operation line to keep the relative position relationship unchanged.
  • the relative position relationship between the operation line and the second element meets the adsorption condition, confirm The first element and the second element are aligned based on the operation line.
  • the operation line is moved along the second side of the operation line, and the first element and the second element are controlled.
  • Elements move synchronously with the operating line to keep the relative positional relationship unchanged.
  • the operating line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operating line through the operating line, and the alignment control can be realized reasonably and accurately.
  • the implementation method is simple, no need for the user to manually align each element one by one.
  • the aligned elements can also be moved through the operation line, so that the elements are displayed in the desired position of the user.
  • the control method of the operation line is flexible, and the length of the operation line can be adjusted through the end point of the operation line to change the moving coverage of the operation line, thereby changing the number of elements to be aligned.
  • the movable direction of the operating line can be changed through the moving direction indicator to adjust the moving range of the operating line.
  • the alignment result is more in line with the user's needs, and the user's experience is improved.
  • the embodiment sets that when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line. At the same time, it is set in response to the received first touch.
  • Operation before moving the operating line, it further includes: in response to the received third touch operation, moving the operating line to the second side of the operating line, the intersection point of the operating line and the first element is empty or the operating line and the first element When the adsorption conditions are satisfied, it is confirmed that the operation line leaves the inner area of the first element, and the second side is the opposite side of the first side.
  • the operation line may pass through one first element or multiple first elements.
  • the operation line passing through the inner area of the element means that some points of the operation line coincide with the coordinates of the inner area of the element.
  • the user wants to include the first element currently passing through in the elements to be aligned he can move the operation line to the second side of the operation line to make the first element and the operation line meet
  • the adsorption conditions are such that the operating line leaves the inner area of the first element.
  • the touch operation of moving the operation wire to the second side is recorded as the third touch operation.
  • the third touch operation is implemented in the same manner as the second touch operation.
  • the process of setting the operation line movement includes two scenarios:
  • the operation line and the first element cannot be adsorbed. At this time, set the adsorption to the element only when the operation line moves to the first side. In this case, the user only needs to control the movement of the operation line so that all the first elements are located on the first side of the operation line (that is, the operation line leaves the inner area of the first element).
  • the inner area of the operation line leaving the first element includes two types. One is that the operation line does not overlap with the first element, that is, the intersection point of the operation line and the first element is empty, and the other is that the operation line and the first element are empty.
  • One element satisfies the adsorption condition, that is, when the operating line moves to the first side, the first element can be adsorbed.
  • FIG. 20 is an eighteenth schematic diagram of a canvas provided by an embodiment of this application.
  • the operation line 205 when the operation line 205 is displayed in the canvas, it passes through the first element 206.
  • the smart interactive tablet detects that the operation line 205 receives the drag operation, and the drag operation points to the second side of the operation line, confirms that the third touch operation is received, and responds to the third touch operation, that is, control the operation line 205 to move along The movement direction of the second side moves so that the operation wire 205 leaves the inner area of the first element 206.
  • FIG. 21 is a nineteenth schematic diagram of the canvas provided by an embodiment of the application, which is a schematic diagram of the canvas after the operation line is moved. It can be seen from FIG. 21 that the operation line 205 leaves the inner area of the first element 206. It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
  • the operation line and the first element can be adsorbed.
  • the relative position relationship between the first element and the operation line is obtained in real time, and when the relative position relationship meets the adsorption condition, the first element is controlled to follow the movement direction of the operation line along the second side Move synchronously.
  • all the first elements are located on the first side of the operating line.
  • the confirmation method of the relative position relationship is the same as the confirmation method of the relative position relationship between the first element and the operation line.
  • the adsorbed first element follows the operation line to move along the first side or the second side.
  • FIG. 20 is an eighteenth schematic diagram of a canvas provided by an embodiment of this application.
  • the operation line 205 when the operation line 205 is displayed in the canvas, it passes through the first element 206.
  • the smart interactive tablet detects that the operation line 205 receives the drag operation, and the drag operation points to the second side of the operation line, confirms that the third touch operation is received, and responds to the third touch operation, that is, control the operation line 205 to move along The moving direction of the second side moves so that the operation wire 205 leaves the inner area of the first element 206.
  • the relative positional relationship between the operating wire 205 and the first element 206 is detected in real time.
  • FIG. 22 is a schematic diagram of the twentieth canvas provided by an embodiment of the application. It is a schematic diagram of the canvas when the relative positional relationship between the operation line 205 and the first element 206 satisfies the adsorption relationship. At this time, control the first The element 206 follows the operation line 205 to move along the second side or the first side. In FIG. 22, the movement of the second side is taken as an example.
  • FIG. 23 is a schematic diagram of the twenty-first canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. Referring to FIG.
  • first touch operation and the third touch operation may be different operations, that is, the user may perform the third touch operation first and then perform the first touch operation.
  • first touch operation and the third touch operation can also be the same touch operation, that is, when the operation line leaves the inner area of the first element, the user may not leave the screen, but continue to move along the first side. Line, at this time, the smart interactive tablet determines to change from the third touch operation to the first touch operation.
  • an element passed by the operation line may not be the element that the user expects to align.
  • the user can fix the display position of the element so that the operation line and the element
  • the third element is set to be displayed on the canvas; after the operation line is displayed in the canvas, it also includes: in response to the received eighth touch operation, setting the third element to a fixed state; in response to the received The first touch operation, when the operation line is moved, further includes: controlling the operation line to pass through the third element, and the display position of the third element is fixed.
  • the element that will pass during the movement of the operation line but does not need to be aligned is recorded as the third element, and the corresponding state is recorded as the fixed state.
  • the user before or after the operation line is displayed, the user can select the third element through a set touch operation.
  • the set touch operation is recorded as the eighth touch operation.
  • the trigger mode of the eighth touch operation can be set according to actual conditions, such as a long-press operation and a double-click operation for an element.
  • the touch mode of the eighth touch operation is different from the trigger mode of the ninth touch operation.
  • the third element After the third element is selected, in the process of moving the operation line according to the first touch operation, there is no need to confirm the relative position relationship between the operation line and the third element. That is, the third element will not follow the operation line to move. At this time, the display position of the third element in the canvas is fixed. It can be understood that after the display position of the third element is fixed, in addition to the first touch operation, touch operations of other moving operation lines will not trigger the smart interactive tablet to confirm the relative position relationship between the operation line and the third element. It should be noted that the embodiment of the arrangement sequence between the first element and the third element is not limited.
  • the smart interactive tablet cancels the fixed state of the third element, that is, the third element Classified as the first element or the second element.
  • the process of moving the operation line it is necessary to confirm the relative positional relationship between the operation line and the third element, and when the adsorption condition is satisfied, control the third element to follow the operation line to move.
  • the advantage of setting the third element is that it can make the selection of alignment elements more flexible and enhance the user's interactive experience.
  • FIG. 24 is a flowchart of an element control method provided by an embodiment of this application.
  • the element control method provided in this embodiment and the element control method provided in the foregoing embodiment are applied in the same scenario.
  • the element control method provided by this embodiment includes:
  • Step 310 Display the operation line in the canvas, and the first element and the second element are also displayed in the canvas.
  • Step 320 In response to the received first touch operation, monitor the movement event of the operation line.
  • the start position of the touch operation in the first coordinate system is obtained, and if it is determined that the start position is on the operation line, and the touch If the dragging direction of the operation is the direction where the first element and the second element are located, it is determined that the first touch operation is received.
  • the control operation line moves along the dragging direction following the first touch operation, that is, the movement event is executed.
  • the smart interactive tablet continues to monitor mobile events.
  • monitoring the movement event refers to real-time confirmation of the coordinate set (position) of the operation line in the first coordinate system, and the coordinate set (position) of the first element and the second element in the first coordinate system is performed with this position. Compare to confirm the relative position relationship.
  • the smart interactive tablet determines the moving coverage of the operation line according to the length, angle, and set direction of the operation line, and confirms the first element and the second element.
  • the mobile coverage range may be a coordinate range in the first coordinate system.
  • Step 330 When it is detected that the relative position relationship between the operation line and the first element satisfies the adsorption condition, the first element is controlled to follow the operation line to move to the second element.
  • the relative position relationship between the operation line and each first element is calculated in real time, and it is determined whether the relative position relationship satisfies the adsorption condition.
  • the adsorption condition is that the operation line is tangent to the first element in the set direction, or the operation line coincides with the set contour line of the first element.
  • Step 340 When it is detected that the relative position relationship between the operation line and the second element meets the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
  • the smart interactive tablet when the operation line continues to be moved, continues to monitor the movement event, and in the monitoring process, calculates the relative position relationship between the operation line and the second element in real time, and determines whether the relative position relationship satisfies the adsorption condition.
  • the adsorption condition is that the operation line is tangent to the second element in the set direction, or the operation line coincides with the set contour line of the second element.
  • the operation line is controlled to move, and the movement event of the operation line is monitored. If the operation line and the canvas are monitored.
  • control each first element to follow the operation line to move to the second element, and confirm the first element when the relative position relationship between the operation line and the second element meets the adsorption condition The technical solution for aligning the first element and the second element based on the operation line can realize the setting of the operation line according to the actual needs of the user, and the alignment of multiple elements based on the operation line, which not only achieves reasonable and accurate alignment control, but also The calculation process is simple and the amount of calculation is small. At the same time, the user does not need to manually align each element one by one, which improves the user experience.
  • the method further includes: releasing the adsorption relationship between the first element and the operation line and the adsorption relationship between the second element and the operation line.
  • the display positions of the first element and the second element in the canvas can be fixed. That is, the adsorption relationship between the first element and the operation wire and the adsorption relationship between the second element and the operation wire are released. At this time, even if the operation line continues to move, the first element and the second element will not follow the operation line.
  • the user can also manually cancel the adsorption relationship.
  • the smart interactive tablet controls the first element and the second element to move along with the operation line.
  • the current display positions of the first element and the second element in the canvas are fixed.
  • the embodiment of the manner of manually releasing the adsorption relationship is not limited. For example, show the snap control. When it is detected that the adsorption control receives a click operation, it is determined to remove the elements that currently have the adsorption relationship on the operation line.
  • the adsorption relationship is automatically released when the second element meets the adsorption condition, the adsorption relationship between the second element and the operation line may not be established. At this time, it is only necessary to release the adsorption relationship between the first element and the operating line.
  • the alignment method is made more flexible and the user's interactive experience is improved.
  • FIG. 25 is a flowchart of an element control method provided by an embodiment of this application. This embodiment is embodied on the basis of the above-mentioned embodiment. Referring to FIG. 25, the element control method provided by this embodiment includes:
  • Step 401 Display the operation line in the canvas, and the first element and the second element are also displayed in the canvas.
  • Step 402 Confirm the moving direction of the operation line.
  • the operation line when the operation line is drawn, the operation line has a moving direction.
  • the movement direction indicator when the movement direction indicator is displayed on the operation line, the movement direction indicator can be used to make the user know the moving direction. It can be understood that when the operating line can move in both directions, one of the two moving directions can be selected, or, based on the number of elements in each moving direction, the moving direction with a larger number of elements is selected as the currently confirmed moving direction .
  • Step 403 In the canvas, obtain each element located in the moving direction.
  • the moving coverage of the operating line in the canvas can be determined according to the moving direction, the angle and length of the operating line, and then combining the display position of each element in the canvas to obtain each element located in the moving coverage, And confirm it as an element in the moving direction.
  • Step 404 Determine the first element and the second element according to the display position of each element.
  • the display position of each element in the moving coverage area on the canvas it is possible to combine the display position of each element in the moving coverage area on the canvas, and obtain the element farthest from the operation line as the second element, and the remaining elements as the first element.
  • the user may also select the first element and/or the second element.
  • the first element in addition to the first element, the element closest to the operation line is recorded as the second element.
  • the second element the element between the second element and the operation line is recorded as the first element.
  • step 402 to step 404 may be executed before the operation line is displayed.
  • Step 405 In response to the received first touch operation, monitor the movement event of the operation line.
  • Step 406 Obtain a first coordinate set of the operation line and a second coordinate set of the first element.
  • the second coordinate set includes a boundary coordinate set and an internal coordinate set.
  • the first coordinate set is a coordinate set of the operation line in the first coordinate system
  • the second coordinate set is a coordinate set corresponding to the first element in the first coordinate system.
  • Each first element corresponds to a second coordinate set. Both the first coordinate set and the second coordinate set are obtained by monitoring the movement event.
  • the second coordinate set includes a boundary coordinate set and an internal coordinate set. Wherein, when the first element displays the contour line, the boundary coordinate set is the coordinate set of the contour line in the first coordinate system, and the internal coordinate set is the coordinate set excluding the boundary coordinate set in the second coordinate set. When the first element does not display the contour line, the boundary coordinate set is the outermost coordinate set in the second coordinate set, and the internal coordinate set is the coordinate set excluding the boundary coordinate set in the second coordinate set, that is, the coordinate set of the internal area of the element.
  • Step 407 If it is confirmed that there is coincident coordinate data between the first coordinate set and the boundary coordinate set in the set direction, and the intersection of the first coordinate set and the internal coordinate set is empty, it is determined that the operation line and the first element satisfy the adsorption condition.
  • the set of boundary coordinates in the set direction refers to a set of extreme coordinate points in the set direction in the set of boundary coordinates, where the set direction is related to the moving direction of the operating line. For example, if the moving direction is the negative semi-axis direction of the y-axis, then the direction is set to the positive semi-axis direction of the y-axis relative to the first element. At this time, after obtaining the boundary coordinate set, confirm that the coordinate with the largest y value is the extreme Value coordinate points, and the boundary coordinate set in the set direction is composed of extreme coordinate points. Wherein, there is at least one extreme coordinate point in the boundary coordinate set in the set direction.
  • the first coordinate set when the operation line moves to the first element, the first coordinate set first meets the boundary coordinate set of the first element in the set direction. Therefore, it is possible to confirm whether the operation line and the element satisfy the adsorption condition by setting the boundary coordinate set in the direction.
  • the first coordinate set is compared with the second coordinate set of each first element to determine whether the first coordinate set and the second coordinate set have overlapping coordinate data, If there is overlapping coordinate data, it means that the operation line has been in contact with the corresponding first element. At this time, it is determined whether the overlapping coordinate data is a set of boundary coordinates in the set direction. If yes, it means that at least one point in the operation line overlaps with the contour line of the first element.
  • the operation line is first in contact with the set of boundary coordinates of the element in the set direction. Therefore, in the process of performing the first touch operation, it is only necessary to determine the position of the operation line. If duplicate coordinates appear in the first coordinate set and the second coordinate set of the element, it can be confirmed that the adsorption condition is satisfied.
  • the moving direction of the operation line is vertical downward.
  • the set of boundary coordinates in the set direction can be regarded as the coordinate data of the upper vertex.
  • the coordinate data of the upper vertex is first touched, that is, the first coordinate data of the operating line 15 and the boundary coordinate set in the direction set by the element 13 will appear coincident coordinate data and the first coordinate of the operating line 15
  • the intersection of the data and the set of internal coordinates of the element 13 is empty, that is, the operation line 15 and the element 13 are tangent in the set direction of the element 13, and the adsorption condition is satisfied.
  • FIG. 1 the intersection of the data and the set of internal coordinates of the element 13 is empty, that is, the operation line 15 and the element 13 are tangent in the set direction of the element 13, and the adsorption condition is satisfied.
  • the boundary coordinate set of the element 12 in the set direction is the coordinate data set of the upper border line.
  • the operating line 15 moves downward, it first touches the coordinate data set of the upper border line, that is, the first coordinate data of the operating line 15 and the boundary coordinate set in the setting direction of the element 12 will appear coincident coordinate data and the first coordinate data of the operating line 15 will appear.
  • the intersection of a coordinate data and the internal coordinate set of the element 12 is empty, that is, the operation line 15 and the element 12 coincide with the border line of the element 12 in the set direction of the element 12, and the adsorption condition is satisfied.
  • Step 408 Obtain coordinate data of any coordinate point in the operation line as initial coordinate data.
  • the operation line and the first element satisfy the adsorption condition, the operation line can be considered as a tangent line of the first element.
  • the coordinate data of any coordinate point is selected and recorded as the initial coordinate data.
  • the time corresponding to the initial coordinate data is recorded as the initial time, and the coordinate point is used as the tracking point for realizing the adsorption and following of the first element.
  • the coordinate data contains the values of the x-axis and the y-axis. When the operating line moves, the coordinate data of the coordinate point changes synchronously.
  • Step 409 During the movement of the operating line, obtain the current coordinate data of the coordinate point in real time.
  • the coordinate data of the current time of the coordinate point is also determined in real time and recorded as the current coordinate data, and at the same time, the time corresponding to the current coordinate data is recorded as the current time.
  • Step 410 Calculate the coordinate offset according to the current coordinate data and the initial coordinate data.
  • the coordinate offset refers to the movement data of the coordinate point at the current moment relative to the starting moment.
  • the coordinate offset calculation method can be set according to the actual situation.
  • the calculation method for setting the coordinate offset is to make the difference between the current coordinate data on the x-axis and the initial coordinate data on the x-axis, and use the result as the coordinate offset on the x-axis, and at the same time , Make the difference between the current coordinate data on the y-axis and the initial coordinate data on the y-axis, and use the result as the coordinate offset on the y-axis.
  • the coordinate offset may be a positive number, 0 or a negative number.
  • Step 411 Move the first element according to the coordinate offset, so that the first element moves to the second element following the operation line.
  • the coordinate data in the second coordinate set of the first element is added to the coordinate offset to obtain new coordinate data, and then a new second coordinate set .
  • the coordinate points in the original second coordinate set are correspondingly adjusted to the new second coordinate set, so as to realize the movement of the first element following the operation line.
  • the above-mentioned first element refers to an element that satisfies adsorption conditions. For the first element that does not meet the adsorption conditions, its position remains unchanged.
  • Step 412 When it is detected that the relative position relationship between the operation line and the second element satisfies the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
  • the confirmation method for the relative positional relationship between the second element and the operating line to satisfy the adsorption condition and the relative positional relationship between the first element and the operating line to meet the adsorption condition is the same, and will not be repeated here.
  • the movement mode of the second element following the operation line is the same as the movement mode of the first element following the operation line, and will not be repeated here.
  • the user can select the third element.
  • the smart interactive tablet will not confirm the relative positional relationship between the third element and the operation line.
  • the operation line is controlled to move, and the movement event of the operation line is monitored. If the operation line and the canvas are monitored.
  • the technical solution of operating line alignment can realize the setting of operating lines according to the actual needs of users, and make multiple elements align based on the operating lines, which not only realizes reasonable and accurate alignment control, but also has simple calculation process and small amount of calculation.
  • FIG. 26 is a schematic structural diagram of an element control device provided by an embodiment of this application.
  • the element control device includes: a first display module 501, a first control module 502, and a first alignment module 503.
  • the first display module 501 is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
  • the first control module 502 is used to respond to the received first touch operation , Move the operating line;
  • a first alignment module 503, used to control the first element to follow the operating line to the second when the relative positional relationship between the operating line and the first element satisfies the adsorption condition The element moves, and when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
  • the operation line is moved. If the relative position relationship of the elements meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element to keep the relative position relationship between the first element and the operation line unchanged. Later, when the relative position of the second element and the operation line When the relationship satisfies the adsorption condition, confirm that the first element and the second element are aligned based on the operation line.
  • the operation line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operation line through the operation line, which not only realizes reasonable and accurate alignment control of the elements, but also the alignment control process is simple and easy to operate , There is no need for the user to manually align each element one by one, which improves the user experience.
  • the first alignment module 503 is further configured to: when the relative positional relationship between the operation line and the second element meets the adsorption condition, control the second element to follow the operation line to move .
  • the first alignment module 503 is further configured to fix the first element and the second element when the relative positional relationship between the operation line and the second element satisfies the adsorption condition Display position.
  • the first element and the second element are both located on the first side of the operation line; further comprising: a third control module for opposing the operation line and the second element When the positional relationship satisfies the adsorption condition, after the first element and the second element are aligned based on the operation line, in response to the received second touch operation, move the operation line to the second side Operating line, and controlling the first element and the second element to follow the operating line to move, and the second side is the opposite side of the first side.
  • the operation line when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line. It includes: a fourth control module, configured to respond to the received first touch operation, before moving the operation line, in response to the received third touch operation, move the operation line to the second side Operation line, when the intersection point of the operation line and the first element is empty or the adsorption condition between the operation line and the first element is satisfied, it is confirmed that the operation line leaves the inner area of the first element, The second side is the opposite side of the first side.
  • a fourth control module configured to respond to the received first touch operation, before moving the operation line, in response to the received third touch operation, move the operation line to the second side Operation line, when the intersection point of the operation line and the first element is empty or the adsorption condition between the operation line and the first element is satisfied, it is confirmed that the operation line leaves the inner area of the first element,
  • the second side is the opposite side of the first side.
  • the first display module 501 includes: a mode entry unit, configured to enter the element alignment mode in response to the received element alignment trigger instruction; and a line drawing unit, configured to respond to the received fourth touch Control operation, drawing operation lines in the canvas.
  • a length adjustment module configured to adjust the length of the operation line in response to the received fifth touch operation after the operation line is displayed in the canvas, and the fifth touch The operation acts on at least one end point of the operation line.
  • the first display module 501 is further configured to display a rotation point, and the rotation point and the operation line satisfy the first set position relationship.
  • it further includes: an angle adjustment module, configured to adjust the angle of the operation line in response to the received sixth touch operation after the operation line is displayed in the canvas, and the sixth touch operation acts on the Rotate the point.
  • the first display module 501 is further configured to: display a movement direction indicator, the movement direction indicator and the operation line satisfy a second set positional relationship, and the movement direction indicator is used to indicate the operation line
  • the movement direction indicator is used to indicate the operation line
  • it also includes: a direction adjustment module for adjusting the movement direction indicator in response to the received seventh touch operation after the operation line is displayed in the canvas, and the seventh touch operation has a function Mark in the direction of movement.
  • the third element is also displayed on the canvas; correspondingly, it further includes: a state fixing module, which is used to respond to the received eighth touch operation after the operation line is displayed in the canvas, The third element is set to a fixed state.
  • the first control module 502 is further configured to: control the operation line to pass through the third element, and the display position of the third element is fixed.
  • an element selection module which is used to select the second element in response to the received ninth touch operation before or after the operation line is displayed in the canvas.
  • the adsorption condition is that the operation line is tangent to the element in a set direction, or the operation line coincides with the set contour line of the element.
  • the element control device provided above can be used to execute the element control method provided in the corresponding embodiment described above, and has corresponding functions and beneficial effects.
  • FIG. 27 is a schematic structural diagram of another element control device provided by an embodiment of the application.
  • the element control device includes: a second display module 504, a monitoring module 505, a second control module 506, and a second alignment module 507.
  • the second display module 504 is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
  • the monitoring module 505 is used to listen to the received first touch operation The movement event of the operation line;
  • the second control module 506 is used to detect that the relative position relationship between the operation line and the first element meets the adsorption condition, and control the first element to follow the operation line to the position The second element moves;
  • the second alignment module 507 is configured to detect that when the relative positional relationship between the operation line and the second element meets the adsorption condition, confirm that the first element and the second element are based on the The operation line is aligned.
  • the operation line is controlled to move, and the movement event of the operation line is monitored. If the operation line and the canvas are monitored.
  • control each first element to follow the operation line to move to the second element, and confirm the first element when the relative position relationship between the operation line and the second element meets the adsorption condition The technical solution for aligning the first element and the second element based on the operation line can realize the setting of the operation line according to the actual needs of the user, and the alignment of multiple elements based on the operation line, which not only achieves reasonable and accurate alignment control, but also The calculation process is simple and the amount of calculation is small. At the same time, the user does not need to manually align each element one by one, which improves the user experience.
  • the second control module 506 includes: a set determining unit, configured to obtain a first coordinate set of the operation line and a second coordinate set of the first element, the second coordinate set including boundary coordinates Collection and internal coordinate collection; an adsorption confirmation unit for confirming that there is coincident coordinate data between the first coordinate collection and the boundary coordinate collection in the set direction, and the first coordinate collection and the internal coordinate collection If the intersection of is empty, it is determined that the operation line and the first element meet the adsorption condition; the initial coordinate acquisition unit is used to detect when the relative position relationship between the operation line and the first element meets the adsorption condition, Acquire the coordinate data of any coordinate point in the operation line as the initial coordinate data; a real-time coordinate acquisition unit for acquiring the current coordinate data of the coordinate point in real time during the movement of the operation line; offset calculation Unit for calculating a coordinate offset according to the current coordinate data and the initial coordinate data; a moving unit for moving the first element according to the coordinate offset to realize the first element following The operation
  • a relationship release module configured to confirm that the first element and the second element are aligned based on the operation line, and then release the adsorption between the first element and the operation line Relationship and the adsorption relationship between the second element and the operating line.
  • a direction confirmation module which is used to confirm the moving direction of the operation line before or after the operation line is displayed in the canvas
  • an element acquisition module which is used to obtain the position in the canvas
  • an element determination module for determining the first element and the second element according to the display position of each element.
  • the element control device provided above can be used to execute the element control method provided in the corresponding embodiment described above, and has corresponding functions and beneficial effects.
  • FIG. 28 is a schematic structural diagram of an element control device provided by an embodiment of this application.
  • a smart interactive tablet is used as an element control device as an example for description.
  • the smart interactive tablet 60 includes at least one processor 61, at least one network interface 62, a user interface 63, a memory 64, and at least one communication bus 65.
  • the communication bus 65 is used to realize the connection and communication between these components.
  • the user interface 62 may include a display screen and a camera, and the optional user interface 63 may also include a standard wired interface and a wireless interface.
  • the network interface 62 may optionally include a standard wired interface and a wireless interface (such as a Wi-Fi interface).
  • the processor 61 may include one or more processing cores.
  • the processor 61 uses various interfaces and lines to connect the various parts of the entire intelligent interactive tablet 60, by running or executing instructions, programs, code sets, or instruction sets stored in the processor 61, and calling data stored in the memory 64 , Perform various functions of the smart interactive tablet 60 and process data.
  • the processor 61 may adopt at least one of digital signal processing (Digital Signal Processing, DSP), Field-Programmable Gate Array (Field-Programmable Gate Array, FPGA), and Programmable Logic Array (Programmable logic arrays, PLA).
  • DSP Digital Signal Processing
  • FPGA Field-Programmable Gate Array
  • PLA Programmable Logic Array
  • the processor 61 may integrate one or a combination of a central processing unit (CPU), a graphics processing unit (GPU), a modem, and the like.
  • the CPU mainly processes the operating system, user interface, and application programs; the GPU is used to render and draw the content that needs to be displayed on the display; the modem is used to process wireless communication. It is understandable that the above-mentioned modem may not be integrated into the processor 61, but may be implemented by a chip alone.
  • the memory 64 may include random access memory (RAM) or read-only memory (Read-Only Memory).
  • the memory 64 includes a non-transitory computer-readable storage medium.
  • the memory 64 may be used to store instructions, programs, codes, code sets or instruction sets.
  • the memory 64 may include a storage program area and a storage data area, where the storage program area may store instructions for implementing the operating system and instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), Instructions used to implement the foregoing method embodiments, etc.; the storage data area can store data and the like involved in the foregoing method embodiments.
  • the memory 64 may also be at least one storage device located far away from the aforementioned processor 61.
  • the memory 64 as a computer storage medium may include an operating system, a network communication module, a user interface module, and an operating application program of a smart interactive tablet.
  • the user interface 63 is mainly used to provide an input interface for the user to obtain data input by the user; and the processor 61 can be used to call the operation application of the smart interactive tablet stored in the memory 64 Program, and perform related operations in the element control method in the above embodiment.
  • the operating system of the smart interactive tablet is Android.
  • the above-mentioned smart interactive tablet can be used to execute any element control method, and has corresponding functions and beneficial effects.
  • an embodiment of the present application also provides a storage medium containing computer-executable instructions, which are used to perform related operations in the element control method provided by any embodiment of the present application when the computer-executable instructions are executed by a computer processor. , And have corresponding functions and beneficial effects.
  • this application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware.
  • this application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.
  • This application is described with reference to flowcharts and/or block diagrams of methods, devices (systems), and computer program products according to embodiments of this application. It should be understood that each process and/or block in the flowchart and/or block diagram, and the combination of processes and/or blocks in the flowchart and/or block diagram can be implemented by computer program instructions.
  • These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing equipment to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing equipment are generated It is a device that realizes the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.
  • These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing equipment to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including the instruction device.
  • the device implements the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.
  • These computer program instructions can also be loaded on a computer or other programmable data processing equipment, so that a series of operation steps are executed on the computer or other programmable equipment to produce computer-implemented processing, so as to execute on the computer or other programmable equipment.
  • the instructions provide steps for implementing the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.
  • the computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
  • the memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and/or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM).
  • RAM random access memory
  • ROM read-only memory
  • flash RAM flash memory
  • Computer-readable media include permanent and non-permanent, removable and non-removable media, and information storage can be realized by any method or technology.
  • the information can be computer-readable instructions, data structures, program modules, or other data.
  • Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, CD-ROM, digital versatile disc (DVD) or other optical storage, Magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media can be used to store information that can be accessed by computing devices. According to the definition in this article, computer-readable media does not include transitory media, such as modulated data signals and carrier waves.

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

An element control method, a device, an apparatus, and a storage medium, pertaining to the technical field of electronic whiteboards. The method comprises: displaying an operation line in a canvas, wherein the canvas further displays a first element and a second element (110); moving the operation line in response to a received first touch operation (120); if a relative positional relationship between the operation line and the first element meets a snap-to condition, controlling the first element to move along the operation line towards the second element, and when a relative positional relationship between the operation line and the second element meets the snap-to condition, aligning the first element and the second element on the basis of the operation line (130). The method is capable of solving the technical problem in the related art in which accurate and practical element alignment control cannot be achieved.

Description

元素控制方法、装置、设备及存储介质Element control method, device, equipment and storage medium
本申请要求于2019年11月21日提交中国专利局、申请号为CN201911151633.1、发明名称为“元素控制方法、装置、设备及存储介质”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。This application claims the priority of a Chinese patent application filed with the Chinese Patent Office, the application number is CN201911151633.1, and the invention title is "Element control method, device, equipment and storage medium" on November 21, 2019, the entire content of which is incorporated by reference Incorporated in this application.
技术领域Technical field
本申请实施例涉及电子白板技术领域,尤其涉及一种元素控制方法、装置、设备及存储介质。The embodiments of the present application relate to the technical field of electronic whiteboards, and in particular, to an element control method, device, equipment, and storage medium.
背景技术Background technique
随着计算机技术的发展,计算机设备被广泛应用于日常生活的各类场景。例如,具有电子白板功能的平板电脑、电视机等智能设备被广泛应用在办公、教学等场景下。此时,用户可以基于电子白板功能在显示屏中进行书写、绘画等操作,且白板中显示的各元素相互独立。在实现本申请的过程中,发明人发现相关技术存在如下问题:当用户需要对齐多个元素时,需要逐一调整各元素的显示位置。这样,不仅需要增加用户的工作量,还无法保证对齐准确性。With the development of computer technology, computer equipment is widely used in various scenes of daily life. For example, smart devices such as tablet computers and TVs with electronic whiteboard functions are widely used in office and teaching scenarios. At this time, the user can perform operations such as writing and drawing on the display screen based on the electronic whiteboard function, and the elements displayed on the whiteboard are independent of each other. In the process of implementing the present application, the inventor found that the related technology has the following problem: when the user needs to align multiple elements, the display position of each element needs to be adjusted one by one. In this way, not only the workload of the user needs to be increased, but the alignment accuracy cannot be guaranteed.
综上,如何准确、合理地实现元素的对齐控制,成为了亟需解决的技术问题。In summary, how to accurately and reasonably realize the alignment control of elements has become a technical problem that needs to be solved urgently.
发明内容Summary of the invention
本申请提供了一种元素控制方法、装置、设备及存储介质,以解决相关技术中无法准确、合理地实现元素的对齐控制的技术问题。This application provides an element control method, device, equipment, and storage medium to solve the technical problem that the alignment control of elements cannot be accurately and reasonably realized in related technologies.
第一方面,本申请实施例提供了一种元素控制方法,包括:In the first aspect, an embodiment of the present application provides an element control method, including:
在画布中显示操作线,所述画布中还显示有第一元素和第二元素;Displaying the operation line in the canvas, where the first element and the second element are also displayed;
响应于接收到的第一触控操作,移动所述操作线;In response to the received first touch operation, moving the operation line;
所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐。When the relative positional relationship between the operation line and the first element satisfies the adsorption condition, the first element is controlled to follow the operation line to move to the second element, and the operation line is relative to the second element When the positional relationship satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
在一实施例中,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时,还包括:In an embodiment, when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the method further includes:
控制所述第二元素跟随所述操作线移动。The second element is controlled to follow the operation line to move.
在一实施例中,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时,还包括:In an embodiment, when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the method further includes:
固定所述第一元素和所述第二元素的显示位置。Fix the display positions of the first element and the second element.
在一实施例中,所述第一元素和所述第二元素均位于所述操作线的第一侧;In an embodiment, the first element and the second element are both located on the first side of the operation line;
所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐之后,还包括:When the relative positional relationship between the operation line and the second element satisfies the adsorption condition, after the first element and the second element are aligned based on the operation line, the method further includes:
响应于接收到的第二触控操作,向所述操作线的第二侧移动所述操作线,并控制所述第一元素和所述第二元素跟随所述操作线移动,所述第二侧为所述第一侧的相对侧。In response to the received second touch operation, move the operation line to the second side of the operation line, and control the first element and the second element to follow the operation line to move, the second The side is the opposite side of the first side.
在一实施例中,所述在画布中显示操作线时,所述操作线穿过第一元素的内部区域,所述第二元素位于所述操作线的第一侧;In an embodiment, when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line;
所述响应于接收到的第一触控操作,移动所述操作线之前,包括:In response to the received first touch operation, before moving the operation line, the method includes:
响应于接收到的第三触控操作,向所述操作线的第二侧移动所述操作线,所述操作线与所述第一元素的相交点为空或所述操作线与所述第一元素之间满足吸附条件时确认所述操作线离开所述第一元素的内部区域,所述第二侧为所述第一侧的相对侧。In response to the received third touch operation, move the operation line to the second side of the operation line, the intersection point of the operation line and the first element is empty or the operation line and the first element When an adsorption condition is satisfied between an element, it is confirmed that the operation line leaves the inner region of the first element, and the second side is the opposite side of the first side.
在一实施例中,所述在画布中显示操作线包括:In an embodiment, the displaying the operation line in the canvas includes:
响应于接收到的元素对齐触发指令,进入元素对齐模式;In response to the received element alignment trigger instruction, enter the element alignment mode;
响应于接收到的第四触控操作,在所述画布中绘制操作线。In response to the received fourth touch operation, an operation line is drawn on the canvas.
在一实施例中,所述在画布中显示操作线之后,包括:In an embodiment, after the operation line is displayed in the canvas, the method includes:
响应于接收到的第五触控操作,调整所述操作线的长度,所述第五触控操作作用于所述操作线的至少一个端点。In response to the received fifth touch operation, the length of the operation line is adjusted, and the fifth touch operation acts on at least one end point of the operation line.
在一实施例中,所述在画布中显示操作线时,还包括:In an embodiment, when the operation line is displayed in the canvas, it further includes:
显示旋转点,所述旋转点与所述操作线满足第一设定位置关系;Display a rotation point, the rotation point and the operation line satisfy a first set positional relationship;
所述在画布中显示操作线之后,包括:After the operation line is displayed in the canvas, it includes:
响应于接收到的第六触控操作,调整所述操作线的角度,所述第六触控操作作用于所述旋转点。In response to the received sixth touch operation, the angle of the operation line is adjusted, and the sixth touch operation acts on the rotation point.
在一实施例中,所述在画布中显示操作线时,还包括:In an embodiment, when the operation line is displayed in the canvas, it further includes:
显示移动方向标识,所述移动方向标识与所述操作线满足第二设定位置关系,所述移动方向标识用于指示操作线的移动方向;Displaying a movement direction indicator, the movement direction indicator and the operation line satisfy a second set positional relationship, and the movement direction indicator is used to indicate the movement direction of the operation wire;
所述在画布中显示操作线之后,包括:After the operation line is displayed in the canvas, it includes:
响应于接收到的第七触控操作,调整所述移动方向标识,所述第七触控操作作用于所述移动方向标识。In response to the received seventh touch operation, the movement direction indicator is adjusted, and the seventh touch operation acts on the movement direction indicator.
在一实施例中,所述画布上还显示有第三元素;In an embodiment, a third element is also displayed on the canvas;
所述在画布中显示操作线之后,还包括:After the operation line is displayed in the canvas, the method further includes:
响应于接收到的第八触控操作,设定所述第三元素为固定状态;In response to the received eighth touch operation, setting the third element to a fixed state;
所述响应于接收到的第一触控操作,移动所述操作线时,还包括:When the operation line is moved in response to the received first touch operation, the method further includes:
控制所述操作线经过所述第三元素,且所述第三元素的显示位置固定。The operation line is controlled to pass through the third element, and the display position of the third element is fixed.
在一实施例中,在画布中显示操作线之前或之后,还包括:In an embodiment, before or after the operation line is displayed in the canvas, the method further includes:
响应于接收到的第九触控操作,选定所述第二元素。In response to the received ninth touch operation, the second element is selected.
在一实施例中,所述吸附条件为所述操作线与元素在设定方向上相切,或,所述操作线与元素的设定轮廓线重合。In an embodiment, the adsorption condition is that the operation line is tangent to the element in a set direction, or the operation line coincides with the set contour line of the element.
第二方面,本申请实施例还提供了一种元素控制方法,包括:In the second aspect, an embodiment of the present application also provides an element control method, including:
在画布中显示操作线,所述画布中还显示有第一元素和第二元素;Displaying the operation line in the canvas, where the first element and the second element are also displayed;
响应于接收到的第一触控操作,监听所述操作线的移动事件;In response to the received first touch operation, monitoring the movement event of the operation line;
检测到所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动;When it is detected that the relative positional relationship between the operation line and the first element satisfies the adsorption condition, controlling the first element to follow the operation line to move to the second element;
检测到所述操作线与所述第二元素的相对位置关系满足吸附条件时,确认所述第一元素和所述第二元素基于所述操作线对齐。When it is detected that the relative positional relationship between the operation line and the second element satisfies the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
在一实施例中,所述控制所述第一元素跟随所述操作线向所述第二元素移动包括:In an embodiment, the controlling the first element to move to the second element following the operation line includes:
获取所述操作线中任一坐标点的坐标数据作为起始坐标数据;Acquiring coordinate data of any coordinate point in the operation line as initial coordinate data;
在所述操作线移动过程中,实时获取所述坐标点的当前坐标数据;During the movement of the operating line, obtain the current coordinate data of the coordinate point in real time;
根据所述当前坐标数据和所述起始坐标数据计算坐标偏移量;Calculating a coordinate offset according to the current coordinate data and the initial coordinate data;
根据所述坐标偏移量移动所述第一元素,以实现所述第一元素跟随所述操作线向所述第二元素移动。The first element is moved according to the coordinate offset, so that the first element moves to the second element following the operation line.
在一实施例中,所述检测到所述操作线与所述第一元素的相对位置关系满足吸附条件包括:In an embodiment, the detecting that the relative positional relationship between the operation line and the first element satisfies an adsorption condition includes:
获取所述操作线的第一坐标集合以及第一元素的第二坐标集合,所述第二坐标集合包括边界坐标集合和内部坐标集合;Acquiring a first coordinate set of the operation line and a second coordinate set of the first element, the second coordinate set including a boundary coordinate set and an internal coordinate set;
若确认所述第一坐标集合与设定方向上的所述边界坐标集合间存在重合坐标数据,且所述第一坐标集合与所述内部坐标集合的交集为空,则确定所述操作线与所述第一元素满足吸附条件。If it is confirmed that there is coincident coordinate data between the first coordinate set and the boundary coordinate set in the set direction, and the intersection of the first coordinate set and the internal coordinate set is empty, then it is determined that the operation line and the boundary coordinate set are empty. The first element satisfies the adsorption condition.
在一实施例中,所述确认所述第一元素和所述第二元素基于所述操作线对齐之后,还包括:In an embodiment, after the confirming that the first element and the second element are aligned based on the operation line, the method further includes:
解除所述第一元素与所述操作线的吸附关系以及所述第二元素与所述操作线的吸附关系。The adsorption relationship between the first element and the operation wire and the adsorption relationship between the second element and the operation wire are released.
在一实施例中,所述在画布中显示操作线之前或之后,还包括:In an embodiment, before or after the operation line is displayed in the canvas, the method further includes:
确认所述操作线的移动方向;Confirm the moving direction of the operating line;
在所述画布中,获取位于所述第一方向上的各元素;In the canvas, obtain each element located in the first direction;
根据所述各元素的显示位置确定所述第一元素和所述第二元素。The first element and the second element are determined according to the display position of each element.
第三方面,本申请实施例还提供了一种元素控制装置,包括:In the third aspect, an embodiment of the present application also provides an element control device, including:
第一显示模块,用于在画布中显示操作线,所述画布中还显示有第一元素和第二元素;The first display module is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
第一控制模块,用于响应于接收到的第一触控操作,移动所述操作线;The first control module is configured to move the operation wire in response to the received first touch operation;
第一对齐模块,用于所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐。The first alignment module is used to control the first element to follow the operation line to move to the second element when the relative positional relationship between the operation line and the first element meets the adsorption condition, and the operation line and When the relative positional relationship of the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
第四方面,本申请实施例还提供了一种元素控制装置,包括:In a fourth aspect, an embodiment of the present application also provides an element control device, including:
第二显示模块,用于在画布中显示操作线,所述画布中还显示有第一元素和第二元素;The second display module is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
监听模块,用于响应于接收到的第一触控操作,监听所述操作线的移动事件;The monitoring module is configured to monitor the movement event of the operation line in response to the received first touch operation;
第二控制模块,用于检测到所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动;The second control module is configured to control the first element to follow the operation line to move to the second element when it is detected that the relative positional relationship between the operation line and the first element satisfies the adsorption condition;
第二对齐模块,用于检测到所述操作线与所述第二元素的相对位置关系满足吸附条件时,确认所述第一元素和所述第二元素基于所述操作线对齐。The second alignment module is configured to confirm that the first element and the second element are aligned based on the operation line when it is detected that the relative positional relationship between the operation line and the second element satisfies the adsorption condition.
第五方面,本申请实施例还提供了一种元素控制设备,包括:In a fifth aspect, an embodiment of the present application also provides an element control device, including:
一个或多个处理器;One or more processors;
存储器,用于存储一个或多个程序;Memory, used to store one or more programs;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如第一方面所述的元素控制方法或如第二方面所述的元素控制方法。When the one or more programs are executed by the one or more processors, the one or more processors implement the element control method according to the first aspect or the element control method according to the second aspect .
第六方面,本申请实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现如第一方面所述的元素控制方法或如第二方面所述的元素控制方法。In the sixth aspect, the embodiments of the present application also provide a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the element control method as described in the first aspect or the element control method as described in the second aspect is implemented. The element control method described.
上述元素控制方法、装置、设备及存储介质,通过在画布中显示操作线、第一元素以 及第二元素,并在接收到针对操作线的第一触控操作时,移动操作线,在操作线移动过程中若确认操作线与第一元素的相对位置关系满足吸附条件,则根据第一触控操作控制操作线继续向第二元素移动时,控制第一元素跟随操作线移动,且在操作线与第二元素的相对位置关系满足吸附条件时,第一元素和第二元素基于操作线对齐。采用上述技术手段,可以根据用户的实际需求设置操作线,并通过操作线使得多个元素基于操作线进行对齐,不仅实现了合理、准确地实现元素的对齐控制,且实现方式简单,无需用户逐一手动对齐各元素。The above-mentioned element control method, device, equipment and storage medium display the operation line, the first element and the second element in the canvas, and when the first touch operation for the operation line is received, the operation line is moved, and the operation line is If it is confirmed that the relative positional relationship between the operation line and the first element meets the adsorption condition during the movement, when the operation line continues to move to the second element according to the first touch operation, the first element is controlled to follow the operation line and move on the operation line. When the relative positional relationship with the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line. Using the above technical means, the operation line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operation line through the operation line, which not only realizes the reasonable and accurate alignment control of the elements, but also the realization method is simple, without the user one by one. Manually align the elements.
同时,在对齐元素后,还可以通过操作线继续控制已经对齐的元素进行移动,使得对齐后的元素显示在用户期望的位置上。At the same time, after aligning the elements, you can continue to control the aligned elements to move through the operation line, so that the aligned elements are displayed in the position desired by the user.
此外,操作线控制方式灵活,通过操作线的端点可以调整操作线的长度,以改变操作线移动覆盖范围,进而改变待对齐的元素的数量。通过旋转点可以改变操作线的角度,进而改变对齐方向。通过移动方向标识可以改变操作线的移动方向,以调整操作线移动覆盖范围。使得对齐结果更加符合用户的需求,提升了用户的使用体验。In addition, the control method of the operation line is flexible, and the length of the operation line can be adjusted through the end point of the operation line to change the moving coverage of the operation line, thereby changing the number of elements to be aligned. By rotating the point, you can change the angle of the operating line, and then change the alignment direction. The moving direction of the operating line can be changed through the moving direction indicator to adjust the moving coverage of the operating line. The alignment result is more in line with the user's needs, and the user's experience is improved.
附图说明Description of the drawings
图1为本申请一个实施例提供的元素控制方法的流程图;FIG. 1 is a flowchart of an element control method provided by an embodiment of this application;
图2为本申请一个实施例提供的画布第一示意图;FIG. 2 is a first schematic diagram of a canvas provided by an embodiment of this application;
图3为本申请一个实施例提供的画布第二示意图;FIG. 3 is a second schematic diagram of a canvas provided by an embodiment of this application;
图4为本申请一个实施例提供的画布第三示意图;FIG. 4 is a third schematic diagram of a canvas provided by an embodiment of this application;
图5为本申请一个实施例提供的画布第四示意图;FIG. 5 is a fourth schematic diagram of a canvas provided by an embodiment of this application;
图6为本申请一个实施例提供的画布第五示意图;FIG. 6 is a fifth schematic diagram of a canvas provided by an embodiment of this application;
图7为本申请一个实施例提供的一种元素控制方法的流程图;FIG. 7 is a flowchart of an element control method provided by an embodiment of this application;
图8为本申请一个实施例提供的画布第六示意图;FIG. 8 is a sixth schematic diagram of a canvas provided by an embodiment of this application;
图9为本申请一个实施例提供的画布第七示意图;FIG. 9 is a seventh schematic diagram of a canvas provided by an embodiment of this application;
图10为本申请一个实施例提供的画布第八示意图;FIG. 10 is an eighth schematic diagram of a canvas provided by an embodiment of this application;
图11为本申请一个实施例提供的画布第九示意图;FIG. 11 is a ninth schematic diagram of a canvas provided by an embodiment of this application;
图12为本申请一个实施例提供的画布第十示意图;FIG. 12 is a tenth schematic diagram of a canvas provided by an embodiment of this application;
图13为本申请一个实施例提供的画布第十一示意图;FIG. 13 is an eleventh schematic diagram of a canvas provided by an embodiment of this application;
图14为本申请一个实施例提供的画布第十二示意图;FIG. 14 is a twelfth schematic diagram of a canvas provided by an embodiment of this application;
图15为本申请一个实施例提供的画布第十三示意图;FIG. 15 is a thirteenth schematic diagram of a canvas provided by an embodiment of this application;
图16为本申请一个实施例提供的画布第十四示意图;FIG. 16 is a fourteenth schematic diagram of a canvas provided by an embodiment of this application;
图17为本申请一个实施例提供的画布第十五示意图;FIG. 17 is a fifteenth schematic diagram of a canvas provided by an embodiment of this application;
图18为本申请一个实施例提供的画布第十六示意图;FIG. 18 is a sixteenth schematic diagram of a canvas provided by an embodiment of this application;
图19为本申请一个实施例提供的画布第十七示意图;FIG. 19 is a seventeenth schematic diagram of a canvas provided by an embodiment of this application;
图20为本申请一个实施例提供的画布第十八示意图;FIG. 20 is an eighteenth schematic diagram of a canvas provided by an embodiment of this application;
图21为本申请一个实施例提供的画布第十九示意图;FIG. 21 is a nineteenth schematic diagram of a canvas provided by an embodiment of this application;
图22为本申请一个实施例提供的画布第二十示意图;FIG. 22 is a twentieth schematic diagram of a canvas provided by an embodiment of this application;
图23为本申请一个实施例提供的画布第二十一示意图;FIG. 23 is a schematic diagram of the twenty-first canvas provided by an embodiment of this application;
图24为本申请一个实施例提供的一种元素控制方法的流程图;FIG. 24 is a flowchart of an element control method provided by an embodiment of this application;
图25为本申请一个实施例提供的一种元素控制方法的流程图;FIG. 25 is a flowchart of an element control method provided by an embodiment of this application;
图26为本申请一个实施例提供的一种元素控制装置的结构示意图;FIG. 26 is a schematic structural diagram of an element control device provided by an embodiment of this application;
图27为本申请一个实施例提供的另一种元素控制装置的结构示意图;FIG. 27 is a schematic structural diagram of another element control device provided by an embodiment of this application;
图28为本申请一个实施例提供的一种元素控制设备的结构示意图。FIG. 28 is a schematic structural diagram of an element control device provided by an embodiment of this application.
具体实施方式Detailed ways
下面结合附图和实施例对本申请作详细说明。可以理解的是,此处所描述的具体实施例用于解释本申请,而非对本申请的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本申请相关的部分而非全部结构。The application will be described in detail below with reference to the drawings and embodiments. It can be understood that the specific embodiments described here are used to explain the application, but not to limit the application. In addition, it should be noted that, for ease of description, the drawings only show a part of the structure related to the present application instead of all of the structure.
需要说明的是,在本文中,诸如第一和第二之类的关系术语仅仅用来将一个实体或操作或对象与另一个实体或操作或对象区分开来,而不一定要求或者暗示这些实体或操作或对象之前存在任何这种实际的关系或顺序。例如,第一触控操作和第二触控操作的“第一”和“第二”用来区分两个不同的触控操作。It should be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation or object from another entity or operation or object, and do not necessarily require or imply these entities Or any such actual relationship or sequence exists before the operation or object. For example, "first" and "second" of the first touch operation and the second touch operation are used to distinguish two different touch operations.
本申请实施例中提供的元素控制方法可以由元素控制设备执行,该元素控制设备可以通过软件和/或硬件的方式实现,该元素控制设备可以是两个或多个物理实体构成,也可以是一个物理实体构成。例如,元素控制设备可以是电脑、手机、平板或智能交互平板等智能设备。The element control method provided in the embodiments of this application can be executed by an element control device, which can be implemented by software and/or hardware. The element control device can be composed of two or more physical entities, or it can be A physical entity constitutes. For example, the element control device may be a smart device such as a computer, a mobile phone, a tablet, or a smart interactive tablet.
为了便于理解,实施例中以智能交互平板为元素控制设备进行示例性描述。其中,智能交互平板可以是通过触控技术对显示在显示平板上的内容进行操控和实现人机交互操作的一体化设备,其集成了投影机、电子白板、幕布、音响、电视机以及视频会议终端等一种或多种功能。For ease of understanding, in the embodiments, a smart interactive tablet is used as an element control device for exemplary description. Among them, the smart interactive tablet can be an integrated device that controls the content displayed on the display tablet through touch technology and realizes human-computer interaction. It integrates a projector, an electronic whiteboard, a screen, a sound, a TV, and a video conference. One or more functions such as a terminal.
一般而言,智能交互平板包括至少一块显示屏。例如,智能交互平板配置有一块具有 触控功能的显示屏,且该显示屏可以是电容屏、电阻屏或者电磁屏。在一实施例中,用户可以通过手指或触控笔触控显示屏的方式实现触控操作,相应的,智能交互平板检测触控位置,并根据触控位置对应的显示内容确定响应方案,进而进行响应,以实现触控功能。例如,根据触控位置确定对应的显示内容为某个功能的控件,此时,响应方案为执行该功能。可以理解的是,实际应用中,用户还可以通过键盘、鼠标、物理按键等方式实现控制操作。Generally speaking, the smart interactive tablet includes at least one display screen. For example, the smart interactive tablet is equipped with a display screen with touch function, and the display screen can be a capacitive screen, a resistive screen or an electromagnetic screen. In one embodiment, the user can use a finger or a stylus to touch the display screen to achieve a touch operation. Correspondingly, the smart interactive tablet detects the touch position, and determines the response plan according to the display content corresponding to the touch position, and then performs Respond to realize the touch function. For example, it is determined that the corresponding display content is a control of a certain function according to the touch position. At this time, the response scheme is to execute the function. It is understandable that in practical applications, users can also implement control operations through keyboards, mice, physical keys, and other methods.
典型的,智能交互平板安装有至少一类操作***,其中,操作***包括但不限定于安卓***、Linux***及Windows***。在一实施例中,智能交互平板可以基于操作***安装至少一个应用程序,实施例中,以具有绘图功能的应用程序进行示例性描述。例如,智能交互平板中安装有具有绘图功能的电子白板应用程序。其中,该应用程序可以为操作***自带的应用程序,也可以为从第三方设备或者服务器中下载的应用程序,元素控制设备也可以为应用程序本身。可选的,应用程序除具备绘图功能外,还具有其他编辑功能,如书写、***表格、***图片、***多媒体、***图形、绘制表格等功能。Typically, at least one type of operating system is installed on the smart interactive tablet, where the operating system includes but is not limited to the Android system, the Linux system, and the Windows system. In an embodiment, the smart interactive tablet may install at least one application program based on the operating system. In the embodiment, an application program with a drawing function is used for exemplary description. For example, an electronic whiteboard application with a drawing function is installed in a smart interactive tablet. The application program may be an application program that comes with the operating system, or an application program downloaded from a third-party device or server, and the element control device may also be the application program itself. Optionally, in addition to the drawing function, the application also has other editing functions, such as writing, inserting tables, inserting pictures, inserting multimedia, inserting graphics, and drawing tables.
示例性的,应用程序的显示界面中设置有可操作区域,该可操作区域可以记为画布,通过画布可以向用户显示绘图或编辑的交互界面。可选的,画布的显示位置可以根据实际需求设置。可以理解的是,画布的尺寸可以根据实际情况设定,其可以为有限的尺寸,也可以为无限的尺寸。在一实施例中,画布中建立有第一坐标系,第一坐标系的原点可以根据实际情况设定。其中,画布为无限的尺寸是指画布可以根据用户的实际需求无限减小或增大坐标系。同样的,显示屏中建立有第二坐标系,第二坐标系的原点同样可以根据实际情况设定,一般而言,第二坐标系为固定大小的坐标系。通常,第二坐标系与检测触控操作的电器元件存在对应关系,当显示屏接收到触控操作时,检测对应位置的电器元件参数发生变化,此时,智能交互平板根据电器元件参数的变化情况确定触控操作在第二坐标系中的坐标数据,即确定触控操作的触控位置,之后,根据第二坐标系与第一坐标系的映射关系,确定触控操作在第一坐标系中的坐标数据,之后,基于坐标数据在画布中对触控操作进行响应。其中,映射关系的确定方式实施例不做限定。Exemplarily, an operable area is provided in the display interface of the application program, and the operable area may be recorded as a canvas, through which an interactive interface for drawing or editing may be displayed to the user. Optionally, the display position of the canvas can be set according to actual needs. It is understandable that the size of the canvas can be set according to actual conditions, and it can be a finite size or an infinite size. In an embodiment, a first coordinate system is established in the canvas, and the origin of the first coordinate system can be set according to actual conditions. Among them, the infinite size of the canvas means that the canvas can be infinitely reduced or increased in the coordinate system according to the actual needs of the user. Similarly, a second coordinate system is established in the display screen, and the origin of the second coordinate system can also be set according to actual conditions. Generally speaking, the second coordinate system is a coordinate system with a fixed size. Generally, the second coordinate system has a corresponding relationship with the electrical component that detects the touch operation. When the display screen receives the touch operation, the electrical component parameter at the corresponding position is detected to change. At this time, the smart interactive tablet changes according to the electrical component parameter. The situation determines the coordinate data of the touch operation in the second coordinate system, that is, the touch position of the touch operation is determined, and then, according to the mapping relationship between the second coordinate system and the first coordinate system, it is determined that the touch operation is in the first coordinate system Afterwards, respond to touch operations in the canvas based on the coordinate data. Among them, the embodiment of the method for determining the mapping relationship is not limited.
在一实施例中,将用户在画布中绘制的对象记为元素,该元素可以为用户绘制的图形、文本框、表格、笔迹等,也可以为用户***的图形、图片等。绘制元素后,用户可以对元素进行编辑,如调整元素位置、元素大小、元素颜色等。需要说明的是,绘制元素后,各元素一般为相互独立的,即用户对某个元素进行控制操作时,若无特殊限定,不会对其他元素进行同步控制。本申请实施例以运行具有绘图功能的应用程序为例,描述元素 控制方法。In an embodiment, the object drawn by the user on the canvas is recorded as an element. The element may be a graphic, text box, table, handwriting, etc. drawn by the user, or a graphic, picture, etc. inserted by the user. After drawing the element, the user can edit the element, such as adjusting the element position, element size, element color, etc. It should be noted that after drawing the elements, each element is generally independent of each other, that is, when the user controls an element, if there is no special restriction, other elements will not be synchronously controlled. The embodiment of the present application takes the running of an application program with a drawing function as an example to describe the element control method.
图1为本申请一个实施例提供的元素控制方法的流程图。参考图1,该元素控制方法包括:Fig. 1 is a flowchart of an element control method provided by an embodiment of the application. Referring to Figure 1, the element control method includes:
步骤110、在画布中显示操作线,画布中还显示有第一元素和第二元素。Step 110: The operation line is displayed in the canvas, and the first element and the second element are also displayed in the canvas.
示例性的,操作线是指辅助用户对元素进行控制的一条线,其可以是一条直线,也可以是一条线段。操作线可以由用户绘制,也可以由智能交互平板自动生成。当操作线由用户绘制时,显示操作线的过程可以为:当检测到元素对齐模式被触发后,进入元素对齐模式,之后,接收用户的触控操作,并基于触控操作得到触控位置,进而根据触控位置在画布中绘制操作线。其中,元素对齐模式仅是一种可选名称,实际应用中,还可以设定为对齐模式、吸附模式等。元素对齐模式的触发方式可以根据实际情况设定,例如,在画布的设定位置或菜单栏中显示触发控件,当检测到触发控件接收到单击操作后,确定触发元素对齐模式。进入元素对齐模式时,可选在画布中覆盖一个蒙层,以提示用户进入元素对齐模式,或者是,在画布中显示操作线绘制提示,以提示用户进入元素对齐模式。在一实施例中,当操作线由用户绘制时,显示操作线的过程还可以为:预先设定绘制操作线的快捷操作,当检测到快捷操作时,确定绘制操作线,并根据快捷操作的触控位置在画布中绘制操作线。其中,快捷操作的实现方式本实施例不做限定。当操作线由智能交互平板绘制时,显示操作线的过程可以为:预先设定操作线的显示位置,其中,显示位置为第一坐标系中的坐标数据,当检测到元素对齐模式被触发后,基于预先设定的显示位置,在画布中绘制操作线。其中,进入元素对齐模式时,可选在画布中覆盖一个蒙层,以提示用户进入元素对齐模式。可以理解的是,当智能交互平板绘制操作线时,用户可以根据实际需求调整操作线的位置,以保证后续准确的对元素进行对齐操作。Exemplarily, the operation line refers to a line that assists the user in controlling the element, and it may be a straight line or a line segment. The operation line can be drawn by the user or automatically generated by the smart interactive tablet. When the operation line is drawn by the user, the process of displaying the operation line can be: when it is detected that the element alignment mode is triggered, enter the element alignment mode, and then receive the user's touch operation, and obtain the touch position based on the touch operation. Then draw operation lines on the canvas according to the touch position. Among them, the element alignment mode is only an optional name. In actual applications, it can also be set to alignment mode, adsorption mode, etc. The trigger mode of the element alignment mode can be set according to the actual situation, for example, the trigger control is displayed in the set position of the canvas or in the menu bar, and the trigger element alignment mode is determined when the trigger control is detected to receive a click operation. When entering the element alignment mode, you can choose to overlay a mask on the canvas to prompt the user to enter the element alignment mode, or display the operation line drawing prompt in the canvas to prompt the user to enter the element alignment mode. In an embodiment, when the operation line is drawn by the user, the process of displaying the operation line may also be: preset a shortcut operation for drawing the operation line, and when a shortcut operation is detected, it is determined to draw the operation line, and the operation line is drawn according to the shortcut operation. The touch position draws operation lines on the canvas. Among them, the implementation of the shortcut operation is not limited in this embodiment. When the operation line is drawn by the smart interactive tablet, the process of displaying the operation line can be: preset the display position of the operation line, where the display position is the coordinate data in the first coordinate system, when it is detected that the element alignment mode is triggered , Based on the preset display position, draw operation lines on the canvas. Among them, when entering the element alignment mode, you can optionally cover a mask on the canvas to prompt the user to enter the element alignment mode. It is understandable that when the operation line is drawn on the smart interactive tablet, the user can adjust the position of the operation line according to actual needs to ensure the subsequent accurate alignment of the elements.
在一个实施例中,在显示操作线时,操作线的显示参数可以根据实际情况由用户或智能交互平板设定,可选的,操作线的显示参数与书写模式下用户绘制的轨迹的显示参数不同,以将操作线与用户绘制的轨迹进行区分。其中,显示参数可以包括以下至少一种或多种:线条粗细、线条颜色以及线条样式。在一实施例中,后续操作过程中,用户可以根据实际情况修改显示参数,且修改方式实施例不做限定,例如,在画布的设定位置显示修改控件,当检测到该修改控件接收到单击操作后,显示修改界面,该修改界面覆盖在全部或部分画布上,其显示内容可以根据实际情况设定。此时,用户可以通过该修改界面修改显示参数。In one embodiment, when the operating line is displayed, the display parameters of the operating line can be set by the user or the smart interactive tablet according to the actual situation. Optionally, the display parameters of the operating line and the display parameters of the trajectory drawn by the user in the writing mode Different, to distinguish the operation line from the trajectory drawn by the user. The display parameters may include at least one or more of the following: line thickness, line color, and line style. In an embodiment, in the subsequent operation process, the user can modify the display parameters according to the actual situation, and the modification method is not limited in the embodiment. For example, the modification control is displayed at the set position of the canvas, and when it is detected that the modification control receives the order After the operation is clicked, the modification interface is displayed. The modification interface covers all or part of the canvas, and the display content can be set according to the actual situation. At this time, the user can modify the display parameters through the modification interface.
可选的,操作线可以为一条或多条,实施例中,以一条操作线为例进行表述。该条操 作线显示在画布中时,其可以不穿过当前显示的任何元素,或者穿过某个或多个元素,或者与某个或多个元素相切。Optionally, there may be one or more operation lines. In the embodiment, one operation line is taken as an example for description. When the operating line is displayed in the canvas, it may not pass through any element currently displayed, or pass through one or more elements, or be tangent to one or more elements.
在一个实施例中,显示操作线之前,画布中已经显示有至少两个元素,一个实施例中,以画布中分别显示第一元素和第二元素为例。其中,第一元素和第二元素为用户期望进行对齐的元素。第一元素为操作线移动过程中,先接触的元素,第二元素为操作线移动过程中,后接触的元素,即接触晚于第一元素的元素。可选的,第一元素和第二元素均可以为至少一个,实施例中,以第一元素为至少一个,第二元素为一个为例,进行表述。其中,当第一元素为多个时,多个第一元素的相对位置关系实施例不做限定。In one embodiment, before the operation line is displayed, at least two elements are already displayed in the canvas. In one embodiment, the first element and the second element are respectively displayed in the canvas as an example. Among them, the first element and the second element are elements that the user expects to be aligned. The first element is the element contacted first during the movement of the operating line, and the second element is the element contacted later during the movement of the operating line, that is, the element that contacts later than the first element. Optionally, both the first element and the second element may be at least one. In the embodiment, the first element is at least one and the second element is one as an example. Wherein, when there are multiple first elements, the embodiment of the relative position relationship of the multiple first elements is not limited.
在一个实施例中,第一元素和第二元素可以根据操作线移动过程中接触顺序确定。或者,第一元素和第二元素可以由智能交互平板自动设定或者由用户选定。例如,获取操作线移动方向上的元素,并将距离操作线最远的元素确认为第二元素,其他元素确认为第一元素。再如,提示用户输入期望对齐元素的数量,之后,在操作线移动方向上获取相同数量的元素,并在获取的元素中,将距离操作线最远的元素确认为第二元素,其他元素确认为第一元素。又如,获取针对于元素的选定操作(如针对元素的单击、长按操作等)之后,将被选定操作所选定的元素确定为第二元素,同时,将第二元素与操作线之间的元素确定为第一元素。In one embodiment, the first element and the second element may be determined according to the contact sequence during the movement of the operation line. Alternatively, the first element and the second element may be automatically set by the smart interactive tablet or selected by the user. For example, the element in the moving direction of the operation line is obtained, and the element farthest from the operation line is confirmed as the second element, and other elements are confirmed as the first element. For another example, the user is prompted to enter the number of elements to be aligned, and then the same number of elements are obtained in the moving direction of the operation line, and among the obtained elements, the element farthest from the operation line is confirmed as the second element, and the other elements are confirmed Is the first element. For another example, after obtaining a selected operation for an element (such as a click on an element, a long-press operation, etc.), the element selected by the selected operation is determined as the second element, and at the same time, the second element is combined with the operation The element between the lines is determined as the first element.
可选的,相对于操作线而言,第一元素和第二元素位于同一侧。例如,操作线为一条水平线时,第一元素和第二元素同时位于操作线的上方或操作线的下方。Optionally, with respect to the operation line, the first element and the second element are located on the same side. For example, when the operation line is a horizontal line, the first element and the second element are located above or below the operation line at the same time.
步骤120、响应于接收到的第一触控操作,移动操作线。Step 120: In response to the received first touch operation, move the operation line.
在一个实施例中,显示操作线后,用户可以移动操作线,以通过操作线对元素进行控制。其中,将用户移动操作线的操作记为第一触控操作。第一触控操作的实现方式可以根据实际情况设定。例如,检测到触控操作时,若确定触控操作是对操作线的拖拽操作,则确认接收到第一触控操作。之后,对第一触控操作进行响应,即控制操作线跟随第一触控操作的触控位置同步移动。In one embodiment, after the operation line is displayed, the user can move the operation line to control the elements through the operation line. Among them, the operation of the user moving the operation line is recorded as the first touch operation. The implementation of the first touch operation can be set according to actual conditions. For example, when a touch operation is detected, if it is determined that the touch operation is a drag operation on the operation line, it is confirmed that the first touch operation is received. Afterwards, responding to the first touch operation, that is, the control operation line moves synchronously with the touch position of the first touch operation.
在一个实施例中,操作线可以沿任意方向移动,或沿设定的移动方向移动。实施例中,设定操作线沿设定的移动方向移动。其中,设定的移动方向与用户期望的对齐方向有关,且可以根据用户的实际需求随时更改。以设定的移动方向为第一元素和第二元素所在的方向,且对操作线执行拖拽操作为例,当确定拖拽方向为第一元素和第二元素所在的方向时,确定接收到第一触控操作。由于第一元素和第二元素位于操作线的同一侧,因此第一元素和第二元素所在的方向也可以理解为操作线中该侧所在的方向。例如,第一元素和 第二元素位于操作线的上方,此时,设定的移动方向为向上的方向。可以理解的是,手指在执行拖拽操作时,可能不会严格按照设定方向进行移动,此时,可以设置方向范围,只要用户的拖拽方向在该方向范围内时,确定接收到第一触控操作。一般而言,当用户绘制操作线时,操作线包含可移动的一个方向,该方向上包含第一元素和第二元素,此时,设定的移动方向为当前可以移动方向。或者,操作线包含可移动的两个相对方向,且其中一个方向上包含第一元素和第二元素,此时,设定的移动方向为包含第一元素和第二元素的方向。可以理解,当操作线的移动方向上没有第一元素和/或第二元素时,可以通过提示用户修改操作线的方式,使得操作线的移动方向上包含第一元素和第二元素。In one embodiment, the operating line can move in any direction, or move in a set moving direction. In the embodiment, the setting operation line moves along the set movement direction. Among them, the set moving direction is related to the alignment direction desired by the user, and can be changed at any time according to the actual needs of the user. Take the set moving direction as the direction in which the first element and the second element are located, and perform a drag operation on the operation line as an example, when it is determined that the drag direction is the direction in which the first element and the second element are located, it is determined to receive The first touch operation. Since the first element and the second element are located on the same side of the operating line, the direction in which the first element and the second element are located can also be understood as the direction in which the side of the operating line is located. For example, the first element and the second element are located above the operation line, and at this time, the set moving direction is upward. It is understandable that when the finger is performing a drag operation, it may not move strictly in accordance with the set direction. At this time, the direction range can be set. As long as the user's dragging direction is within the direction range, it is determined that the first Touch operation. Generally speaking, when the user draws the operation line, the operation line includes a movable direction, which includes the first element and the second element. At this time, the set movement direction is the current movable direction. Alternatively, the operation line includes two movable relative directions, and one of the directions includes the first element and the second element. At this time, the set moving direction is the direction including the first element and the second element. It can be understood that when there is no first element and/or second element in the moving direction of the operating line, the user can be prompted to modify the operating line so that the moving direction of the operating line includes the first element and the second element.
步骤130、操作线与第一元素的相对位置关系满足吸附条件时,控制第一元素跟随操作线向第二元素移动,操作线与第二元素的相对位置关系满足吸附条件时第一元素与第二元素基于操作线对齐。Step 130: When the relative position relationship between the operation line and the first element meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element. When the relative position relationship between the operation line and the second element meets the adsorption condition, the first element and the first element The two elements are aligned based on the operation line.
在一个实施例中,在操作线的移动过程中,先靠近第一元素。因此,实时确定操作线与每个第一元素的相对位置关系。其中,相对位置关系可以通过操作线在第一坐标系中的坐标集合以及第一元素在第一坐标系的坐标集合确定。在本申请的一个实施例中,当确定某个第一元素与操作线的相对位置关系满足吸附条件时,控制操作线吸附该第一元素,即建立操作线与第一元素为吸附关系。其中,控制操作线吸附第一元素是指控制第一元素跟随操作线移动,以保持第一元素与操作线的相对位置关系始终满足吸附条件。在一个实施例中,当第一元素为至少两个且每个第一元素与操作线的距离均不相同时,在操作线的移动过程中,操作线可以先后吸附至少两个第一元素,且至少两个第一元素被吸附后位于操作线的同一侧,此时,可以认为吸附后的至少两个第一元素在操作线所在直线方向上处于对齐状态。In one embodiment, during the movement of the operating line, the first element is approached first. Therefore, the relative positional relationship between the operating line and each first element is determined in real time. The relative position relationship can be determined by the coordinate set of the operating line in the first coordinate system and the coordinate set of the first element in the first coordinate system. In an embodiment of the present application, when it is determined that the relative positional relationship between a certain first element and the operation line meets the adsorption condition, the operation line is controlled to adsorb the first element, that is, the adsorption relationship between the operation line and the first element is established. Wherein, controlling the operation line to adsorb the first element refers to controlling the first element to follow the operation line to keep the relative positional relationship between the first element and the operation line always satisfying the adsorption condition. In one embodiment, when there are at least two first elements and the distance between each first element and the operation line is not the same, during the movement of the operation line, the operation line can adsorb at least two first elements successively, In addition, the at least two first elements are located on the same side of the operation line after being adsorbed. At this time, it can be considered that the at least two first elements after adsorption are aligned in the linear direction where the operation line is located.
在一个实施中,由于用户期望第一元素与第二元素对齐,因此,当操作线吸附第一元素后,用户会继续执行第一触控操作,即控制操作线向第二元素移动。此时,智能交互平板根据第一触控操作控制操作线以及被吸附的第一元素向第二元素移动。在移动过程中,移动方向不变。此时,实时确定操作线与第二元素的相对位置关系,并在第二元素与操作线的相对位置关系满足吸附条件时,确定第一元素和第二元素基于操作线对齐。此时,第二元素对应的吸附条件与第一元素对应的吸附条件相同。In one implementation, since the user expects the first element to be aligned with the second element, when the operation line adsorbs the first element, the user will continue to perform the first touch operation, that is, control the operation line to move to the second element. At this time, the smart interactive tablet controls the operation line and the adsorbed first element to move to the second element according to the first touch operation. During the movement, the moving direction remains unchanged. At this time, the relative position relationship between the operation line and the second element is determined in real time, and when the relative position relationship between the second element and the operation line satisfies the adsorption condition, it is determined that the first element and the second element are aligned based on the operation line. At this time, the adsorption conditions corresponding to the second element are the same as the adsorption conditions corresponding to the first element.
其中,吸附条件可以根据实际情况设定,实施例中,设定吸附条件为操作线与元素在设定方向上相切,或,操作线与元素的设定轮廓线重合。其中,操作线与元素相切是指操作线与元素仅有一个相交点。可以理解的是,该相交点可以不等同于一个第一坐标点或第 二坐标点,相交点占据坐标点的个数与元素轮廓线的线条粗细以及操作线的线条粗细有关。相交点位于元素的设定方向,其中,设定方向与操作线的移动方向有关,可选的,设定方向的相交点是指操作线与元素相互独立(即没有重合部分)且操作线沿移动方向移动时,操作线首次与元素相切时的相交点。在一实施例中,轮廓线是指元素的外部轮廓线,其可以显示在画布中,也可以不显示在画布中。举例而言,正方形的轮廓线为四条边,表格的轮廓线为外框线。可选的,统计元素在第一坐标系下的坐标集合,之后,获取坐标集合中的最***坐标点,进而根据最***坐标点确定轮廓线。在一实施例中,操作线与元素的轮廓线重合是指操作线的部分点与元素的某条轮廓线全部点重合,且操作线的其他点在元素的外部(即操作线的其他点与元素不重合)。典型的,为了保证控制准确性,设定仅在操作线与元素的设定轮廓线重合时,才确定元素和操作线满足吸附条件。其中,设定轮廓线是指操作线与元素相互独立(即没有重叠部分)且操作线沿移动方向移动时,操作线与元素首次产生重合的轮廓线。典型的,通过设定吸附条件,可以保证元素与操作线准确的吸附。举例而言,在操作线向第一元素移动时,若检测到操作线与某个第一元素在设定方向上相切,那么控制第一元素跟随操作线移动,以保证操作线移动过程中与第一元素始终在设定方向上相切。之后,在第一元素跟随操作线移动过程中,若检测到操作线与另一第一元素的设定轮廓线重合,则控制另一第一元素跟随操作线同步移动,以保证操作线移动过程中与另一第一元素的设定轮廓线始终重合。此时,两个第一元素均***作线吸附,且两个第一元素在操作线所在直线方向上对齐。Wherein, the adsorption condition can be set according to actual conditions. In the embodiment, the set adsorption condition is that the operation line is tangent to the element in the set direction, or the operation line coincides with the set contour line of the element. Among them, the tangent of the operation line and the element means that the operation line and the element have only one intersection point. It can be understood that the intersection point may not be equivalent to a first coordinate point or a second coordinate point, and the number of coordinate points occupied by the intersection point is related to the line thickness of the element contour line and the line thickness of the operation line. The intersection point is located in the set direction of the element, where the set direction is related to the moving direction of the operation line. Optionally, the intersection point of the set direction means that the operation line and the element are independent of each other (that is, there is no overlapping part) and the operation line is along When the moving direction moves, the intersection point when the operation line is tangent to the element for the first time. In an embodiment, the contour line refers to the outer contour line of the element, which may or may not be displayed in the canvas. For example, the outline of a square is four sides, and the outline of a table is the outer frame. Optionally, the coordinate set of the element in the first coordinate system is counted, and then the outermost coordinate point in the coordinate set is obtained, and the contour line is determined according to the outermost coordinate point. In one embodiment, the overlap of the operation line and the contour line of the element means that some points of the operation line overlap with all the points of a certain contour line of the element, and other points of the operation line are outside the element (that is, other points of the operation line are Elements do not overlap). Typically, in order to ensure the accuracy of control, the setting only determines that the element and the operation line meet the adsorption condition when the operation line coincides with the set contour line of the element. Among them, the set contour line refers to the contour line where the operation line and the element overlap for the first time when the operation line and the element are independent of each other (that is, there is no overlapping part) and the operation line moves along the moving direction. Typically, by setting the adsorption conditions, the accurate adsorption of the element and the operating line can be ensured. For example, when the operation line moves to the first element, if it is detected that the operation line is tangent to a certain first element in the set direction, then the first element is controlled to follow the operation line to ensure that the operation line is moving. It is always tangent to the first element in the set direction. Later, during the movement of the first element following the operating line, if it is detected that the operating line coincides with the set contour line of another first element, the other first element is controlled to move synchronously with the operating line to ensure the moving process of the operating line The set contour line of the middle and the other first element always coincides. At this time, the two first elements are both adsorbed by the operation line, and the two first elements are aligned in the direction of the straight line where the operation line is located.
可选的,可以理解,当第二元素与操作线满足吸附条件时,建立第二元素与操作线的吸附关系,此时,当第一触控操作继续执行时,第一元素和第二元素均可以跟随操作线移动,以实现用户同时移动对齐的元素。当第一元素和第二元素跟随操作线移动到用户的期望位置后,用户可以取消第一元素和第二元素与操作线的吸附关系。其中,取消吸附关系时,可以采用删除操作线的方式。其中,删除规则实施例不做限定,例如,在元素对齐模式下,画布设定位置显示删除控件,当检测删除控件接收到点击操作时,解除操作线与第一元素以及操作线与第二元素的吸附关系,并删除操作线。再如,检测到操作线接收到设定操作(如双击操作或长按操作)时,确定解除操作线与当前被吸附元素的吸附关系,并删除操作线。取消吸附关系时,还可以保留操作线,例如,在元素对齐模式下,画布设定位置显示吸附关系控制控件,当检测到吸附关系控制控件接收到单击操作时,解除操作线与当前被吸附元素的吸附关系,可以理解的是,解除吸附关系后,若想再次控制第一元素和/或第二元素,则可以再次基于第一触控操作控制操作线向第一元素以及第二元素所在的方 向移动,并在移动过程中检测到操作线与第一元素和第二元素的相对位置关系满足吸附条件时,控制操作线吸附第一元素以及第二元素。需要说明的是,实施例中以一条操作线为例,实际应用中,若当前画布中显示至少两条操作线,则每条操作线均可设置对应的吸附关系控制控件或删除控件等。或者是,当第二元素与操作线满足吸附条件时,固定第一元素和第二元素在显示屏中的显示位置,即取消第一元素与操作线的吸附关系。此时,即使第一触控操作继续执行,第一元素和第二元素均不会继续跟随操作线移动,以实现元素的对齐。Optionally, it can be understood that when the second element and the operation line meet the adsorption condition, the adsorption relationship between the second element and the operation line is established. At this time, when the first touch operation continues to be performed, the first element and the second element Both can follow the operation line to move the aligned elements at the same time. After the first element and the second element move to the user's desired position following the operation line, the user can cancel the adsorption relationship between the first element and the second element and the operation line. Among them, when canceling the adsorption relationship, the operation line can be deleted. Among them, the embodiment of the delete rule is not limited. For example, in the element alignment mode, a delete control is displayed at the set position of the canvas. When it is detected that the delete control receives a click operation, the operation line and the first element and the operation line and the second element are released The adsorption relationship, and delete the operation line. For another example, when it is detected that the operation line receives a setting operation (such as a double-click operation or a long-press operation), it is determined to release the adsorption relationship between the operation line and the currently adsorbed element, and the operation line is deleted. When canceling the adsorption relationship, you can also retain the operation line. For example, in the element alignment mode, the canvas setting position displays the adsorption relationship control control. When the adsorption relationship control control is detected to receive a click operation, the operation line is released from the current adsorption It can be understood that after the adsorption relationship is released, if you want to control the first element and/or the second element again, you can control the operation line to the first element and the second element based on the first touch operation again. When it is detected that the relative positional relationship between the operation line and the first element and the second element meets the adsorption condition during the movement, the operation line is controlled to adsorb the first element and the second element. It should be noted that, in the embodiment, one operation line is taken as an example. In practical applications, if at least two operation lines are displayed in the current canvas, each operation line can be set with a corresponding adsorption relationship control control or delete control. Or, when the second element and the operation line meet the adsorption condition, the display positions of the first element and the second element in the display screen are fixed, that is, the adsorption relationship between the first element and the operation line is cancelled. At this time, even if the first touch operation continues to be performed, neither the first element nor the second element will continue to move with the operation line, so as to achieve the alignment of the elements.
可选的,显示操作线时,其可能穿过某个或多个第一元素,即操作线的部分点在第一元素的内部。此时,为了实现操作线吸附该第一元素,可以先指示用户沿第二元素所在方向的反方向移动操作线,直到操作线与第一元素独立为止,之后,再基于第一触控操作沿第二元素所在的方向移动操作线,或者是,指示用户沿第二元素所在方向反方向移动操作线时,确定操作线与第一元素的相对位置关系是否满足吸附条件,若满足吸附条件,则可以直接建立操作线与第一元素的吸附关系,若不满足吸附条件,可以继续移动操作线。Optionally, when the operation line is displayed, it may pass through one or more first elements, that is, some points of the operation line are inside the first element. At this time, in order to achieve the operation line to adsorb the first element, you can first instruct the user to move the operation line in the opposite direction of the second element, until the operation line is independent of the first element, and then based on the first touch operation along the line Move the operating line in the direction where the second element is located, or when instructing the user to move the operating line in the opposite direction to the direction where the second element is located, determine whether the relative positional relationship between the operating line and the first element meets the adsorption condition, if it meets the adsorption condition, then The adsorption relationship between the operation line and the first element can be established directly. If the adsorption conditions are not met, the operation line can be moved continuously.
可选的,当第一元素满足吸附条件时,若检测到第一触控操作中断,则保持第一元素和操作线的吸附关系,并当再次检测到第一触控操作时,控制第一元素跟随操作线向第二元素移动。Optionally, when the first element meets the adsorption condition, if it is detected that the first touch operation is interrupted, the adsorption relationship between the first element and the operation line is maintained, and when the first touch operation is detected again, the first touch operation is controlled. The element moves to the second element following the operation line.
下面对实施例提供的技术方案进行示例性描述:The technical solutions provided by the embodiments are exemplarily described below:
智能交互平板当前处于元素对齐模式。吸附条件为操作线与元素在设定方向上相切,或,操作线与元素的设定轮廓线重合。图2为本申请一个实施例提供的画布第一示意图。参考图2,当前的画布中显示四个元素,分别为元素11、元素12、元素13以及元素14,同时,画布中还显示操作线15。此时,第一元素为元素11和元素13,第二元素为元素12。The smart interactive tablet is currently in element alignment mode. The adsorption condition is that the operation line is tangent to the element in the set direction, or the operation line coincides with the set contour line of the element. FIG. 2 is a first schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 2, four elements are displayed in the current canvas, namely element 11, element 12, element 13, and element 14. At the same time, the operation line 15 is also displayed in the canvas. At this time, the first element is element 11 and element 13, and the second element is element 12.
在一实施例中,图3为本申请一个实施例提供的画布第二示意图,其为操作线移动过程中画布的截图。参考图3,手指沿箭头指示方向拖拽操作线15,此时,智能交互平板检测到操作线15接收拖拽操作时,确认接收到第一触控操作,且确认拖拽操作的方向为第一元素和第二元素所在的方向。之后,对第一触控操作进行响应,即控制操作线15沿拖拽方向移动。In an embodiment, FIG. 3 is a second schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. 3, the finger drags the operation line 15 in the direction indicated by the arrow. At this time, when the smart interactive tablet detects that the operation line 15 receives the drag operation, it confirms that the first touch operation is received, and the direction of the drag operation is the first The direction in which the first element and the second element are located. After that, respond to the first touch operation, that is, control the operation wire 15 to move along the dragging direction.
在移动过程中,智能交互平板实时检测操作线15与各第一元素的相对位置关系。在一实施例中,图4为本申请一个实施例提供的画布第三示意图,其为操作线移动过程中画布的截图,参考图4,在操作线15移动到当前位置时,确定操作线15与元素13的相对位置关系满足吸附条件,控制元素13跟随操作线15移动,以使元素13与操作线15的相对位置关系 始终满足吸附条件。在一实施例中,基于接收到的第一触控操作继续移动操作线15,图5为本申请一个实施例提供的画布第四示意图,其为操作线移动过程中画布的截图,参考图5,在操作线15移动到当前位置时,元素13同步移动到对应位置,且确定操作线15与元素11的相对位置关系满足吸附条件,此时,控制元素11跟随操作线15移动,以使元素11与操作线15的相对位置关系始终满足吸附条件。此时,元素11和元素13相对于操作线15对齐。在一实施例中,基于第一触控操作继续移动操作线15,图6为本申请一个实施例提供的画布第五示意图,其为操作线移动过程中画布的截图,参考图6,在操作线15移动到当前位置时,元素13和元素11同步移动到对应位置,且确定操作线15与第二元素对应的元素12的相对位置关系满足吸附条件,此时,确认实现元素11、元素12和元素13相对于操作线15对齐,即实现了通过操作线对元素进行控制及对齐。During the movement, the smart interactive tablet detects the relative positional relationship between the operation line 15 and each first element in real time. In one embodiment, FIG. 4 is a third schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. Referring to FIG. 4, when the operation line 15 is moved to the current position, the operation line 15 is determined The relative position relationship with the element 13 satisfies the adsorption condition, and the control element 13 moves following the operation line 15 so that the relative position relationship between the element 13 and the operation line 15 always meets the adsorption condition. In an embodiment, the operation line 15 is moved continuously based on the received first touch operation. FIG. 5 is a fourth schematic diagram of the canvas provided by an embodiment of this application, which is a screenshot of the canvas during the movement of the operation line, refer to FIG. 5. When the operation line 15 moves to the current position, the element 13 moves to the corresponding position synchronously, and it is determined that the relative position relationship between the operation line 15 and the element 11 meets the adsorption condition. At this time, the control element 11 moves with the operation line 15 to make the element The relative positional relationship between 11 and the operating wire 15 always satisfies the suction condition. At this time, the element 11 and the element 13 are aligned with respect to the operation line 15. In one embodiment, the operation line 15 is continued to be moved based on the first touch operation. FIG. 6 is a fifth schematic diagram of the canvas provided by an embodiment of this application. It is a screenshot of the canvas during the movement of the operation line. When the line 15 moves to the current position, the element 13 and the element 11 move to the corresponding position synchronously, and it is determined that the relative position relationship between the operation line 15 and the element 12 corresponding to the second element satisfies the adsorption condition. At this time, confirm that the element 11 and element 12 are realized. Aligning the element 13 with respect to the operation line 15 realizes the control and alignment of the elements through the operation line.
可以理解的是,上述附图中出现的手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。同时,在实际应用中,还可以根据实际需求在画布中显示触发控件、删除控件、吸附关系控制控件、旋转点和/或移动方向标识等,实施例对此不做限定。It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications. At the same time, in actual applications, trigger controls, delete controls, adsorption relationship control controls, rotation points, and/or movement direction identifiers can also be displayed on the canvas according to actual needs, which are not limited in the embodiment.
上述,通过在画布中显示操作线、第一元素和第二元素,并在接收到针对操作线的第一触控操作时,移动操作线,在操作线移动过程中若确认操作线与第一元素的相对位置关系满足吸附条件,则控制第一元素跟随操作线向第二元素移动,以保持第一元素与操作线的相对位置关系不变,之后,当第二元素与操作线的相对位置关系满足吸附条件时,确认第一元素和第二元素基于操作线对齐。采用上述技术手段,可以根据用户的实际需求设置操作线,并通过操作线使得多个元素基于操作线进行对齐,不仅实现了合理、准确地对元素进行对齐控制,且对齐控制过程简单、易于操作,无需用户逐一手动对齐各元素,提升了用户的使用体验。As mentioned above, by displaying the operation line, the first element and the second element in the canvas, and when the first touch operation for the operation line is received, the operation line is moved. If the relative position relationship of the elements meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element to keep the relative position relationship between the first element and the operation line unchanged. Later, when the relative position of the second element and the operation line When the relationship satisfies the adsorption condition, confirm that the first element and the second element are aligned based on the operation line. Using the above technical means, the operation line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operation line through the operation line, which not only realizes reasonable and accurate alignment control of the elements, but also the alignment control process is simple and easy to operate , There is no need for the user to manually align each element one by one, which improves the user experience.
在上述实施例的基础上,设定操作线与第二元素的相对位置关系满足吸附条件时,还包括:控制第二元素跟随操作线移动。On the basis of the foregoing embodiment, when the relative position relationship between the operation line and the second element satisfies the adsorption condition, the setting further includes: controlling the second element to move along the operation line.
在一个实施例中,当第一元素和第二元素基于操作线对齐后,若用户继续移动操作线,则智能交互平板继续检测到第一触控操作,并根据第一触控操作控制第一元素和第二元素跟随操作线继续移动。其中,控制第二元素跟随操作线移动的方式与控制第一元素跟随操作线移动的方式相同。这样做的好处是,可以使得对齐后的元素移动到用户期望的位置上。In one embodiment, after the first element and the second element are aligned based on the operation line, if the user continues to move the operation line, the smart interactive tablet continues to detect the first touch operation, and controls the first touch operation according to the first touch operation. The element and the second element continue to move following the operation line. Wherein, the way of controlling the movement of the second element following the operation line is the same as the way of controlling the movement of the first element following the operation line. The advantage of this is that the aligned elements can be moved to the position desired by the user.
在上述实施例的基础上,设定操作线与第二元素的相对位置关系满足吸附条件时,还包括:固定第一元素和第二元素的显示位置。On the basis of the foregoing embodiment, when the relative position relationship between the operation line and the second element satisfies the adsorption condition, the setting further includes: fixing the display positions of the first element and the second element.
在一个实施例中,当第一元素和第二元素基于操作线对齐后,无论用户是否继续移动操作线,智能交互平板均会取消第一元素与操作线的吸附关系,并且无需建立第二元素与操作线的吸附关系。即固定第一元素和第二元素在画布中的显示位置。这样做的好处是,当第一元素和第二元素基于操作线对齐时,通过固定第一元素和第二元素的显示位置提示用户当前第一元素和第二元素已经对齐。可以理解,固定显示位置后,用户可以结合实际需求调整第一元素和第二元素的显示位置。In one embodiment, when the first element and the second element are aligned based on the operation line, regardless of whether the user continues to move the operation line, the smart interactive tablet will cancel the adsorption relationship between the first element and the operation line, and there is no need to establish the second element The adsorption relationship with the operating line. That is, the display positions of the first element and the second element in the canvas are fixed. The advantage of this is that when the first element and the second element are aligned based on the operation line, the display position of the first element and the second element is fixed to prompt the user that the current first element and the second element are aligned. It can be understood that after the display position is fixed, the user can adjust the display positions of the first element and the second element according to actual needs.
图7为本申请一个实施例提供的一种元素控制方法的流程图。本实施例是在上述实施例的基础上进行具体化。在一个实施例中,设定第一元素和第二元素均位于操作线的第一侧。参考图7,一个实施例中,提供的元素控制方法包括:Fig. 7 is a flowchart of an element control method provided by an embodiment of the application. This embodiment is embodied on the basis of the above-mentioned embodiment. In one embodiment, it is assumed that both the first element and the second element are located on the first side of the operation line. Referring to FIG. 7, in one embodiment, the provided element control method includes:
步骤210、在画布中显示操作线,画布中还显示有第一元素和第二元素。Step 210: Display the operation line in the canvas, and the first element and the second element are also displayed in the canvas.
实施例中,以用户绘制操作线为例进行描述,此时该步骤包括步骤211-步骤212。In the embodiment, the operation line drawn by the user is taken as an example for description. In this case, the step includes step 211 to step 212.
步骤211、响应于接收到的元素对齐触发指令,进入元素对齐模式。Step 211: In response to the received element alignment trigger instruction, enter the element alignment mode.
在一个实施例中,元素对齐触发指令用于触发元素对齐模式。元素对齐触发指令的触发方式可以根据实际情况设定。实施例中,以在画布的设定位置显示触发控件为例。此时,当检测到触发控件接收到单击操作时,确定接收到元素对齐触发指令,并使画布进行元素对齐模式。可选的,进入元素对齐模式后,用户无法在画布中进行书写、画图等操作。可以理解,在进入元素对齐模式前,画布中显示有第一元素和第二元素。In one embodiment, the element alignment trigger instruction is used to trigger the element alignment mode. The trigger mode of the element alignment trigger instruction can be set according to the actual situation. In the embodiment, the display of the trigger control at the set position of the canvas is taken as an example. At this time, when it is detected that the trigger control receives a click operation, it is determined that the element alignment trigger instruction is received, and the canvas is made to perform the element alignment mode. Optionally, after entering the element alignment mode, the user cannot perform operations such as writing and drawing on the canvas. It can be understood that before entering the element alignment mode, the first element and the second element are displayed in the canvas.
可选的,进入元素对齐模式后,用户可以根据实际需求随时退出元素对齐模式。其中,退出元素对齐模式的方式实施例不做限定。例如,当检测到触发控件再次接收到单击操作时,确定接收到元素对齐退出指令,并响应于元素对齐退出指令,退出元素对齐模式。其中,元素对齐退出指令用于退出元素对齐模式。在一实施例中,若当前画布中显示有操作线,则在退出元素对齐模式时,同步删除操作线。可选的,若画布中还显示有操作线相关的控件,则同步删除上述控件。Optionally, after entering the element alignment mode, the user can exit the element alignment mode at any time according to actual needs. The embodiment of the way of exiting the element alignment mode is not limited. For example, when it is detected that the trigger control receives a click operation again, it is determined that the element alignment exit instruction is received, and the element alignment mode is exited in response to the element alignment exit instruction. Among them, the element alignment exit instruction is used to exit the element alignment mode. In one embodiment, if there is an operation line displayed in the current canvas, the operation line is deleted synchronously when the element alignment mode is exited. Optionally, if there are controls related to the operation line still displayed on the canvas, the aforementioned controls are deleted synchronously.
步骤212、响应于接收到的第四触控操作,在画布中绘制操作线。Step 212: In response to the received fourth touch operation, draw an operation line on the canvas.
示例性的,第四触控操作为绘制操作线的触控操作。典型的,进入元素对齐模式后,检测到作用于画布的触控操作,且该触控操作的起始位置与任何控件及操作线均不重合时,确定接收到第四触控操作,并实时确定第四触控操作的触控位置,进而在触控位置中绘制操作线。Exemplarily, the fourth touch operation is a touch operation of drawing an operation line. Typically, after entering the element alignment mode, when a touch operation acting on the canvas is detected, and the starting position of the touch operation does not coincide with any controls and operation lines, it is determined that the fourth touch operation is received, and real-time The touch position of the fourth touch operation is determined, and then the operation line is drawn in the touch position.
在一实施例中,考虑到在绘制操作线后,存在用户需要修改操作线的长度,以调整操作线的移动覆盖范围的情况。其中,移动覆盖范围是指操作线在移动时经过的范围。据 此,实施例中设定执行步骤210之后,还包括:响应于接收到的第五触控操作,调整操作线的长度,第五触控操作作用于操作线的至少一个端点。In an embodiment, it is considered that after the operation line is drawn, the user needs to modify the length of the operation line to adjust the moving coverage of the operation line. Among them, the mobile coverage refers to the range that the operating line passes when it moves. Accordingly, after setting to perform step 210 in the embodiment, it further includes: in response to the received fifth touch operation, adjusting the length of the operation line, where the fifth touch operation acts on at least one end point of the operation line.
在一个实施例中,操作线的至少一个端点可以作为调整操作线长度的调整点。实施例中,以两个端点均为调整点为例进行描述。可选的,为了使用户明确调整点,在显示操作线时,可以对操作线的两端突出显示。例如,图8为本申请一个实施例提供的画布第六示意图。参考图8,画布中操作线21在显示时,其两个端点(端点22和端点23)被突出显示。In one embodiment, at least one end point of the operating wire can be used as an adjustment point for adjusting the length of the operating wire. In the embodiment, the description is made by taking the two end points as adjustment points as an example. Optionally, in order to allow the user to clearly adjust the points, when the operation line is displayed, both ends of the operation line can be highlighted. For example, FIG. 8 is a sixth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 8, when the operation line 21 in the canvas is displayed, its two end points (end point 22 and end point 23) are highlighted.
在一个实施例中,用户可以对一个调整点或两个调整点进行触控操作,以实现长度调整。实施例中,以用户对一个调整点进行触控操作为例进行表述。典型的,当接收到作用于某个调整点的触控操作时,确定接收到第五触控操作,第五触控操作为用于调整操作线长度的操作。其中,第五触控操作的实现方式实施例不做限定。例如,当检测到某个调整点接收到拖拽操作时,确定接收到第五触控操作。再如,若检测到某个调整点接收到单击操作,之后,在画布的其他位置再次接收到单击操作,则确定接收到第五触控操作。实施例中,以拖拽操作为例。In one embodiment, the user can perform a touch operation on one adjustment point or two adjustment points to achieve length adjustment. In the embodiment, the user performs a touch operation on an adjustment point as an example. Typically, when a touch operation acting on a certain adjustment point is received, it is determined that the fifth touch operation is received, and the fifth touch operation is an operation for adjusting the length of the operation line. Among them, the implementation manner of the fifth touch operation is not limited in the embodiment. For example, when it is detected that a drag operation is received at a certain adjustment point, it is determined that the fifth touch operation is received. For another example, if it is detected that a click operation is received at a certain adjustment point, and then the click operation is received again in another position of the canvas, it is determined that the fifth touch operation is received. In the embodiment, the drag operation is taken as an example.
在一个实施例中,当接收到第五触控操作时,实时获取第五触控操作当前触控位置在第一坐标系中的坐标数据,之后,在操作线所在直线中确定与该坐标数据对应的坐标点,控制操作线将调整点移动至该坐标点,并同步调整操作线的长度,以使两个端点之间连续。其中,当第五触控操作在操作线所在的直线上移动时,可以直接将调整点移动到坐标数据对应的坐标点。若第五触控操作并非严格地在操作线所在的直线上移动,则需要在操作线所在直线中确定与该坐标数据对应的坐标点,其中,坐标点确定方式实施例不做限定,例如,在直线中寻找距离坐标数据最近的坐标点。再如,设定直线某个坐标点的垂线经过坐标数据时,确定该坐标点为坐标数据对应的坐标点。In one embodiment, when the fifth touch operation is received, the coordinate data of the current touch position of the fifth touch operation in the first coordinate system is acquired in real time, and then the coordinate data is determined in the line where the operation line is located. For the corresponding coordinate point, control the operating line to move the adjustment point to the coordinate point, and simultaneously adjust the length of the operating line to make the two endpoints continuous. Wherein, when the fifth touch operation moves on the straight line where the operation line is located, the adjustment point can be directly moved to the coordinate point corresponding to the coordinate data. If the fifth touch operation does not strictly move on the line where the operation line is located, it is necessary to determine the coordinate point corresponding to the coordinate data in the line where the operation line is located. The embodiment of the method for determining the coordinate point is not limited, for example, Find the coordinate point closest to the coordinate data in the straight line. For another example, when the vertical line of a certain coordinate point of the set straight line passes through the coordinate data, the coordinate point is determined as the coordinate point corresponding to the coordinate data.
举例而言,图9为本申请一个实施例提供的画布第七示意图。参考图9,显示操作线21时,端点22和端点23被突出显示,此时,操作线21的移动覆盖范围如阴影所示。在一实施例中,检测到端点22接收到第五触控操作,且拖拽方向如图9中箭头所示。此时,根据第五触控操作的坐标数据修改操作线21的长度。图10为本申请一个实施例提供的画布第八示意图,其为响应第五触控操作过程中,某一时刻画布截图。参考图10,根据第五触控操作的坐标数据延长了操作线21的长度。此时,相比于图9,图10中操作线21的移动覆盖范围明显增大了。可以理解的是,上述附图中出现的移动覆盖范围、手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。For example, FIG. 9 is a seventh schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 9, when the operation line 21 is displayed, the end point 22 and the end point 23 are highlighted. At this time, the moving coverage of the operation line 21 is shown in shade. In one embodiment, it is detected that the endpoint 22 has received the fifth touch operation, and the dragging direction is shown by the arrow in FIG. 9. At this time, the length of the operation line 21 is modified according to the coordinate data of the fifth touch operation. FIG. 10 is an eighth schematic diagram of a canvas provided by an embodiment of the application, which is a screenshot of the canvas at a certain time in the process of responding to the fifth touch operation. Referring to FIG. 10, the length of the operation line 21 is extended according to the coordinate data of the fifth touch operation. At this time, compared to FIG. 9, the moving coverage area of the operating wire 21 in FIG. 10 is significantly increased. It is understandable that the moving coverage, fingers and arrows appearing in the above figures are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
在一实施例中,考虑到在绘制操作线后,存在用户需要修改操作线的角度,以调整对 齐方向的情况。其中,对齐方向是指第一元素和第二元素在该方向上对齐。据此,实施例中设定执行步骤210时,还执行:显示旋转点,旋转点与操作线满足第一设定位置关系。且在执行步骤210之后,还包括:响应于接收到的第六触控操作,调整操作线的角度,第六触控操作作用于旋转点。In one embodiment, it is considered that after the operation line is drawn, the user needs to modify the angle of the operation line to adjust the alignment direction. Wherein, the alignment direction refers to the alignment of the first element and the second element in this direction. Accordingly, when step 210 is set to be executed in the embodiment, it is also executed: display the rotation point, and the rotation point and the operation line satisfy the first set position relationship. And after step 210 is performed, the method further includes: in response to the received sixth touch operation, adjusting the angle of the operation line, the sixth touch operation acting on the rotation point.
在一个实施例中,旋转点是用于调整操作线角度的参考点。其中,通过调整操作线的角度可以实现调整元素的对齐方向。实施例中,通过旋转点实现调整操作线的角度。可选的,为了使用户明确旋转点,在显示操作线时,同步显示旋转点。或者,当操作线接收到设定操作(如单击操作或双击操作等)时,显示旋转点。其中,旋转点与操作线满足第一设定位置关系。第一设定位置关系可以根据实际情况设定,例如,图11为本申请一个实施例提供的画布第九示意图。参考图11,画布中显示操作线24时,同步显示旋转点25,且旋转点25位于操作线24中间点的正上方。再如,图12为本申请一个实施例提供的画布第十示意图。参考图12,画布中显示操作线26时,同步显示旋转点27,且旋转点27位于操作线26一侧端点的正上方。实施例中,以旋转点位于操作线中间点的正上方为例。In one embodiment, the rotation point is a reference point for adjusting the angle of the operating line. Among them, the alignment direction of the elements can be adjusted by adjusting the angle of the operation line. In the embodiment, the angle of the operating line is adjusted by rotating the point. Optionally, in order to make the user clarify the rotation point, when the operation line is displayed, the rotation point is displayed synchronously. Or, when the operation line receives a setting operation (such as a single-click operation or a double-click operation, etc.), the rotation point is displayed. Wherein, the rotation point and the operation line satisfy the first set position relationship. The first set position relationship can be set according to actual conditions. For example, FIG. 11 is a ninth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 11, when the operation line 24 is displayed on the canvas, the rotation point 25 is displayed synchronously, and the rotation point 25 is located directly above the middle point of the operation line 24. For another example, FIG. 12 is a tenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 12, when the operation line 26 is displayed on the canvas, the rotation point 27 is simultaneously displayed, and the rotation point 27 is located directly above the end point on one side of the operation line 26. In the embodiment, the rotation point is located directly above the middle point of the operation line as an example.
在一实施例中,第六触控操作是用于调整操作线角度的操作,其作用于旋转点。其中,第六触控操作的实现方式实施例不做限定。例如,旋转点位于操作线的中间点的正上方。此时,中间点可以认为是操作线的旋转中心。旋转点与旋转中心的连线垂直于操作线。当检测到以旋转点为起点的移动操作时,确定接收到第六触控操作。在一实施例中,实时获取第六触控操作移动过程中的当前触控位置,并确认当前触控位置在第一坐标系中的坐标数据,之后,基于坐标数据以及旋转点确定旋转角度,并以操作线中间点为中心,基于旋转角度对操作线进行旋转,以实现改变操作线的角度。其中,基于坐标数据以及旋转点确定旋转角度的计算方式可以根据实际情况设定。例如,确定坐标数据与旋转中心之间的连线,以及旋转点与旋转中心之间的连线,之后,获取两个连线之间的角度并作为旋转角度。可以理解,当第六触控操作实时更新时,坐标数据与旋转中心之间的连线实时改变,而操作线旋转点与旋转中心之间的连线仍然保持为接收第六触控操作之前的连线,以保证旋转角度的准确性。In one embodiment, the sixth touch operation is an operation for adjusting the angle of the operation line, which acts on the rotation point. Among them, the implementation manner of the sixth touch operation is not limited in the embodiment. For example, the rotation point is located directly above the middle point of the operation line. At this time, the intermediate point can be considered as the center of rotation of the operating wire. The connection line between the rotation point and the rotation center is perpendicular to the operation line. When the movement operation with the rotation point as the starting point is detected, it is determined that the sixth touch operation is received. In one embodiment, the current touch position during the movement of the sixth touch operation is acquired in real time, and the coordinate data of the current touch position in the first coordinate system is confirmed, and then the rotation angle is determined based on the coordinate data and the rotation point, And take the middle point of the operation line as the center, and rotate the operation line based on the rotation angle to realize the change of the angle of the operation line. Among them, the calculation method for determining the rotation angle based on the coordinate data and the rotation point can be set according to the actual situation. For example, determine the line between the coordinate data and the center of rotation, and the line between the rotation point and the center of rotation, and then obtain the angle between the two lines and use it as the angle of rotation. It can be understood that when the sixth touch operation is updated in real time, the connection between the coordinate data and the center of rotation changes in real time, and the connection between the rotation point of the operation line and the center of rotation remains the same as before receiving the sixth touch operation. Wire to ensure the accuracy of the rotation angle.
举例而言,图13为本申请一个实施例提供的画布第十一示意图。参考图13,画布中显示操作线24时,同步显示旋转点25。检测到旋转点25接收到第六触控操作,且移动方向如图13中箭头所示。此时,根据第六触控操作的坐标数据修改操作线24的角度。图14为本申请一个实施例提供的画布第十二示意图,其为第六触控操作过程中,某一时刻画布截图。参考图14,根据第六触控操作的坐标数据修改了操作线24的角度,相比于图13,图14 中操作线25的角度发生了变化,使得对齐方向发生了变化,此时,对齐方向由水平对齐变为了斜对齐。可以理解的是,上述附图中出现的手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。For example, FIG. 13 is an eleventh schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 13, when the operation line 24 is displayed on the canvas, the rotation point 25 is displayed synchronously. It is detected that the rotation point 25 has received the sixth touch operation, and the moving direction is shown by the arrow in FIG. 13. At this time, the angle of the operation line 24 is modified according to the coordinate data of the sixth touch operation. FIG. 14 is a twelfth schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas at a certain time during the sixth touch operation process. Referring to FIG. 14, the angle of the operation line 24 is modified according to the coordinate data of the sixth touch operation. Compared with FIG. 13, the angle of the operation line 25 in FIG. 14 has changed, so that the alignment direction has changed. At this time, the alignment The orientation has changed from horizontal alignment to diagonal alignment. It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
在一实施例中,考虑到在绘制操作线后,存在用户需要修改操作线的移动方向的情况。据此,实施例中设定执行步骤210时,还执行:显示移动方向标识,移动方向标识与操作线满足第二设定位置关系,移动方向标识用于指示操作线的移动方向。且在执行步骤210之后,还包括:响应于接收到的第七触控操作,调整移动方向标识,第七触控操作作用于移动方向标识。In an embodiment, it is considered that after the operation line is drawn, the user needs to modify the moving direction of the operation line. According to this, when step 210 is set to be executed in the embodiment, it is also executed: display the movement direction indicator, the movement direction indicator and the operation line meet the second set position relationship, and the movement direction indicator is used to indicate the movement direction of the operation line. And after step 210 is performed, the method further includes: in response to the received seventh touch operation, adjusting the movement direction indicator, and the seventh touch operation acts on the movement direction indicator.
在一个实施例中,移动方向标识用于表示操作线的移动方向。可选的,移动方向标识的标识样式可以根据实际情况设定。在一实施例中,移动方向标识与操作线之间满足第二设定位置关系。其中,第二设定位置关系的内容可以根据实际情况设定。例如,图15为本申请一个实施例提供的画布第十三示意图,参考图15,移动方向标识28设置在操作线29的一端,且指示移动方向为垂直向下的方向以及垂直向上的方向,此时,智能交互平板可以根据元素位置确定垂直向下的方向为设定的移动方向。又如,移动方向标识设置在操作线的中间上方设定距离处。In one embodiment, the movement direction identifier is used to indicate the movement direction of the operation line. Optionally, the logo style of the movement direction logo can be set according to actual conditions. In an embodiment, the movement direction indicator and the operation line satisfy the second set positional relationship. Wherein, the content of the second set position relationship can be set according to actual conditions. For example, FIG. 15 is a thirteenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 15, the movement direction indicator 28 is set at one end of the operation line 29 and indicates that the movement direction is a vertical downward direction and a vertical upward direction. At this time, the smart interactive tablet can determine the vertical downward direction as the set moving direction according to the position of the element. For another example, the movement direction indicator is set at a set distance above the middle of the operating line.
在一实施例中,第七触控操作为用于旋转移动方向标识的操作,其作用于移动方向标识。其中,第七触控操作的实现方式实施例不做限定。例如,当检测到以移动方向标识为起点的移动操作时,确定接收到第七触控操作。在一实施例中,实时获取第七触控操作移动过程中的当前触控位置,并确认当前触控位置在第一坐标系中的坐标数据,之后,基于坐标数据以及移动方向标识的中心点确定旋转角度,之后,以移动方向标识的中心点为基准,以第七触控操作的移动方向为旋转方向,基于旋转角度对移动方向标识进行旋转。其中,旋转角度的计算方式可以根据实际情况设定。例如,设定移动方向标识中心点所在垂线为0°,获取坐标数据与中心点的连线,并将连线与垂线之间的夹角作为旋转角度。In one embodiment, the seventh touch operation is an operation for rotating the movement direction indicator, which acts on the movement direction indicator. Among them, the implementation manner of the seventh touch operation is not limited in the embodiment. For example, when a movement operation with a movement direction indicator as a starting point is detected, it is determined that the seventh touch operation is received. In one embodiment, the current touch position during the movement of the seventh touch operation is acquired in real time, and the coordinate data of the current touch position in the first coordinate system is confirmed, and then the center point identified based on the coordinate data and the movement direction After determining the rotation angle, the center point of the movement direction indicator is used as a reference, the movement direction of the seventh touch operation is used as the rotation direction, and the movement direction indicator is rotated based on the rotation angle. Among them, the calculation method of the rotation angle can be set according to the actual situation. For example, set the vertical line where the center point of the movement direction indicator is located to 0°, obtain the connection line between the coordinate data and the center point, and use the angle between the connection line and the vertical line as the rotation angle.
举例而言,图16为本申请一个实施例提供的画布第十四示意图。参考图16,画布中显示操作线29时,同步显示移动方向标识28,移动方向为垂直向下及向上的方向,此时,操作线29的移动覆盖范围如阴影所示。在一实施例中,检测到移动方向标识28接收到第七触控操作,且移动方向如图16中箭头所示。此时,根据第七触控操作旋转移动方向标识28。图17为本申请一个实施例提供的画布第十五示意图,其为第七触控操作过程中,某一时刻画布截图。参考图17,根据第七触控操作的坐标数据旋转移动方向标识28,相比于图16,图17中移动方向标识28发生变化,因此,移动方向发生了变化,此时,移动覆盖范围跟随 移动方向同步发生变化。可以理解的是,上述附图中出现的移动覆盖范围、手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。For example, FIG. 16 is a fourteenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 16, when the operation wire 29 is displayed on the canvas, the movement direction indicator 28 is displayed synchronously, and the movement direction is a vertical downward and upward direction. At this time, the movement coverage of the operation wire 29 is shown by the shade. In one embodiment, it is detected that the movement direction indicator 28 receives the seventh touch operation, and the movement direction is shown by the arrow in FIG. 16. At this time, the movement direction indicator 28 is rotated according to the seventh touch operation. FIG. 17 is a fifteenth schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas at a certain time during the seventh touch operation process. Referring to FIG. 17, the moving direction indicator 28 is rotated according to the coordinate data of the seventh touch operation. Compared with FIG. 16, the moving direction indicator 28 in FIG. 17 has changed. Therefore, the moving direction has changed. At this time, the moving coverage area follows the movement. The direction changes synchronously. It is understandable that the moving coverage, fingers and arrows appearing in the above figures are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
需要说明的是,用于修改操作线长度的端点、旋转点以及移动方向标识可以在显示操作线时同步显示,也可以在接收到显示指令时再显示。其中,显示指令的触发方式以及触发时间在本实施例不做限定。例如,设定显示控件,当检测到该显示控件接收到单击操作时,确定接收到显示指令。又如,当操作线接收到设定操作(如单击操作或双击操作等)时,确定接收到显示指令。可选的,端点、旋转点以及移动方向标识可以采用同一显示指令同时显示。也可以设定端点、旋转点以及移动方向标识采用不同的显示指令分别显示。可选的,当基于旋转点调整操作线角度时,移动方向标识可以同步调整,即调整角度时,保持移动方向标识与操作线的相对位置关系不变。或者是,基于旋转点调整操作线角度时,移动方向标识可以固定,即调整角度时,保持移动方向标识与操作线的相对位置关系不变。It should be noted that the endpoints, rotation points, and movement direction identifiers used to modify the length of the operation line can be displayed simultaneously when the operation line is displayed, or can be displayed again when the display instruction is received. The trigger mode and trigger time of the display instruction are not limited in this embodiment. For example, setting a display control, when it is detected that the display control receives a click operation, it is determined that a display instruction is received. For another example, when the operation line receives a setting operation (such as a single-click operation or a double-click operation, etc.), it is determined that the display instruction is received. Optionally, the end point, the rotation point, and the movement direction indicator can be displayed at the same time using the same display instruction. It is also possible to set the endpoint, rotation point and movement direction indicator to be displayed separately using different display instructions. Optionally, when the angle of the operation line is adjusted based on the rotation point, the movement direction indicator can be adjusted synchronously, that is, when the angle is adjusted, the relative position relationship between the movement direction indicator and the operation wire is kept unchanged. Or, when adjusting the angle of the operating line based on the rotation point, the moving direction indicator may be fixed, that is, when adjusting the angle, the relative positional relationship between the moving direction indicator and the operating line is kept unchanged.
步骤220、响应于接收到的第九触控操作,选定第二元素。Step 220: In response to the received ninth touch operation, the second element is selected.
可选的,显示操作线后,设定由用户选定第二元素。实施例中,将选定第二元素的触控操作记为第九触控操作。其中,第九触控操作的触发方式实施例不作限定。例如,当检测到任一元素接收到双击操作、单击操作或长按操作后,确认接收到第九触控操作。之后,确认该元素是否位于操作线的移动方向上,若位于操作线的移动方向上,则将该元素确认为第二元素,同时对设定方向进行验证。否则,提示用户重新选定第二元素。之后,智能交互平板可将第二元素与操作线之间的元素确定为第一元素。可以理解,人为选定第二元素的好处是,可使智能交互平板明确当前用户期望对齐的元素。当对齐第二元素后,若操作线继续移动且与其他元素满足吸附条件,则会忽略其他元素。即当操作线与第二元素满足吸附条件后,不在检测操作线与其他元素是否满足吸附条件。Optionally, after the operation line is displayed, the second element is set to be selected by the user. In the embodiment, the touch operation of selecting the second element is recorded as the ninth touch operation. The embodiment of the trigger mode of the ninth touch operation is not limited. For example, when it is detected that any element receives a double-click operation, a single-click operation, or a long-press operation, it is confirmed that the ninth touch operation is received. After that, it is confirmed whether the element is located in the moving direction of the operating line, and if it is located in the moving direction of the operating line, the element is confirmed as the second element, and the set direction is verified at the same time. Otherwise, the user is prompted to reselect the second element. After that, the smart interactive tablet can determine the element between the second element and the operation line as the first element. It can be understood that the advantage of artificially selecting the second element is that the smart interactive tablet can clarify the elements that the current user expects to be aligned. When the second element is aligned, if the operation line continues to move and meets the adsorption condition with other elements, other elements will be ignored. That is, when the operation line and the second element meet the adsorption conditions, it is not checked whether the operation line and other elements meet the adsorption conditions.
可以理解,用户可以同样选定第一元素,此时,第一元素的选定方式可以与第二元素的选定方式不同或相同。当相同时,可以将用户选定的、距离操作线最远的元素确定为第二元素,其余元素确定为第一元素。It can be understood that the user can also select the first element. At this time, the selection method of the first element may be different or the same as the selection method of the second element. When they are the same, the element selected by the user that is farthest from the operation line can be determined as the second element, and the remaining elements can be determined as the first element.
步骤230、响应于接收到的第一触控操作,移动操作线。Step 230: In response to the received first touch operation, move the operation line.
步骤240、操作线与第一元素的相对位置关系满足吸附条件时,控制第一元素跟随操作线向第二元素移动,操作线与第二元素的相对位置关系满足吸附条件时第一元素与第二元素基于操作线对齐。Step 240: When the relative position relationship between the operation line and the first element meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element. When the relative position relationship between the operation line and the second element meets the adsorption condition, the first element and the first element The two elements are aligned based on the operation line.
步骤230和步骤240中移动操作可以认为是向操作线的第一侧进行移动。The moving operation in step 230 and step 240 can be regarded as moving to the first side of the operation line.
步骤250、响应于接收到的第二触控操作,向操作线的第二侧移动操作线,并控制第一元素和第二元素跟随操作线移动,第二侧为第一侧的相对侧。Step 250: In response to the received second touch operation, move the operation line to the second side of the operation line, and control the first element and the second element to follow the operation line. The second side is the opposite side of the first side.
示例性的,考虑到元素对齐后,用户可能希望调整元素的显示位置。因此,实施例中设定操作线还可以向第二元素所在方向的反方向移动,即向操作线的第二侧移动。在一个实施例中,第二触控操作为控制操作线向第二侧移动的操作。由于第二侧为第一侧的相对侧,因此,第二触控操作与第一触控操作之间触控方式相同,触控方向相反。可以理解,第一触控操作和第二触控操作可以为不同的操作,即用户可以先执行第一触控操作后执行第二触控操作。或者是,第一触控操作和第二触控操作也可以为同一触控操作,即当第二元素和第一元素对齐后,用户可以不离开屏幕,而是向第二侧移动操作线,此时,智能交互平板确定由第一触控操作变为第二触控操作。Exemplarily, after considering the alignment of the elements, the user may wish to adjust the display position of the elements. Therefore, in the embodiment, the setting operation line can also move in the opposite direction of the direction where the second element is located, that is, move to the second side of the operation line. In one embodiment, the second touch operation is an operation of controlling the operation line to move to the second side. Since the second side is the opposite side of the first side, the touch mode between the second touch operation and the first touch operation is the same, and the touch direction is opposite. It can be understood that the first touch operation and the second touch operation may be different operations, that is, the user may perform the first touch operation first and then perform the second touch operation. Or, the first touch operation and the second touch operation can also be the same touch operation, that is, when the second element is aligned with the first element, the user can move the operation line to the second side without leaving the screen. At this time, the smart interactive tablet determines to change from the first touch operation to the second touch operation.
在一实施例中,由于第一元素和第二元素与操作线之间的相对位置关系均满足吸附条件,此时,控制操作线向第二侧移动时,第一元素和第二元素均跟随操作线移动,以保持第一元素和第二元素与操作线之间的相对位置关系均满足吸附条件。此时,可以使用户将对齐后的元素放置在期望的位置上。其中,控制元素跟随操作线向第二侧移动与控制元素跟随操作线向第一侧移动的实现方式相同,在此不做赘述。In an embodiment, since the relative positional relationship between the first element and the second element and the operation line all satisfy the adsorption condition, at this time, when the control operation line moves to the second side, both the first element and the second element follow The operation line moves to keep the relative positional relationship between the first element and the second element and the operation line satisfying the adsorption condition. At this time, the user can place the aligned elements in the desired position. Wherein, the control element moving to the second side following the operating line is implemented in the same manner as the control element moving to the first side following the operating line, and will not be repeated here.
举例而言,图18为本申请一个实施例提供的画布第十六示意图,其为操作线向其第一侧移动后画布的界面图。第一侧所在的方向为垂直向下的方向,此时,参考图18,第一元素202、第一元素204以及第二元素203***作线201吸附,且基于操作线201对齐。在一实施例中,智能交互平板检测到操作线201接收拖拽操作,且拖拽操作指向操作线的第二侧,确认接收到第二触控操作,并对第二触控操作进行响应,即控制操作线201向第二侧移动,即向操作线垂直向上的方向移动。在移动过程中,智能交互平板控制第一元素202、第一元素204以及第二元素203跟随操作线201移动。在一实施例中,图19为本申请一个实施例提供的画布第十七示意图,其为操作线移动过程中画布的截图,从图19可知,第一元素202、第一元素204以及第二元素203跟随操作线201向第二侧移动。可以理解的是,上述附图中出现的手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。For example, FIG. 18 is a sixteenth schematic diagram of the canvas provided by an embodiment of the application, which is an interface diagram of the canvas after the operation line is moved to the first side thereof. The direction of the first side is a vertical downward direction. At this time, referring to FIG. 18, the first element 202, the first element 204 and the second element 203 are adsorbed by the operation line 201 and aligned based on the operation line 201. In one embodiment, the smart interactive tablet detects that the operation line 201 receives a drag operation, and the drag operation points to the second side of the operation line, confirms that the second touch operation is received, and responds to the second touch operation. That is, the operation wire 201 is controlled to move to the second side, that is, to move in the vertical upward direction of the operation wire. During the movement, the smart interactive tablet controls the first element 202, the first element 204, and the second element 203 to follow the operation line 201 to move. In an embodiment, FIG. 19 is a seventeenth schematic diagram of the canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. From FIG. 19, it can be seen that the first element 202, the first element 204, and the second element The element 203 follows the operation line 201 to move to the second side. It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
可选的,在操作线所在的直线上显示吸附关系控制控件,若吸附关系控制控件未被选中,那么操作线向第二侧移动时,第一元素和第二元素不跟随移动,即操作线和第一元素以及第二元素取消吸附关系。若吸附关系控制控件被选中,那么操作线向第二侧移动时,第一元素和第二元素跟随移动。可以理解的时,无论吸附关系控制控件是否被选中,操作线向第一侧移动时,只要第一元素与操作线间的相对位置关系满足吸附条件,第一元素便 可以跟随操作线同步移动。Optionally, display the adsorption relationship control control on the line where the operation line is located. If the adsorption relationship control control is not selected, when the operation line moves to the second side, the first element and the second element do not follow the movement, that is, the operation line Cancel the adsorption relationship with the first element and the second element. If the adsorption relationship control control is selected, when the operation line moves to the second side, the first element and the second element follow the movement. It is understandable that no matter whether the adsorption relationship control control is selected, when the operation line moves to the first side, as long as the relative position relationship between the first element and the operation line satisfies the adsorption condition, the first element can move synchronously with the operation line.
实际应用中,也可以设定操作线向除第一方向外的任意方向移动,此时,第一元素可以跟随操作线任意移动。In practical applications, the operation line can also be set to move in any direction other than the first direction. At this time, the first element can move arbitrarily following the operation line.
上述,通过在画布中显示操作线、第一元素和第二元素,并在接收到针对操作线的第一触控操作时向操作线的第一侧移动操作线,在操作线移动过程中若确认操作线与第一元素的相对位置关系满足吸附条件,则控制第一元素跟随操作线移动,以保持相对位置关系不变,当操作线与第二元素的相对位置关系满足吸附条件时,确定第一元素和第二元素基于操作线对齐,在一实施例中,接收到针对操作线的第二触控操作时,沿操作线的第二侧移动操作线,并控制第一元素和第二元素跟随操作线同步移动,以保持相对位置关系不变的技术手段,可以实现根据用户的实际需求设置操作线,并通过操作线使得多个元素基于操作线进行对齐,合理、准确地实现对齐控制,且实现方式简单,无需用户逐一手动对齐各元素,同时,在对齐元素后,还可以通过操作线移动对齐的元素,使得元素显示在用户期望的位置上。此外,操作线控制方式灵活,通过操作线的端点可以调整操作线的长度,以改变操作线移动覆盖范围,进而改变待对齐的元素的数量。通过旋转点可以改变操作线的角度,进而改变对齐方向。通过移动方向标识可以改变操作线的可移动方向,以调整操作线移动范围。使得对齐结果更加符合用户的需求,提升了用户的使用体验。As mentioned above, by displaying the operation line, the first element and the second element on the canvas, and moving the operation line to the first side of the operation line when the first touch operation is received for the operation line, if the operation line is moving, if Confirm that the relative position relationship between the operation line and the first element meets the adsorption condition, then control the first element to follow the operation line to keep the relative position relationship unchanged. When the relative position relationship between the operation line and the second element meets the adsorption condition, confirm The first element and the second element are aligned based on the operation line. In one embodiment, when the second touch operation for the operation line is received, the operation line is moved along the second side of the operation line, and the first element and the second element are controlled. Elements move synchronously with the operating line to keep the relative positional relationship unchanged. The operating line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operating line through the operating line, and the alignment control can be realized reasonably and accurately. , And the implementation method is simple, no need for the user to manually align each element one by one. At the same time, after aligning the elements, the aligned elements can also be moved through the operation line, so that the elements are displayed in the desired position of the user. In addition, the control method of the operation line is flexible, and the length of the operation line can be adjusted through the end point of the operation line to change the moving coverage of the operation line, thereby changing the number of elements to be aligned. By rotating the point, you can change the angle of the operating line, and then change the alignment direction. The movable direction of the operating line can be changed through the moving direction indicator to adjust the moving range of the operating line. The alignment result is more in line with the user's needs, and the user's experience is improved.
实际应用中,在画布中显示操作线时,存在操作线穿过某个元素的情况,此时,若想要吸附该元素,则需要调整操作线的位置。据此,实施例设定画布中显示操作线时,操作线穿过第一元素的内部区域,第二元素位于操作线的第一侧,同时,设定在响应于接收到的第一触控操作,移动操作线之前,还包括:响应于接收到的第三触控操作,向操作线的第二侧移动操作线,操作线与第一元素的相交点为空或操作线与第一元素之间满足吸附条件时确认操作线离开第一元素的内部区域,第二侧为第一侧的相对侧。In actual applications, when the operation line is displayed on the canvas, there is a case where the operation line passes through an element. At this time, if you want to adsorb the element, you need to adjust the position of the operation line. Accordingly, the embodiment sets that when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line. At the same time, it is set in response to the received first touch. Operation, before moving the operating line, it further includes: in response to the received third touch operation, moving the operating line to the second side of the operating line, the intersection point of the operating line and the first element is empty or the operating line and the first element When the adsorption conditions are satisfied, it is confirmed that the operation line leaves the inner area of the first element, and the second side is the opposite side of the first side.
在一个实施例中,操作线可以穿过一个第一元素或多个第一元素。操作线穿过元素的内部区域是指操作线的部分点与元素的内部区域坐标产生重合。在一实施例中,若用户想要实现在待对齐的元素中包含当前穿过的第一元素,则可以通过向操作线的第二侧移动操作线的方式,使第一元素与操作线满足吸附条件,即使得操作线离开第一元素的内部区域。此时,将向第二侧移动操作线的触控操作记为第三触控操作。其中,第三触控操作与第二触控操作的实现方式相同。In one embodiment, the operation line may pass through one first element or multiple first elements. The operation line passing through the inner area of the element means that some points of the operation line coincide with the coordinates of the inner area of the element. In an embodiment, if the user wants to include the first element currently passing through in the elements to be aligned, he can move the operation line to the second side of the operation line to make the first element and the operation line meet The adsorption conditions are such that the operating line leaves the inner area of the first element. At this time, the touch operation of moving the operation wire to the second side is recorded as the third touch operation. Wherein, the third touch operation is implemented in the same manner as the second touch operation.
在一个实施例中,设定操作线移动过程中包含两种场景:In one embodiment, the process of setting the operation line movement includes two scenarios:
操作线与第一元素无法实现吸附。此时,设定仅在操作线向第一侧移动时与元素实现 吸附。该情况下,用户仅需控制操作线移动,使得第一元素全部位于操作线的第一侧(即操作线离开第一元素的内部区域)即可。其中,操作线离开第一元素的内部区域包含两种类型,一是,操作线与第一元素没有任何的重合,即操作线与第一元素的相交点为空,二是,操作线与第一元素满足吸附条件,即当操作线再向第一侧移动时,可以实现吸附第一元素。The operation line and the first element cannot be adsorbed. At this time, set the adsorption to the element only when the operation line moves to the first side. In this case, the user only needs to control the movement of the operation line so that all the first elements are located on the first side of the operation line (that is, the operation line leaves the inner area of the first element). Among them, the inner area of the operation line leaving the first element includes two types. One is that the operation line does not overlap with the first element, that is, the intersection point of the operation line and the first element is empty, and the other is that the operation line and the first element are empty. One element satisfies the adsorption condition, that is, when the operating line moves to the first side, the first element can be adsorbed.
举例而言,图20为本申请一个实施例提供的画布第十八示意图。参考图20,在画布中显示操作线205时,其穿过第一元素206。智能交互平板检测到操作线205接收拖拽操作,且拖拽操作指向操作线的第二侧,确认接收到第三触控操作,并对第三触控操作进行响应,即控制操作线205沿第二侧的移动方向进行移动,以使得操作线205离开第一元素206的内部区域。图21为本申请一个实施例提供的画布第十九示意图,其为移动操作线后的画布示意图,从图21可知,操作线205离开第一元素206的内部区域。可以理解的是,上述附图中出现的手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。For example, FIG. 20 is an eighteenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 20, when the operation line 205 is displayed in the canvas, it passes through the first element 206. The smart interactive tablet detects that the operation line 205 receives the drag operation, and the drag operation points to the second side of the operation line, confirms that the third touch operation is received, and responds to the third touch operation, that is, control the operation line 205 to move along The movement direction of the second side moves so that the operation wire 205 leaves the inner area of the first element 206. FIG. 21 is a nineteenth schematic diagram of the canvas provided by an embodiment of the application, which is a schematic diagram of the canvas after the operation line is moved. It can be seen from FIG. 21 that the operation line 205 leaves the inner area of the first element 206. It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
二、操作线与第一元素可以实现吸附。此时,在操作线的移动过程中,实时获取第一元素和操作线之间的相对位置关系,并在相对位置关系满足吸附条件时,控制第一元素跟随操作线沿第二侧的移动方向同步移动,此时,第一元素全部位于操作线的第一侧上。其中,相对位置关系确认方式与第一元素和操作线的相对位置关系确认方式相同。在一实施例中,当控制操作线沿第一侧或第二侧移动时,被吸附的第一元素跟随操作线沿第一侧或第二侧移动。2. The operation line and the first element can be adsorbed. At this time, during the movement of the operation line, the relative position relationship between the first element and the operation line is obtained in real time, and when the relative position relationship meets the adsorption condition, the first element is controlled to follow the movement direction of the operation line along the second side Move synchronously. At this time, all the first elements are located on the first side of the operating line. Wherein, the confirmation method of the relative position relationship is the same as the confirmation method of the relative position relationship between the first element and the operation line. In one embodiment, when the control operation line moves along the first side or the second side, the adsorbed first element follows the operation line to move along the first side or the second side.
举例而言,图20为本申请一个实施例提供的画布第十八示意图。参考图20,在画布中显示操作线205时,其穿过第一元素206。智能交互平板检测到操作线205接收拖拽操作,且拖拽操作指向操作线的第二侧,确认接收到第三触控操作,并对第三触控操作进行响应,即控制操作线205沿第二侧的移动方向移动,以使操作线205离开第一元素206的内部区域。在操作线205的移动过程中,实时检测操作线205与第一元素206的相对位置关系。在一实施例中,图22为本申请一个实施例提供的画布第二十示意图,其为操作线205与第一元素206的相对位置关系满足吸附关系时的画布示意图,此时,控制第一元素206跟随操作线205沿第二侧或第一侧移动,图22中以第二侧移动为例。在一实施例中,图23为本申请一个实施例提供的画布第二十一示意图,其为操作线移动过程中画布的截图,参考图23,在操作线205移动到当前位置时,第一元素206同步移动到对应位置,即操作线移动过程中实现了吸附第一元素。可以理解的是,上述附图中出现的手指和箭头仅用于解释技术方案,实际应用中不会显示在画布中。For example, FIG. 20 is an eighteenth schematic diagram of a canvas provided by an embodiment of this application. Referring to FIG. 20, when the operation line 205 is displayed in the canvas, it passes through the first element 206. The smart interactive tablet detects that the operation line 205 receives the drag operation, and the drag operation points to the second side of the operation line, confirms that the third touch operation is received, and responds to the third touch operation, that is, control the operation line 205 to move along The moving direction of the second side moves so that the operation wire 205 leaves the inner area of the first element 206. During the movement of the operating wire 205, the relative positional relationship between the operating wire 205 and the first element 206 is detected in real time. In one embodiment, FIG. 22 is a schematic diagram of the twentieth canvas provided by an embodiment of the application. It is a schematic diagram of the canvas when the relative positional relationship between the operation line 205 and the first element 206 satisfies the adsorption relationship. At this time, control the first The element 206 follows the operation line 205 to move along the second side or the first side. In FIG. 22, the movement of the second side is taken as an example. In an embodiment, FIG. 23 is a schematic diagram of the twenty-first canvas provided by an embodiment of the application, which is a screenshot of the canvas during the movement of the operation line. Referring to FIG. 23, when the operation line 205 moves to the current position, the first The element 206 moves to the corresponding position synchronously, that is, the first element is adsorbed during the movement of the operation line. It is understandable that the fingers and arrows appearing in the above drawings are only used to explain the technical solution, and will not be displayed on the canvas in actual applications.
可以理解,第一触控操作和第三触控操作可以为不同的操作,即用户可以先执行第三触控操作后执行第一触控操作。或者是,第一触控操作和第三触控操作也可以为同一触控操作,即当操作线离开第一元素的内部区域后,用户可以不离开屏幕,而是沿第一侧继续移动操作线,此时,智能交互平板确定由第三触控操作变为第一触控操作。It can be understood that the first touch operation and the third touch operation may be different operations, that is, the user may perform the third touch operation first and then perform the first touch operation. Or, the first touch operation and the third touch operation can also be the same touch operation, that is, when the operation line leaves the inner area of the first element, the user may not leave the screen, but continue to move along the first side. Line, at this time, the smart interactive tablet determines to change from the third touch operation to the first touch operation.
通过上述设定,可以防止在操作线穿过某个元素时,无法实现对该元素吸附的情况,实现了通过操作线控制该元素与其他元素对齐。Through the above setting, it is possible to prevent the element from being unable to be adsorbed when the operation line passes through an element, and to realize the alignment of the element with other elements through the operation line.
可以理解,在操作线向第二元素移动的过程中,操作线经过的某个元素可能不是用户期望对齐的元素,此时,用户可以固定该元素的显示位置,以在操作线与该元素的相对位置关系满足吸附条件时,元素不跟随操作线移动,进而使得对齐的元素中不包含该元素。据此,设定画布上还显示有第三元素;在画布中显示操作线之后,还包括:响应于接收到的第八触控操作,设定第三元素为固定状态;响应于接收到的第一触控操作,移动操作线时,还包括:控制操作线经过第三元素,且第三元素的显示位置固定。It can be understood that in the process of moving the operation line to the second element, an element passed by the operation line may not be the element that the user expects to align. At this time, the user can fix the display position of the element so that the operation line and the element When the relative position relationship satisfies the adsorption condition, the element does not follow the operation line to move, so that the element is not included in the aligned elements. Accordingly, the third element is set to be displayed on the canvas; after the operation line is displayed in the canvas, it also includes: in response to the received eighth touch operation, setting the third element to a fixed state; in response to the received The first touch operation, when the operation line is moved, further includes: controlling the operation line to pass through the third element, and the display position of the third element is fixed.
在一个实施例中,将操作线移动过程中会经过但无需对齐的元素记为第三元素,并将相应的状态记为固定状态。在一实施例中,在显示操作线之前或之后,用户可以通过设定的触控操作选定第三元素。实施例中,将设定的触控操作记为第八触控操作。其中,第八触控操作的触发方式可以根据实际情况设定,如针对元素的长按操作、双击操作等。可选的,第八触控操作的触控方式与第九触控操作的触发方式不同。In one embodiment, the element that will pass during the movement of the operation line but does not need to be aligned is recorded as the third element, and the corresponding state is recorded as the fixed state. In one embodiment, before or after the operation line is displayed, the user can select the third element through a set touch operation. In the embodiment, the set touch operation is recorded as the eighth touch operation. Among them, the trigger mode of the eighth touch operation can be set according to actual conditions, such as a long-press operation and a double-click operation for an element. Optionally, the touch mode of the eighth touch operation is different from the trigger mode of the ninth touch operation.
选定第三元素后,在根据第一触控操作移动操作线的过程中,无需确认操作线与第三元素的相对位置关系。即不会出现第三元素跟随操作线移动的情况。此时,第三元素在画布中的显示位置固定。可以理解,第三元素的显示位置固定后,除了第一触控操作外,其他移动操作线的触控操作也不会触发智能交互平板确认操作线与第三元素的相对位置关系。需要说明,第一元素以及第三元素之间的排列顺序实施例不做限定。After the third element is selected, in the process of moving the operation line according to the first touch operation, there is no need to confirm the relative position relationship between the operation line and the third element. That is, the third element will not follow the operation line to move. At this time, the display position of the third element in the canvas is fixed. It can be understood that after the display position of the third element is fixed, in addition to the first touch operation, touch operations of other moving operation lines will not trigger the smart interactive tablet to confirm the relative position relationship between the operation line and the third element. It should be noted that the embodiment of the arrangement sequence between the first element and the third element is not limited.
可选的,若用户想要将第三元素归入待对齐元素,那么可以对第三元素再次执行第八触控操作,此时,智能交互平板取消第三元素的固定状态,即将第三元素归为第一元素或第二元素。相应的,在移动操作线的过程中,需要确认操作线与第三元素的相对位置关系,并在满足吸附条件时,控制第三元素跟随操作线移动。Optionally, if the user wants to classify the third element as the element to be aligned, he can perform the eighth touch operation again on the third element. At this time, the smart interactive tablet cancels the fixed state of the third element, that is, the third element Classified as the first element or the second element. Correspondingly, in the process of moving the operation line, it is necessary to confirm the relative positional relationship between the operation line and the third element, and when the adsorption condition is satisfied, control the third element to follow the operation line to move.
设置第三元素的好处是,可以使得对齐元素的选择更加灵活,提升用户的交互体验。The advantage of setting the third element is that it can make the selection of alignment elements more flexible and enhance the user's interactive experience.
图24为本申请一个实施例提供的一种元素控制方法的流程图。本实施例中提供的元素控制方法与上述实施例提供的元素控制方法应用在相同的场景中。参考图24,本实施例提供的元素控制方法包括:FIG. 24 is a flowchart of an element control method provided by an embodiment of this application. The element control method provided in this embodiment and the element control method provided in the foregoing embodiment are applied in the same scenario. Referring to FIG. 24, the element control method provided by this embodiment includes:
步骤310、在画布中显示操作线,画布中还显示有第一元素和第二元素。Step 310: Display the operation line in the canvas, and the first element and the second element are also displayed in the canvas.
步骤320、响应于接收到的第一触控操作,监听操作线的移动事件。Step 320: In response to the received first touch operation, monitor the movement event of the operation line.
在一个实施例中,显示操作线后,若确认画布中接收到触控操作,则获取触控操作在第一坐标系中的起始位置,若确定起始位置位于操作线上,且触控操作的拖拽方向为第一元素和第二元素所在的方向,则确定接收到第一触控操作。之后,控制操作线沿拖拽方向跟随第一触控操作移动,即执行移动事件。此时,智能交互平板持续监听移动事件。其中,监听移动事件是指实时确认操作线在第一坐标系内的坐标集合(位置),并将该位置与各第一元素和第二元素在第一坐标系内的坐标集合(位置)进行比较,以确认相对位置关系。In one embodiment, after the operation line is displayed, if it is confirmed that the touch operation is received in the canvas, the start position of the touch operation in the first coordinate system is obtained, and if it is determined that the start position is on the operation line, and the touch If the dragging direction of the operation is the direction where the first element and the second element are located, it is determined that the first touch operation is received. After that, the control operation line moves along the dragging direction following the first touch operation, that is, the movement event is executed. At this time, the smart interactive tablet continues to monitor mobile events. Among them, monitoring the movement event refers to real-time confirmation of the coordinate set (position) of the operation line in the first coordinate system, and the coordinate set (position) of the first element and the second element in the first coordinate system is performed with this position. Compare to confirm the relative position relationship.
可选的,显示操作线后,智能交互平板根据操作线的长度、角度以及设定方向,确定操作线的移动覆盖范围,并确认第一元素和第二元素。其中,移动覆盖范围可以是在第一坐标系内的坐标范围。Optionally, after the operation line is displayed, the smart interactive tablet determines the moving coverage of the operation line according to the length, angle, and set direction of the operation line, and confirms the first element and the second element. Wherein, the mobile coverage range may be a coordinate range in the first coordinate system.
步骤330、检测到操作线与第一元素的相对位置关系满足吸附条件时,控制第一元素跟随操作线向第二元素移动。Step 330: When it is detected that the relative position relationship between the operation line and the first element satisfies the adsorption condition, the first element is controlled to follow the operation line to move to the second element.
在一个实施例中,在监听过程中,实时计算操作线与各第一元素的相对位置关系,并确定相对位置关系是否满足吸附条件。其中,吸附条件为操作线与第一元素在设定方向上相切,或,操作线与第一元素的设定轮廓线重合。当确定相对位置关系满足吸附条件时,确定操作线与第一元素为吸附关系,并控制第一元素跟随操作线移动。In one embodiment, during the monitoring process, the relative position relationship between the operation line and each first element is calculated in real time, and it is determined whether the relative position relationship satisfies the adsorption condition. Wherein, the adsorption condition is that the operation line is tangent to the first element in the set direction, or the operation line coincides with the set contour line of the first element. When it is determined that the relative position relationship satisfies the adsorption condition, it is determined that the operation line and the first element are in an adsorption relationship, and the first element is controlled to follow the operation line to move.
步骤340、检测到操作线与第二元素的相对位置关系满足吸附条件时,确认第一元素和第二元素基于操作线对齐。Step 340: When it is detected that the relative position relationship between the operation line and the second element meets the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
在一个实施例中,继续移动操作线时,智能交互平板继续监听移动事件,并在监听过程中,实时计算操作线与第二元素的相对位置关系,并确定相对位置关系是否满足吸附条件。其中,吸附条件为操作线与第二元素在设定方向上相切,或,操作线与第二元素的设定轮廓线重合。当确定相对位置关系满足吸附条件时,确认第一元素和第二元素基于操作线对齐。In one embodiment, when the operation line continues to be moved, the smart interactive tablet continues to monitor the movement event, and in the monitoring process, calculates the relative position relationship between the operation line and the second element in real time, and determines whether the relative position relationship satisfies the adsorption condition. Wherein, the adsorption condition is that the operation line is tangent to the second element in the set direction, or the operation line coincides with the set contour line of the second element. When it is determined that the relative positional relationship satisfies the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
上述,通过在画布中显示操作线、第一元素以及第二元素,响应于接收到的第一触控操作,控制操作线移动,并监听操作线的移动事件,若监听到操作线与画布中每个第一元素的相对位置关系满足吸附条件时,控制每个第一元素均跟随操作线向第二元素移动,并在操作线与第二元素的相对位置关系满足吸附条件时确认所述第一元素和所述第二元素基于所述操作线对齐的技术方案,可以实现根据用户的实际需求设置操作线,并使得多个元 素基于操作线进行对齐,不仅合理、准确地实现对齐控制,且计算过程简单,计算量小,同时,无需用户逐一手动对齐各元素,提升了用户的使用体验。As mentioned above, by displaying the operation line, the first element and the second element in the canvas, in response to the received first touch operation, the operation line is controlled to move, and the movement event of the operation line is monitored. If the operation line and the canvas are monitored When the relative positional relationship of each first element meets the adsorption condition, control each first element to follow the operation line to move to the second element, and confirm the first element when the relative position relationship between the operation line and the second element meets the adsorption condition The technical solution for aligning the first element and the second element based on the operation line can realize the setting of the operation line according to the actual needs of the user, and the alignment of multiple elements based on the operation line, which not only achieves reasonable and accurate alignment control, but also The calculation process is simple and the amount of calculation is small. At the same time, the user does not need to manually align each element one by one, which improves the user experience.
在上述实施例的基础上,确认第一元素和第二元素基于操作线对齐之后,还包括:解除第一元素与操作线的吸附关系以及第二元素与操作线的吸附关系。On the basis of the foregoing embodiment, after confirming that the first element and the second element are aligned based on the operation line, the method further includes: releasing the adsorption relationship between the first element and the operation line and the adsorption relationship between the second element and the operation line.
在一个实施例中,当确认第一元素和第二元素基于操作线对齐后,可以固定第一元素和第二元素在画布中的显示位置。即解除第一元素与操作线的吸附关系以及第二元素与操作线的吸附关系。此时,即使操作线继续移动,第一元素和第二元素也不会跟随操作线移动。In one embodiment, after confirming that the first element and the second element are aligned based on the operation line, the display positions of the first element and the second element in the canvas can be fixed. That is, the adsorption relationship between the first element and the operation wire and the adsorption relationship between the second element and the operation wire are released. At this time, even if the operation line continues to move, the first element and the second element will not follow the operation line.
可以理解,除了自动解除吸附关系,还可以用户手动解除吸附关系。此时,在未解除吸附关系时,若操作线继续移动,智能交互平板控制第一元素和第二元素跟随操作线移动。并在确认用户手动解除吸附关系时,固定当前第一元素和第二元素在画布中的显示位置。其中,手动解除吸附关系的方式实施例不做限定。例如,显示吸附控件。当检测到吸附控件接收到点击操作时,确定解除操作线当前具有吸附关系的元素。It can be understood that in addition to automatically releasing the adsorption relationship, the user can also manually cancel the adsorption relationship. At this time, when the adsorption relationship is not released, if the operation line continues to move, the smart interactive tablet controls the first element and the second element to move along with the operation line. And when it is confirmed that the user manually releases the adsorption relationship, the current display positions of the first element and the second element in the canvas are fixed. Among them, the embodiment of the manner of manually releasing the adsorption relationship is not limited. For example, show the snap control. When it is detected that the adsorption control receives a click operation, it is determined to remove the elements that currently have the adsorption relationship on the operation line.
需要说明,实际应用中,若在第二元素满足吸附条件时,自动解除吸附关系,则也可以不建立第二元素与操作线的吸附关系。此时,仅需解除第一元素与操作线的吸附关系即可。It should be noted that in practical applications, if the adsorption relationship is automatically released when the second element meets the adsorption condition, the adsorption relationship between the second element and the operation line may not be established. At this time, it is only necessary to release the adsorption relationship between the first element and the operating line.
通过解除元素与操作线的吸附关系,使得对齐手段更加灵活,提升用户的交互体验。By removing the adsorption relationship between the element and the operation line, the alignment method is made more flexible and the user's interactive experience is improved.
图25为本申请一个实施例提供的一种元素控制方法的流程图。本实施例是在上述实施例的基础上进行具体化。参考图25,本实施例提供的元素控制方法包括:FIG. 25 is a flowchart of an element control method provided by an embodiment of this application. This embodiment is embodied on the basis of the above-mentioned embodiment. Referring to FIG. 25, the element control method provided by this embodiment includes:
步骤401、在画布中显示操作线,画布中还显示有第一元素和第二元素。Step 401: Display the operation line in the canvas, and the first element and the second element are also displayed in the canvas.
步骤402、确认操作线的移动方向。Step 402: Confirm the moving direction of the operation line.
在一个实施例中,绘制操作线时,操作线具有移动方向。一般而言,当操作线上显示有移动方向标识时,可以通过移动方向标识使用户明确移动方向。可以理解,当操作线可以双向移动时,可以在两个移动方向中选定一个移动方向,或者是,通过各移动方向上的元素数量,选择元素数量较多的移动方向为当前确认的移动方向。In one embodiment, when the operation line is drawn, the operation line has a moving direction. Generally speaking, when the movement direction indicator is displayed on the operation line, the movement direction indicator can be used to make the user know the moving direction. It can be understood that when the operating line can move in both directions, one of the two moving directions can be selected, or, based on the number of elements in each moving direction, the moving direction with a larger number of elements is selected as the currently confirmed moving direction .
步骤403、在画布中,获取位于移动方向上的各元素。Step 403: In the canvas, obtain each element located in the moving direction.
在一个实施例中,根据移动方向、操作线的角度和长度可以确定操作线在画布中的移动覆盖范围,之后,结合各元素在画布中的显示位置,获取位于移动覆盖范围内的各元素,并确认为移动方向上的元素。In one embodiment, the moving coverage of the operating line in the canvas can be determined according to the moving direction, the angle and length of the operating line, and then combining the display position of each element in the canvas to obtain each element located in the moving coverage, And confirm it as an element in the moving direction.
步骤404、根据各元素的显示位置确定第一元素和第二元素。Step 404: Determine the first element and the second element according to the display position of each element.
在一个实施例中,可以结合移动覆盖范围内各元素在画布中的显示位置,获取距离操作线最远的元素作为第二元素,其余元素作为第一元素。可以理解,还可以是由用户选定第一元素和/或第二元素。当用户选定第一元素时,除了第一元素外,距离操作线最近的元素记为第二元素。当用户选定第二元素时,将第二元素与操作线之间的元素记为第一元素。In an embodiment, it is possible to combine the display position of each element in the moving coverage area on the canvas, and obtain the element farthest from the operation line as the second element, and the remaining elements as the first element. It can be understood that the user may also select the first element and/or the second element. When the user selects the first element, in addition to the first element, the element closest to the operation line is recorded as the second element. When the user selects the second element, the element between the second element and the operation line is recorded as the first element.
可以理解,在接收绘制操作线之后,可以再显示操作线之前执行步骤402-步骤404。It can be understood that after receiving the drawing operation line, step 402 to step 404 may be executed before the operation line is displayed.
步骤405、响应于接收到的第一触控操作,监听操作线的移动事件。Step 405: In response to the received first touch operation, monitor the movement event of the operation line.
步骤406、获取操作线的第一坐标集合以及第一元素的第二坐标集合,第二坐标集合包括边界坐标集合和内部坐标集合。Step 406: Obtain a first coordinate set of the operation line and a second coordinate set of the first element. The second coordinate set includes a boundary coordinate set and an internal coordinate set.
在一个实施例中,第一坐标集合为操作线在第一坐标系内的坐标集合,第二坐标集合为对应第一元素在第一坐标系内的坐标集合。每个第一元素对应一个第二坐标集合。第一坐标集合和第二坐标集合均通过监听移动事件获得。在一实施例中,第二坐标集合包括边界坐标集合和内部坐标集合。其中,第一元素显示有轮廓线时,边界坐标集合为轮廓线在第一坐标系内的坐标集合,内部坐标集合为第二坐标集合中除去边界坐标集合外的坐标集合。第一元素未显示轮廓线时,边界坐标集合是第二坐标集合内最***坐标的集合,内部坐标集合为第二坐标集合中除去边界坐标集合外的坐标集合,即元素内部区域的坐标集合。In an embodiment, the first coordinate set is a coordinate set of the operation line in the first coordinate system, and the second coordinate set is a coordinate set corresponding to the first element in the first coordinate system. Each first element corresponds to a second coordinate set. Both the first coordinate set and the second coordinate set are obtained by monitoring the movement event. In an embodiment, the second coordinate set includes a boundary coordinate set and an internal coordinate set. Wherein, when the first element displays the contour line, the boundary coordinate set is the coordinate set of the contour line in the first coordinate system, and the internal coordinate set is the coordinate set excluding the boundary coordinate set in the second coordinate set. When the first element does not display the contour line, the boundary coordinate set is the outermost coordinate set in the second coordinate set, and the internal coordinate set is the coordinate set excluding the boundary coordinate set in the second coordinate set, that is, the coordinate set of the internal area of the element.
步骤407、若确认第一坐标集合与设定方向上的边界坐标集合间存在重合坐标数据,且第一坐标集合与内部坐标集合的交集为空,则确定操作线与第一元素满足吸附条件。Step 407: If it is confirmed that there is coincident coordinate data between the first coordinate set and the boundary coordinate set in the set direction, and the intersection of the first coordinate set and the internal coordinate set is empty, it is determined that the operation line and the first element satisfy the adsorption condition.
示例性的,设定方向上的边界坐标集合是指边界坐标集合中,在设定方向上的极值坐标点的集合,其中,设定方向与操作线的移动方向有关。举例而言,移动方向为y轴负半轴方向,那么,相对于第一元素而言设定方向为y轴正半轴方向,此时得到边界坐标集合后,确认y值最大的坐标为极值坐标点,并由极值坐标点组成设定方向上的边界坐标集合。其中,设定方向上的边界坐标集合内的极值坐标点为至少一个。Exemplarily, the set of boundary coordinates in the set direction refers to a set of extreme coordinate points in the set direction in the set of boundary coordinates, where the set direction is related to the moving direction of the operating line. For example, if the moving direction is the negative semi-axis direction of the y-axis, then the direction is set to the positive semi-axis direction of the y-axis relative to the first element. At this time, after obtaining the boundary coordinate set, confirm that the coordinate with the largest y value is the extreme Value coordinate points, and the boundary coordinate set in the set direction is composed of extreme coordinate points. Wherein, there is at least one extreme coordinate point in the boundary coordinate set in the set direction.
在一实施例中,可以理解,当操作线向第一元素移动时,第一坐标集合首先与第一元素在设定方向上的边界坐标集合先相遇。因此,可以通过设定方向上的边界坐标集合确认操作线与元素是否满足吸附条件。在一个实施例中,在操作线移动过程中,将第一坐标集合与每个第一元素的第二坐标集合进行比较,以确定第一坐标集合与第二坐标集合是否有重合的坐标数据,若有重合的坐标数据,则说明操作线与对应的第一元素已经接触。此时,确定重合的坐标数据是否为设定方向上的边界坐标集合。若是,则说明操作线中至少 一个点与第一元素的轮廓线存在重合部分。此时,继续比较第一坐标集合与该第一元素的内部坐标集合,当确定第一坐标集合和内部坐标集合中没有重合的坐标点,即第一坐标集合和内部坐标集合的交集为空时,说明操作线仅与第一元素的轮廓线存在重合部分。即操作线与第一元素在设定方向上相切或者操作线与第一元素的设定轮廓线重合,此时,确认第一元素与操作线间相对位置关系满足吸附条件。按照上述方式便可以确认每个第一元素与操作线是否满足吸附条件。可以理解,在执行第一触控操作的过程中,操作线均是先与元素在设定方向上的边界坐标集合接触,因此,在执行第一触控操作的过程中,只要确定操作线的第一坐标集合和元素的第二坐标集合出现重复坐标,便可以确认满足吸附条件。In an embodiment, it can be understood that when the operation line moves to the first element, the first coordinate set first meets the boundary coordinate set of the first element in the set direction. Therefore, it is possible to confirm whether the operation line and the element satisfy the adsorption condition by setting the boundary coordinate set in the direction. In one embodiment, during the movement of the operation line, the first coordinate set is compared with the second coordinate set of each first element to determine whether the first coordinate set and the second coordinate set have overlapping coordinate data, If there is overlapping coordinate data, it means that the operation line has been in contact with the corresponding first element. At this time, it is determined whether the overlapping coordinate data is a set of boundary coordinates in the set direction. If yes, it means that at least one point in the operation line overlaps with the contour line of the first element. At this time, continue to compare the first coordinate set with the internal coordinate set of the first element, when it is determined that the first coordinate set and the internal coordinate set do not overlap the coordinate point, that is, the intersection of the first coordinate set and the internal coordinate set is empty , Indicating that the operation line only overlaps with the contour line of the first element. That is, the operation line is tangent to the first element in the set direction or the operation line coincides with the set contour line of the first element. At this time, it is confirmed that the relative positional relationship between the first element and the operation line meets the adsorption condition. According to the above method, it can be confirmed whether each first element and operation line meet the adsorption conditions. It can be understood that in the process of performing the first touch operation, the operation line is first in contact with the set of boundary coordinates of the element in the set direction. Therefore, in the process of performing the first touch operation, it is only necessary to determine the position of the operation line. If duplicate coordinates appear in the first coordinate set and the second coordinate set of the element, it can be confirmed that the adsorption condition is satisfied.
举例而言,参考图4,操作线移动方向为垂直向下,此时,对于元素13而言,设定方向上的边界坐标集合可以认为是上顶点的坐标数据。当操作线15向下移动时,首先接触上顶点的坐标数据,即操作线15的第一坐标数据与元素13设定方向上的边界坐标集合会出现重合坐标数据且操作线15的第一坐标数据与元素13内部坐标集合的交集为空,即操作线15与元素13在元素13的设定方向上相切,满足吸附条件。再举例而言,参考图6,元素12在设定方向上的边界坐标集合为上边框线的坐标数据集合。当操作线15向下移动时,首先接触上边框线的坐标数据集合,即操作线15的第一坐标数据与元素12设定方向上的边界坐标集合会出现重合坐标数据且操作线15的第一坐标数据与元素12内部坐标集合的交集为空,即操作线15与元素12在元素12的设定方向上边框线重合,满足吸附条件。For example, referring to FIG. 4, the moving direction of the operation line is vertical downward. At this time, for the element 13, the set of boundary coordinates in the set direction can be regarded as the coordinate data of the upper vertex. When the operating line 15 moves down, the coordinate data of the upper vertex is first touched, that is, the first coordinate data of the operating line 15 and the boundary coordinate set in the direction set by the element 13 will appear coincident coordinate data and the first coordinate of the operating line 15 The intersection of the data and the set of internal coordinates of the element 13 is empty, that is, the operation line 15 and the element 13 are tangent in the set direction of the element 13, and the adsorption condition is satisfied. For another example, referring to FIG. 6, the boundary coordinate set of the element 12 in the set direction is the coordinate data set of the upper border line. When the operating line 15 moves downward, it first touches the coordinate data set of the upper border line, that is, the first coordinate data of the operating line 15 and the boundary coordinate set in the setting direction of the element 12 will appear coincident coordinate data and the first coordinate data of the operating line 15 will appear. The intersection of a coordinate data and the internal coordinate set of the element 12 is empty, that is, the operation line 15 and the element 12 coincide with the border line of the element 12 in the set direction of the element 12, and the adsorption condition is satisfied.
步骤408、获取操作线中任一坐标点的坐标数据作为起始坐标数据。Step 408: Obtain coordinate data of any coordinate point in the operation line as initial coordinate data.
在一个实施例中,当操作线与第一元素满足吸附条件时,可以将操作线认为是第一元素的切线。在一实施例中,在第一坐标集合中,选择任一坐标点的坐标数据,并记为起始坐标数据。同时,将起始坐标数据对应的时刻记为起始时刻,将坐标点作为实现第一元素吸附跟随的跟踪点。其中,坐标数据是包含x轴和y轴的数值。当操作线移动时,该坐标点的坐标数据同步变化。In one embodiment, when the operation line and the first element satisfy the adsorption condition, the operation line can be considered as a tangent line of the first element. In an embodiment, in the first coordinate set, the coordinate data of any coordinate point is selected and recorded as the initial coordinate data. At the same time, the time corresponding to the initial coordinate data is recorded as the initial time, and the coordinate point is used as the tracking point for realizing the adsorption and following of the first element. Among them, the coordinate data contains the values of the x-axis and the y-axis. When the operating line moves, the coordinate data of the coordinate point changes synchronously.
步骤409、在操作线移动过程中,实时获取坐标点的当前坐标数据。Step 409: During the movement of the operating line, obtain the current coordinate data of the coordinate point in real time.
在一个实施例中,监听操作线的移动事件时,还实时确定该坐标点的当前时刻的坐标数据,并记为当前坐标数据,同时,将当前坐标数据对应的时刻记为当前时刻。In one embodiment, when monitoring the movement event of the operation line, the coordinate data of the current time of the coordinate point is also determined in real time and recorded as the current coordinate data, and at the same time, the time corresponding to the current coordinate data is recorded as the current time.
步骤410、根据当前坐标数据和起始坐标数据计算坐标偏移量。Step 410: Calculate the coordinate offset according to the current coordinate data and the initial coordinate data.
在一个实施例中,坐标偏移量是指当前时刻的坐标点相对于起始时刻的移动数据。坐标偏移量计算方式可以根据实际情况设定。实施例中,设定坐标偏移量的计算方式为将x轴上的当前坐标数据与x轴上的起始坐标数据作差,并将得到的结果作为x轴上的坐标偏移 量,同时,将y轴上的当前坐标数据与y轴上的起始坐标数据作差,并将得到的结果作为y轴上的坐标偏移量。可以理解的是,坐标偏移量可能是正数、0或负数。In one embodiment, the coordinate offset refers to the movement data of the coordinate point at the current moment relative to the starting moment. The coordinate offset calculation method can be set according to the actual situation. In the embodiment, the calculation method for setting the coordinate offset is to make the difference between the current coordinate data on the x-axis and the initial coordinate data on the x-axis, and use the result as the coordinate offset on the x-axis, and at the same time , Make the difference between the current coordinate data on the y-axis and the initial coordinate data on the y-axis, and use the result as the coordinate offset on the y-axis. It can be understood that the coordinate offset may be a positive number, 0 or a negative number.
步骤411、根据坐标偏移量移动第一元素,以实现第一元素跟随操作线向第二元素移动。Step 411: Move the first element according to the coordinate offset, so that the first element moves to the second element following the operation line.
在一个实施例中,得到坐标偏移量后,将第一元素的第二坐标集合内的各坐标数据与坐标偏移量相加,以得到新的坐标数据,进而得到新的第二坐标集合。之后,将原第二坐标集合内坐标点对应调整至新的第二坐标集合,以实现第一元素跟随操作线移动。其中,上述第一元素是指满足吸附条件的元素。对于不满足吸附条件的第一元素,其保持位置不变。In one embodiment, after the coordinate offset is obtained, the coordinate data in the second coordinate set of the first element is added to the coordinate offset to obtain new coordinate data, and then a new second coordinate set . Afterwards, the coordinate points in the original second coordinate set are correspondingly adjusted to the new second coordinate set, so as to realize the movement of the first element following the operation line. Wherein, the above-mentioned first element refers to an element that satisfies adsorption conditions. For the first element that does not meet the adsorption conditions, its position remains unchanged.
需要说明的是,在第一次检测到某个第一元素与操作线满足吸附条件时,选择坐标点以及起始坐标数据,后续再检测到其他第一元素与操作线满足吸附条件时,无需确定其他的坐标点,仅需使用已确定坐标点即可。It should be noted that when it is detected that a certain first element and operation line meet the adsorption condition for the first time, the coordinate point and the starting coordinate data are selected, and when it is detected that other first elements and operation lines meet the adsorption condition, there is no need To determine other coordinate points, just use the determined coordinate points.
步骤412、检测到操作线与第二元素的相对位置关系满足吸附条件时,确认第一元素和第二元素基于操作线对齐。Step 412: When it is detected that the relative position relationship between the operation line and the second element satisfies the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
其中,第二元素与操作线的相对位置关系满足吸附条件和第一元素与操作线的相对位置关系满足吸附条件的确认方式相同,在此不做赘述。同样,第二元素跟随操作线移动方式与第一元素跟随操作线移动方式相同,在此不做赘述。Wherein, the confirmation method for the relative positional relationship between the second element and the operating line to satisfy the adsorption condition and the relative positional relationship between the first element and the operating line to meet the adsorption condition is the same, and will not be repeated here. Similarly, the movement mode of the second element following the operation line is the same as the movement mode of the first element following the operation line, and will not be repeated here.
可以理解的,在对齐过程中,用户可以选定第三元素,此时,智能交互平板不会确认第三元素与操作线之间的相对位置关系。It is understandable that during the alignment process, the user can select the third element. At this time, the smart interactive tablet will not confirm the relative positional relationship between the third element and the operation line.
上述,通过在画布中显示操作线、第一元素和第二元素,响应于接收到的第一触控操作,控制操作线移动,并监听操作线的移动事件,若监听到操作线与画布中每个第一元素的相对位置关系满足吸附条件时,控制每个第一元素均跟随操作线移动,且操作线与第二元素的相对位置关系满足吸附条件时确认第一元素和第二元素基于操作线对齐的技术方案,可以实现根据用户的实际需求设置操作线,并使得多个元素基于操作线进行对齐,不仅合理、准确地实现对齐控制,且计算过程简单,计算量小,同时,无需用户逐一手动对齐各元素,提升了用户的使用体验。同时,通过将操作线的坐标与元素的坐标进行比对的方式确认是否满足吸附条件,可以简单、准确地对吸附条件进行判断。同时,通过记录操作线的任一坐标点计算坐标偏移量可以准确实现元素跟随操作线移动。As mentioned above, by displaying the operation line, the first element and the second element in the canvas, in response to the received first touch operation, the operation line is controlled to move, and the movement event of the operation line is monitored. If the operation line and the canvas are monitored When the relative positional relationship of each first element meets the adsorption condition, control each first element to move with the operation line, and when the relative position relationship between the operation line and the second element meets the adsorption condition, confirm that the first element and the second element are based on The technical solution of operating line alignment can realize the setting of operating lines according to the actual needs of users, and make multiple elements align based on the operating lines, which not only realizes reasonable and accurate alignment control, but also has simple calculation process and small amount of calculation. At the same time, there is no need The user manually aligns each element one by one, which improves the user experience. At the same time, by comparing the coordinates of the operation line with the coordinates of the elements to confirm whether the adsorption conditions are met, the adsorption conditions can be judged simply and accurately. At the same time, calculating the coordinate offset by recording any coordinate point of the operation line can accurately realize the movement of the element following the operation line.
可以理解的是,由于实施例与上述实施例应用场景相同,实现手段相同,技术效果相同。因此,未在一个实施例中描述的技术细节,可参见上述其他实施例。It can be understood that, since the embodiment is the same in application scenarios as the foregoing embodiment, the implementation means are the same, and the technical effects are the same. Therefore, for technical details not described in one embodiment, reference may be made to the other embodiments described above.
图26为本申请一个实施例提供的一种元素控制装置的结构示意图。参考图26,元素控制装置包括:第一显示模块501、第一控制模块502以及第一对齐模块503。FIG. 26 is a schematic structural diagram of an element control device provided by an embodiment of this application. Referring to FIG. 26, the element control device includes: a first display module 501, a first control module 502, and a first alignment module 503.
其中,第一显示模块501,用于在画布中显示操作线,所述画布中还显示有第一元素和第二元素;第一控制模块502,用于响应于接收到的第一触控操作,移动所述操作线;第一对齐模块503,用于所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐。Wherein, the first display module 501 is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas; the first control module 502 is used to respond to the received first touch operation , Move the operating line; a first alignment module 503, used to control the first element to follow the operating line to the second when the relative positional relationship between the operating line and the first element satisfies the adsorption condition The element moves, and when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
上述,通过在画布中显示操作线、第一元素和第二元素,并在接收到针对操作线的第一触控操作时,移动操作线,在操作线移动过程中若确认操作线与第一元素的相对位置关系满足吸附条件,则控制第一元素跟随操作线向第二元素移动,以保持第一元素与操作线的相对位置关系不变,之后,当第二元素与操作线的相对位置关系满足吸附条件时,确认第一元素和第二元素基于操作线对齐。采用上述技术手段,可以根据用户的实际需求设置操作线,并通过操作线使得多个元素基于操作线进行对齐,不仅实现了合理、准确地对元素进行对齐控制,且对齐控制过程简单、易于操作,无需用户逐一手动对齐各元素,提升了用户的使用体验。As mentioned above, by displaying the operation line, the first element and the second element in the canvas, and when the first touch operation for the operation line is received, the operation line is moved. If the relative position relationship of the elements meets the adsorption condition, the first element is controlled to follow the operation line to move to the second element to keep the relative position relationship between the first element and the operation line unchanged. Later, when the relative position of the second element and the operation line When the relationship satisfies the adsorption condition, confirm that the first element and the second element are aligned based on the operation line. Using the above technical means, the operation line can be set according to the actual needs of the user, and multiple elements can be aligned based on the operation line through the operation line, which not only realizes reasonable and accurate alignment control of the elements, but also the alignment control process is simple and easy to operate , There is no need for the user to manually align each element one by one, which improves the user experience.
在上述实施例的基础上,第一对齐模块503还用于:所述操作线与所述第二元素的相对位置关系满足所述吸附条件时,控制所述第二元素跟随所述操作线移动。On the basis of the foregoing embodiment, the first alignment module 503 is further configured to: when the relative positional relationship between the operation line and the second element meets the adsorption condition, control the second element to follow the operation line to move .
在上述实施例的基础上,第一对齐模块503还用于:所述操作线与所述第二元素的相对位置关系满足所述吸附条件时,固定所述第一元素和所述第二元素的显示位置。On the basis of the foregoing embodiment, the first alignment module 503 is further configured to fix the first element and the second element when the relative positional relationship between the operation line and the second element satisfies the adsorption condition Display position.
在上述实施例的基础上,所述第一元素和所述第二元素均位于所述操作线的第一侧;还包括:第三控制模块,用于操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐之后,响应于接收到的第二触控操作,向所述操作线的第二侧移动所述操作线,并控制所述第一元素和所述第二元素跟随所述操作线移动,所述第二侧为所述第一侧的相对侧。On the basis of the foregoing embodiment, the first element and the second element are both located on the first side of the operation line; further comprising: a third control module for opposing the operation line and the second element When the positional relationship satisfies the adsorption condition, after the first element and the second element are aligned based on the operation line, in response to the received second touch operation, move the operation line to the second side Operating line, and controlling the first element and the second element to follow the operating line to move, and the second side is the opposite side of the first side.
在上述实施例的基础上,所述在画布中显示操作线时,所述操作线穿过第一元素的内部区域,所述第二元素位于所述操作线的第一侧,相应的,还包括:第四控制模块,用于响应于接收到的第一触控操作,移动所述操作线之前,响应于接收到的第三触控操作,向所述操作线的第二侧移动所述操作线,所述操作线与所述第一元素的相交点为空或所述操作线与所述第一元素之间满足吸附条件时确认所述操作线离开所述第一元素的内部区域,所述第二侧为所述第一侧的相对侧。On the basis of the foregoing embodiment, when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line. It includes: a fourth control module, configured to respond to the received first touch operation, before moving the operation line, in response to the received third touch operation, move the operation line to the second side Operation line, when the intersection point of the operation line and the first element is empty or the adsorption condition between the operation line and the first element is satisfied, it is confirmed that the operation line leaves the inner area of the first element, The second side is the opposite side of the first side.
在上述实施例的基础上,第一显示模块501包括:模式进入单元,用于响应于接收到的元素对齐触发指令,进入元素对齐模式;线条绘制单元,用于响应于接收到的第四触控操作,在所述画布中绘制操作线。On the basis of the foregoing embodiment, the first display module 501 includes: a mode entry unit, configured to enter the element alignment mode in response to the received element alignment trigger instruction; and a line drawing unit, configured to respond to the received fourth touch Control operation, drawing operation lines in the canvas.
在上述实施例的基础上,还包括:长度调整模块,用于在画布中显示操作线之后,响应于接收到的第五触控操作,调整所述操作线的长度,所述第五触控操作作用于所述操作线的至少一个端点。On the basis of the above embodiment, it further includes: a length adjustment module, configured to adjust the length of the operation line in response to the received fifth touch operation after the operation line is displayed in the canvas, and the fifth touch The operation acts on at least one end point of the operation line.
在上述实施例的基础上,第一显示模块501还用于:显示旋转点,所述旋转点与所述操作线满足第一设定位置关系。相应的,还包括:角度调整模块,用于在画布中显示操作线之后,响应于接收到的第六触控操作,调整所述操作线的角度,所述第六触控操作作用于所述旋转点。On the basis of the foregoing embodiment, the first display module 501 is further configured to display a rotation point, and the rotation point and the operation line satisfy the first set position relationship. Correspondingly, it further includes: an angle adjustment module, configured to adjust the angle of the operation line in response to the received sixth touch operation after the operation line is displayed in the canvas, and the sixth touch operation acts on the Rotate the point.
在上述实施例的基础上,第一显示模块501还用于:显示移动方向标识,所述移动方向标识与所述操作线满足第二设定位置关系,所述移动方向标识用于指示操作线的移动方向,相应的,还包括:方向调整模块,用于在画布中显示操作线之后,响应于接收到的第七触控操作,调整所述移动方向标识,所述第七触控操作作用于所述移动方向标识。On the basis of the foregoing embodiment, the first display module 501 is further configured to: display a movement direction indicator, the movement direction indicator and the operation line satisfy a second set positional relationship, and the movement direction indicator is used to indicate the operation line Correspondingly, it also includes: a direction adjustment module for adjusting the movement direction indicator in response to the received seventh touch operation after the operation line is displayed in the canvas, and the seventh touch operation has a function Mark in the direction of movement.
在上述实施例的基础上,所述画布上还显示有第三元素;相应的,还包括:状态固定模块,用于在画布中显示操作线之后,响应于接收到的第八触控操作,设定所述第三元素为固定状态。相应的,第一控制模块502还用于:控制所述操作线经过所述第三元素,且所述第三元素的显示位置固定。On the basis of the above-mentioned embodiment, the third element is also displayed on the canvas; correspondingly, it further includes: a state fixing module, which is used to respond to the received eighth touch operation after the operation line is displayed in the canvas, The third element is set to a fixed state. Correspondingly, the first control module 502 is further configured to: control the operation line to pass through the third element, and the display position of the third element is fixed.
在上述实施例的基础上,还包括:元素选定模块,用于在画布中显示操作线之前或之后,响应于接收到的第九触控操作,选定所述第二元素。On the basis of the foregoing embodiment, it further includes: an element selection module, which is used to select the second element in response to the received ninth touch operation before or after the operation line is displayed in the canvas.
在上述实施例的基础上,所述吸附条件为所述操作线与元素在设定方向上相切,或,所述操作线与元素的设定轮廓线重合。On the basis of the foregoing embodiment, the adsorption condition is that the operation line is tangent to the element in a set direction, or the operation line coincides with the set contour line of the element.
上述提供的元素控制装置可用于执行上述对应实施例提供的元素控制方法,具备相应的功能和有益效果。The element control device provided above can be used to execute the element control method provided in the corresponding embodiment described above, and has corresponding functions and beneficial effects.
同时,实施例中还提供另一种元素控制装置,此时,图27为本申请一个实施例提供的另一种元素控制装置的结构示意图。参考图27,该元素控制装置包括:第二显示模块504、监听模块505、第二控制模块506以及第二对齐模块507。At the same time, the embodiment also provides another element control device. At this time, FIG. 27 is a schematic structural diagram of another element control device provided by an embodiment of the application. Referring to FIG. 27, the element control device includes: a second display module 504, a monitoring module 505, a second control module 506, and a second alignment module 507.
其中,第二显示模块504,用于在画布中显示操作线,所述画布中还显示有第一元素和第二元素;监听模块505,用于响应于接收到的第一触控操作,监听所述操作线的移动事件;第二控制模块506,用于检测到所述操作线与所述第一元素的相对位置关系满足吸附条 件时,控制所述第一元素跟随所述操作线向所述第二元素移动;第二对齐模块507,用于检测到所述操作线与所述第二元素的相对位置关系满足吸附条件时,确认所述第一元素和所述第二元素基于所述操作线对齐。Wherein, the second display module 504 is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas; the monitoring module 505 is used to listen to the received first touch operation The movement event of the operation line; the second control module 506 is used to detect that the relative position relationship between the operation line and the first element meets the adsorption condition, and control the first element to follow the operation line to the position The second element moves; the second alignment module 507 is configured to detect that when the relative positional relationship between the operation line and the second element meets the adsorption condition, confirm that the first element and the second element are based on the The operation line is aligned.
上述,通过在画布中显示操作线、第一元素以及第二元素,响应于接收到的第一触控操作,控制操作线移动,并监听操作线的移动事件,若监听到操作线与画布中每个第一元素的相对位置关系满足吸附条件时,控制每个第一元素均跟随操作线向第二元素移动,并在操作线与第二元素的相对位置关系满足吸附条件时确认所述第一元素和所述第二元素基于所述操作线对齐的技术方案,可以实现根据用户的实际需求设置操作线,并使得多个元素基于操作线进行对齐,不仅合理、准确地实现对齐控制,且计算过程简单,计算量小,同时,无需用户逐一手动对齐各元素,提升了用户的使用体验。As mentioned above, by displaying the operation line, the first element and the second element in the canvas, in response to the received first touch operation, the operation line is controlled to move, and the movement event of the operation line is monitored. If the operation line and the canvas are monitored When the relative positional relationship of each first element meets the adsorption condition, control each first element to follow the operation line to move to the second element, and confirm the first element when the relative position relationship between the operation line and the second element meets the adsorption condition The technical solution for aligning the first element and the second element based on the operation line can realize the setting of the operation line according to the actual needs of the user, and the alignment of multiple elements based on the operation line, which not only achieves reasonable and accurate alignment control, but also The calculation process is simple and the amount of calculation is small. At the same time, the user does not need to manually align each element one by one, which improves the user experience.
在上述实施例的基础上,第二控制模块506包括:集合确定单元,用于获取所述操作线的第一坐标集合以及第一元素的第二坐标集合,所述第二坐标集合包括边界坐标集合和内部坐标集合;吸附确认单元,用于若确认所述第一坐标集合与设定方向上的所述边界坐标集合间存在重合坐标数据,且所述第一坐标集合与所述内部坐标集合的交集为空,则确定所述操作线与所述第一元素满足吸附条件;起始坐标获取单元,用于检测到所述操作线与所述第一元素的相对位置关系满足吸附条件时,获取所述操作线中任一坐标点的坐标数据作为起始坐标数据;实时坐标获取单元,用于在所述操作线移动过程中,实时获取所述坐标点的当前坐标数据;偏移量计算单元,用于根据所述当前坐标数据和所述起始坐标数据计算坐标偏移量;移动单元,用于根据所述坐标偏移量移动所述第一元素,以实现所述第一元素跟随所述操作线向所述第二元素移动。On the basis of the foregoing embodiment, the second control module 506 includes: a set determining unit, configured to obtain a first coordinate set of the operation line and a second coordinate set of the first element, the second coordinate set including boundary coordinates Collection and internal coordinate collection; an adsorption confirmation unit for confirming that there is coincident coordinate data between the first coordinate collection and the boundary coordinate collection in the set direction, and the first coordinate collection and the internal coordinate collection If the intersection of is empty, it is determined that the operation line and the first element meet the adsorption condition; the initial coordinate acquisition unit is used to detect when the relative position relationship between the operation line and the first element meets the adsorption condition, Acquire the coordinate data of any coordinate point in the operation line as the initial coordinate data; a real-time coordinate acquisition unit for acquiring the current coordinate data of the coordinate point in real time during the movement of the operation line; offset calculation Unit for calculating a coordinate offset according to the current coordinate data and the initial coordinate data; a moving unit for moving the first element according to the coordinate offset to realize the first element following The operation line moves to the second element.
在上述实施例的基础上,还包括:关系解除模块,用于确认所述第一元素和所述第二元素基于所述操作线对齐之后,解除所述第一元素与所述操作线的吸附关系以及所述第二元素与所述操作线的吸附关系。On the basis of the foregoing embodiment, it further includes: a relationship release module, configured to confirm that the first element and the second element are aligned based on the operation line, and then release the adsorption between the first element and the operation line Relationship and the adsorption relationship between the second element and the operating line.
在上述实施例的基础上,还包括:方向确认模块,用于在画布中显示操作线之前或之后,确认所述操作线的移动方向;元素获取模块,用于在所述画布中,获取位于所述移动方向上的各元素;元素确定模块,用于根据所述各元素的显示位置确定所述第一元素和所述第二元素。On the basis of the above-mentioned embodiment, it further includes: a direction confirmation module, which is used to confirm the moving direction of the operation line before or after the operation line is displayed in the canvas; an element acquisition module, which is used to obtain the position in the canvas Each element in the moving direction; an element determination module for determining the first element and the second element according to the display position of each element.
上述提供的元素控制装置可用于执行上述对应实施例提供的元素控制方法,具备相应的功能和有益效果。The element control device provided above can be used to execute the element control method provided in the corresponding embodiment described above, and has corresponding functions and beneficial effects.
值得注意的是,上述元素控制装置的实施例中,所包括的各个单元和模块只是按照功 能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本申请的保护范围。It is worth noting that in the embodiment of the above element control device, the various units and modules included are only divided according to the functional logic, but are not limited to the above division, as long as the corresponding function can be realized; in addition, each The specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the protection scope of the present application.
图28为本申请一个实施例提供的一种元素控制设备的结构示意图。本实施例中,以智能交互平板为元素控制设备为例,进行描述。如图28所示,该智能交互平板60包括至少一个处理器61、至少一个网络接口62、用户接口63、存储器64以及至少一个通信总线65。FIG. 28 is a schematic structural diagram of an element control device provided by an embodiment of this application. In this embodiment, a smart interactive tablet is used as an element control device as an example for description. As shown in FIG. 28, the smart interactive tablet 60 includes at least one processor 61, at least one network interface 62, a user interface 63, a memory 64, and at least one communication bus 65.
其中,通信总线65用于实现这些组件之间的连接通信。Among them, the communication bus 65 is used to realize the connection and communication between these components.
其中,用户接口62可以包括显示屏、摄像头,可选用户接口63还可以包括标准的有线接口、无线接口。The user interface 62 may include a display screen and a camera, and the optional user interface 63 may also include a standard wired interface and a wireless interface.
其中,网络接口62可选包括标准的有线接口、无线接口(如Wi-Fi接口)。Among them, the network interface 62 may optionally include a standard wired interface and a wireless interface (such as a Wi-Fi interface).
其中,处理器61可以包括一个或多个处理核心。处理器61利用各种接口和线路连接整个智能交互平板60内的各个部分,通过运行或执行存储在处理器61内的指令、程序、代码集或指令集,以及调用存储在存储器64内的数据,执行智能交互平板60的各种功能和处理数据。可选的,处理器61可以采用数字信号处理(Digital Signal Processing,DSP)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)、可编程逻辑阵列(Programmable logic arrays,PLA)中的至少一种硬件形式来实现。处理器61可集成中央处理器(Central Processing Unit,CPU)、图像处理器(Graphics Processing Unit,GPU)和调制解调器等中的一种或几种的组合。其中,CPU主要处理操作***、用户界面和应用程序等;GPU用于负责显示屏所需要显示的内容的渲染和绘制;调制解调器用于处理无线通信。可以理解的是,上述调制解调器也可以不集成到处理器61中,单独通过一块芯片进行实现。The processor 61 may include one or more processing cores. The processor 61 uses various interfaces and lines to connect the various parts of the entire intelligent interactive tablet 60, by running or executing instructions, programs, code sets, or instruction sets stored in the processor 61, and calling data stored in the memory 64 , Perform various functions of the smart interactive tablet 60 and process data. Optionally, the processor 61 may adopt at least one of digital signal processing (Digital Signal Processing, DSP), Field-Programmable Gate Array (Field-Programmable Gate Array, FPGA), and Programmable Logic Array (Programmable logic arrays, PLA). A kind of hardware form to realize. The processor 61 may integrate one or a combination of a central processing unit (CPU), a graphics processing unit (GPU), a modem, and the like. Among them, the CPU mainly processes the operating system, user interface, and application programs; the GPU is used to render and draw the content that needs to be displayed on the display; the modem is used to process wireless communication. It is understandable that the above-mentioned modem may not be integrated into the processor 61, but may be implemented by a chip alone.
其中,存储器64可以包括随机存储器(Random Access Memory,RAM),也可以包括只读存储器(Read-Only Memory)。可选的,该存储器64包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器64可用于存储指令、程序、代码、代码集或指令集。存储器64可包括存储程序区和存储数据区,其中,存储程序区可存储用于实现操作***的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等;存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器64可选的还可以是至少一个位于远离前述处理器61的存储装置。如图28所示,作为一种计算机存储介质的存储器64中可以包括操作***、网络通信模块、用户接口模块以及智能交互平板的操作应用程序。The memory 64 may include random access memory (RAM) or read-only memory (Read-Only Memory). Optionally, the memory 64 includes a non-transitory computer-readable storage medium. The memory 64 may be used to store instructions, programs, codes, code sets or instruction sets. The memory 64 may include a storage program area and a storage data area, where the storage program area may store instructions for implementing the operating system and instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), Instructions used to implement the foregoing method embodiments, etc.; the storage data area can store data and the like involved in the foregoing method embodiments. Optionally, the memory 64 may also be at least one storage device located far away from the aforementioned processor 61. As shown in FIG. 28, the memory 64 as a computer storage medium may include an operating system, a network communication module, a user interface module, and an operating application program of a smart interactive tablet.
在图28所示的智能交互平板60中,用户接口63主要用于为用户提供输入的接口,获取用户输入的数据;而处理器61可以用于调用存储器64中存储的智能交互平板的操作应用 程序,并执行上述实施例中元素控制方法中的相关操作。In the smart interactive tablet 60 shown in FIG. 28, the user interface 63 is mainly used to provide an input interface for the user to obtain data input by the user; and the processor 61 can be used to call the operation application of the smart interactive tablet stored in the memory 64 Program, and perform related operations in the element control method in the above embodiment.
在一个实施例中,所述智能交互平板的操作***为安卓***。In one embodiment, the operating system of the smart interactive tablet is Android.
上述智能交互平板可以用于执行任意元素控制方法,具备相应的功能和有益效果。The above-mentioned smart interactive tablet can be used to execute any element control method, and has corresponding functions and beneficial effects.
此外,本申请实施例还提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行本申请任意实施例所提供的元素控制方法中的相关操作,且具备相应的功能和有益效果。In addition, an embodiment of the present application also provides a storage medium containing computer-executable instructions, which are used to perform related operations in the element control method provided by any embodiment of the present application when the computer-executable instructions are executed by a computer processor. , And have corresponding functions and beneficial effects.
本领域内的技术人员应明白,本申请的实施例可提供为方法、***、或计算机程序产品。Those skilled in the art should understand that the embodiments of the present application can be provided as methods, systems, or computer program products.
因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。本申请是参照根据本申请实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。Therefore, this application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, this application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes. This application is described with reference to flowcharts and/or block diagrams of methods, devices (systems), and computer program products according to embodiments of this application. It should be understood that each process and/or block in the flowchart and/or block diagram, and the combination of processes and/or blocks in the flowchart and/or block diagram can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing equipment to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing equipment are generated It is a device that realizes the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram. These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing equipment to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including the instruction device. The device implements the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram. These computer program instructions can also be loaded on a computer or other programmable data processing equipment, so that a series of operation steps are executed on the computer or other programmable equipment to produce computer-implemented processing, so as to execute on the computer or other programmable equipment. The instructions provide steps for implementing the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。In a typical configuration, the computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory. The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and/or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM). The memory is an example of a computer-readable medium.
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技 术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。Computer-readable media include permanent and non-permanent, removable and non-removable media, and information storage can be realized by any method or technology. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, CD-ROM, digital versatile disc (DVD) or other optical storage, Magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media can be used to store information that can be accessed by computing devices. According to the definition in this article, computer-readable media does not include transitory media, such as modulated data signals and carrier waves.
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。It should also be noted that the terms "include", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or equipment including a series of elements not only includes those elements, but also includes Other elements that are not explicitly listed, or they also include elements inherent to such processes, methods, commodities, or equipment. If there are no more restrictions, the element defined by the sentence "including a..." does not exclude the existence of other identical elements in the process, method, commodity, or equipment that includes the element.
注意,上述仅为本申请的较佳实施例及所运用技术原理。本领域技术人员会理解,本申请不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本申请的保护范围。因此,虽然通过以上实施例对本申请进行了较为详细的说明,但是本申请不仅仅限于以上实施例,在不脱离本申请构思的情况下,还可以包括更多其他等效实施例,而本申请的范围由所附的权利要求范围决定。Note that the above are only the preferred embodiments of the present application and the technical principles used. Those skilled in the art will understand that the present application is not limited to the specific embodiments described herein, and various obvious changes, readjustments and substitutions can be made to those skilled in the art without departing from the protection scope of the present application. Therefore, although the application has been described in more detail through the above embodiments, the application is not limited to the above embodiments, and can also include more other equivalent embodiments without departing from the concept of the application. The scope of is determined by the scope of the appended claims.

Claims (21)

  1. 一种元素控制方法,其中,包括:An element control method, which includes:
    在画布中显示操作线,所述画布中还显示有第一元素和第二元素;Displaying the operation line in the canvas, where the first element and the second element are also displayed;
    响应于接收到的第一触控操作,移动所述操作线;In response to the received first touch operation, moving the operation line;
    所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐。When the relative positional relationship between the operation line and the first element satisfies the adsorption condition, the first element is controlled to follow the operation line to move to the second element, and the operation line is relative to the second element When the positional relationship satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
  2. 根据权利要求1所述的元素控制方法,其中,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时,还包括:The element control method according to claim 1, wherein when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the method further comprises:
    控制所述第二元素跟随所述操作线移动。The second element is controlled to follow the operation line to move.
  3. 根据权利要求1所述的元素控制方法,其中,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时,还包括:The element control method according to claim 1, wherein when the relative positional relationship between the operation line and the second element satisfies the adsorption condition, the method further comprises:
    固定所述第一元素和所述第二元素的显示位置。Fix the display positions of the first element and the second element.
  4. 根据权利要求1所述的元素控制方法,其中,所述第一元素和所述第二元素均位于所述操作线的第一侧;The element control method according to claim 1, wherein the first element and the second element are both located on the first side of the operation line;
    所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐之后,还包括:When the relative positional relationship between the operation line and the second element satisfies the adsorption condition, after the first element and the second element are aligned based on the operation line, the method further includes:
    响应于接收到的第二触控操作,向所述操作线的第二侧移动所述操作线,并控制所述第一元素和所述第二元素跟随所述操作线移动,所述第二侧为所述第一侧的相对侧。In response to the received second touch operation, move the operation line to the second side of the operation line, and control the first element and the second element to follow the operation line to move, the second The side is the opposite side of the first side.
  5. 根据权利要求1所述的元素控制方法,其中,所述在画布中显示操作线时,所述操作线穿过第一元素的内部区域,所述第二元素位于所述操作线的第一侧;The element control method according to claim 1, wherein when the operation line is displayed in the canvas, the operation line passes through the inner area of the first element, and the second element is located on the first side of the operation line ;
    所述响应于接收到的第一触控操作,移动所述操作线之前,包括:In response to the received first touch operation, before moving the operation line, the method includes:
    响应于接收到的第三触控操作,向所述操作线的第二侧移动所述操作线,所述操作线与所述第一元素的相交点为空或所述操作线与所述第一元素之间满足吸附条件时确认所述操作线离开所述第一元素的内部区域,所述第二侧为所述第一侧的相对侧。In response to the received third touch operation, move the operation line to the second side of the operation line, the intersection point of the operation line and the first element is empty or the operation line and the first element When an adsorption condition is satisfied between an element, it is confirmed that the operation line leaves the inner region of the first element, and the second side is the opposite side of the first side.
  6. 根据权利要求1所述的元素控制方法,其中,所述在画布中显示操作线包括:The element control method according to claim 1, wherein said displaying the operation line in the canvas comprises:
    响应于接收到的元素对齐触发指令,进入元素对齐模式;In response to the received element alignment trigger instruction, enter the element alignment mode;
    响应于接收到的第四触控操作,在所述画布中绘制操作线。In response to the received fourth touch operation, an operation line is drawn on the canvas.
  7. 根据权利要求1所述的元素控制方法,其中,所述在画布中显示操作线之后,包括:The element control method according to claim 1, wherein, after the operation line is displayed in the canvas, the method comprises:
    响应于接收到的第五触控操作,调整所述操作线的长度,所述第五触控操作作用于所述操作线的至少一个端点。In response to the received fifth touch operation, the length of the operation line is adjusted, and the fifth touch operation acts on at least one end point of the operation line.
  8. 根据权利要求1所述的元素控制方法,其中,所述在画布中显示操作线时,还包括:The element control method according to claim 1, wherein, when the operation line is displayed in the canvas, the method further comprises:
    显示旋转点,所述旋转点与所述操作线满足第一设定位置关系;Display a rotation point, the rotation point and the operation line satisfy a first set positional relationship;
    所述在画布中显示操作线之后,包括:After the operation line is displayed in the canvas, it includes:
    响应于接收到的第六触控操作,调整所述操作线的角度,所述第六触控操作作用于所述旋转点。In response to the received sixth touch operation, the angle of the operation line is adjusted, and the sixth touch operation acts on the rotation point.
  9. 根据权利要求1所述的元素控制方法,其中,所述在画布中显示操作线时,还包括:The element control method according to claim 1, wherein, when the operation line is displayed in the canvas, the method further comprises:
    显示移动方向标识,所述移动方向标识与所述操作线满足第二设定位置关系,所述移动方向标识用于指示操作线的移动方向;Displaying a movement direction indicator, the movement direction indicator and the operation line satisfy a second set positional relationship, and the movement direction indicator is used to indicate the movement direction of the operation wire;
    所述在画布中显示操作线之后,包括:After the operation line is displayed in the canvas, it includes:
    响应于接收到的第七触控操作,调整所述移动方向标识,所述第七触控操作作用于所述移动方向标识。In response to the received seventh touch operation, the movement direction indicator is adjusted, and the seventh touch operation acts on the movement direction indicator.
  10. 根据权利要求1所述的元素控制方法,其中,所述画布上还显示有第三元素;The element control method according to claim 1, wherein a third element is also displayed on the canvas;
    所述在画布中显示操作线之后,还包括:After the operation line is displayed in the canvas, the method further includes:
    响应于接收到的第八触控操作,设定所述第三元素为固定状态;In response to the received eighth touch operation, setting the third element to a fixed state;
    所述响应于接收到的第一触控操作,移动所述操作线时,还包括:When the operation line is moved in response to the received first touch operation, the method further includes:
    控制所述操作线经过所述第三元素,且所述第三元素的显示位置固定。The operation line is controlled to pass through the third element, and the display position of the third element is fixed.
  11. 根据权利要求1所述的元素控制方法,其中,所述在画布中显示操作线之前或之后,还包括:The element control method according to claim 1, wherein before or after the operation line is displayed in the canvas, the method further comprises:
    响应于接收到的第九触控操作,选定所述第二元素。In response to the received ninth touch operation, the second element is selected.
  12. 根据权利要求1所述的元素控制方法,其中,所述吸附条件为所述操作线与元素在设定方向上相切,或,所述操作线与元素的设定轮廓线重合。The element control method according to claim 1, wherein the adsorption condition is that the operation line is tangent to the element in a set direction, or the operation line coincides with the set contour line of the element.
  13. 一种元素控制方法,其中,包括:An element control method, which includes:
    在画布中显示操作线,所述画布中还显示有第一元素和第二元素;Displaying the operation line in the canvas, where the first element and the second element are also displayed;
    响应于接收到的第一触控操作,监听所述操作线的移动事件;In response to the received first touch operation, monitoring the movement event of the operation line;
    检测到所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动;When it is detected that the relative positional relationship between the operation line and the first element satisfies the adsorption condition, controlling the first element to follow the operation line to move to the second element;
    检测到所述操作线与所述第二元素的相对位置关系满足吸附条件时,确认所述第一元素和所述第二元素基于所述操作线对齐。When it is detected that the relative positional relationship between the operation line and the second element satisfies the adsorption condition, it is confirmed that the first element and the second element are aligned based on the operation line.
  14. 根据权利要求13所述的元素控制方法,其中,所述控制所述第一元素跟随所述操作线向所述第二元素移动包括:The element control method according to claim 13, wherein said controlling said first element to move to said second element following said operation line comprises:
    获取所述操作线中任一坐标点的坐标数据作为起始坐标数据;Acquiring coordinate data of any coordinate point in the operation line as initial coordinate data;
    在所述操作线移动过程中,实时获取所述坐标点的当前坐标数据;During the movement of the operating line, obtain the current coordinate data of the coordinate point in real time;
    根据所述当前坐标数据和所述起始坐标数据计算坐标偏移量;Calculating a coordinate offset according to the current coordinate data and the initial coordinate data;
    根据所述坐标偏移量移动所述第一元素,以实现所述第一元素跟随所述操作线向所述第二元素移动。The first element is moved according to the coordinate offset, so that the first element moves to the second element following the operation line.
  15. 根据权利要求13所述的元素控制方法,其中,所述检测到所述操作线与所述第一元素的相对位置关系满足吸附条件包括:The element control method according to claim 13, wherein the detecting that the relative positional relationship between the operation line and the first element satisfies an adsorption condition comprises:
    获取所述操作线的第一坐标集合以及第一元素的第二坐标集合,所述第二坐标集合包括边界坐标集合和内部坐标集合;Acquiring a first coordinate set of the operation line and a second coordinate set of the first element, the second coordinate set including a boundary coordinate set and an internal coordinate set;
    若确认所述第一坐标集合与设定方向上的所述边界坐标集合间存在重合坐标数据,且所述第一坐标集合与所述内部坐标集合的交集为空,则确定所述操作线与所述第一元素满足吸附条件。If it is confirmed that there is coincident coordinate data between the first coordinate set and the boundary coordinate set in the set direction, and the intersection of the first coordinate set and the internal coordinate set is empty, then it is determined that the operation line and the boundary coordinate set are empty. The first element satisfies the adsorption condition.
  16. 根据权利要求13所述的元素控制方法,其中,所述确认所述第一元素和所述第二元素基于所述操作线对齐之后,还包括:The element control method according to claim 13, wherein after the confirming that the first element and the second element are aligned based on the operation line, the method further comprises:
    解除所述第一元素与所述操作线的吸附关系以及所述第二元素与所述操作线的吸附关系。The adsorption relationship between the first element and the operation wire and the adsorption relationship between the second element and the operation wire are released.
  17. 根据权利要求13所述的元素控制方法,其中,所述在画布中显示操作线之前或之后,还包括:The element control method according to claim 13, wherein, before or after the operation line is displayed in the canvas, the method further comprises:
    确认所述操作线的移动方向;Confirm the moving direction of the operating line;
    在所述画布中,获取位于所述移动方向上的各元素;In the canvas, obtain each element located in the moving direction;
    根据所述各元素的显示位置确定所述第一元素和所述第二元素。The first element and the second element are determined according to the display position of each element.
  18. 一种元素控制装置,其中,包括:An element control device, which includes:
    第一显示模块,用于在画布中显示操作线,所述画布中还显示有第一元素和第二元素;The first display module is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
    第一控制模块,用于响应于接收到的第一触控操作,移动所述操作线;The first control module is configured to move the operation wire in response to the received first touch operation;
    第一对齐模块,用于所述操作线与所述第一元素的相对位置关系满足吸附条件时,控 制所述第一元素跟随所述操作线向所述第二元素移动,所述操作线与所述第二元素的相对位置关系满足所述吸附条件时所述第一元素与所述第二元素基于所述操作线对齐。The first alignment module is used to control the first element to follow the operation line to move to the second element when the relative positional relationship between the operation line and the first element meets the adsorption condition, and the operation line and When the relative positional relationship of the second element satisfies the adsorption condition, the first element and the second element are aligned based on the operation line.
  19. 一种元素控制装置,其中,包括:An element control device, which includes:
    第二显示模块,用于在画布中显示操作线,所述画布中还显示有第一元素和第二元素;The second display module is used to display the operation line in the canvas, and the first element and the second element are also displayed in the canvas;
    监听模块,用于响应于接收到的第一触控操作,监听所述操作线的移动事件;The monitoring module is configured to monitor the movement event of the operation line in response to the received first touch operation;
    第二控制模块,用于检测到所述操作线与所述第一元素的相对位置关系满足吸附条件时,控制所述第一元素跟随所述操作线向所述第二元素移动;The second control module is configured to control the first element to follow the operation line to move to the second element when it is detected that the relative positional relationship between the operation line and the first element satisfies the adsorption condition;
    第二对齐模块,用于检测到所述操作线与所述第二元素的相对位置关系满足吸附条件时,确认所述第一元素和所述第二元素基于所述操作线对齐。The second alignment module is configured to confirm that the first element and the second element are aligned based on the operation line when it is detected that the relative positional relationship between the operation line and the second element satisfies the adsorption condition.
  20. 一种元素控制设备,其中,包括:An element control device, which includes:
    一个或多个处理器;One or more processors;
    存储器,用于存储一个或多个程序;Memory, used to store one or more programs;
    当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-12或权利要求13-17中任一所述的元素控制方法。When the one or more programs are executed by the one or more processors, the one or more processors implement the element control method according to any one of claims 1-12 or 13-17 .
  21. 一种计算机可读存储介质,其上存储有计算机程序,其中,该程序被处理器执行时实现如权利要求1-12或权利要求13-17中任一所述的元素控制方法。A computer-readable storage medium with a computer program stored thereon, wherein the program is executed by a processor to realize the element control method according to any one of claims 1-12 or 13-17.
PCT/CN2020/130504 2019-11-21 2020-11-20 Element control method, device, apparatus, and storage medium WO2021098832A1 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201911151633.1A CN111104036B (en) 2019-11-21 2019-11-21 Element control method, device, equipment and storage medium
CN201911151633.1 2019-11-21

Publications (1)

Publication Number Publication Date
WO2021098832A1 true WO2021098832A1 (en) 2021-05-27

Family

ID=70420866

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/130504 WO2021098832A1 (en) 2019-11-21 2020-11-20 Element control method, device, apparatus, and storage medium

Country Status (2)

Country Link
CN (1) CN111104036B (en)
WO (1) WO2021098832A1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116719459A (en) * 2022-09-26 2023-09-08 荣耀终端有限公司 Annotation frame display method, electronic device and readable storage medium

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111104036B (en) * 2019-11-21 2022-04-05 广州视源电子科技股份有限公司 Element control method, device, equipment and storage medium
CN111753230B (en) * 2020-06-12 2023-12-19 北京字节跳动网络技术有限公司 Reference line processing method and device
CN111768465B (en) * 2020-06-30 2023-07-25 深圳赛安特技术服务有限公司 Connection line generation method and device
CN112764654B (en) * 2021-01-29 2022-10-25 北京达佳互联信息技术有限公司 Component adsorption operation method and device, terminal and storage medium
CN115237289B (en) * 2022-07-01 2024-02-23 杭州涂鸦信息技术有限公司 Hot zone range determining method, device, equipment and storage medium

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103399696A (en) * 2013-08-16 2013-11-20 上海合合信息科技发展有限公司 Method and device for adsorbing straight lines/ line segments, and method and device for structuring polygon
CN109979020A (en) * 2019-04-04 2019-07-05 广州视源电子科技股份有限公司 A kind of line segment adsorption method, device, equipment and storage medium
CN110389810A (en) * 2019-07-31 2019-10-29 阿里巴巴集团控股有限公司 A kind of method, device and equipment for quickly putting UI control on virtual canvas
CN111104036A (en) * 2019-11-21 2020-05-05 广州视源电子科技股份有限公司 Element control method, device, equipment and storage medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103399696A (en) * 2013-08-16 2013-11-20 上海合合信息科技发展有限公司 Method and device for adsorbing straight lines/ line segments, and method and device for structuring polygon
US20160203381A1 (en) * 2013-08-16 2016-07-14 Intsig Information Co., Ltd. Method and apparatus for adsorbing straight line/line segment, method and apparatus for constructing polygon
CN109979020A (en) * 2019-04-04 2019-07-05 广州视源电子科技股份有限公司 A kind of line segment adsorption method, device, equipment and storage medium
CN110389810A (en) * 2019-07-31 2019-10-29 阿里巴巴集团控股有限公司 A kind of method, device and equipment for quickly putting UI control on virtual canvas
CN111104036A (en) * 2019-11-21 2020-05-05 广州视源电子科技股份有限公司 Element control method, device, equipment and storage medium

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116719459A (en) * 2022-09-26 2023-09-08 荣耀终端有限公司 Annotation frame display method, electronic device and readable storage medium

Also Published As

Publication number Publication date
CN111104036B (en) 2022-04-05
CN111104036A (en) 2020-05-05

Similar Documents

Publication Publication Date Title
WO2021098832A1 (en) Element control method, device, apparatus, and storage medium
US10318149B2 (en) Method and apparatus for performing touch operation in a mobile device
US20200125222A1 (en) Application execution method by display device and display device thereof
US8751955B2 (en) Scrollbar user interface for multitouch devices
US8860675B2 (en) Drawing aid system for multi-touch devices
WO2018090893A1 (en) Touch screen-based control method and device
US10275132B2 (en) Display apparatus, method of controlling display apparatus, and recordable medium storing program for performing method of controlling display apparatus
US10564843B2 (en) Display device and method of displaying screen on said display device
US10514842B2 (en) Input techniques for virtual reality headset devices with front touch screens
JP5973679B2 (en) Application interface movement control method, control apparatus, terminal device, program, and recording medium
CN109191547B (en) Element adsorption method, device, apparatus and storage medium
CN105183231B (en) Information processing method applied to touch screen device and touch screen device
WO2017080258A1 (en) Method and system for controlling touch menu
US9547370B2 (en) Systems and methods for enabling fine-grained user interactions for projector-camera or display-camera systems
WO2021068381A1 (en) Interface display method, device and apparatus, and storage medium
JP6630669B2 (en) Adjustment method and adjustment device for widget area
CN107153546B (en) Video playing method and mobile device
CN105094675A (en) Man-machine interaction method and touch screen wearable device
JP6364088B2 (en) Icon position exchange method and apparatus
US20130346915A1 (en) Wrap-around navigation
TWI493390B (en) Method for displaying touch cursor
CN113934350B (en) Virtual object selection method, device, electronic equipment and storage medium
WO2019242457A1 (en) Application page displaying method and mobile terminal
WO2019218622A1 (en) Element control method, apparatus, and device, and storage medium
US20170090744A1 (en) Virtual reality headset device with front touch screen

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20889186

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 20.10.2022)

122 Ep: pct application non-entry in european phase

Ref document number: 20889186

Country of ref document: EP

Kind code of ref document: A1