Interface graphics adjustment method, electronic device, storage medium and display system

Abstract

The present disclosure provides an interface graphic adjustment method, electronic device, storage medium and display system, which relate to the field of data processing technology. The method includes: determining the circumscribed rectangular selection box of the interface graphic; determining the first operation area and the second operation area of the interface graphic; the first and second adjacent selection box edges in the circumscribed rectangular selection box are partially located in the first operation area, the third and fourth adjacent selection box edges are partially located in the second operation area, and the first and second operation areas overlap in the circumscribed rectangular selection box; receiving user operations; determining the preset point position in the user operation trajectory; and determining and executing the adjustment operation for the interface graphic based on the positional relationship between the position and the first and second operation areas. In the embodiment of the present disclosure, the interface graphic only corresponds to two operation areas. By judging the positional relationship between the preset point position in the user operation trajectory and the two operation areas, the corresponding adjustment operation can be achieved, with a small amount of calculation and low complexity.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing technology, and in particular to an interface graphics adjustment method, electronic equipment, storage medium, and display system. Background Art

[0002] Some interface graphics, such as text boxes and pictures, can usually be inserted or created in the software interface, and these interface graphics can be scaled and translated to adjust the size and position of the interface graphics.

[0003] Currently, 5 or 9 detection zones can be set at the boundaries and inside of the interface graphics. Usually, the 5 detection zones are the area near the center of the upper boundary, the area near the center of the lower boundary, the area near the center of the left boundary, the area near the center of the right boundary, and the center area of the graphics. The 9 detection zones are based on the above 5 detection zones and also include the area near the intersection of the upper left boundary, the area near the intersection of the lower left boundary, the area near the intersection of the upper right boundary, and the area near the intersection of the lower right boundary.

[0004] When adjusting a graphic, user operations are detected in multiple detection zones. If a user operation is detected near a boundary or a boundary intersection, the graphic is scaled in the direction corresponding to the boundary. If a user operation is detected in the center detection zone, the entire graphic is translated.

[0005] In the above technologies, more areas need to be detected, the amount of calculation is large, and the complexity is high. Summary of the Invention

[0006] The present disclosure provides an interface graphics adjustment method, electronic device, storage medium and display system to solve the problem in the prior art that when adjusting interface graphics, a large number of areas need to be detected and the amount of detection is large.

[0007] In order to solve the above problems, the present disclosure discloses a method for adjusting interface graphics, comprising:

[0008] For an interface graphic to be adjusted in the interface, determining a circumscribed rectangular selection box of the interface graphic;

[0009] Determining a first operation area and a second operation area for the interface graphic based on the circumscribed rectangular selection box; wherein adjacent first and second selection box edges in the circumscribed rectangular selection box are both partially located in the first operation area, and adjacent third and fourth selection box edges are both partially located in the second operation area, and the first operation area and the second operation area overlap within the circumscribed rectangular selection box;

[0010] receiving a user operation on the circumscribed rectangular selection box;

[0011] Determining a position of a preset point in an operation trajectory of the user operation in the interface;

[0012] An adjustment operation for the interface graphic is determined according to a positional relationship between the position and the first operation area and the second operation area, and the adjustment operation is performed on the interface graphic.

[0013] Optionally, determining an adjustment operation for the interface graphic based on a positional relationship between the position and the first operation area and the second operation area, and performing the adjustment operation on the interface graphic includes:

[0014] When the position is located in the first operation area and outside the second operation area, determining the adjustment operation on the interface graphic as a first adjustment operation;

[0015] While keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged, at least one of shape adjustment and size adjustment is performed on the interface graphic along the direction indicated by the operation trajectory to achieve the first adjustment operation.

[0016] Optionally, determining an adjustment operation for the interface graphic based on a positional relationship between the position and the first operation area and the second operation area, and performing the adjustment operation on the interface graphic includes:

[0017] When the position is located in the second operation area and outside the first operation area, determining the adjustment operation on the interface graphic as a second adjustment operation;

[0018] While keeping the intersection position of the first selection box edge and the second selection box edge unchanged, at least one of shape adjustment and size adjustment is performed on the interface graphic along the direction indicated by the operation trajectory to achieve the second adjustment operation.

[0019] Optionally, determining an adjustment operation for the interface graphic based on a positional relationship between the position and the first operation area and the second operation area, and performing the adjustment operation on the interface graphic includes:

[0020] When the position is located in the first operation area and in the second operation area, determining that the adjustment operation on the interface graphic is a third adjustment operation;

[0021] The interface graphic is translated along the direction indicated by the operation track to implement the third adjustment operation.

[0022] Optionally, the first marquee side is opposite to the third marquee side, the second marquee side is opposite to the fourth marquee side, the direction in which the third marquee side points perpendicularly to the first marquee side is a first direction, the direction in which the fourth marquee side points perpendicularly to the second marquee side is a second direction, the direction in which the first marquee side points perpendicularly to the third marquee side is a third direction, and the direction in which the second marquee side points perpendicularly to the fourth marquee side is a fourth direction;

[0023] After determining that the adjustment operation for the interface graphic is the first adjustment operation when the position is located in the first operation area and outside the second operation area, and after determining that the adjustment operation for the interface graphic is the second adjustment operation when the position is located in the second operation area and outside the first operation area, the method further includes:

[0024] A first displacement component in the first direction, a second displacement component in the second direction, a third displacement component in the third direction, and a fourth displacement component in the fourth direction of the operation trajectory are determined.

[0025] Optionally, while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged, performing at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation trajectory to achieve the first adjustment operation includes:

[0026] When the first displacement component is greater than 0, stretching the interface graphic along the first direction using the first displacement component as a stretching amount while keeping the intersection of the third selection frame edge and the fourth selection frame edge unchanged;

[0027] When the second displacement component is greater than 0, stretching the interface graphic along the second direction using the second displacement component as a stretching amount while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged;

[0028] When the third displacement component is greater than 0, compressing the interface graphic along the third direction with the third displacement component as the compression amount while keeping the intersection of the third selection frame edge and the fourth selection frame edge unchanged;

[0029] When the fourth displacement component is greater than 0, the interface graphic is compressed along the fourth direction using the fourth displacement component as the compression amount while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged.

[0030] Optionally, while keeping the intersection of the first selection box edge and the second selection box edge unchanged, performing at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation trajectory to achieve the second adjustment operation includes:

[0031] When the first displacement component is greater than 0, compressing the interface graphic along the first direction using the first displacement component as the compression amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged;

[0032] When the second displacement component is greater than 0, compressing the interface graphic along the second direction using the second displacement component as the compression amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged;

[0033] When the third displacement component is greater than 0, stretching the interface graphic along the third direction using the third displacement component as a stretching amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged;

[0034] When the fourth displacement component is greater than 0, the interface graphic is stretched along the fourth direction using the fourth displacement component as a stretching amount while keeping the intersection position of the first selection box edge and the second selection box edge unchanged.

[0035] Optionally, translating the interface graphic along the direction indicated by the operation track to implement the third adjustment operation includes:

[0036] The displacement of the operation track in the interface is used as the translation amount, and the interface graphic is translated along the direction indicated by the operation track.

[0037] Optionally, after determining an adjustment operation for the interface graphic based on the positional relationship between the position and the first operation area and the second operation area, and performing the adjustment operation on the interface graphic, the method further includes:

[0038] The display data corresponding to the interface including the adjusted interface graphics is sent to a target display device, so that the target display device displays the interface including the adjusted interface graphics.

[0039] Optionally, the first operation area and the second operation area are both the same shape as the circumscribed rectangular selection box, and the first operation area and the second operation area are both the same size as the circumscribed rectangular selection box.

[0040] Optionally, the distance between the geometric center of the first operation area and the geometric center of the circumscribed rectangular selection box is at the pixel level, and the distance between the geometric center of the second operation area and the geometric center of the circumscribed rectangular selection box is at the pixel level.

[0041] Optionally, the user operation includes at least one of a mouse swiping operation and a touch screen swiping operation, and the preset point is a starting point in an operation trajectory of the user operation.

[0042] In order to solve the above problems, the present disclosure also discloses an electronic device, including a processor, a memory, and a program stored in the memory and capable of running on the processor, wherein the program, when executed by the processor, implements the steps of the interface graphics adjustment method as described above.

[0043] In order to solve the above problems, the present disclosure also discloses a computer non-transitory readable storage medium. When the instructions in the storage medium are executed by the processor of an electronic device, the electronic device can execute the interface graphics adjustment method as described above.

[0044] In order to solve the above problems, the present disclosure also discloses a display system, including the electronic device as described above, and at least one display device, wherein the display device is communicatively connected to the electronic device, and the electronic device is further configured to send display data corresponding to the interface including the adjusted interface graphics to each of the display devices, and the display device is configured to receive the interface including the adjusted interface graphics and display it.

[0045] Compared with the prior art, the present disclosure has the following advantages:

[0046] In an embodiment of the present disclosure, for an interface graphic to be adjusted in an interface, a first operation area and a second operation area for the interface graphic can be determined based on a circumscribed rectangular selection box of the interface graphic. Then, when a user operation is received with respect to the circumscribed rectangular selection box, the position of a preset point in the user's operation trajectory in the interface is determined. Furthermore, by determining the positional relationship between the position of the preset point and the two operation areas, it is possible to determine what type of adjustment operation is required for the interface graphic, and perform the corresponding adjustment operation on the interface graphic. In an embodiment of the present disclosure, the interface graphic only corresponds to two operation areas. By determining the positional relationship between the position of the preset point in the user's operation trajectory and the two operation areas, the corresponding adjustment operation can be performed, resulting in a small amount of computation and low complexity. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] Figure 1 A flowchart showing the steps of a method for adjusting interface graphics according to an embodiment of the present disclosure is shown;

[0048] Figure 2A schematic diagram of an interface graphic and its circumscribed rectangular selection box according to an embodiment of the present disclosure is shown;

[0049] Figure 3 A schematic diagram showing a first operating area and a second operating area according to an embodiment of the present disclosure is shown;

[0050] Figure 4 A schematic diagram showing another first operating area and a second operating area according to an embodiment of the present disclosure is shown;

[0051] Figure 5 A flowchart of sub-steps of a method for adjusting interface graphics according to an embodiment of the present disclosure is shown;

[0052] Figure 6 A flowchart of sub-steps of a method for adjusting interface graphics according to an embodiment of the present disclosure is shown;

[0053] Figure 7 A structural block diagram of an interface graphics adjustment device according to an embodiment of the present disclosure is shown;

[0054] Figure 8 A structural block diagram of a display system according to an embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0055] In order to make the above-mentioned objects, features and advantages of the present disclosure more obvious and easy to understand, the present disclosure is further described in detail below with reference to the accompanying drawings and specific embodiments.

[0056] The terms used in the embodiments of the present disclosure are only used to explain the embodiments of the present disclosure and are not intended to limit the present disclosure. Unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present disclosure should have the usual meanings understood by people with ordinary skills in the field to which the present disclosure belongs. The words "first", "second", "third" and similar words used in the patent application specification and claims of the present disclosure do not indicate any order, quantity or importance, but are only used to distinguish different components. Similarly, words such as "one" or "a" do not indicate a quantitative limitation, but rather indicate the presence of at least one. Words such as "include" or "comprising" mean that the elements or objects appearing before "include" or "comprising" include the elements or objects listed after "include" or "comprising" and their equivalents, and do not exclude other elements or objects. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly. The term "and / or" used in the embodiments of the present disclosure indicates that three relationships may exist. For example, "A and / or B" may represent the following three situations: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally indicates that the related objects are in an "or" relationship.

[0057] Reference Figure 1 , shows a flowchart of a method for adjusting interface graphics according to an embodiment of the present disclosure, the method comprising the following steps:

[0058] Step 101: For an interface graphic to be adjusted in an interface, determine a circumscribed rectangular selection box of the interface graphic.

[0059] In the embodiments of the present disclosure, the size and / or position of any interface graphic inserted or created in the software interface, such as a text box, a picture, etc., can be adjusted. In actual applications, in an optional implementation, the interface graphic clicked by the user can be determined as the interface graphic currently to be adjusted. In another optional implementation, the interface graphic most recently inserted or created in the interface can also be determined as the interface graphic currently to be adjusted. In specific applications, the user's choice can be given priority, that is, when the interface graphic selected by the user is not the most recently inserted or created interface graphic, the interface graphic selected by the user will be given priority to be determined as the interface graphic currently to be adjusted.

[0060] For the interface graphic to be adjusted, you can determine the circumscribed rectangular selection box of the interface graphic, such as Figure 2 As shown, the interface graphic a is contained in the corresponding circumscribed rectangular selection box A. Thus, the position, shape and size of the interface graphic in the circumscribed rectangular selection box can be adjusted by controlling the position, shape and size of the circumscribed rectangular selection box.

[0061] In actual application, the bounding rectangular selection box can be displayed to the user, so that the user can clearly identify the selection box edges of the bounding rectangular selection box, thereby facilitating the user to operate the bounding rectangular selection box.

[0062] Step 102: Determine the first operation area and the second operation area for the interface graphic based on the circumscribed rectangular selection box; the adjacent first selection box edges and the second selection box edges in the circumscribed rectangular selection box are partially located in the first operation area, and the adjacent third selection box edges and the fourth selection box edges are partially located in the second operation area, and the first operation area and the second operation area overlap in the circumscribed rectangular selection box.

[0063] In this step, a first operation area and a second operation area for the interface graphic are established based on the position and size of each edge of the circumscribed rectangular selection box. The first operation area is located near the first and second edges of the circumscribed rectangular selection box, and the second operation area is located near the third and fourth edges of the circumscribed rectangular selection box. This conforms to the user's habit of operating near the edges when adjusting graphics. The first and second operation areas overlap, and the overlapping portion is at least partially within the circumscribed rectangular selection box.

[0064] Optionally, the first operation area and the second operation area can both have the same shape and size as the circumscribed rectangular selection box, that is, the first operation area and the second operation area can both be rectangular areas with the same size as the circumscribed rectangular selection box.

[0065] First, the rectangular operation area can be defined by fewer coordinate points (the coordinates of the four corners). When determining whether a certain position is located in the operation area, less calculation is required.

[0066] Secondly, the rectangular operation area can also be the same size as the circumscribed rectangular selection box of the interface graphic. In this way, when determining the coordinates of the four vertices of the operation area, you can directly add / subtract a certain value based on the coordinates of the four vertices of the circumscribed rectangular selection box, which is convenient and quick.

[0067] Optionally, the distance between the geometric center of the first operating area and the geometric center of the circumscribed rectangular selection box is at the pixel level, and the distance between the geometric center of the second operating area and the geometric center of the circumscribed rectangular selection box is at the pixel level.

[0068] In the disclosed embodiment, the distance between the geometric center of the first operation area and the geometric center of the circumscribed rectangular selection box is a few to a dozen pixels, and the distance between the geometric center of the second operation area and the geometric center of the circumscribed rectangular selection box is a few to a dozen pixels. In other words, the first and second operation areas extend very little beyond the circumscribed rectangular selection box. In some embodiments, the distance between the geometric center of the first operation area and the geometric center of the circumscribed rectangular selection box can be 5 pixels, and the distance between the geometric center of the second operation area and the geometric center of the circumscribed rectangular selection box can be 5 pixels.

[0069] When another interface graphic b (not shown) is relatively close to the circumscribed rectangular selection box A of interface graphic a, if the first and second operation areas significantly extend beyond the circumscribed rectangular selection box, the user may easily make an incorrect operation and select the closer interface graphic b when performing operations in the first and / or second operation areas of interface graphic a. In the disclosed embodiment, however, the first and second operation areas only slightly extend beyond the circumscribed rectangular selection box. Therefore, when the user performs operations in the first and / or second operation areas of interface graphic a, incorrect operations are less likely to occur.

[0070] Reference Figure 3 and Figure 4 The circumscribed rectangular selection box A of the interface graphic a includes a first selection box side L1, a second selection box side L2, a third selection box side L3 and a fourth selection box side L4.

[0071] Reference Figure 3When the adjacent first selection box side L1 and second selection box side L2 are respectively the left border and top border (or top border and left border) of the circumscribed rectangular selection box A, and the third selection box side L3 and fourth selection box side L4 are respectively the right border and bottom border (or bottom border and right border) of the circumscribed rectangular selection box A, the first operation area H1 is located in the upper left area of the circumscribed rectangular selection box A, and the second operation area H2 is located in the lower right area of the circumscribed rectangular selection box A.

[0072] Reference Figure 4 When the adjacent first selection box side L1 and second selection box side L2 are respectively the right and top borders (or top and right borders) of the circumscribed rectangular selection box A, and the third selection box side L3 and fourth selection box side L4 are respectively the left and bottom borders (or bottom and left borders) of the circumscribed rectangular selection box A, the first operation area H1 is located in the upper right area of the circumscribed rectangular selection box A, and the second operation area H2 is located in the lower left area of the circumscribed rectangular selection box A.

[0073] It is understandable that each selection box edge is distinguished as a different selection box edge only by the words first, second, etc., and the words first, second, etc. do not limit the specific position of each selection box edge. Similarly, each operation area is also distinguished as a different operation area by the words first, second, etc., and as the specific position of each selection box edge is different, the position of each operation area will also be different. But in general, in the embodiment of the present disclosure, there are only two positional relationships between the two operation areas (not distinguishing between the first operation area and the second operation area), one is as follows: Figure 3 As shown, the two operation areas are roughly arranged along the diagonal line from the upper left to the lower right of the circumscribed rectangular selection box. The other is as follows Figure 4 As shown, the two operation areas are arranged roughly along the diagonal line from the upper right to the lower left of the circumscribed rectangular selection box. Therefore, for the sake of convenience, the upper operation area is referred to as the first operation area, and the lower operation area is referred to as the second operation area.

[0074] Step 103: Receive a user operation on the bounding rectangle selection box.

[0075] In this step, the user can operate the circumscribed rectangular selection box corresponding to the interface graphic that he wants to adjust, and the electronic device can obtain the adjustment parameters of the interface graphic from the user operation, such as the stretching / compression direction, stretching / compression amount, etc.

[0076] Step 104: Determine the position of the preset point in the operation trajectory of the user operation in the interface.

[0077] In the embodiment of the present disclosure, the user operation may form an operation track, and the electronic device may determine the position of a preset point in the operation track in the interface, that is, determine the coordinates of the preset point in the interface.

[0078] Optionally, the user operation may include at least one of a mouse swiping operation and a touch screen swiping operation, and the preset point is the starting point of the operation trajectory of the user operation.

[0079] The touch screen swiping operation can be achieved by using an object such as a finger or an electronic pen that can be detected by the touch screen.

[0080] Step 105: Determine an adjustment operation for the interface graphic based on the position relationship between the position and the first operation area and the second operation area, and perform the adjustment operation on the interface graphic.

[0081] In this step, the type of adjustment operation required for the interface graphic can be determined based on the positional relationship between the preset point position in the user operation trajectory and the first operation area and the second operation area, and then the corresponding type of adjustment operation can be performed on the interface graphic.

[0082] In the embodiment of the present disclosure, the interface graphics only correspond to two operation areas. By judging the positional relationship between the preset point position in the user's operation trajectory and the two operation areas, the corresponding adjustment operation can be achieved. Compared with the existing technology that requires detecting 5 or 9 detection areas, the amount of calculation is reduced and the complexity is reduced.

[0083] Optionally, the adjustment operation may include adjusting the shape and / or size of the interface graphic, as well as adjusting the position of the interface graphic. Specifically, adjusting the shape and / or size of the interface graphic may be achieved by stretching or compressing the interface graphic in at least one direction; adjusting the position of the interface graphic may be achieved by translating the interface graphic.

[0084] When adjusting the shape and / or size of the interface graphic, a certain point in the interface graphic may be selected as a fixed point, and the position of the fixed point may remain fixed when adjusting the shape and / or size.

[0085] In the embodiment of the present disclosure, depending on the selected fixed point, there can be a first adjustment operation and a second adjustment operation. The first adjustment operation uses the intersection of the third and fourth selection box edges as the fixed point, and the second adjustment operation uses the intersection of the first and second selection box edges as the fixed point.

[0086] For the first adjustment operation, step 105 may specifically include the following sub-steps:

[0087] S1: When the position is located in the first operation area and outside the second operation area, determining that the adjustment operation on the interface graphic is a first adjustment operation;

[0088] S2: while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged, perform at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation track to implement a first adjustment operation.

[0089] Among them, reference Figure 3 and Figure 4 , the diagonal pattern area P is the area in the first operation area H1 that does not overlap with the second operation area H2. When the preset point position in the user operation trajectory is located in the first operation area H1 and outside the second operation area H2, that is, when the preset point position is located in the diagonal pattern area P in the figure, it can be determined that a first adjustment operation needs to be performed on the interface graphic. The first adjustment operation is to use the intersection of the third selection box edge and the fourth selection box edge as the fixed point, and adjust the shape and / or size of the interface graphic along the direction indicated by the user operation trajectory while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged.

[0090] For the second adjustment operation, step 105 may specifically include the following sub-steps:

[0091] S3: When the position is located in the second operation area and outside the first operation area, determining that the adjustment operation on the interface graphic is a second adjustment operation;

[0092] S4: While keeping the intersection of the first selection box edge and the second selection box edge unchanged, perform at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation track to implement a second adjustment operation.

[0093] Among them, reference Figure 3 and Figure 4 , the dot pattern area Q is the area in the second operation area H2 that does not overlap with the first operation area H1. When the preset point position in the user operation trajectory is located in the second operation area H2 and outside the first operation area H1, that is, when the preset point position is located in the dot pattern area Q in the figure, it can be determined that a second adjustment operation needs to be performed on the interface graphic. The second adjustment operation is to use the intersection of the first selection box edge and the second selection box edge as the fixed point, and adjust the shape and / or size of the interface graphic along the direction indicated by the user operation trajectory while keeping the intersection position of the first selection box edge and the second selection box edge unchanged.

[0094] Optionally, refer to Figure 3 and Figure 4The first selection frame side L1 is opposite to the third selection frame side L3, the second selection frame side L2 is opposite to the fourth selection frame side L4, the direction in which the third selection frame side L3 points perpendicularly to the first selection frame side L1 is the first direction D1, the direction in which the fourth selection frame side L4 points perpendicularly to the second selection frame side L2 is the second direction D2, the direction in which the first selection frame side L1 points perpendicularly to the third selection frame side L3 is the third direction D3, and the direction in which the second selection frame side L2 points perpendicularly to the fourth selection frame side L4 is the fourth direction D4.

[0095] Reference Figure 5 and Figure 6 , after S1, and after S3, the following steps are also included:

[0096] S5: Determine a first displacement component of the operation trajectory in the first direction D1, a second displacement component in the second direction D2, a third displacement component in the third direction D3, and a fourth displacement component in the fourth direction D4.

[0097] The displacement of the operation trajectory can be decomposed into displacement components in four directions: up, down, left, and right. Then, based on the displacement components in each direction, it can be determined whether the interface graphics need to be stretched or compressed in a certain direction and the amount of stretching or compression.

[0098] Accordingly, S2 specifically includes:

[0099] When the first displacement component is greater than 0, the interface graphic is stretched along the first direction using the first displacement component as the stretching amount while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged;

[0100] When the second displacement component is greater than 0, the interface graphic is stretched along the second direction using the second displacement component as the stretching amount while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged;

[0101] When the third displacement component is greater than 0 (i.e., the first displacement component is less than 0), the interface graphics are compressed along the third direction using the third displacement component as the compression amount while keeping the intersection of the third and fourth selection box edges unchanged.

[0102] When the fourth displacement component is greater than 0 (ie the second displacement component is less than 0), the interface graphics are compressed along the fourth direction using the fourth displacement component as the compression amount while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged.

[0103] Accordingly, S4 specifically includes:

[0104] When the first displacement component is greater than 0 (i.e., the third displacement component is less than 0), the interface graphics are compressed along the first direction using the first displacement component as the compression amount while keeping the intersection of the first and second selection box edges unchanged.

[0105] When the second displacement component is greater than 0 (i.e., the fourth displacement component is less than 0), the interface graphics are compressed along the second direction using the second displacement component as the compression amount while keeping the intersection of the first and second selection box edges unchanged.

[0106] When the third displacement component is greater than 0, the interface graphic is stretched along the third direction using the third displacement component as the stretching amount while keeping the intersection of the first and second selection box edges unchanged.

[0107] When the fourth displacement component is greater than 0, the interface graphic is stretched along the fourth direction using the fourth displacement component as the stretching amount while keeping the intersection position of the first selection box edge and the second selection box edge unchanged.

[0108] Since the first direction is opposite to the third direction, the first and third displacement components cannot be greater than 0 at the same time. When the first displacement component of the operating trajectory in the first direction is greater than 0, the third displacement component of the operating trajectory along the third direction is less than 0; when the third displacement component of the operating trajectory in the third direction is greater than 0, the first displacement component of the operating trajectory along the first direction is less than 0.

[0109] Similarly, because the second direction is opposite to the fourth direction, the second displacement component and the fourth displacement component cannot be simultaneously greater than 0. When the second displacement component of the operating trajectory in the second direction is greater than 0, the fourth displacement component of the operating trajectory along the fourth direction is less than 0; when the fourth displacement component of the operating trajectory in the fourth direction is greater than 0, the second displacement component of the operating trajectory along the second direction is less than 0.

[0110] In a specific application, after the interface graphics are stretched or compressed in two mutually perpendicular directions, if the aspect ratio of the circumscribed rectangular selection box after stretching / compression is equal to the aspect ratio before stretching / compression, the size of the interface graphics is adjusted, while the shape of the interface graphics remains unchanged. If the aspect ratio of the circumscribed rectangular selection box after stretching / compression is not equal to the aspect ratio before stretching / compression, both the size and shape of the interface graphics are adjusted.

[0111] Regarding the third adjustment operation for adjusting the position of the interface graphic, step 105 may specifically include the following sub-steps:

[0112] S6: When the position is located in the first operation area and in the second operation area, determining that the adjustment operation on the interface graphic is a third adjustment operation;

[0113] S7: translating the interface graphic along the direction indicated by the operation track to implement a third adjustment operation.

[0114] Among them, reference Figure 3 and Figure 4 When the preset point position in the user operation trajectory is located in the overlapping area of the first operation area H1 and the second operation area H2, it can be determined that a third adjustment operation needs to be performed on the interface graphic. The third adjustment operation is to translate the interface graphic along the direction indicated by the user operation trajectory to adjust the position of the interface graphic.

[0115] S7 may specifically include: taking the displacement of the operation track in the interface as the translation amount, and translating the interface graphic along the direction indicated by the operation track.

[0116] Among them, the displacement of the operation trajectory in the interface is also the displacement between the end point and the starting point of the operation trajectory. The electronic device uses this displacement as the translation amount and translates the interface graphics along the direction indicated by the operation trajectory to adjust the position of the interface graphics without changing the shape and size of the interface graphics.

[0117] In addition, when the position is neither in the first operation area nor in the second operation area, no operation may be performed on the interface graphic.

[0118] Optionally, the electronic device implementing the interface graphics adjustment method may also be communicatively connected to another display device. It should be noted that the display device is not the display screen included in the electronic device itself. In practical applications, the electronic device may serve as a master device, and at least one other display device may serve as a slave device. The interface drawn on the electronic device may be displayed by each display device. The display device serving as a slave device may be, for example, an electronic tag or an electronic badge.

[0119] Accordingly, after step 105, the method may further include the following steps:

[0120] The display data corresponding to the interface including the adjusted interface graphics is sent to the target display device, so that the target display device displays the interface including the adjusted interface graphics.

[0121] Among them, the target display device is any slave device connected to the electronic device. The electronic device as the master device can send the display data corresponding to the interface including the adjusted interface graphics to the target display device, and the target display device can then display the interface.

[0122] In an embodiment of the present disclosure, for an interface graphic to be adjusted in an interface, a first operation area and a second operation area for the interface graphic can be determined based on a circumscribed rectangular selection box of the interface graphic. Then, when a user operation is received with respect to the circumscribed rectangular selection box, the position of a preset point in the user's operation trajectory in the interface is determined. Furthermore, by determining the positional relationship between the position of the preset point and the two operation areas, it is possible to determine what type of adjustment operation is required for the interface graphic, and perform the corresponding adjustment operation on the interface graphic. In an embodiment of the present disclosure, the interface graphic only corresponds to two operation areas. By determining the positional relationship between the position of the preset point in the user's operation trajectory and the two operation areas, the corresponding adjustment operation can be performed, resulting in a small amount of computation and low complexity.

[0123] Reference Figure 7 , shows a structural block diagram of an interface graphics adjustment device according to an embodiment of the present disclosure, the device 700 includes:

[0124] The first determining module 701 is configured to determine a circumscribed rectangular selection box of an interface graphic to be adjusted in the interface;

[0125] A second determining module 702 is configured to determine a first operation area and a second operation area for the interface graphic based on the circumscribed rectangular selection box; wherein adjacent first and second selection box edges in the circumscribed rectangular selection box are both partially located in the first operation area, and adjacent third and fourth selection box edges are both partially located in the second operation area, and the first operation area and the second operation area overlap within the circumscribed rectangular selection box;

[0126] A receiving module 703 is configured to receive a user operation on the circumscribed rectangular selection box;

[0127] A third determining module 704 is configured to determine a position of a preset point in the operation trajectory of the user operation in the interface;

[0128] The adjustment module 705 is configured to determine an adjustment operation for the interface graphic according to the position and the positional relationship between the first operation area and the second operation area, and perform the adjustment operation on the interface graphic.

[0129] Optionally, the adjustment module 705 includes:

[0130] a first determining submodule, configured to determine, when the position is located in the first operating area and outside the second operating area, that the adjustment operation on the interface graphic is a first adjustment operation;

[0131] The first adjustment submodule is used to perform at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation trajectory while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged, so as to achieve the first adjustment operation.

[0132] Optionally, the adjustment module 705 includes:

[0133] a second determining submodule, configured to determine, when the position is located in the second operating area and outside the first operating area, that the adjustment operation on the interface graphic is a second adjustment operation;

[0134] The second adjustment submodule is used to perform at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation trajectory while keeping the intersection position of the first selection box edge and the second selection box edge unchanged, so as to achieve the second adjustment operation.

[0135] Optionally, the adjustment module 705 includes:

[0136] a third determining submodule, configured to determine, when the position is located in the first operating area and in the second operating area, that the adjustment operation on the interface graphic is a third adjustment operation;

[0137] The third adjustment submodule is configured to translate the interface graphic along the direction indicated by the operation track to implement the third adjustment operation.

[0138] Optionally, the first marquee side is opposite to the third marquee side, the second marquee side is opposite to the fourth marquee side, the direction in which the third marquee side points perpendicularly to the first marquee side is a first direction, the direction in which the fourth marquee side points perpendicularly to the second marquee side is a second direction, the direction in which the first marquee side points perpendicularly to the third marquee side is a third direction, and the direction in which the second marquee side points perpendicularly to the fourth marquee side is a fourth direction;

[0139] The adjustment module 705 further includes:

[0140] The fourth determination submodule is configured to determine a first displacement component of the operation trajectory in the first direction, a second displacement component in the second direction, a third displacement component in the third direction, and a fourth displacement component in the fourth direction.

[0141] Optionally, the first adjustment submodule is specifically configured to:

[0142] When the first displacement component is greater than 0, stretching the interface graphic along the first direction using the first displacement component as a stretching amount while keeping the intersection of the third selection frame edge and the fourth selection frame edge unchanged;

[0143] When the second displacement component is greater than 0, stretching the interface graphic along the second direction using the second displacement component as a stretching amount while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged;

[0144] When the third displacement component is greater than 0, the interface graphic is compressed along the third direction using the third displacement component as a stretching amount while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged;

[0145] When the fourth displacement component is greater than 0, the interface graphic is compressed along the fourth direction with the fourth displacement component as the stretching amount while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged.

[0146] Optionally, the second adjustment submodule is specifically configured to:

[0147] When the first displacement component is greater than 0, the interface graphic is compressed along the first direction using the first displacement component as a stretching amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged;

[0148] When the second displacement component is greater than 0, the interface graphic is compressed along the second direction using the second displacement component as a stretching amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged;

[0149] When the third displacement component is greater than 0, stretching the interface graphic along the third direction using the third displacement component as a stretching amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged;

[0150] When the fourth displacement component is greater than 0, the interface graphic is stretched along the fourth direction using the fourth displacement component as a stretching amount while keeping the intersection position of the first selection box edge and the second selection box edge unchanged.

[0151] Optionally, the third adjustment submodule is specifically configured to:

[0152] The displacement of the operation track in the interface is used as the translation amount, and the interface graphic is translated along the direction indicated by the operation track.

[0153] Optionally, the apparatus 700 further includes:

[0154] The sending module is used to send the display data corresponding to the interface including the adjusted interface graphics to the target display device, so that the target display device displays the interface including the adjusted interface graphics.

[0155] Optionally, the first operation area and the second operation area are both the same shape as the circumscribed rectangular selection box, and the first operation area and the second operation area are both the same size as the circumscribed rectangular selection box.

[0156] Optionally, the distance between the geometric center of the first operation area and the geometric center of the circumscribed rectangular selection box is at the pixel level, and the distance between the geometric center of the second operation area and the geometric center of the circumscribed rectangular selection box is at the pixel level.

[0157] Optionally, the user operation includes at least one of a mouse swiping operation and a touch screen swiping operation, and the preset point is a starting point in an operation trajectory of the user operation.

[0158] In an embodiment of the present disclosure, for an interface graphic to be adjusted in an interface, a first operation area and a second operation area for the interface graphic can be determined based on a circumscribed rectangular selection box of the interface graphic. Then, when a user operation is received with respect to the circumscribed rectangular selection box, the position of a preset point in the user's operation trajectory in the interface is determined. Furthermore, by determining the positional relationship between the position of the preset point and the two operation areas, it is possible to determine what type of adjustment operation is required for the interface graphic, and perform the corresponding adjustment operation on the interface graphic. In an embodiment of the present disclosure, the interface graphic only corresponds to two operation areas. By determining the positional relationship between the position of the preset point in the user's operation trajectory and the two operation areas, the corresponding adjustment operation can be performed, resulting in a small amount of computation and low complexity.

[0159] As for the above-mentioned device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0160] The embodiment of the present disclosure also discloses an electronic device, including a processor, a memory, and a program stored in the memory and executable on the processor, wherein the program, when executed by the processor, implements the steps of the interface graphics adjustment method described above.

[0161] The embodiment of the present disclosure further discloses a computer non-transitory readable storage medium. When instructions in the storage medium are executed by a processor of an electronic device, the electronic device is able to execute the interface graphics adjustment method as described above.

[0162] Reference Figure 8The embodiment of the present disclosure also discloses a display system 1000, including the electronic device 100 as described above, and at least one display device 200, wherein the display device 200 is communicatively connected to the electronic device, and the electronic device 100 is further configured to send display data corresponding to the interface including the adjusted interface graphics to each of the display devices 200, and the display device 200 is configured to receive the interface including the adjusted interface graphics and display it.

[0163] The following describes some specific application scenarios for the system 1000 . It is understood that the application scenarios of the method and system include but are not limited to the following application scenarios.

[0164] Scenario 1: Display device 200 is specifically an electronic badge, such as that worn by athletes, coaches, volunteers, and other personnel participating in the Olympic Games. For example, if the size and position of the Olympic logo on the electronic badge need to be adjusted, the size and position of the Olympic logo image on the badge interface can be adjusted using the aforementioned interface graphic adjustment method. The display data corresponding to the adjusted interface is then synchronized to each electronic badge, so that each electronic badge can display the adjusted interface with the Olympic logo.

[0165] Scenario 2: Display device 200 is specifically a display screen on an electronic shelf, used to display discount information, product promotional images, etc. For example, when the product promotional images on the electronic shelf display need to highlight the origin, the above-mentioned interface graphic adjustment method can be used to enlarge the size of the origin text box on the product promotion interface. The display data corresponding to the adjusted interface is then synchronized to each electronic shelf display screen, and each electronic shelf display screen can then display the enlarged interface with the origin information.

[0166] Scenario 3: Display device 200 is specifically an electronic label for goods, used to display the goods' serial number, barcode, price, etc. For example, if the barcode on the electronic label needs to be repositioned, the barcode image on the label interface can be repositioned using the aforementioned interface graphic adjustment method. The display data corresponding to the adjusted interface is then synchronized to each electronic label, and each electronic label can then display the interface with the adjusted barcode position.

[0167] For the above-mentioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should know that the present disclosure is not limited by the order of the actions described, because according to the present disclosure, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present disclosure.

[0168] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0169] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity, or device that includes a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, commodity, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, commodity, or device that includes the element.

[0170] The above is a detailed introduction to an interface graphics adjustment method, electronic device, storage medium and display system provided by the present disclosure. Specific examples are used herein to illustrate the principles and implementation methods of the present disclosure. The description of the above embodiments is only used to help understand the method of the present disclosure and its core ideas. At the same time, for those skilled in the art, according to the ideas of the present disclosure, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present disclosure.

Claims

1. A method for adjusting interface graphics, characterized in that: The method comprises: For an interface graphic to be adjusted in the interface, determining a circumscribed rectangular selection box of the interface graphic; Determining a first operation area and a second operation area for the interface graphic based on the circumscribed rectangular selection box; wherein adjacent first and second selection box edges in the circumscribed rectangular selection box are both partially located in the first operation area, and adjacent third and fourth selection box edges are both partially located in the second operation area, and the first operation area and the second operation area overlap within the circumscribed rectangular selection box; receiving a user operation on the circumscribed rectangular selection box; Determining a position of a preset point in an operation trajectory of the user operation in the interface; When the position is located in the first operation area and / or the second operation area, an adjustment operation for the interface graphic is determined based on a positional relationship between the position and the first operation area and the second operation area, and the adjustment operation is performed on the interface graphic.

2. The method according to claim 1, characterized in that The determining, based on the positional relationship between the position and the first operation area and the second operation area, an adjustment operation for the interface graphic, and performing the adjustment operation on the interface graphic, includes: When the position is located in the first operation area and outside the second operation area, determining the adjustment operation on the interface graphic as a first adjustment operation; While keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged, at least one of shape adjustment and size adjustment is performed on the interface graphic along the direction indicated by the operation trajectory to achieve the first adjustment operation.

3. The method according to claim 1, characterized in that The determining, based on the positional relationship between the position and the first operation area and the second operation area, an adjustment operation for the interface graphic, and performing the adjustment operation on the interface graphic, includes: When the position is located in the second operation area and outside the first operation area, determining the adjustment operation on the interface graphic as a second adjustment operation; While keeping the intersection position of the first selection box edge and the second selection box edge unchanged, at least one of shape adjustment and size adjustment is performed on the interface graphic along the direction indicated by the operation trajectory to achieve the second adjustment operation.

4. The method according to claim 1, wherein The determining, based on the positional relationship between the position and the first operation area and the second operation area, an adjustment operation for the interface graphic, and performing the adjustment operation on the interface graphic, includes: When the position is located in the first operation area and in the second operation area, determining that the adjustment operation on the interface graphic is a third adjustment operation; The interface graphic is translated along the direction indicated by the operation track to implement the third adjustment operation.

5. The method according to claim 2, characterized in that The first marquee side is opposite to the third marquee side, the second marquee side is opposite to the fourth marquee side, the direction in which the third marquee side points perpendicularly to the first marquee side is a first direction, the direction in which the fourth marquee side points perpendicularly to the second marquee side is a second direction, the direction in which the first marquee side points perpendicularly to the third marquee side is a third direction, and the direction in which the second marquee side points perpendicularly to the fourth marquee side is a fourth direction; After determining that the adjustment operation on the interface graphic is the first adjustment operation when the position is located in the first operation area and outside the second operation area, the method further includes: A first displacement component in the first direction, a second displacement component in the second direction, a third displacement component in the third direction, and a fourth displacement component in the fourth direction of the operation trajectory are determined.

6. The method according to claim 3, characterized in that The first marquee side is opposite to the third marquee side, the second marquee side is opposite to the fourth marquee side, the direction in which the third marquee side points perpendicularly to the first marquee side is a first direction, the direction in which the fourth marquee side points perpendicularly to the second marquee side is a second direction, the direction in which the first marquee side points perpendicularly to the third marquee side is a third direction, and the direction in which the second marquee side points perpendicularly to the fourth marquee side is a fourth direction; After determining that the adjustment operation on the interface graphic is the second adjustment operation when the position is located in the second operation area and outside the first operation area, the method further includes: A first displacement component in the first direction, a second displacement component in the second direction, a third displacement component in the third direction, and a fourth displacement component in the fourth direction of the operation trajectory are determined.

7. The method according to claim 5, characterized in that The step of performing at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation trajectory while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged to achieve the first adjustment operation includes: When the first displacement component is greater than 0, stretching the interface graphic along the first direction using the first displacement component as a stretching amount while keeping the intersection of the third selection frame edge and the fourth selection frame edge unchanged; When the second displacement component is greater than 0, stretching the interface graphic along the second direction using the second displacement component as a stretching amount while keeping the intersection of the third selection box edge and the fourth selection box edge unchanged; When the third displacement component is greater than 0, compressing the interface graphic along the third direction with the third displacement component as the compression amount while keeping the intersection of the third selection frame edge and the fourth selection frame edge unchanged; When the fourth displacement component is greater than 0, the interface graphic is compressed along the fourth direction using the fourth displacement component as the compression amount while keeping the intersection position of the third selection box edge and the fourth selection box edge unchanged.

8. The method according to claim 6, characterized in that The step of performing at least one of shape adjustment and size adjustment on the interface graphic along the direction indicated by the operation trajectory while keeping the intersection of the first selection box edge and the second selection box edge unchanged to implement the second adjustment operation includes: When the first displacement component is greater than 0, compressing the interface graphic along the first direction using the first displacement component as the compression amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged; When the second displacement component is greater than 0, compressing the interface graphic along the second direction using the second displacement component as the compression amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged; When the third displacement component is greater than 0, stretching the interface graphic along the third direction using the third displacement component as a stretching amount while keeping the intersection of the first selection box edge and the second selection box edge unchanged; When the fourth displacement component is greater than 0, the interface graphic is stretched along the fourth direction using the fourth displacement component as a stretching amount while keeping the intersection position of the first selection box edge and the second selection box edge unchanged.

9. The method according to claim 4, characterized in that The translating the interface graphic along the direction indicated by the operation track to implement the third adjustment operation includes: The displacement of the operation track in the interface is used as the translation amount, and the interface graphic is translated along the direction indicated by the operation track.

10. The method according to any one of claims 1 to 4, characterized in that After determining an adjustment operation for the interface graphic based on the position relationship between the position and the first operation area and the second operation area, and performing the adjustment operation on the interface graphic, the method further includes: The display data corresponding to the interface including the adjusted interface graphics is sent to a target display device, so that the target display device displays the interface including the adjusted interface graphics.

11. The method according to any one of claims 1 to 4, characterized in that: The first operation area and the second operation area are both the same in shape as the circumscribed rectangular selection box, and the first operation area and the second operation area are both the same in size as the circumscribed rectangular selection box.

12. The method according to any one of claims 1 to 4, characterized in that The distance between the geometric center of the first operation area and the geometric center of the circumscribed rectangular selection box is in pixel level, and the distance between the geometric center of the second operation area and the geometric center of the circumscribed rectangular selection box is in pixel level.

13. The method according to any one of claims 1 to 4, characterized in that The user operation includes at least one of a mouse swiping operation and a touch screen swiping operation, and the preset point is a starting point in an operation track of the user operation.

14. An electronic device, characterized in that: The method comprises a processor, a memory and a program stored in the memory and executable on the processor, wherein when the program is executed by the processor, the steps of the interface graphics adjustment method according to any one of claims 1 to 13 are implemented.

15. A computer non-transitory readable storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the interface graphics adjustment method as described in any one of method claims 1 to 13.

16. A display system, characterized in that: It includes an electronic device as described in claim 14, and at least one display device, wherein the display device is communicatively connected to the electronic device, and the electronic device is further configured to send display data corresponding to the interface including the adjusted interface graphics to each of the display devices, and the display device is configured to receive the interface including the adjusted interface graphics and display it.

Images