Visual element boundary control method and device, equipment and medium

Abstract

The invention provides a visual element boundary control method and device, equipment and a medium, and relates to the field of data processing, in particular to the technical field of image processing and live broadcast. According to the specific implementation scheme, in the operation process of executing a target operation on a visual element displayed in a canvas, when it is determined that the visual element exceeds the boundary of the canvas according to the operation type of the target operation, a first super-boundary control operation is determined according to the operation type; executing the first super-boundary control operation on the visual element; when the target operation is finished, determining at least one adsorption boundary of the visual element according to the current position of the visual element; according to the adsorption boundaries, the visual elements are adjusted in the canvas, so that the visual elements are adsorbed to at least one adsorption boundary. According to the embodiment of the invention, the visual elements can be correctly displayed.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing, specifically to the field of image processing and live broadcast technology, and in particular to a method, device, equipment and medium for controlling the boundary of a visual element. Background Art

[0002] The user can control the material elements in the canvas, such as moving the material elements.

[0003] When a material element exceeds the visible range, the material element becomes invisible, causing the user to be unable to accurately edit the layout of the material element. Summary of the invention

[0004] The present disclosure provides a visual element boundary control method, device, equipment and medium.

[0005] According to one aspect of the present disclosure, a visual element boundary control method is provided, comprising:

[0006] During the operation process of performing a target operation on a visual element displayed in the canvas, when it is determined according to the operation type of the target operation that the visual element exceeds the boundary of the canvas, a first out-of-bounds control operation is determined according to the operation type;

[0007] performing the first out-of-bounds control operation on the visual element;

[0008] When the target operation ends, determining at least one adsorption boundary of the visual element according to the current position of the visual element;

[0009] According to each of the adsorption boundaries, the visual element is adjusted in the canvas so that the visual element is adsorbed at at least one of the adsorption boundaries.

[0010] According to one aspect of the present disclosure, a visual element boundary control device is provided, comprising:

[0011] a boundary exceeding detection module, configured to, during an operation process of performing a target operation on a visual element displayed in a canvas, determine a first boundary exceeding control operation according to the operation type when it is determined that the visual element exceeds a boundary of the canvas according to the operation type of the target operation;

[0012] A first out-of-bounds control module, configured to perform the first out-of-bounds control operation on the visual element;

[0013] an adsorption boundary determination module, configured to determine at least one adsorption boundary of the visual element according to a current position of the visual element when the target operation ends;

[0014] The adsorption control module is used to adjust the visual element in the canvas according to each adsorption boundary, so that the visual element is adsorbed at at least one of the adsorption boundaries.

[0015] According to another aspect of the present disclosure, there is provided an electronic device, comprising:

[0016] at least one processor; and

[0017] a memory communicatively connected to the at least one processor; wherein,

[0018] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the visual element boundary control method described in any embodiment of the present disclosure.

[0019] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute the visual element boundary control method described in any embodiment of the present disclosure.

[0020] According to another aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the computer program implements the visual element boundary control method described in any embodiment of the present disclosure.

[0021] The disclosed embodiments can enable visual elements to be displayed correctly.

[0022] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure.

[0024] Figure 1 is a flow chart of a visual element boundary control method disclosed in an embodiment of the present disclosure;

[0025] Figure 2 is a flow chart of another visual element boundary control method disclosed in an embodiment of the present disclosure;

[0026] Figure 3 is a flow chart of another visual element boundary control method disclosed in an embodiment of the present disclosure;

[0027] Figure 4 is a flow chart of another visual element boundary control method disclosed in an embodiment of the present disclosure;

[0028] Figure 5 It is a schematic diagram of a decoration material operation scene of a decoration live broadcast room disclosed in an embodiment of the present disclosure;

[0029] Figure 6 is a schematic diagram of decoration materials disclosed according to an embodiment of the present disclosure;

[0030] Figure 7 It is a schematic diagram of a decoration material operation scene of a decoration live broadcast room disclosed in an embodiment of the present disclosure;

[0031] Figure 8 is a schematic diagram of a canvas of a decoration material including a single adsorption boundary according to an embodiment of the present disclosure;

[0032] Fig. 9 is a schematic diagram of decoration material adsorption control of a single adsorption boundary according to an embodiment of the present disclosure;

[0033] Fig.10 is a schematic diagram of a canvas of a decoration material including two adsorption boundaries according to an embodiment of the present disclosure;

[0034] Fig.11 is a schematic diagram of decoration material adsorption control of two adsorption boundaries disclosed in an embodiment of the present disclosure;

[0035] Fig.12 is a structural schematic diagram of a visual element boundary control device disclosed in an embodiment of the present disclosure;

[0036] Fig.13 It is a block diagram of an electronic device according to the visual element boundary control method disclosed in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0037] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0038] Figure 1This is a flow chart of a visual element boundary control method disclosed in an embodiment of the present disclosure. This embodiment can be applied to the situation where, during the adjustment of visual elements in a canvas, the visual elements are constrained not to exceed the boundary of the canvas, and after the adjustment of the visual elements is completed, the visual elements are adsorbed to the boundary. The method of this embodiment can be executed by a visual element boundary control device, which can be implemented in software and / or hardware, and is specifically configured in an electronic device with certain data computing capabilities, which can be a server device.

[0039] S101. During a process of performing a target operation on a visual element displayed in a canvas, when it is determined according to an operation type of the target operation that the visual element exceeds a boundary of the canvas, a first out-of-bounds control operation is determined according to the operation type.

[0040] Among them, at least one visual element is displayed in the canvas. The visual element can be controlled by the user. The visual element may refer to a visualized element. The operation process may refer to the process of controlling the continuous change of the visual element. In some embodiments, the target operation is input by the mouse. When the user selects the visual element and presses the mouse, it is determined to perform the target operation on the visual element. At the same time, the user keeps pressing the mouse continuously, indicating that it is in the operation process of performing the target operation on the visual element. In some embodiments, the target operation is input by gesture pressing. When the user selects the visual element and presses the screen by gesture, it is determined to perform the target operation on the visual element. The user keeps pressing continuously, indicating that it is in the operation process of performing the target operation on the visual element. In some embodiments, an interface for numerical input can be provided, in which the user can enter a specific numerical value to generate a precise target operation, control the moving position, rotation angle, and scaling size of the visual element, etc.

[0041] The disclosed embodiments can be applied to editing of visual elements of visual interfaces such as editing of live studio decoration materials, editing of ppt (PowerPoint, slides or presentations), editing of posters or editing of web pages.

[0042] Among them, the boundary of the canvas may be the boundary of the visible area in the canvas. The screen may display the visible area, the actual size of the canvas is greater than or equal to the size of the visible area, when the actual size of the canvas is greater than the size of the visible area, the canvas outside the visible area is not visible, at this time the boundary of the canvas may be the boundary of the visible area. When the actual size of the canvas is equal to the size of the visible area, the screen may display the canvas, at this time the boundary of the canvas may be the boundary of the canvas itself. Different operation types correspond to different over-boundary judgment methods for target operations. The operation type may include at least one of the following: move type, rotation type, and zoom type, etc. The corresponding over-boundary judgment method may be determined according to the operation type, and whether the visual element exceeds the boundary of the canvas may be detected according to the over-boundary judgment method. The boundary of the canvas is used to constrain the visible range, the elements within the boundary of the canvas are visible, and the elements outside the boundary of the canvas are not visible. The visual element exceeds the boundary of the canvas, which may mean that there are pixels in the visual element outside the boundary of the canvas, the pixels outside the boundary of the canvas are not visible, and the pixels within the boundary of the canvas are visible.

[0043] Among them, the first over-boundary control operation is used to adjust the visual elements beyond the boundary of the canvas to the boundary of the canvas so that the visual elements are completely visible. The first over-boundary control operation is used to constrain the visual elements to be within the boundary of the canvas. The first over-boundary control operation may include a move type or a zoom type operation. The first over-boundary control operation is different from the target operation. The target operation is usually an operation input by a user. The first over-boundary control operation is an automatically generated operation to compensate for the target operation to prevent the visual elements from exceeding the boundary of the canvas. The operation type of the first over-boundary control operation can be determined according to the operation type of the target operation, and the control vector of the first over-boundary control operation can be determined according to the control vector of the target operation. The purpose of the first over-boundary control operation is to make the visual elements within the boundary of the canvas. When the operation type is a rotation type, the operation type of the first over-boundary control operation is a move type, and the operation direction of the first over-boundary control operation is a direction pointing to the center of the canvas. When the operation type is a move type or a zoom type, the operation type of the first over-boundary control operation is the same as the operation type of the target operation, and the direction of the first over-boundary control operation is opposite to the direction of the target operation. The control value of the first out-of-bounds control operation corresponding to the moving type target operation is consistent with the control value of the target operation, and the control value of the first out-of-bounds control operation corresponding to the scaling type target operation is an upper limit value.

[0044] Wherein, judging whether the visual element exceeds the boundary of the canvas according to the operation type of the target operation. If it is determined that the visual element does not exceed the boundary of the canvas, the first out-of-bounds control operation is not determined and executed. During the operation process of the target operation, it can be continuously and periodically detected whether the visual element exceeds the boundary of the canvas.

[0045] S102: Execute the first out-of-bounds control operation on the visual element.

[0046] The first out-of-bounds control operation is performed on the visual element, so that the visual element can be restored to the boundary of the canvas. The first out-of-bounds control operation may include at least one of the following types: a move type, a rotation type, a scaling type, and the like.

[0047] S103: When the target operation ends, determine at least one adsorption boundary of the visual element according to the current position of the visual element.

[0048] Among them, the end of the target operation may refer to the termination of the continuous change state of the control visual element. In some embodiments, the target operation is input through the mouse. When the user selects the visual element and presses the mouse, it is determined that the target operation is performed on the visual element. When the user releases the mouse, it is determined that the target operation ends. In some embodiments, the target operation is input by gesture pressing. When the user selects the visual element and presses the screen through a gesture, it is determined that the target operation is performed on the visual element. When the user stops pressing the screen, for example, lifting the finger, it is determined that the target operation ends.

[0049] Among them, the current position may be the position of the visual element when the target operation ends. Whether the visual element has an adsorption boundary is detected according to the current position of the visual element. When the visual element has an adsorption boundary, at least one adsorption boundary is obtained. The adsorption boundary may refer to a boundary to which the visual element is close. When the user operates the visual element to approach the boundary, the user's purpose is usually to align or fit the visual element to the boundary, so that when the visual element approaches the boundary, the boundary that needs to be aligned or fit can be obtained as the adsorption boundary, and the visual element can be adjusted to align or fit the adsorption boundary. In some embodiments, the boundary that is closer to the current position of the visual element can be used as the adsorption boundary.

[0050] S104: Adjust the visual element in the canvas according to each of the adsorption boundaries, so that the visual element is adsorbed on at least one of the adsorption boundaries.

[0051] According to each adsorption boundary, the position or size of the visual element is adjusted so that the boundary of the visual element is aligned with the adsorption boundary.

[0052] According to the technical solution disclosed in the present invention, during the operation of the visual element, it is detected that the visual element exceeds the boundary of the canvas, and the first out-of-bounds control operation is performed on the visual element to constrain the visual element within the boundary of the canvas. After the operation is completed, the adsorption boundary of the visual element is detected to align the visual element with the adsorption boundary. When the visual element is allowed to exceed the canvas area, the visual element can still be constrained within the boundary of the canvas, so that the visual element always remains visible, and is adsorbed at the boundary of the canvas, thereby meeting the editing requirements of the adsorption boundary and improving the adsorption precision and accuracy.

[0053] Figure 2 It is a flow chart of another visual element boundary control method disclosed in accordance with an embodiment of the present disclosure, which is further optimized and expanded based on the above technical solution, and can be combined with the above optional implementation modes. The operation type is concretized as: rotation type or movement type. Determining that the visual element exceeds the boundary of the canvas according to the operation type of the target operation is concretized as follows: obtaining a first circumscribed rectangle of the visual element, wherein the edges of the first circumscribed rectangle are parallel to the corresponding edges of the canvas; detecting the boundary position of the first circumscribed rectangle in real time; and determining that the visual element exceeds the boundary of the canvas when the boundary position of the first circumscribed rectangle is outside the boundary of the canvas.

[0054] S201. In the process of performing a target operation on a visual element displayed in a canvas, a first circumscribed rectangle of the visual element is obtained in real time, wherein edges of the first circumscribed rectangle are parallel to corresponding edges of the canvas, and the operation type includes: a rotation type or a movement type.

[0055] Among them, the target operation of the rotation type is used to rotate the visual element, which can be a central rotation or a rotation with a specified point as the center. The target operation of the move type is used to drag the visual element in the canvas to change the position of the visual element in the canvas. The shape of the canvas is a rectangle, and the two parallel edges of the first circumscribed rectangle are respectively parallel to the two parallel edges of the canvas, and the other two parallel edges of the first circumscribed rectangle are respectively parallel to the two parallel edges of the canvas. The visual element can be an irregular shape or a regular shape. After the target operation of the rotation type, the visual element may become an irregular shape. By obtaining the first circumscribed rectangle of the visual element, the visual element can be considered as a regular shape, which can simplify the operation of boundary out-of-bounds detection. When the target operation of the rotation type or the move type is performed on the visual element, the size of the visual element will not change, so as to judge whether the visual element is out of bounds, it is only necessary to judge whether the points included in the visual element are out of bounds. The regular shape formed by the points, i.e., the first circumscribed rectangle, is used as the out-of-bounds judgment object, which can simplify the operation of boundary out-of-bounds detection. In some embodiments, the upper and lower boundary points of the visual element in two directions can be obtained, and a rectangle formed by lines passing through the upper and lower boundary points and parallel to the edges of the canvas is determined as the first circumscribed rectangle. By simplifying the boundary out-of-bounds detection operation, the detection process can be quickly implemented, which can be adapted to the application scenario of editing visual elements in the canvas with high real-time performance.

[0056] Among them, since the position of the visual element changes in real time during the execution of the target operation, the first bounding rectangle of the visual element in the current state can be instantly determined according to the target operation input by the user in real time, so as to realize real-time acquisition of the first bounding rectangle of the visual element.

[0057] S202: Detect the boundary position of the first circumscribed rectangle.

[0058] The boundary position of the first circumscribed rectangle may refer to the position of the edge of the first circumscribed rectangle.

[0059] S203: When the boundary position of the first circumscribed rectangle is outside the boundary of the canvas, determine that the visual element exceeds the boundary of the canvas.

[0060] Wherein, according to the positional relationship between the boundary position of the first circumscribed rectangle and the boundary of the canvas, it is detected whether the visual element exceeds the boundary of the canvas. When at least one edge position among the positions of the edges of the first circumscribed rectangle is outside the boundary of the corresponding edge of the canvas, it is determined that the visual element exceeds the boundary of the canvas. In some embodiments, when the position of the left edge of the first circumscribed rectangle is located to the left of the left edge of the canvas, it is determined that the visual element exceeds the boundary of the canvas; when the position of the right edge of the first circumscribed rectangle is located to the right of the right edge of the canvas, it is determined that the visual element exceeds the boundary of the canvas; when the position of the upper edge of the first circumscribed rectangle is located on the upper side of the upper edge of the canvas, it is determined that the visual element exceeds the boundary of the canvas; when the position of the lower edge of the first circumscribed rectangle is located on the lower side of the lower edge of the canvas, it is determined that the visual element exceeds the boundary of the canvas. When the left edge of the first circumscribed rectangle is aligned with the left edge of the canvas or is located to the right of the left edge of the canvas, the right edge of the first circumscribed rectangle is aligned with the right edge of the canvas or is located to the left of the right edge of the canvas, the upper edge of the first circumscribed rectangle is aligned with the upper edge of the canvas or is located below the upper edge of the canvas, and the lower edge of the first circumscribed rectangle is aligned with the lower edge of the canvas or is located above the lower edge of the canvas, it is determined that the visual element is within the boundary of the canvas, that is, it is determined that the visual element does not exceed the boundary of the canvas.

[0061] S204: Determine a first out-of-bounds control operation according to the operation type.

[0062] S205: Execute the first out-of-bounds control operation on the visual element.

[0063] S206: When the target operation ends, determine at least one adsorption boundary of the visual element according to the current position of the visual element.

[0064] S207: Adjust the visual element in the canvas according to each of the adsorption boundaries, so that the visual element is adsorbed at at least one of the adsorption boundaries.

[0065] According to the technical solution disclosed in the present invention, by performing a target operation of a rotation type or a movement type, the first circumscribed rectangle of the visual element is obtained in real time, and based on the positional relationship between the boundary position of the first circumscribed rectangle and the boundary of the canvas, it is detected whether the visual element exceeds the boundary of the canvas. This allows for rapid and accurate detection of whether the visual element exceeds the boundary in the operation scenarios of the rotation type and the movement type.

[0066] In some embodiments, the operation type is a move type, the shape of the visual element is a rectangle, and two sets of edges of the rectangle are respectively parallel to two sets of edges of the canvas, and the visual element can be directly determined as a first circumscribed rectangle.

[0067] In an optional embodiment, obtaining the first circumscribed rectangle of the visual element includes: when the operation type is a rotation type, obtaining multiple vertex coordinates of the visual element; and determining the first circumscribed rectangle of the visual element according to each of the vertex coordinates.

[0068] Among them, the shape of the visual element is a rectangle. After rotation, the two sets of edges of the shape of the visual element are not parallel to the two sets of edges of the canvas. The multiple vertex coordinates of the visual element are the four vertex coordinates of the rectangle corresponding to the visual element. The straight line passing through the uppermost vertex and parallel to the upper and lower edges of the canvas is the upper edge of the first circumscribed rectangle; the straight line passing through the lowermost vertex and parallel to the upper and lower edges of the canvas is the lower edge of the first circumscribed rectangle; the straight line passing through the leftmost vertex and parallel to the left and right edges of the canvas is the left edge of the first circumscribed rectangle; the straight line passing through the rightmost vertex and parallel to the left and right edges of the canvas is the right edge of the first circumscribed rectangle. The rectangle surrounded by four straight lines is the first circumscribed rectangle.

[0069] It can be seen that by acquiring the coordinates of multiple vertices of the visual element and determining the first circumscribed rectangle according to the coordinates of each vertex, the first circumscribed rectangle covering the visual element can be quickly determined.

[0070] In an optional embodiment, determining the first out-of-bounds control operation according to the operation type includes: obtaining the out-of-bounds boundary of the first circumscribed rectangle in the canvas; calculating the distance between the boundary of the first circumscribed rectangle and the out-of-bounds boundary; and determining the first out-of-bounds control operation according to the distance and the direction of the out-of-bounds boundary pointing to the center of the canvas.

[0071] The over-limit boundary may refer to the boundary of the first circumscribed rectangle outside the canvas. When the left edge of the first circumscribed rectangle is located to the left of the left edge of the canvas, the left edge of the canvas is determined to be the over-limit boundary; when the right edge of the first circumscribed rectangle is located to the right of the right edge of the canvas, the right edge of the canvas is determined to be the over-limit boundary; when the upper edge of the first circumscribed rectangle is located on the upper side of the upper edge of the canvas, the upper edge of the canvas is determined to be the over-limit boundary; when the lower edge of the first circumscribed rectangle is located on the lower side of the lower edge of the canvas, the lower edge of the canvas is determined to be the over-limit boundary.

[0072] The spacing may be the distance between the boundary of the first circumscribed rectangle of the same edge type and the over-limit boundary. The spacing is used as the control value of the first over-limit control operation, and the direction of the over-limit boundary pointing to the center of the canvas is used as the control direction of the first over-limit control operation. When the number of over-limit boundaries is one, the spacing between the over-limit boundary and the boundary of the corresponding first circumscribed rectangle is determined as the control value of the first over-limit control operation, and the direction of the over-limit boundary pointing to the center of the canvas is used as the control direction of the first over-limit control operation; when the number of over-limit boundaries is two, the control value and control direction of the corresponding first over-limit control operation are determined for each over-limit boundary.

[0073] It can be seen that by determining the first out-of-bounds control operation based on the spacing between the outer rectangle and the out-of-bounds boundary and the direction of the out-of-bounds boundary pointing to the center of the canvas, the first out-of-bounds control operation can be accurately determined, and the visual elements can be constrained within the boundaries of the canvas with minor adjustments, thereby reducing additional operations on the visual elements, retaining the user's target operation requirements as much as possible, and ensuring that the visual elements are within the boundaries.

[0074] Figure 3 It is a flowchart of another visual element boundary control method disclosed in accordance with an embodiment of the present disclosure, which is further optimized and expanded based on the above technical solution, and can be combined with the above optional implementation modes. The operation type is concretized as: zoom type. The visual element is determined to exceed the boundary of the canvas according to the operation type of the target operation, which is concretized as follows: calculating the upper limit ratio between the size of the canvas and the size of the visual element; detecting the zoom ratio of the visual element in real time; and determining that the visual element exceeds the boundary of the canvas when the zoom ratio is greater than the upper limit ratio.

[0075] S301. In a process of performing a target operation on a visual element displayed in a canvas, an upper limit ratio between a size of the canvas and a size of the visual element is calculated. The operation type includes: a zoom type.

[0076] The target operation of the zoom type is used to enlarge the size of the visual element or reduce the size of the visual element. The upper limit ratio may refer to the maximum magnification ratio of the visual element. In some embodiments, the width ratio between the width of the canvas and the width of the visual element may be calculated, and the height ratio between the height of the canvas and the height of the visual element may be calculated, and the minimum ratio may be selected from the width ratio and the height ratio as the upper limit ratio.

[0077] S302: Detect the scaling ratio of the visual element in real time.

[0078] The scaling ratio may refer to the ratio of the visual element to be enlarged or reduced by the user input. The scaling ratio is detected in real time. Since the scaling ratio of the visual element changes in real time during the execution of the target operation, the scaling ratio of the visual element in the current state can be determined instantly according to the target operation input by the user in real time, so as to obtain the scaling ratio of the visual element in real time.

[0079] S303: When the scaling ratio is greater than the upper limit ratio, determine that the visual element exceeds the boundary of the canvas.

[0080] Among them, according to the size relationship between the zoom ratio and the upper limit ratio, it is detected whether the visual element exceeds the boundary of the canvas. The zoom ratio is greater than or equal to the upper limit ratio, indicating that there are points outside the boundary of the canvas in the enlarged visual element. In fact, the upper limit ratio is the upper limit value of the visual element enlargement ratio. When the zoom ratio is greater than the upper limit ratio, at least one point in the visual element is outside the boundary of the canvas; when the zoom ratio is less than or equal to the upper limit ratio, each point in the visual element is within the boundary of the canvas.

[0081] S304: Determine a first out-of-bounds control operation according to the operation type.

[0082] S305: Execute the first out-of-bounds control operation on the visual element.

[0083] S306: When the target operation ends, determine at least one adsorption boundary of the visual element according to the current position of the visual element.

[0084] S307: Adjust the visual element in the canvas according to each of the adsorption boundaries, so that the visual element is adsorbed on at least one of the adsorption boundaries.

[0085] According to the technical solution disclosed in the present invention, by performing a target operation of a zoom type, the zoom ratio of the visual element is obtained in real time, and based on the size relationship between the zoom ratio and the upper limit ratio between the size of the canvas and the size of the visual element, it is detected whether the visual element exceeds the boundary of the canvas. This can quickly and accurately detect whether the visual element in the zoom type operation scenario exceeds the boundary.

[0086] In an optional embodiment, determining the first out-of-bounds control operation according to the operation type includes: determining the first out-of-bounds control operation according to the upper limit ratio.

[0087] In fact, the visual element will exceed the border of the canvas only after being enlarged, so the operation type of the first over-bounds control operation is a reduction type. The upper limit ratio is determined as the control value of the first over-bounds control operation, and the operation result of the first over-bounds control operation is that the scaling ratio of the visual element is the upper limit ratio.

[0088] It can be seen that by determining the first out-of-bounds control operation according to the upper limit ratio, the first out-of-bounds control operation can be accurately determined, and the visual elements can be constrained within the boundaries of the canvas with minor adjustments, thereby reducing additional operations on the visual elements, retaining the user's target operation requirements as much as possible, and ensuring that the visual elements are within the boundaries.

[0089] Figure 4 It is a flowchart of another visual element boundary control method disclosed in accordance with an embodiment of the present disclosure, which is further optimized and expanded based on the above technical solution, and can be combined with the above optional implementations. The method of determining at least one adsorption boundary of the visual element according to the current position of the visual element is specifically as follows: obtaining a second circumscribed rectangle of the visual element at the current position; calculating the spacing between at least one edge of the second circumscribed rectangle and the corresponding alternative boundary; detecting whether the visual element satisfies the boundary adsorption conditions of each edge according to the spacing of each edge of the second circumscribed rectangle; and determining the alternative boundary corresponding to the boundary adsorption condition satisfied by the visual element as the adsorption boundary of the visual element.

[0090] S401. During the process of performing a target operation on a visual element displayed in a canvas, when it is determined according to an operation type of the target operation that the visual element exceeds a boundary of the canvas, a first out-of-bounds control operation is determined according to the operation type.

[0091] S402: Execute the first out-of-bounds control operation on the visual element.

[0092] S403: When the target operation ends, obtain a second circumscribed rectangle of the visual element at the current position.

[0093] The visual element is at the current position when the target operation ends. The second circumscribed rectangle is determined based on the current shape and current position of the visual element when the target operation ends. Usually, when the visual element has not been rotated, the original shape of the visual element is a rectangle, and the second circumscribed rectangle is the shape of the visual element; when the visual element is rotated, the four vertex coordinates of the visual element can be obtained, and the second circumscribed rectangle of the visual element can be determined based on the four vertex coordinates. The position of the second circumscribed rectangle is determined based on the current position. The shape of the second circumscribed rectangle is determined based on the shape of the visual element when the target operation ends.

[0094] S404: Calculate the distance between at least one edge of the second circumscribed rectangle and the corresponding candidate boundary.

[0095] Among them, the alternative boundaries can be the edges of the canvas, other visual elements or other hierarchical areas, wherein the shapes of the other visual elements and other hierarchical areas are all rectangular. The corresponding alternative boundaries may refer to alternative boundaries of the same type as the edges. For the same type, the spacing between the edges of the second circumscribed rectangle of this type and the alternative boundaries of this type is calculated. The same type may refer to edges in the same direction. In some embodiments, the spacing between the left edge of the second circumscribed rectangle and the left edge of the canvas, the spacing between the right edge of the second circumscribed rectangle and the right edge of the canvas, the spacing between the upper edge of the second circumscribed rectangle and the upper edge of the canvas, and the spacing between the lower edge of the second circumscribed rectangle and the lower edge of the canvas are calculated respectively.

[0096] S405 . Detecting whether the visual element satisfies the boundary adsorption conditions of each edge according to the spacing between the edges of the second circumscribed rectangle.

[0097] Among them, for each edge, according to the spacing of the edge, it is detected whether the visual element meets the boundary adsorption condition of the edge. The boundary adsorption condition is used to determine whether the edge of the visual element is aligned with the same type of candidate boundary. Different edges can correspond to different boundary adsorption conditions, and different edges can correspond to the same boundary adsorption condition. In some embodiments, the boundary adsorption condition is used to determine whether the spacing of the edges is small enough.

[0098] S406: Determine the candidate boundary corresponding to the boundary adsorption condition satisfied by the visual element as the adsorption boundary of the visual element.

[0099] The visual element may satisfy the boundary adsorption condition of at least one edge. If the video element satisfies the boundary adsorption condition of a certain edge, the candidate boundary of the same type as the edge is used as the adsorption boundary.

[0100] In some embodiments, the video element satisfies the boundary adsorption condition of the left edge, and the left edge of the canvas is used as the adsorption boundary; the video element satisfies the boundary adsorption condition of the right edge, and the right edge of the canvas is used as the adsorption boundary; the video element satisfies the boundary adsorption condition of the upper edge, and the upper edge of the canvas is used as the adsorption boundary; the video element satisfies the boundary adsorption condition of the lower edge, and the lower edge of the canvas is used as the adsorption boundary.

[0101] S407: Adjust the visual element in the canvas according to each of the adsorption boundaries, so that the visual element is adsorbed on at least one of the adsorption boundaries.

[0102] According to the technical solution disclosed in the present invention, by calculating the distance between each edge of the second circumscribed rectangle and the corresponding alternative boundary, and detecting whether the visual element meets the boundary adsorption condition of the edge based on the distance, and determining the adsorption boundary based on the satisfied boundary adsorption condition, the edge of the visual element is adjusted to align with the adsorption boundary, reducing the complexity of the user's adsorption operation in the edge processing, and realizing accurate adsorption alignment of the boundary, thereby improving the editing convenience of the visual element.

[0103] In an optional embodiment, before determining at least one adsorption boundary of the visual element according to the current position of the visual element, it also includes: detecting whether the visual element exceeds the boundary of the canvas according to the current position of the visual element; when it is determined that the visual element exceeds the boundary of the canvas, determining a second out-of-bounds control operation; executing the second out-of-bounds control operation on the visual element, and updating the current position of the visual element.

[0104] Among them, according to the current position of the visual element, the position of the edge of the visual element is determined, and according to the position of the edge, it is determined whether the edge is outside the boundary of the canvas, thereby determining whether the visual element exceeds the boundary of the canvas. The detection method of the boundary exceeding of the aforementioned embodiment can be referred to to detect whether the visual element exceeds the boundary of the canvas. When the position of the edge of the visual element is within the boundary of the canvas, it is determined that the visual element does not exceed the boundary of the canvas. When the position of the edge of the visual element is outside the boundary of the canvas, it is determined that the visual element exceeds the boundary of the canvas.

[0105] Among them, the second over-boundary control operation is used to adjust the visual elements beyond the boundary of the canvas to the boundary of the canvas so that the visual elements are completely visible. The second over-boundary control operation is used to constrain the visual elements to be within the boundary of the canvas. The second over-boundary control operation may include a move type or a zoom type operation. The second over-boundary control operation is an automatically generated operation to compensate for the operation result of the target operation to prevent the visual elements from exceeding the boundary of the canvas. The operation type of the second over-boundary control operation can be determined according to the operation type of the target operation, and the control vector of the second over-boundary control operation can be determined according to the control vector of the target operation. The purpose of the second over-boundary control operation is to make the visual elements within the boundary of the canvas. When the operation type is a rotation type, the operation type of the second over-boundary control operation is a move type, and the operation direction of the second over-boundary control operation is a direction pointing to the center of the canvas. When the operation type is a move type or a zoom type, the operation type of the second over-boundary control operation is the same as the operation type of the target operation, and the direction of the second over-boundary control operation is opposite to the direction of the target operation. The control value of the second over-boundary control operation corresponding to the target operation of the move type is consistent with the control value of the target operation, and the control value of the second over-boundary control operation corresponding to the target operation of the zoom type is an upper limit value. A second out-of-bounds control operation is performed on the visual element to adjust the visual element to within the boundary of the canvas. Meanwhile, the current position of the visual element is changed and updated, and the visual element at the updated current position is within the boundary of the canvas.

[0106] It can be seen that by adding out-of-bounds judgment and out-of-bounds adjustment for visual elements and adding verification steps after the target operation is completed, even if the visual elements are not controlled within the boundaries of the canvas or errors occur during the execution of the target operation, the visual elements can still be accurately controlled within the boundaries of the canvas, thereby improving the operational correctness of the visual elements.

[0107] In an optional embodiment, adjusting the visual element in the canvas according to each of the adsorption boundaries so that the visual element is adsorbed at at least one of the adsorption boundaries includes: determining an adjustment method according to the number of the adsorption boundaries; and adjusting the visual element in the canvas according to the adjustment method so that the visual element is adsorbed at at least one of the adsorption boundaries.

[0108] Among them, the number of adsorption boundaries is at least one. When there is only one adsorption boundary, the boundary of the visual element can be aligned with the adsorption boundary. When there are multiple adsorption boundaries, the visual element itself needs to be adjusted so that multiple boundaries of the visual element are respectively aligned with multiple adsorption boundaries. The adjustment method can be adjusted for parameters such as the position, size and angle of the visual element. On the basis of retaining the operation results of the target operation of the visual element as much as possible, the visual element is adjusted and the boundary is adsorbed. When the visual element cannot adsorb all the adsorption boundaries, the visual element can only adsorb part of the adsorption boundaries.

[0109] It can be seen that by configuring the number of adsorption boundaries to be at least one and configuring corresponding adjustment methods according to different numbers of adsorption boundaries, it is possible to flexibly adapt to the adsorption requirements in different application scenarios and perform diversified adsorption adjustments, thereby improving the flexibility, diversity and accuracy of adsorption.

[0110] In an optional embodiment, determining the adjustment method based on the number of the adsorption boundaries includes: when the number of the adsorption boundaries is one, obtaining the spacing between the adsorption boundary and the corresponding boundary of the second circumscribed rectangle; determining the adjustment method based on the spacing between the adsorption boundary and the corresponding boundary of the second circumscribed rectangle and the direction of the adsorption boundary.

[0111] When the number of adsorption boundaries is one, the edges of the same type of the visual element can be aligned with the adsorption boundary. The corresponding boundary of the second outer rectangle can refer to the edges of the same type as the adsorption boundary. The direction of the adsorption boundary can refer to the direction from the visual element to the adsorption boundary. The adjustment method can be to move the distance of the spacing from the visual element to the adsorption boundary.

[0112] It can be seen that by targeting a scene with an adsorption boundary, the boundary adsorption operation of the visual element is realized through simple movement, the operation result of the target operation of the visual element is retained, the boundary adsorption conditions are met, the blank space between the visual element and the adsorption boundary is reduced, and the accuracy of the editing operation of the visual element is improved.

[0113] In an optional embodiment, determining the adjustment method according to the number of the adsorption boundaries includes: when the number of the adsorption boundaries is two, obtaining an upper limit ratio between the size of the second circumscribed rectangle and the size of the canvas; and determining the adjustment method according to the upper limit ratio.

[0114] The two adsorption boundaries are parallel, for example, the two adsorption boundaries are the upper edge and the lower edge of the canvas; for another example, the two adsorption boundaries are the left edge and the right edge of the canvas. If the two adsorption boundaries are not parallel, the two adsorption boundaries can be divided into two single adsorption boundary adjustment methods, and the visual elements can be adsorbed and controlled separately according to the single adsorption boundary adjustment methods determined above.

[0115] Among them, the upper limit ratio can be calculated with reference to the method of the aforementioned embodiment. In some embodiments, the adsorption boundary is the edge of the canvas, and the width ratio between the width of the canvas and the width of the visual element is calculated, and the height ratio between the height of the canvas and the height of the visual element is calculated. From the width ratio and the height ratio, the minimum ratio is selected as the upper limit ratio. The adjustment method can be to enlarge the visual element and use the upper limit ratio as the scaling ratio. In fact, if the visual element is enlarged to the size corresponding to the upper limit ratio, it is impossible to simultaneously close to the two specified parallel adsorption boundaries. At this time, the visual element can be enlarged to the size corresponding to the upper limit ratio, so that the adsorption effect of the other two parallel adsorption boundaries can be achieved.

[0116] It can be seen that by using scaling to implement the boundary adsorption operation of the visual element for the scene with two adsorption boundaries, and constraining the adjustment method of the visual element based on the upper limit ratio, the visual element can be adsorbed to the boundary while being within the boundary of the canvas.

[0117] When there are three or four adsorption boundaries, the adsorption boundaries can be divided into two groups, one of which includes one adsorption boundary or two adsorption boundaries, and the two adsorption boundaries in the same group are parallel. In this way, the three adsorption boundaries or four adsorption boundaries are converted into an adsorption control operation of one adsorption boundary and two adsorption boundaries, and the adjustment method can be determined by referring to the above method to control the adsorption of visual elements.

[0118] In an optional embodiment, the detecting whether the visual element satisfies the boundary adsorption conditions of each edge according to the spacing between the edges of the second circumscribed rectangle includes: determining the adsorption threshold of the boundary in at least one direction according to the type of the visual element; for each direction, comparing the spacing of the boundary in the direction of the second circumscribed rectangle with the adsorption threshold of the boundary in the direction to obtain a boundary comparison result in the direction; and detecting whether the visual element satisfies the boundary adsorption conditions of the boundary in the direction according to the boundary comparison result in the direction.

[0119] The adsorption threshold is used to detect whether the boundary adsorption condition is met. The adsorption threshold is determined by the type of the visual element and the direction of the boundary. When the spacing in the direction is less than or equal to the corresponding adsorption threshold, it is determined that the visual element meets the boundary adsorption condition of the boundary in the direction; when the spacing in the direction is greater than the corresponding adsorption threshold, it is determined that the visual element does not meet the boundary adsorption condition of the boundary in the direction.

[0120] In some examples, the adsorption threshold of the left edge of the visual element of type A is 10 pixels; the adsorption threshold of the right edge of the visual element of type A is 15 pixels; the adsorption threshold of the left edge of the visual element of type B is 12 pixels; and the adsorption threshold of the right edge of the visual element of type B is 10 pixels.

[0121] In some embodiments, the adsorption threshold may be adjusted by the user, allowing the user to adjust the adsorption threshold to adjust the adsorption strength or sensitivity, thereby more finely controlling the position of the visual element as needed.

[0122] It can be seen that by configuring the adsorption thresholds according to the types and directions of the visual elements, and detecting whether the visual elements meet the boundary adsorption conditions of the corresponding directions and types based on the adsorption thresholds, the adsorption thresholds corresponding to the boundary adsorption conditions can be flexibly configured to adapt to different element layout scenarios.

[0123] In an optional embodiment, the calculation of the spacing between at least one edge of the second circumscribed rectangle and the corresponding alternative boundary includes: determining the adsorbable object based on the level of the visual element and the association relationship between the visual element and other visual elements; obtaining the alternative boundary of the adsorbable object; and calculating the spacing between at least one edge of the second circumscribed rectangle and the corresponding alternative boundary.

[0124] Among them, there can be multiple visual elements in the canvas, different visual elements can be superimposed and placed, some visual elements can cover other visual elements, so that visual elements with occlusion relationship are at different levels. Usually, the visual elements of the upper layer cover the visual elements of the lower layer. In order to enrich the hierarchy and visual effects between the visual elements in the canvas, the size of the visual elements of the upper layer is smaller than the visual elements of the lower layer, and the visual elements of the upper layer are within the coverage area of ​​the visual elements of the lower layer. The canvas can be understood as the visual element of the lowest layer.

[0125] The association relationship may be a positional relationship, affiliation, or hierarchical relationship between visual elements. Adsorbable objects may include at least one of the following: a visual element adjacent to the previous layer, a visual element adjacent to the next layer, adjacent visual elements at the same layer, and a canvas.

[0126] In some embodiments, based on the level at which the visual element is located, the same level and the next level of the visual element are obtained, and the same level and the next level in the association relationship, as well as other visual elements with similar positional relationships are queried. The alternative boundaries of other visual elements may include the upper edge, lower edge, left edge, and right edge of the circumscribed rectangle of the other visual elements. Calculate the spacing between the upper edge of the second circumscribed rectangle and the upper edge of the other visual element, the spacing between the lower edge of the second circumscribed rectangle and the lower edge of the other visual element, the spacing between the left edge of the second circumscribed rectangle and the left edge of the other visual element, and the spacing between the right edge of the second circumscribed rectangle and the right edge of the other visual element.

[0127] In some embodiments, the multiple levels may include foreground, decoration, and background levels. For example, visual elements of the same level may be adsorbed and aligned as adsorbable objects. For another example, visual elements of the foreground level may be adsorbed and aligned with visual elements of the background level as adsorbable objects. For another example, visual elements of the decoration level may be adsorbed and aligned with visual elements of the background level as adsorbable objects. Hierarchical adsorption control may be implemented to ensure that visual elements are adsorbed and aligned at the correct level.

[0128] In some embodiments, when a target operation is detected, a grid can be displayed in the canvas, allowing the user to align to the grid when dragging visual elements. The grid can also be used as an adsorbable object, and the boundaries of the grid can be used as alternative boundaries for adsorbable objects to automatically align the edges of the grid, thereby helping the user maintain a neat layout visually.

[0129] In some embodiments, after determining the adsorbable object, a visual prompt can be provided for the adsorbable object. After determining the candidate boundary, a visual prompt can be provided for the candidate boundary. The adsorbable object and the candidate boundary can use independent visual prompts, such as highlighting or shading. This can help the user realize that an adsorption action is about to occur.

[0130] It can be seen that by determining the adsorbable objects of the visual element according to the level of the visual element and the association relationship between the visual element and other visual elements, and calculating the distance between the same type of edges of the second circumscribed rectangle and the same type of edges of the alternative boundary, and detecting the adsorption boundary based on the distance and whether to control the visual element to adsorb the boundary, the adsorption sensitivity can be flexibly adjusted for different canvas layout scenarios.

[0131] In an optional embodiment, during the operation of performing a target operation on a visual element displayed in the canvas, detecting whether the visual element exceeds the boundary of the canvas according to the operation type of the target operation, includes: in a decoration live broadcast room, listening to the editing layout operation of the decoration material in the live broadcast room; wherein the editing layout operation includes an operation type of the decoration material; during the operation of performing the editing layout operation on the decoration material, detecting whether the decoration material exceeds the boundary of the live broadcast room according to the operation type of the editing layout operation.

[0132] Among them, in the scene of decoration live broadcast, the canvas is used to display the space to be decorated, and the visual elements include decoration materials. The anchor or system enters the editing layout operation of the decoration material in the canvas, the interface of the live broadcast room. The decoration material can be operated, and the operation type may include movement type, scaling type, rotation type, etc. The visual element boundary control system provided by the embodiment of the present disclosure can monitor the operation of the decoration material in the live broadcast room. And when the target operation of the operation type such as movement type, scaling type and rotation type is monitored, during the execution of the target operation, it is detected whether the decoration material exceeds the boundary of the live broadcast room. And when it exceeds the boundary of the live broadcast room, the decoration material is controlled beyond the boundary, and the first beyond the boundary control operation is executed to constrain the decoration material within the boundary of the live broadcast room. After the target operation is completed, it is detected whether the decoration material has an adsorption boundary, and when there is at least one adsorption boundary, the decoration material is adsorbed at at least one adsorption boundary.

[0133] like Figure 5 The decoration live broadcast room shown is a canvas, and the blue area (the thumbs-up hand inside) displayed in the decoration live broadcast room is the decoration material. The target operation type of the decoration material is the rotation type. The upper and left edges of the live broadcast room are the over-limit boundaries (green straight lines). The anchor or the system rotates the decoration material. Figure 5 The positions of the two vertices shown are constrained on the upper edge and the left edge of the live broadcast room respectively.

[0134] like Figure 6 As shown, the decoration materials may include static materials and dynamic materials, and the visual elements of the embodiment of the present disclosure are static elements. The static materials may be pictures, and the dynamic materials may be videos. Figure 6 The decoration materials shown may include thumbs-up hands, cats, scenery, people, roadsides and shapes, etc.

[0135] like Figure 7As shown, the anchor can input the target operation through specific numerical input. For example, to control the position of the moving decoration material, by inputting the coordinates, x-axis position and y-axis position of the moved decoration material, the decoration material can be moved to the position corresponding to the input information; for another example, to control the size of the scaled decoration material, by inputting the width and height of the scaled decoration material, the decoration material can be scaled to the size corresponding to the input information. In addition, the content and cropping of the decoration material can be controlled, as well as the adsorption alignment and hierarchy of the decoration material can be configured. These operations are not target operations and will not cause boundary control and adsorption control.

[0136] It can be seen that by performing boundary constraints and adsorption control on the decoration materials in the scene of the decoration live broadcast room, the blank space in the live broadcast room can be reduced and the control accuracy and real-time performance of the decoration materials can be improved.

[0137] In a specific example, in the canvas, the boundary of the decoration material is monitored and controlled during its rotation; the boundary of the decoration material is monitored and controlled during its movement; the boundary of the decoration material is monitored and controlled during its scaling; after the rotation, movement and scaling operations are completed, the boundary of the decoration material is controlled again, and after the boundary control, the decoration material is adsorbed.

[0138] Specifically, it is first determined whether there is a decoration material, and at this time it can also be determined whether the decoration material is a decoration material within a specified range, and the specified range can be a certain type, for example, the decoration material is a tile, a curtain or furniture.

[0139] During the scaling process, the upper limit ratio of the decoration material is calculated, the width ratio of the live broadcast room and the width of the decoration material is calculated, and the height ratio of the live broadcast room and the height of the decoration material is calculated, and the minimum value is selected as the upper limit ratio. The minimum value between the input scaling ratio and the upper limit ratio is detected in real time, and the minimum value is used as the final scaling ratio of the target operation, so as to control the scaling ratio of the decoration material to be less than or equal to the upper limit ratio. When it is detected that the input scaling ratio is greater than the upper limit ratio, the X-axis scaling and Y-axis scaling ratios of the decoration material are both set to the upper limit ratio, so as to modify the scaling ratio of the decoration material to the upper limit ratio.

[0140] Take the top left corner vertex of the live broadcast room or canvas as the origin to establish an xy two-dimensional coordinate system. During the rotation process, calculate the coordinate positions of the four vertices of the decoration material in real time, and calculate the coordinate positions of the four vertices of the first circumscribed rectangle of the rotated decoration material. Specifically, obtain the maximum x-axis value, the minimum x-axis value, the maximum y-axis value and the minimum y-axis value of each point of the rotated decoration material. In fact, the four extreme values ​​are the coordinate values ​​of the four vertices in the decoration material. According to the above four extreme values, the coordinates of the four vertices of the first circumscribed rectangle are used to determine the first circumscribed rectangle of the decoration material.

[0141] During the moving process, the rectangle of the decoration material itself is obtained and used as the first circumscribed rectangle.

[0142] During the movement and rotation process, after determining the first circumscribed rectangle in the rotation process, for the left boundary exceeding the boundary: check whether the x-coordinate value of the leftmost point in the first circumscribed rectangle is less than the x-coordinate value of the y-axis (the left edge of the canvas), that is, 0. If the x-axis coordinate value of the leftmost point is negative, that is, less than 0, it indicates that the leftmost point is outside the boundary of the canvas. At this time, move each point in the decoration material to the right, and the offset of the movement is the distance between the leftmost point and the y-axis, that is, the x-coordinate value of the leftmost point, that is, the x-coordinate value of each point in the decoration material minus the coordinate value of the leftmost point.

[0143] For right border exceeding the boundary: check whether the x-coordinate value of the rightmost point in the first circumscribed rectangle is greater than the x-coordinate value of the right edge of the canvas. If the x-axis coordinate value of the rightmost point is greater than the x-coordinate value of the right edge of the canvas, it indicates that the rightmost point is outside the boundary of the canvas. At this time, move each point in the decoration material to the left, and the offset of the movement is the distance between the x-coordinate value of the rightmost point and the right edge of the canvas, that is, the absolute value of the difference between the width of the canvas and the x-coordinate value of the rightmost point, that is, the distance is the x-coordinate value of the rightmost point minus the width of the canvas, and the x-coordinate value of each point in the decoration material is minus the distance.

[0144] For upper boundary exceeding the boundary: check whether the x-coordinate value of the uppermost point in the first circumscribed rectangle is less than the y-coordinate value of the x-axis (the upper edge of the canvas), that is, 0. If the x-axis coordinate value of the uppermost point is negative, that is, less than 0, it indicates that the leftmost point is outside the boundary of the canvas. At this time, move each point in the decoration material downward, and the offset of the movement is the distance between the uppermost point and the x-axis, that is, the y-coordinate value of the uppermost point, that is, the y-coordinate value of each point in the decoration material minus the coordinate value of the uppermost point.

[0145] For the bottom boundary exceeding the boundary: check whether the y-coordinate value of the bottom point in the first circumscribed rectangle is greater than the y-coordinate value of the bottom edge of the canvas. If the y-axis coordinate value of the rightmost point is greater than the y-coordinate value of the bottom edge of the canvas, it indicates that the bottom point is outside the boundary of the canvas. At this time, move each point in the decoration material upward, and the offset of the movement is the distance between the y-coordinate value of the bottom point and the bottom edge of the canvas, that is, the absolute value of the difference between the height of the canvas and the y-coordinate value of the bottom point, that is, the distance is the x-coordinate value of the bottom point minus the height of the canvas, and the y-coordinate value of each point in the decoration material is minus the distance.

[0146] Call the position adjustment method to update the current position of the decoration material.

[0147] Boundary adsorption processing: Specifically, first determine whether there is a decoration material. At this time, you can also determine whether the decoration material is a decoration material within a specified range. The specified range can be a certain type. For example, the decoration material is a tile, curtain, or furniture. Get the adsorption threshold corresponding to the decoration material. For example, the adsorption threshold is 2.

[0148] After the target operation is completed, the second bounding rectangle of the decoration material is obtained. The distance between the second bounding rectangle of the decoration material and the candidate border of the canvas is calculated. According to the distance, it is determined whether to trigger the border adsorption operation, and the adsorption border that needs to be adsorbed is detected.

[0149] For the boundary of the left edge of the canvas: detect whether the x-coordinate value of the leftmost point of the second circumscribed rectangle is less than the adsorption threshold; if less than, determine that the decoration material triggers the adsorption operation of the left edge of the canvas; if greater than or equal to, determine that the decoration material does not trigger the adsorption operation of the left edge of the canvas.

[0150] For the boundary of the right edge of the canvas: detect whether the difference between the width of the canvas and the sum of the x-coordinate value of the leftmost point of the second circumscribed rectangle and the width of the second circumscribed rectangle is less than the adsorption threshold; if it is less than, determine that the decoration material triggers the adsorption operation of the right edge of the canvas; if it is greater than or equal to, determine that the decoration material does not trigger the adsorption operation of the right edge of the canvas.

[0151] For the boundary of the upper edge of the canvas: detect whether the y-coordinate value of the uppermost point of the second circumscribed rectangle is less than the adsorption threshold; if less than, determine that the decoration material triggers the adsorption operation of the upper edge of the canvas; if greater than or equal to, determine that the decoration material does not trigger the adsorption operation of the upper edge of the canvas.

[0152] For the boundary of the lower edge of the canvas: detect whether the difference between the height of the canvas and the sum of the y-coordinate value of the topmost point of the second circumscribed rectangle and the height of the second circumscribed rectangle is less than the adsorption threshold; if less than, determine that the decoration material triggers the adsorption operation of the lower edge of the canvas; if greater than or equal to, determine that the decoration material does not trigger the adsorption operation of the lower edge of the canvas.

[0153] When the number of adsorption boundaries is one, adsorb to the left edge: move each point in the decoration material to the right, and the offset of the movement is the distance between the leftmost point and the y-axis, that is, the x-coordinate value of the leftmost point, that is, the x-coordinate value of each point in the decoration material minus the coordinate value of the leftmost point.

[0154] Adsorb to the right edge: Move each point in the decoration material to the left, and the offset of the movement is the distance between the x-coordinate value of the rightmost point and the right edge of the canvas, that is, the absolute value of the difference between the width of the canvas and the x-coordinate value of the rightmost point, that is, the distance is the x-coordinate value of the rightmost point minus the width of the canvas, and the x-coordinate value of each point in the decoration material is subtracted from the distance.

[0155] Adsorb to the upper edge: Move each point in the decoration material downwards, and the offset of the movement is the distance between the top point and the x-axis, that is, the y-coordinate value of the top point, that is, the y-coordinate value of each point in the decoration material minus the coordinate value of the top point.

[0156] Adsorb to the bottom edge: Move each point in the decoration material upwards, and the offset of the movement is the distance between the y-coordinate value of the bottom point and the bottom edge of the canvas, that is, the absolute value of the difference between the height of the canvas and the y-coordinate value of the bottom point, that is, the distance is the x-coordinate value of the bottom point minus the height of the canvas, and the y-coordinate value of each point in the decoration material is minus the distance.

[0157] like Figure 8 As shown in the figure, both the decoration material A and the decoration material B in the canvas meet the boundary adsorption condition of being adsorbed to the left edge. The effect formed after the adsorption control of the decoration material A and the decoration material B is as follows Fig. 9 As shown, the second circumscribed rectangles of the decoration material A and the decoration material B are both closely attached to the left edge. The second circumscribed rectangle of the decoration material A is consistent with the decoration material A itself.

[0158] When there are two adsorption boundaries, trigger adsorption on both sides or both sides at the same time: scale the decoration material to achieve adsorption to both adsorption boundaries at the same time:

[0159] After the target operation is completed, the width ratio between the width of the canvas and the width of the decoration material is calculated, and the height ratio between the height of the canvas and the height of the decoration material is calculated, and the minimum value of the width ratio and the height ratio is obtained as the upper limit ratio. The decoration material is scaled on the X axis and the Y axis based on the upper limit ratio.

[0160] like Fig.10 As shown in FIG. 1 , the decoration material C in the canvas meets the boundary adsorption conditions of being adsorbed to the left edge and the right edge. The effect formed after the adsorption control of the decoration material C is as follows Fig.11 As shown, the decoration material C is enlarged, and the second circumscribed rectangle of the enlarged decoration material C is closely attached to the left and right edges.

[0161] Update the decoration material, check whether the updated decoration material exceeds the boundary of the canvas, and if it exceeds the boundary, determine the third boundary control operation and perform the third boundary control operation. Update the position and size of the decoration material, render the decoration material in the canvas, and realize accurate display of the updated decoration material.

[0162] According to an embodiment of the present disclosure, Fig.12 This is a structural diagram of a visual element boundary control device in an embodiment of the present disclosure. The present disclosure embodiment is applicable to the situation where, during the adjustment of visual elements in a canvas, the visual elements are constrained not to exceed the boundary of the canvas, and after the adjustment of the visual elements is completed, the visual elements are adsorbed to the boundary. The device is implemented by software and / or hardware, and is specifically configured in an electronic device with certain data computing capabilities.

[0163] like Fig.12 The visual element boundary control device 1200 shown in the figure comprises: a boundary exceeding detection module 1201, a first boundary exceeding control module 1202, an adsorption boundary determination module 1203 and an adsorption control module 1204.

[0164] The boundary exceeding detection module 1201 is used for, during the operation process of performing a target operation on a visual element displayed in the canvas, when it is determined according to the operation type of the target operation that the visual element exceeds the boundary of the canvas, determining a first boundary exceeding control operation according to the operation type;

[0165] A first out-of-bounds control module 1202, configured to perform the first out-of-bounds control operation on the visual element;

[0166] An adsorption boundary determination module 1203, configured to determine at least one adsorption boundary of the visual element according to a current position of the visual element when the target operation ends;

[0167] The adsorption control module 1204 is used to adjust the visual element in the canvas according to each of the adsorption boundaries, so that the visual element is adsorbed at at least one of the adsorption boundaries.

[0168] According to the technical solution disclosed in the present invention, during the operation of the visual element, it is detected that the visual element exceeds the boundary of the canvas, and the first out-of-bounds control operation is performed on the visual element to constrain the visual element within the boundary of the canvas. After the operation is completed, the adsorption boundary of the visual element is detected to align the visual element with the adsorption boundary. When the visual element is allowed to exceed the canvas area, the visual element can still be constrained within the boundary of the canvas, so that the visual element always remains visible, and is adsorbed at the boundary of the canvas, thereby meeting the editing requirements of the adsorption boundary and improving the adsorption precision and accuracy.

[0169] Optionally, the operation type includes: a rotation type or a movement type;

[0170] The boundary exceeding detection module 1201 includes:

[0171] A first rectangle determining unit, configured to obtain in real time a first circumscribed rectangle of the visual element, wherein edges of the first circumscribed rectangle are parallel to corresponding edges of the canvas;

[0172] A rectangle boundary detection unit, used to detect the boundary position of the first circumscribed rectangle;

[0173] A position exceeding detection unit is used to determine that the visual element exceeds the boundary of the canvas when the boundary position of the first circumscribed rectangle is outside the boundary of the canvas.

[0174] Optionally, the circumscribed rectangle determining unit includes:

[0175] A vertex determination subunit, used for obtaining a plurality of vertex coordinates of the visual element when the operation type is a rotation type;

[0176] The rectangle generating subunit is used to determine a first circumscribed rectangle of the visual element according to the coordinates of each vertex.

[0177] Optionally, the boundary exceeding detection module 1201 includes:

[0178] An over-limit boundary detection unit, used for obtaining an over-limit boundary of the first circumscribed rectangle in the canvas;

[0179] A first spacing calculation unit, used to calculate the spacing between the boundary of the first circumscribed rectangle and the over-limit boundary;

[0180] The first operation determining unit is used to determine a first out-of-bounds control operation according to the spacing and the direction in which the out-of-bounds boundary points to the center of the canvas.

[0181] Optionally, the operation type includes: a scaling type;

[0182] The boundary exceeding detection module 1201 includes:

[0183] An upper limit ratio calculation unit, used to calculate an upper limit ratio between the size of the canvas and the size of the visual element;

[0184] A zoom detection unit, used for detecting the zoom ratio of the visual element in real time;

[0185] The size exceeding detection unit is used to determine that the visual element exceeds the boundary of the canvas when the scaling ratio is greater than the upper limit ratio.

[0186] Optionally, the boundary exceeding detection module 1201 includes:

[0187] The second operation determination subunit is used to determine a first over-limit control operation according to the upper limit ratio.

[0188] Optionally, the visual element boundary control device further includes:

[0189] The boundary exceeding detection module is further used to detect whether the visual element exceeds the boundary of the canvas according to the current position of the visual element before determining at least one adsorption boundary of the visual element according to the current position of the visual element;

[0190] An out-of-bounds operation determination module, configured to determine a second out-of-bounds control operation when it is determined that the visual element exceeds the boundary of the canvas;

[0191] The second out-of-bounds control module is used to perform the second out-of-bounds control operation on the visual element and update the current position of the visual element.

[0192] Optionally, the adsorption boundary determination module 1203 includes:

[0193] A second rectangle determining unit, used to obtain a second circumscribed rectangle of the visual element at the current position;

[0194] A second spacing calculation unit, used to calculate the spacing between at least one edge of the second circumscribed rectangle and the corresponding candidate boundary;

[0195] An element adsorption judgment unit, used for detecting whether the visual element satisfies the boundary adsorption conditions of each edge according to the spacing between the edges of the second circumscribed rectangle;

[0196] The adsorption boundary detection unit is used to determine the candidate boundary corresponding to the boundary adsorption condition satisfied by the visual element as the adsorption boundary of the visual element.

[0197] Optionally, the adsorption control module 1204 includes:

[0198] An adjustment mode determining unit, used for determining an adjustment mode according to the number of adsorption boundaries;

[0199] The adsorption adjustment unit is used to adjust the visual element in the canvas according to the adjustment method so that the visual element is adsorbed at at least one of the adsorption boundaries.

[0200] Optionally, the adjustment mode determining unit includes:

[0201] a single-border spacing calculation subunit, configured to obtain the spacing between the adsorption border and the corresponding border of the second circumscribed rectangle when the number of the adsorption border is one;

[0202] The single adsorption adjustment subunit is used to determine the adjustment mode according to the distance between the adsorption boundary and the corresponding boundary of the second circumscribed rectangle and the direction of the adsorption boundary.

[0203] Optionally, the adjustment mode determining unit includes:

[0204] a multi-border ratio calculation subunit, configured to obtain an upper limit ratio between the size of the second circumscribed rectangle and the size of the canvas when the number of the adsorption borders is two;

[0205] The multi-adsorption adjustment subunit is used to determine the adjustment method according to the upper limit ratio.

[0206] Optionally, the element adsorption judgment unit includes:

[0207] An adsorption threshold calculation subunit, used to determine an adsorption threshold of a boundary in at least one direction according to the type of the visual element;

[0208] a boundary comparison subunit, for comparing, for each of the directions, the spacing of the boundaries of the second circumscribed rectangle in the direction with an adsorption threshold of the boundaries in the direction, to obtain a boundary comparison result in the direction;

[0209] The adsorption condition judgment subunit is used to detect whether the visual element satisfies the boundary adsorption condition of the boundary in the direction according to the boundary comparison result in the direction.

[0210] Optionally, the second distance calculation unit includes:

[0211] An absorbable object determination subunit, used to determine an absorbable object according to the level of the visual element and the association relationship between the visual element and other visual elements;

[0212] A candidate boundary acquisition subunit, used to acquire a candidate boundary of the absorbable object;

[0213] The border distance calculation subunit is used to calculate the distance between at least one edge of the second circumscribed rectangle and the corresponding candidate border.

[0214] Optionally, the boundary exceeding detection module 1201 includes:

[0215] A decoration material operation monitoring unit is used to monitor the editing layout operation of the decoration material in the decoration live broadcast room; wherein the editing layout operation includes the operation type of the decoration material;

[0216] The decoration material out-of-bounds detection unit is used to detect whether the decoration material exceeds the boundary of the live broadcast room according to the operation type of the editing layout operation during the operation process of performing the editing layout operation on the decoration material.

[0217] The above-mentioned visual element boundary control device can execute the visual element boundary control method provided by any embodiment of the present disclosure, and has corresponding functional modules and beneficial effects for executing the visual element boundary control method.

[0218] In the technical solution of the present disclosure, the collection, storage, use, processing, transmission, provision and disclosure of user personal information involved are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0219] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.

[0220] Fig.13 A schematic area diagram of an example electronic device 1300 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0221] like Fig.13As shown, the device 1300 includes a computing unit 1301, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 1302 or a computer program loaded from a storage unit 1308 into a random access memory (RAM) 1303. In the RAM 1303, various programs and data required for the device 1300 instructions can also be stored. The computing unit 1301, the ROM 1302, and the RAM 1303 are connected to each other via a bus 1304. An input / output (I / O) interface 1305 is also connected to the bus 1304.

[0222] A number of components in the device 1300 are connected to the I / O interface 1305, including: an input unit 1306, such as a keyboard, a mouse, etc.; an output unit 1307, such as various types of displays, speakers, etc.; a storage unit 1308, such as a disk, an optical disk, etc.; and a communication unit 1309, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 1309 allows the device 1300 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0223] The computing unit 1301 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 1301 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 1301 performs the various methods and processes described above, such as the visual element boundary control method. For example, in some embodiments, the visual element boundary control method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 1308. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 1300 via the ROM 1302 and / or the communication unit 1309. When the computer program is loaded into the RAM 1303 and executed by the computing unit 1301, one or more steps of the visual element boundary control method described above may be performed. Alternatively, in other embodiments, the computing unit 1301 may be configured to execute the visual element boundary control method in any other appropriate manner (eg, by means of firmware).

[0224] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard objects (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0225] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, implements the functions / instructions specified in the flow chart and / or the area diagram. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

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

[0227] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0228] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0229] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship between the client and the server is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or a cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services. The server may also be a server of a distributed system, or a server combined with a blockchain.

[0230] Artificial intelligence is a discipline that studies how to use computers to simulate certain human thought processes and intelligent behaviors (such as learning, reasoning, thinking, planning, etc.). It includes both hardware-level and software-level technologies. Artificial intelligence hardware technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, and big data processing; artificial intelligence software technologies mainly include computer vision technology, speech recognition technology, natural language processing technology, machine learning / deep learning technology, big data processing technology, knowledge graph technology, and other major directions.

[0231] Cloud computing refers to a technology system that uses network access to elastically scalable shared physical or virtual resource pools. Resources can include servers, instruction systems, networks, software, applications, and storage devices, and can be deployed and managed on demand and in a self-service manner. Cloud computing technology can provide efficient and powerful data processing capabilities for the application of technologies such as artificial intelligence and blockchain, as well as model training.

[0232] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solution provided by this disclosure can be achieved, and this document does not limit this.

[0233] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A visual element boundary control method, comprising: During the operation process of performing a target operation on a visual element displayed in the canvas, when it is determined according to the operation type of the target operation that the visual element exceeds the boundary of the canvas, a first out-of-bounds control operation is determined according to the operation type; performing the first out-of-bounds control operation on the visual element; When the target operation ends, determining at least one adsorption boundary of the visual element according to the current position of the visual element; According to each of the adsorption boundaries, the visual element is adjusted in the canvas so that the visual element is adsorbed at at least one of the adsorption boundaries.

2. The method according to claim 1, wherein: The operation type includes: rotation type or movement type; The determining, according to the operation type of the target operation, that the visual element exceeds the boundary of the canvas includes: Acquire a first circumscribed rectangle of the visual element in real time, wherein edges of the first circumscribed rectangle are parallel to corresponding edges of the canvas; Detecting the boundary position of the first circumscribed rectangle; When the boundary position of the first circumscribed rectangle is outside the boundary of the canvas, it is determined that the visual element exceeds the boundary of the canvas.

3. The method according to claim 2, wherein: The obtaining of a first circumscribed rectangle of the visual element comprises: When the operation type is a rotation type, obtaining multiple vertex coordinates of the visual element; A first circumscribed rectangle of the visual element is determined according to the coordinates of each vertex.

4. The method according to claim 2, wherein: The determining of the first out-of-bounds control operation according to the operation type includes: Obtain an excess boundary of the first circumscribed rectangle in the canvas; Calculating the distance between the boundary of the first circumscribed rectangle and the over-limit boundary; A first out-of-bounds control operation is determined according to the spacing and the direction in which the out-of-bounds boundary points to the center of the canvas.

5. The method according to claim 1, wherein: The operation type includes: scaling type; The determining, according to the operation type of the target operation, that the visual element exceeds the boundary of the canvas includes: Calculating an upper limit ratio between the size of the canvas and the size of the visual element; detecting the scaling ratio of the visual element in real time; When the zoom ratio is greater than the upper limit ratio, it is determined that the visual element exceeds the boundary of the canvas.

6. The method according to claim 5, wherein: The determining of the first out-of-bounds control operation according to the operation type includes: According to the upper limit ratio, a first over-limit control operation is determined.

7. The method according to claim 1, before determining at least one adsorption boundary of the visual element according to the current position of the visual element, further comprising: Detecting, according to the current position of the visual element, whether the visual element exceeds the boundary of the canvas; When it is determined that the visual element exceeds the boundary of the canvas, determining a second out-of-bounds control operation; The second out-of-bounds control operation is performed on the visual element, and a current position of the visual element is updated.

8. The method according to claim 1, wherein: Determining at least one adsorption boundary of the visual element according to the current position of the visual element includes: Obtaining a second circumscribed rectangle of the visual element at the current position; Calculating the distance between at least one edge of the second circumscribed rectangle and the corresponding candidate boundary; According to the spacing between the edges of the second circumscribed rectangle, detecting whether the visual element satisfies the boundary adsorption conditions of the edges; The candidate boundary corresponding to the boundary adsorption condition satisfied by the visual element is determined as the adsorption boundary of the visual element.

9. The method according to claim 8, wherein: The step of adjusting the visual element in the canvas according to each of the adsorption boundaries so that the visual element is adsorbed at at least one of the adsorption boundaries includes: Determining an adjustment method according to the number of the adsorption boundaries; According to the adjustment method, the visual element is adjusted in the canvas so that the visual element is adsorbed at at least one of the adsorption boundaries.

10. The method according to claim 9, wherein: The step of determining the adjustment method according to the number of the adsorption boundaries includes: When the number of the adsorption boundaries is one, obtaining a distance between the adsorption boundary and a corresponding boundary of the second circumscribed rectangle; An adjustment method is determined according to a distance between the adsorption boundary and a corresponding boundary of the second circumscribed rectangle and a direction of the adsorption boundary.

11. The method according to claim 9, wherein: The step of determining the adjustment method according to the number of the adsorption boundaries includes: When the number of the adsorption boundaries is two, obtaining an upper limit ratio between a size of the second circumscribed rectangle and a size of the canvas; An adjustment method is determined according to the upper limit ratio.

12. The method according to claim 8, wherein: The detecting, based on the spacing between the edges of the second circumscribed rectangle, whether the visual element satisfies the boundary adsorption conditions of the edges includes: Determining an adsorption threshold of a boundary in at least one direction according to the type of the visual element; For each of the directions, compare the spacing between the boundaries of the second circumscribed rectangle in the direction with the adsorption threshold of the boundaries in the direction to obtain a boundary comparison result in the direction; According to the boundary comparison result of the direction, it is detected that the visual element satisfies the boundary adsorption condition of the boundary of the direction.

13. The method according to claim 8, wherein: The calculating the distance between at least one edge of the second circumscribed rectangle and the corresponding candidate boundary includes: Determine an adsorbable object according to the level of the visual element and the association relationship between the visual element and other visual elements; Obtaining candidate boundaries of the absorbable object; The distance between at least one edge of the second circumscribed rectangle and the corresponding candidate boundary is calculated.

14. The method according to claim 1, wherein: In the process of performing a target operation on a visual element displayed in the canvas, detecting whether the visual element exceeds a boundary of the canvas according to an operation type of the target operation includes: In a decoration live broadcast room, monitoring the editing layout operation of the decoration materials in the live broadcast room; wherein the editing layout operation includes the operation type of the decoration materials; During the operation process of performing the editing layout operation on the decoration material, it is detected whether the decoration material exceeds the boundary of the live broadcast room according to the operation type of the editing layout operation.

15. A visual element boundary control device, comprising: a boundary exceeding detection module, configured to, during an operation process of performing a target operation on a visual element displayed in a canvas, determine a first boundary exceeding control operation according to the operation type when it is determined that the visual element exceeds a boundary of the canvas according to the operation type of the target operation; A first out-of-bounds control module, configured to perform the first out-of-bounds control operation on the visual element; an adsorption boundary determination module, configured to determine at least one adsorption boundary of the visual element according to a current position of the visual element when the target operation ends; The adsorption control module is used to adjust the visual element in the canvas according to each adsorption boundary, so that the visual element is adsorbed at at least one of the adsorption boundaries.

16. The device according to claim 15, wherein: The operation type includes: rotation type or movement type; The boundary exceeding detection module comprises: A first rectangle determining unit, configured to obtain in real time a first circumscribed rectangle of the visual element, wherein edges of the first circumscribed rectangle are parallel to corresponding edges of the canvas; A rectangle boundary detection unit, used to detect the boundary position of the first circumscribed rectangle; A position exceeding detection unit is used to determine that the visual element exceeds the boundary of the canvas when the boundary position of the first circumscribed rectangle is outside the boundary of the canvas.

17. The device according to claim 16, wherein: The circumscribed rectangle determining unit comprises: A vertex determination subunit, used for obtaining a plurality of vertex coordinates of the visual element when the operation type is a rotation type; The rectangle generating subunit is used to determine a first circumscribed rectangle of the visual element according to the coordinates of each vertex.

18. The device according to claim 16, wherein: The boundary exceeding detection module comprises: An over-limit boundary detection unit, used for obtaining an over-limit boundary of the first circumscribed rectangle in the canvas; A first spacing calculation unit, used to calculate the spacing between the boundary of the first circumscribed rectangle and the over-limit boundary; The first operation determining unit is used to determine a first out-of-bounds control operation according to the spacing and the direction in which the out-of-bounds boundary points to the center of the canvas.

19. The device according to claim 12, wherein: The operation type includes: scaling type; The boundary exceeding detection module comprises: An upper limit ratio calculation unit, used to calculate an upper limit ratio between the size of the canvas and the size of the visual element; A zoom detection unit, used for detecting the zoom ratio of the visual element in real time; The size exceeding detection unit is used to determine that the visual element exceeds the boundary of the canvas when the scaling ratio is greater than the upper limit ratio.

20. The device according to claim 19, wherein The boundary exceeding detection module comprises: The second operation determination subunit is used to determine a first over-limit control operation according to the upper limit ratio.

21. The apparatus according to claim 15, further comprising: The boundary exceeding detection module is further used to detect whether the visual element exceeds the boundary of the canvas according to the current position of the visual element before determining at least one adsorption boundary of the visual element according to the current position of the visual element; An out-of-bounds operation determination module, configured to determine a second out-of-bounds control operation when it is determined that the visual element exceeds the boundary of the canvas; The second out-of-bounds control module is used to perform the second out-of-bounds control operation on the visual element and update the current position of the visual element.

22. The device according to claim 15, wherein: The adsorption boundary determination module includes: A second rectangle determining unit, used to obtain a second circumscribed rectangle of the visual element at the current position; A second spacing calculation unit, used to calculate the spacing between at least one edge of the second circumscribed rectangle and the corresponding candidate boundary; An element adsorption judgment unit, used for detecting whether the visual element satisfies the boundary adsorption conditions of each edge according to the spacing between the edges of the second circumscribed rectangle; The adsorption boundary detection unit is used to determine the candidate boundary corresponding to the boundary adsorption condition satisfied by the visual element as the adsorption boundary of the visual element.

23. The device according to claim 22, wherein: The adsorption control module comprises: An adjustment mode determining unit, used for determining an adjustment mode according to the number of adsorption boundaries; The adsorption adjustment unit is used to adjust the visual element in the canvas according to the adjustment method so that the visual element is adsorbed at at least one of the adsorption boundaries.

24. The device according to claim 23, wherein: The adjustment mode determination unit includes: a single-border spacing calculation subunit, configured to obtain the spacing between the adsorption border and the corresponding border of the second circumscribed rectangle when the number of the adsorption border is one; The single adsorption adjustment subunit is used to determine the adjustment mode according to the distance between the adsorption boundary and the corresponding boundary of the second circumscribed rectangle and the direction of the adsorption boundary.

25. The device according to claim 23, wherein: The adjustment mode determination unit includes: a multi-border ratio calculation subunit, configured to obtain an upper limit ratio between the size of the second circumscribed rectangle and the size of the canvas when the number of the adsorption borders is two; The multi-adsorption adjustment subunit is used to determine the adjustment method according to the upper limit ratio.

26. The apparatus according to claim 22, wherein: The element adsorption judgment unit comprises: An adsorption threshold calculation subunit, used to determine an adsorption threshold of a boundary in at least one direction according to the type of the visual element; a boundary comparison subunit, for comparing, for each of the directions, the spacing of the boundaries of the second circumscribed rectangle in the direction with an adsorption threshold of the boundaries in the direction, to obtain a boundary comparison result in the direction; The adsorption condition judgment subunit is used to detect whether the visual element satisfies the boundary adsorption condition of the boundary in the direction according to the boundary comparison result in the direction.

27. The apparatus according to claim 22, wherein: The second spacing calculation unit includes: An absorbable object determination subunit, used to determine an absorbable object according to the level of the visual element and the association relationship between the visual element and other visual elements; A candidate boundary acquisition subunit, used to acquire a candidate boundary of the absorbable object; The border distance calculation subunit is used to calculate the distance between at least one edge of the second circumscribed rectangle and the corresponding candidate border.

28. The apparatus of claim 15, wherein: The boundary exceeding detection module comprises: A decoration material operation monitoring unit is used to monitor the editing layout operation of the decoration material in the decoration live broadcast room; wherein the editing layout operation includes the operation type of the decoration material; The decoration material out-of-bounds detection unit is used to detect whether the decoration material exceeds the boundary of the live broadcast room according to the operation type of the editing layout operation during the operation process of performing the editing layout operation on the decoration material.

29. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform any visual element boundary control method according to claims 1-14.

30. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to enable the computer to execute the visual element boundary control method according to any one of claims 1-14.

31. A computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements the visual element boundary control method according to any one of claims 1 to 14.

Images