Dragging layout method, device and equipment for large screen and storage medium

Abstract

The invention discloses a dragging layout method, device and equipment for a large screen and a storage medium, the method comprises the steps that under the condition that it is determined that a user clicks a mouse button from an initial control point of a component, initial state data of a mouse is obtained, the initial control point comprises a corner control point and an edge control point, and the corner control point is connected with the edge control point; the corner control point is any position on four corner points in the rectangular frame corresponding to the component, and the edge control point is any position on four edges on the rectangular frame corresponding to the component, acquiring current mouse position data in real time in a mouse moving process, generating target state data based on the initial state data and the current mouse position data, and sending the target state data to the component. The component is dragged or zoomed through the target state data. According to the scheme, dragging and zooming are carried out by supporting eight control points, so that the degree of freedom of layout adjustment by a user is greatly improved, the user can flexibly adjust the size and position of the component, and the limitation that a traditional plug-in only supports dragging from the lower right corner is avoided.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a drag layout method, device, equipment and storage medium for a large screen. Background Art

[0002] In modern application development, especially in large-screen visualization scenarios, users have a growing demand for customized visualization layouts. With the advancement of display technology and the popularity of high-resolution devices, users expect to be able to flexibly configure and adjust the layout of each component to meet their personalized interaction needs.

[0003] At present, when performing drag-and-drop layout of components on large screens, the existing front-end layout plug-ins cannot fully meet the high requirements of users for flexibility, accuracy and collaboration in modern visual large-screen environments. Therefore, how to provide an improved drag-and-drop layout method for large screens has become an urgent problem to be solved. Summary of the invention

[0004] The present application aims to at least solve the technical problems existing in the prior art. To this end, the first aspect of the present application proposes a drag layout method for a large screen, the method comprising:

[0005] When it is determined that the user clicks the mouse button from the initial control point of the component, the initial state data of the mouse is obtained; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component;

[0006] During the mouse movement, the current mouse position data is obtained in real time;

[0007] Based on the initial state data and the current mouse position data, target state data of the rectangular frame corresponding to the component after the user releases the mouse button is generated, so as to drag or scale the component through the target state data.

[0008] In a possible implementation, based on the initial state data and the current mouse position data, generating target state data of a rectangular frame corresponding to the component after the user releases the mouse button includes:

[0009] Calculate the mouse movement distance based on the initial state data and the current mouse position data;

[0010] Based on the initial state data and the mouse moving distance, the parameters of the rectangular frame are updated to obtain new parameters of the rectangular frame;

[0011] When it is determined that the user releases the mouse button, the obtained new rectangular frame parameters are used as the target rectangular frame parameters;

[0012] Based on the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component is determined.

[0013] In a possible implementation, determining target state data of a rectangular frame corresponding to a component based on target rectangular frame parameters includes:

[0014] Based on the initial state data and the mouse movement distance, the position of the initial control point is updated to obtain a new control point position;

[0015] Based on the new control point position and the target rectangular frame parameters, the target state data of the rectangular frame corresponding to the component is determined.

[0016] In a possible implementation, the target state data includes an original component height and an original component target width, and the method further includes:

[0017] Get the current window height and current window width;

[0018] Substituting the current window height and the original component height into the first preset proportional function to calculate the current component height;

[0019] Substituting the current window width and the original component width into the second preset proportional function to calculate the current component width;

[0020] The layout parameters of the component are determined based on the current component height and the current component width, and the component is displayed in the current window based on the layout parameters.

[0021] In a possible implementation, the method further includes:

[0022] If the new control point position is less than zero, or the new control point position and the target rectangular frame parameters meet the preset conditions, the boundary of the component is adjusted to obtain an adjustment result; wherein the preset conditions are determined based on the current window height or the current window width.

[0023] In a possible implementation, the method further includes:

[0024] When operation instructions for the same component are obtained from multiple users, target state data of the rectangular frame after any user performs the operation is obtained;

[0025] Based on the target state data and the initial state data of the rectangular frame, the change data is determined so that the server synchronizes the change data to other users.

[0026] In a possible implementation, the method further includes:

[0027] When operation instructions for the same component are obtained from multiple users, the preset operation priority corresponding to each user is obtained;

[0028] Based on the preset operation priority, a current operation instruction is determined to click an initial control point of the component based on the current operation instruction.

[0029] The second aspect of the present application provides a drag layout device for a large screen, the device comprising:

[0030] A first acquisition module is used to acquire initial state data of the mouse when it is determined that the user clicks the mouse button from the initial control point of the component; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component;

[0031] The second acquisition module is used to acquire the current mouse position data in real time during the movement of the mouse;

[0032] The generation module is used to generate target state data of a rectangular frame corresponding to the component after the user releases the mouse button based on the initial state data and the current mouse position data, so as to drag or scale the component through the target state data.

[0033] In a possible implementation manner, the generation module is specifically used to:

[0034] Calculate the mouse movement distance based on the initial state data and the current mouse position data;

[0035] Based on the initial state data and the mouse moving distance, the parameters of the rectangular frame are updated to obtain new parameters of the rectangular frame;

[0036] When it is determined that the user releases the mouse button, the obtained new rectangular frame parameters are used as the target rectangular frame parameters;

[0037] Based on the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component is determined.

[0038] In a possible implementation manner, the generation module is further used to:

[0039] Based on the initial state data and the mouse movement distance, the position of the initial control point is updated to obtain a new control point position;

[0040] Based on the new control point position and the target rectangular frame parameters, the target state data of the rectangular frame corresponding to the component is determined.

[0041] In a possible implementation manner, the drag layout device for a large screen is further used for:

[0042] Get the current window height and current window width;

[0043] Substituting the current window height and the original component height into the first preset proportional function to calculate the current component height;

[0044] Substituting the current window width and the original component width into the second preset proportional function to calculate the current component width;

[0045] The layout parameters of the component are determined based on the current component height and the current component width, and the component is displayed in the current window based on the layout parameters.

[0046] In a possible implementation manner, the drag layout device for a large screen is further used for:

[0047] If the new control point position is less than zero, or the new control point position and the target rectangular frame parameters meet the preset conditions, the boundary of the component is adjusted to obtain an adjustment result; wherein the preset conditions are determined based on the current window height or the current window width.

[0048] In a possible implementation manner, the drag layout device for a large screen is further used for:

[0049] When operation instructions for the same component are obtained from multiple users, target state data of the rectangular frame after any user performs the operation is obtained;

[0050] Based on the target state data and the initial state data of the rectangular frame, the change data is determined so that the server synchronizes the change data to other users.

[0051] In a possible implementation manner, the drag layout device for a large screen is further used for:

[0052] When operation instructions for the same component are obtained from multiple users, the preset operation priority corresponding to each user is obtained;

[0053] Based on the preset operation priority, a current operation instruction is determined to click an initial control point of the component based on the current operation instruction.

[0054] In a third aspect of the present application, an electronic device is proposed, comprising a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the drag layout method for a large screen as described in the first aspect.

[0055] In a fourth aspect, the present application proposes a computer-readable storage medium, wherein at least one instruction, at least one program, a code set or an instruction set is stored in the storage medium, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the drag layout method for a large screen as described in the first aspect.

[0056] The embodiments of the present application have the following beneficial effects:

[0057] The drag layout method for a large screen provided in an embodiment of the present application includes: obtaining the initial state data of the mouse when determining that the user clicks the mouse button from the initial control point of the component, wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component, and in the process of mouse movement, obtaining the current mouse position data in real time, and generating the target state data of the rectangular box corresponding to the component after the user releases the mouse button based on the initial state data and the current mouse position data, so as to drag or scale the component through the target state data. This solution greatly improves the user's freedom to adjust the layout by supporting eight control points for dragging and scaling, allowing the user to flexibly adjust the size and position of the component, avoiding the limitation that the traditional plug-in only supports dragging from the lower right corner. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] Figure 1 A block diagram of a computer device provided in an embodiment of the present application;

[0059] Figure 2 A flowchart of a drag layout method for a large screen provided in an embodiment of the present application;

[0060] Figure 3 A flowchart of the steps for generating target state data provided in an embodiment of the present application;

[0061] Figure 4 Another step flow chart for generating target state data provided by an embodiment of the present application;

[0062] Figure 5 A flowchart of steps for optimizing component layout provided in an embodiment of the present application;

[0063] Figure 6 A flowchart of the steps of synchronously changing data provided in an embodiment of the present application;

[0064] Figure 7 A flowchart of the steps of performing component operations according to priority provided in an embodiment of the present application;

[0065] Figure 8A structural block diagram of a drag layout device for a large screen provided in an embodiment of the present application. DETAILED DESCRIPTION

[0066] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0067] At present, when dragging and dropping components for large screens, the existing front-end layout plug-in only supports dragging from the lower right corner, and it is impossible to freely drag components from different corners. This limitation restricts the user's flexibility in adjusting the layout and cannot meet complex requirements. In addition, the current plug-in only supports single-user operation and cannot meet the needs of multiple users editing the same layout at the same time. This is particularly obvious in team collaboration. Users often need to wait for others to complete their operations, which affects the overall efficiency. In addition, the existing technology performs poorly in real-time data interaction, and it is difficult to achieve dynamic updates and instant feedback. This defect prevents users from getting timely responses when adjusting the layout, reducing the user experience. At the same time, the existing grid layout implementation often cannot provide accurate picture placement capabilities like word, and the position and size adjustment of components in the layout lack fine-grained control, resulting in inconsistent display effects on different screens.

[0068] Based on this, the present application proposes a drag layout method for a large screen, the method comprising: obtaining the initial state data of the mouse when determining that the user clicks the mouse button from the initial control point of the component, wherein the initial control point comprises a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component; in the process of mouse movement, the current mouse position data is obtained in real time, and based on the initial state data and the current mouse position data, the target state data of the rectangular box corresponding to the component is generated after the user releases the mouse button, so as to drag or scale the component through the target state data. This solution greatly improves the user's freedom to adjust the layout by supporting eight control points for dragging and scaling, allowing the user to flexibly adjust the size and position of the component, avoiding the limitation that traditional plug-ins only support dragging from the lower right corner.

[0069] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, features defined as "first" and "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of the present disclosure, unless otherwise specified, "multiple" means two or more. In addition, the use of "based on" or "according to" means openness and inclusiveness, because the process, steps, calculations or other actions "based on" or "according to" one or more of the conditions or values ​​may be based on additional conditions or values ​​beyond the described values ​​in practice.

[0070] The drag layout method for a large screen provided in the present application can be applied to a computer device (electronic device), which can be a server or a terminal, wherein the server can be a single server or a server cluster composed of multiple servers. The embodiments of the present application do not specifically limit this. The terminal can be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, and portable wearable devices.

[0071] Take the computer device as a server as an example. Figure 1 A block diagram of a server is shown, such as Figure 1 As shown, the server may include a processor and a memory connected via a system bus. The processor of the server is used to provide computing and control capabilities. The memory of the server includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. When the computer program is executed by the processor, a drag layout method for a large screen is implemented.

[0072] Those skilled in the art will understand that Figure 1 The structure shown in the figure is only a block diagram of a partial structure related to the solution of the present application, and does not constitute a limitation on the server to which the solution of the present application is applied. Optionally, the server may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

[0073] It should be noted that the execution subject of the embodiments of the present application may be a computer device or a drag layout device for a large screen. The following method embodiments will be described using a computer device as the execution subject.

[0074] Figure 2 A flowchart of a drag layout method for a large screen provided in an embodiment of the present application. Figure 2 As shown, the method comprises the following steps:

[0075] Step 202: When it is determined that the user clicks the mouse button from the initial control point of the component, the initial state data of the mouse is obtained.

[0076] The initial control points include corner control points and edge control points. The corner control points are any positions on the four corner points in the rectangular frame corresponding to the component, and the edge control points are any positions on the four sides of the rectangular frame corresponding to the component.

[0077] When the user presses the mouse button from the initial control point of the component, the initial state data of the mouse can be recorded. Optionally, the initial state data may include the initial width W0, initial height H0, initial position (X0, Y0), initial mouse horizontal position M0, and initial mouse horizontal position M1. x0 , initial mouse vertical position M y0 .

[0078] Step 204: During the mouse movement, the current mouse position data is acquired in real time.

[0079] In this case, since the rectangular box corresponding to the component needs to be dragged or scaled, the mouse needs to move from the initial control point. The mouse can move in any direction, and during the movement of the mouse, the current mouse position data is recorded in real time. The current mouse position data can be recorded as (M x ,M y ).

[0080] Step 206: Generate target state data of a rectangular frame corresponding to the component after the user releases the mouse button based on the initial state data and the current mouse position data, so as to drag or scale the component according to the target state data.

[0081] After the initial state data and the current mouse position data are obtained, the state data of the rectangular frame corresponding to the component can be calculated in real time, and the target state data of the rectangular frame can be generated after the user releases the mouse button.

[0082] In some optional embodiments, Figure 3 As shown, Figure 3 A flowchart of steps for generating target state data provided in an embodiment of the present application includes:

[0083] Step 302: Calculate the mouse movement distance based on the initial state data and the current mouse position data.

[0084] Step 304: based on the initial state data and the mouse movement distance, update the parameters of the rectangular frame to obtain new parameters of the rectangular frame.

[0085] Step 306: When it is determined that the user releases the mouse button, the obtained new rectangular frame parameters are used as target rectangular frame parameters.

[0086] Step 308: Determine the target state data of the rectangular frame corresponding to the component based on the target rectangular frame parameters.

[0087] The mouse moving distance may include horizontal moving distance and vertical moving distance. The horizontal moving distance may be recorded as ΔX, ΔX=M x -M x0 The vertical moving distance can be recorded as ΔY, ΔY=M y -M y0 .

[0088] Therefore, the parameters of the rectangular frame can be updated based on the initial state data and the mouse movement distance to obtain new rectangular frame parameters. The parameters of the rectangular frame can include a width parameter and a height parameter, and the new rectangular frame parameters can include a new width parameter and a new height parameter.

[0089] Optionally, for the corner control point, the new width parameter is recorded as W1, W1 = max(W0 + ΔX), and the new height parameter is recorded as H1, H1 = max(H0 + ΔY).

[0090] For the edge control point, the new width parameter is recorded as W2, W2 = max(W0-ΔX), and the new height parameter is recorded as H2, H2 = max(H0-ΔY).

[0091] It should be noted that the original size of the rectangular box corresponding to the component can be set to 50×50 pixels, so in order to avoid scaling the rectangular box too small, the new width parameter and the new height parameter need to be pre-set to no less than 50 pixels. Of course, the minimum value of the original size of the rectangular box corresponding to the component can also be customized according to actual needs, which can be less than 50×50 pixels.

[0092] Finally, when it is determined that the user has released the mouse button, the obtained new rectangular frame parameters can be used as the target rectangular frame parameters, and then based on the target rectangular frame parameters, the target state data of the rectangular frame corresponding to the component can be determined. Figure 4 As shown, Figure 4 Another step flow chart for generating target state data provided in an embodiment of the present application includes:

[0093] Step 402: Based on the initial state data and the mouse movement distance, the position of the initial control point is updated to obtain a new control point position.

[0094] Step 404: Determine the target state data of the rectangular frame corresponding to the component based on the new control point position and the target rectangular frame parameters.

[0095] The initial control point that needs to be moved also needs to be updated. Optionally, the position of the initial control point can be updated based on the initial state data and the mouse movement distance to obtain a new control point position. The new control point position is (X, Y), where X = X0 + ΔX, Y = Y0 + ΔY.

[0096] When the user releases the mouse button, the parameters of the rectangle and the position of the initial control point are stopped from being updated, and finally the target state data of the rectangle corresponding to the component is determined based on the new control point position and the target rectangle parameters, which can be recorded as (W, H, X, Y). Among them, W can include W1 and W2, and H can include H1 and H2.

[0097] In some optional embodiments, when updating the size and position, a boundary check can also be performed to ensure that the component does not exceed the visible area. Optionally, if the new control point position is less than zero, or the new control point position and the target rectangular frame parameters meet the preset conditions, the boundary of the component is adjusted to obtain the adjustment result. Among them, the preset conditions are determined based on the current window height or the current window width. Through the boundary check, it is ensured that the component does not exceed the window area, and the layout disorder is effectively avoided.

[0098] In addition, when dragging or scaling components, you can also use Transforms and Transitions in Cascading Style Sheets (CSS) to optimize rendering performance and ensure smooth operation. CSS is a computer language used to express the file style of an application of standard generalized markup language or a subset of standard generalized markup language. CSS can not only modify web pages statically, but also dynamically format various elements of web pages in conjunction with various scripting languages.

[0099] Transforms is a feature in CSS that allows developers to perform transformation operations on elements, including translation, rotation, scaling, and tilting. Transitions is a technology used to create smooth animation effects between CSS property values. It can be applied to changes in the color, size, position and other properties of an element, so that these changes do not occur immediately, but rather make the background color smoothly transition from one color to another. The specific implementation methods of these technologies can refer to the existing technologies and will not be repeated here.

[0100] In some optional embodiments, the built-in deletion logic can also be encapsulated and combined with the state management of the rectangular box corresponding to the component, which simplifies the operation process and reduces the user's operation complexity. The user only needs to click the delete button to process subsequent status updates and window page refreshes.

[0101] In some optional embodiments, the target state data may include the original component height H and the original component target width W. It should be noted that the original component height H and the original component target width W here may be the above-mentioned new height parameter and new width parameter. Thus, by combining window monitoring, ratio calculation and layout optimization techniques, each component can be adaptively adjusted according to the screen size, ensuring that the layout remains beautiful and practical at all resolutions.

[0102] like Figure 5 As shown, Figure 5 A flowchart of steps for optimizing component layout provided in an embodiment of the present application includes:

[0103] Step 502: Get the current window height and current window width.

[0104] Step 504: Substitute the current window height and the original component height into the first preset proportional function to calculate the current component height.

[0105] Step 506: Substitute the current window width and the original component width into the second preset proportional function to calculate the current component width.

[0106] Step 508: Determine the layout parameters of the component based on the current component height and the current component width, and display the component in the current window based on the layout parameters.

[0107] Among them, you can use the event listener to get the current window height and the current window width. The current window height can be recorded as windowHeight, and the current window width can be recorded as windowWidth.

[0108] The first preset proportional function is The second preset proportional function is Among them, newHeight is the current component height, originalHeight is the original component height, newWidth is the current component width, and originalWidth is the original component width.

[0109] Thus, the layout parameters of the component can be determined based on the current component height and the current component width, and the component can be displayed in the current window based on the layout parameters. Optionally, the CSS Flexbox layout can be used to optimize the display of the component to ensure the reasonable sorting of the components on screens of different sizes. Among them, the elastic box model in CSS, namely Flexbox, provides a more efficient and flexible layout solution for front-end developers. The specific implementation method can refer to the existing technology and will not be repeated here.

[0110] This embodiment can dynamically adjust the size of layout components according to different resolutions and screen sizes through window monitoring and ratio calculation, ensuring that the layout can be displayed reasonably on various screen sizes. This improves the adaptability in large-screen visualization scenes and avoids the problem of inconsistent layouts on different devices and resolutions.

[0111] In some optional embodiments, Figure 6 As shown, Figure 6 A flowchart of steps for synchronously changing data provided in an embodiment of the present application includes:

[0112] Step 602: When operation instructions for the same component are obtained from multiple users, target state data of the rectangular frame after any user performs the operation is obtained.

[0113] Step 604: Determine the changed data based on the target state data and the initial state data of the rectangular frame, so that the server synchronizes the changed data to other users.

[0114] Among them, Websocket real-time two-way communication can also be used. WebSocket is a two-way communication protocol that can establish a persistent connection through a handshake. The server and the client can send and receive data at any time, so that multiple users can operate the same component at the same time. In the case of obtaining operation instructions for the same component from multiple users, the target state data of the rectangular box after any user performs the operation can be obtained, that is, each time a user operates, a message will be triggered to be sent to the server, and then broadcast to other users through the server, wherein the user operation can include dragging or zooming.

[0115] Thus, the changed data can be determined based on the target state data and the initial state data of the rectangular frame, so that the server synchronizes the changed data to other users. In other words, during the synchronization process, only the changed data is synchronized, rather than a full refresh, to improve efficiency.

[0116] In some optional embodiments, Figure 7 As shown, Figure 7 A flowchart of steps for performing component operations according to priority provided in an embodiment of the present application includes:

[0117] Step 702: When operation instructions for the same component from multiple users are obtained, the preset operation priority corresponding to each user is obtained.

[0118] Step 704: Based on the preset operation priority, a current operation instruction is determined to click an initial control point of the component based on the current operation instruction.

[0119] In the case of obtaining operation instructions for the same component from multiple users, the preset operation priority corresponding to each user can be pre-set, so that concurrent conflicts can be prevented through a lock mechanism. That is, each user's operation instructions for the same component have a time difference of milliseconds, and by making the delayed user operation directly ineffective, a current operation instruction is determined based on the preset operation priority, so as to click the initial control point of the component based on the current operation instruction. After the current operation instruction is completed, a new current operation instruction is obtained based on the preset operation priority until all operation instructions are completed.

[0120] This embodiment can effectively prevent conflicts when multiple users perform concurrent operations on the same component by setting operation priorities and lock mechanisms, thereby ensuring data consistency and collaboration efficiency.

[0121] The present application provides a drag layout method for a large screen, the method comprising: obtaining the initial state data of the mouse when determining that the user clicks the mouse button from the initial control point of the component, wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component, and in the process of mouse movement, obtaining the current mouse position data in real time, and generating the target state data of the rectangular box corresponding to the component after the user releases the mouse button based on the initial state data and the current mouse position data, so as to drag or scale the component through the target state data. This solution greatly improves the user's freedom to adjust the layout by supporting eight control points for dragging and scaling, allowing the user to flexibly adjust the size and position of the component, avoiding the limitation that the traditional plug-in only supports dragging from the lower right corner.

[0122] Figure 8 A structural block diagram of a drag layout device for a large screen provided in an embodiment of the present application.

[0123] like Figure 8 As shown, the drag layout device 800 for a large screen includes:

[0124] The first acquisition module 802 is used to obtain the initial state data of the mouse when it is determined that the user clicks the mouse button from the initial control point of the component; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component.

[0125] The second acquisition module 804 is used to acquire the current mouse position data in real time during the movement of the mouse.

[0126] The generating module 806 is used to generate target state data of a rectangular frame corresponding to the component after the user releases the mouse button based on the initial state data and the current mouse position data, so as to drag or scale the component according to the target state data.

[0127] Regarding the device in the above embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment of the method, and will not be elaborated here. Each module in the above drag layout device for a large screen can be implemented in whole or in part by software, hardware, and a combination thereof. The above modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations of the above modules.

[0128] In one embodiment of the present application, a computer device is provided, the computer device comprising a memory and a processor, the memory storing a computer program, and the processor implementing the following steps when executing the computer program:

[0129] When it is determined that the user clicks the mouse button from the initial control point of the component, the initial state data of the mouse is obtained; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component;

[0130] During the mouse movement, the current mouse position data is obtained in real time;

[0131] Based on the initial state data and the current mouse position data, target state data of the rectangular frame corresponding to the component after the user releases the mouse button is generated, so as to drag or scale the component through the target state data.

[0132] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0133] Calculate the mouse movement distance based on the initial state data and the current mouse position data;

[0134] Based on the initial state data and the mouse moving distance, the parameters of the rectangular frame are updated to obtain new parameters of the rectangular frame;

[0135] When it is determined that the user releases the mouse button, the obtained new rectangular frame parameters are used as the target rectangular frame parameters;

[0136] Based on the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component is determined.

[0137] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0138] Based on the initial state data and the mouse movement distance, the position of the initial control point is updated to obtain a new control point position;

[0139] Based on the new control point position and the target rectangular frame parameters, the target state data of the rectangular frame corresponding to the component is determined.

[0140] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0141] Get the current window height and current window width;

[0142] Substituting the current window height and the original component height into the first preset proportional function to calculate the current component height;

[0143] Substituting the current window width and the original component width into the second preset proportional function to calculate the current component width;

[0144] The layout parameters of the component are determined based on the current component height and the current component width, and the component is displayed in the current window based on the layout parameters.

[0145] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0146] If the new control point position is less than zero, or the new control point position and the target rectangular frame parameters meet the preset conditions, the boundary of the component is adjusted to obtain an adjustment result; wherein the preset conditions are determined based on the current window height or the current window width.

[0147] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0148] When operation instructions for the same component are obtained from multiple users, target state data of the rectangular frame after any user performs the operation is obtained;

[0149] Based on the target state data and the initial state data of the rectangular frame, the change data is determined so that the server synchronizes the change data to other users.

[0150] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0151] When operation instructions for the same component are obtained from multiple users, the preset operation priority corresponding to each user is obtained;

[0152] Based on the preset operation priority, a current operation instruction is determined to click an initial control point of the component based on the current operation instruction.

[0153] The computer device provided in the embodiment of the present application has similar implementation principles and technical effects to those of the above-mentioned method embodiment, and will not be described in detail here.

[0154] In one embodiment of the present application, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented:

[0155] When it is determined that the user clicks the mouse button from the initial control point of the component, the initial state data of the mouse is obtained; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component;

[0156] During the mouse movement, the current mouse position data is obtained in real time;

[0157] Based on the initial state data and the current mouse position data, target state data of the rectangular frame corresponding to the component after the user releases the mouse button is generated, so as to drag or scale the component through the target state data.

[0158] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0159] Calculate the mouse movement distance based on the initial state data and the current mouse position data;

[0160] Based on the initial state data and the mouse moving distance, the parameters of the rectangular frame are updated to obtain new parameters of the rectangular frame;

[0161] When it is determined that the user releases the mouse button, the obtained new rectangular frame parameters are used as the target rectangular frame parameters;

[0162] Based on the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component is determined.

[0163] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0164] Based on the initial state data and the mouse movement distance, the position of the initial control point is updated to obtain a new control point position;

[0165] Based on the new control point position and the target rectangular frame parameters, the target state data of the rectangular frame corresponding to the component is determined.

[0166] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0167] Get the current window height and current window width;

[0168] Substituting the current window height and the original component height into the first preset proportional function to calculate the current component height;

[0169] Substituting the current window width and the original component width into the second preset proportional function to calculate the current component width;

[0170] The layout parameters of the component are determined based on the current component height and the current component width, and the component is displayed in the current window based on the layout parameters.

[0171] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0172] If the new control point position is less than zero, or the new control point position and the target rectangular frame parameters meet the preset conditions, the boundary of the component is adjusted to obtain an adjustment result; wherein the preset conditions are determined based on the current window height or the current window width.

[0173] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0174] When operation instructions for the same component are obtained from multiple users, target state data of the rectangular frame after any user performs the operation is obtained;

[0175] Based on the target state data and the initial state data of the rectangular frame, the change data is determined so that the server synchronizes the change data to other users.

[0176] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0177] When operation instructions for the same component are obtained from multiple users, the preset operation priority corresponding to each user is obtained;

[0178] Based on the preset operation priority, a current operation instruction is determined to click an initial control point of the component based on the current operation instruction.

[0179] The computer-readable storage medium provided in this embodiment has similar implementation principles and technical effects to those of the above method embodiments, and will not be described in detail here.

[0180] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0181] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0182] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A drag layout method for a large screen, characterized in that: The method comprises: When it is determined that the user clicks the mouse button from the initial control point of the component, the initial state data of the mouse is obtained; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points in the rectangular box corresponding to the component, and the edge control point is any position on the four sides of the rectangular box corresponding to the component; During the movement of the mouse, current mouse position data is acquired in real time; Based on the initial state data and the current mouse position data, target state data of a rectangular frame corresponding to the component after the user releases the mouse button is generated, so as to drag or scale the component through the target state data.

2. The method according to claim 1, characterized in that The generating, based on the initial state data and the current mouse position data, target state data of a rectangular frame corresponding to the component after the user releases the mouse button comprises: Calculating a mouse movement distance based on the initial state data and the current mouse position data; Based on the initial state data and the mouse movement distance, the parameters of the rectangular frame are updated to obtain new rectangular frame parameters; When it is determined that the user releases the mouse button, the obtained new rectangular frame parameters are used as the target rectangular frame parameters; Based on the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component is determined.

3. The method according to claim 2, characterized in that The determining, based on the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component comprises: Based on the initial state data and the mouse movement distance, the position of the initial control point is updated to obtain a new control point position; Based on the new control point position and the target rectangular frame parameters, target state data of the rectangular frame corresponding to the component is determined.

4. The method according to any one of claims 1 to 3, characterized in that: The target state data includes an original component height and an original component target width, and the method further includes: Get the current window height and current window width; Substituting the current window height and the original component height into a first preset proportional function to calculate the current component height; Substituting the current window width and the original component width into a second preset proportional function to calculate the current component width; The layout parameters of the component are determined based on the current component height and the current component width, and the component is displayed in the current window based on the layout parameters.

5. The method according to claim 3, characterized in that: The method further comprises: If the new control point position is less than zero, or the new control point position and the target rectangular frame parameters meet preset conditions, the boundary of the component is adjusted to obtain an adjustment result; wherein the preset condition is determined based on the current window height or the current window width.

6. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: When operation instructions for the same component are obtained from multiple users, target state data of the rectangular frame after any user performs the operation is obtained; Based on the target state data and the initial state data of the rectangular frame, the change data is determined so that the server synchronizes the change data to other users.

7. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: When operation instructions for the same component are obtained from multiple users, the preset operation priority corresponding to each user is obtained; Based on the preset operation priority, a current operation instruction is determined to click an initial control point of the component based on the current operation instruction.

8. A drag layout device for a large screen, characterized in that: The device comprises: A first acquisition module is used to acquire initial state data of the mouse when it is determined that the user clicks the mouse button from the initial control point of the component; wherein the initial control point includes a corner control point and an edge control point, the corner control point is any position on the four corner points of the rectangular frame corresponding to the component, and the edge control point is any position on the four sides of the rectangular frame corresponding to the component; A second acquisition module is used to acquire the current mouse position data in real time during the movement of the mouse; A generating module is used to generate target state data of a rectangular frame corresponding to a component after the user releases the mouse button based on the initial state data and the current mouse position data, so as to drag or scale the component through the target state data.

9. An electronic device, characterized in that: The electronic device includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the drag layout method for a large screen as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that: The storage medium stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the drag layout method for a large screen as described in any one of claims 1-7.

Images