Split-screen and screen combination implementation method and system based on Vue and canvas

Abstract

The application discloses a split-screen and combined-screen implementation method and system based on Vue and Canvas, and belongs to the technical field of front-end processing, and aims to solve the technical problem of how to simply and expansively implement dynamic split-screen and combined-screen. The method comprises the following steps: constructing a split-screen container component based on Vue and Canvas; initializing the configuration of the split-screen container component; defining operation items of the split-screen container component and setting the implementation logic of the operation items, including split-screen selection operation, split-screen division operation, split-screen splicing operation, drag binding element, history back and reset; binding operation events of the split-screen container component and setting the implementation logic of the operation events, wherein the operation events include a mouse right-click menu event and a window size change event; encapsulating the split-screen container component, storing a split-screen object obtained by encapsulation into a database; and loading the split-screen object and dynamically splitting and combining screens based on the split-screen container component.

Description

Technical Field

[0001] This invention relates to the field of front-end processing technology, specifically to a method and system for implementing split-screen and merging screens based on Vue and Canvas. Background Technology

[0002] Split-screen and merging refers to dividing a screen, video wall, or similar application into 4, 9, 16, 25, or 36 split screens. This technique is widely used in video surveillance, video walls, and video conferencing. In typical business scenarios, computer users use a single split screen to view displayed information, which meets general business needs. However, in special scenarios, such as those requiring large-scale on-site monitoring, video walls, or the application of electronic mapping technology, where panoramic display is required, users must utilize a sufficient number of split screens to see scene details more clearly and for easier operation.

[0003] Vue is a user-friendly, versatile, and high-performance JavaScript framework that helps you create more maintainable and testable codebases. As a progressive JavaScript framework, Vue is smaller, more efficient, based on the virtual DOM, and supports two-way data binding compared to older front-end frameworks. Therefore, it frees developers from manipulating DOM objects, allowing them to focus more on business logic.

[0004] HTML5 canvas technology is specifically designed for drawing graphics. The canvas element is like placing a "canvas" on the page where graphics can be drawn. The method for drawing graphics is to use JavaScript to call some API functions of canvas.

[0005] Currently, split-screen and merging are mainly implemented in two ways: one is based on the native HTML DOM, and the other is based on JS + Canvas. These two methods are relatively limited in functionality. The technical challenge that needs to be addressed is how to leverage Vue's two-way data binding feature and the rendering capabilities of canvas, which far surpass those of the DOM, to achieve simple and scalable dynamic split-screen and merging. Summary of the Invention

[0006] The technical objective of this invention is to address the above-mentioned shortcomings by providing a method and system for implementing split-screen and merging based on Vue and Canvas, thereby solving the technical problem of how to simply and scalably implement dynamic split-screen and merging.

[0007] In a first aspect, the present invention provides a method for implementing split-screen and merging screens based on Vue+Canvas, comprising the following steps:

[0008] A split-screen container component is built based on Vue and Canvas. The split-screen container component is used to implement two-way data binding between the memory of the front-end interface and the front-end interface based on Vue, and to provide a canvas for drawing based on Canvas, and to call Canvas for rendering.

[0009] Initialize the configuration of the split-screen container component, including initializing the configuration of the split screen, canvas and history. The configuration information of the split screen is used to describe the split-screen operation. The canvas is an Html Canvas-based canvas used to draw and call Html Canvas for rendering. The history is used to record historical operations.

[0010] Define the operation items of the split-screen container component and set the implementation logic of the operation items. The operation items are the functional services provided by the split-screen container component, including split-screen selection operation, split-screen split operation, split-screen splicing operation, drag and drop binding element, history rollback and reset.

[0011] Bind the operation events of the split-screen container component and set the implementation logic of the operation events, including the right-click menu event and the window size change event;

[0012] The split-screen container component is encapsulated, and the encapsulated split-screen object is stored in the database.

[0013] Load the split-screen object and dynamically split and merge the screens based on the split-screen container component.

[0014] Preferably, the configuration of the split screen includes a two-dimensional array of split screens, a reference value for container width, a reference value for container height, an array of supported split screen divisions, a supported split screen division hierarchy, and a selected split screen array;

[0015] The canvas configuration includes canvas object, canvas width, canvas height, canvas X-axis coordinate, canvas Y-axis coordinate, border width, and whether to display window number;

[0016] The configuration of the history records includes the history record array, the maximum number of records to retain, and the history record name conversion configuration.

[0017] Preferably, the split-screen selection is based on Html Canvas for drawing and calls the Html Canvas API for rendering, including single-selection split-screen and multi-selection split-screen;

[0018] The operation logic of the single-selection split screen includes listening for mouse click events, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the click coordinates, updating the color of the selection box on the canvas and rendering it;

[0019] The operation logic of the multi-select split screen includes listening to the mouse MouseMove event, calculating the coordinates of the mouse drag rectangle, drawing the mouse drag rectangle on the canvas, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the overlap of the selection box, updating the color of the selection box on the canvas and rendering it.

[0020] The operation logic for split-screen is as follows: after selecting a single split screen, the split operation is performed. By selecting a specified number of split screens, the (X,Y) coordinates and width and height of each split screen are calculated based on the selected split screens and the number of split screens. The canvas is then redrawn and the data objects are updated. When multiple split screens are selected, the split operation is not supported.

[0021] The operation logic for multi-screen splicing is as follows: after selecting multiple split screens, the splicing operation is performed. By clicking the splicing button, the (X,Y) coordinates and width and height of the spliced ​​split screen are calculated based on whether the selected split screen is rectangular. The canvas is then redrawn and the data object is updated. When a single split screen is selected, the splicing operation is not supported.

[0022] The drag-and-drop binding element supports dragging elements onto the split screen, including dragging monitoring points from the tree to the split screen. The split screen container will listen for mouse drag events. When the mouse is released, it will obtain the (X,Y) coordinates and width and height of the specified split screen, get the split screen number, bind the dragged element object to the split screen object in the split screen array, and redraw the canvas.

[0023] The history rollback supports rewinding history. The operation logic is as follows: the split-screen array and canvas object after each operation are backed up to the history array through the history array. When rollback is selected, the canvas is redrawn according to the split-screen array and canvas object. The specific operations include: when the operator clicks the undo button, the previous operation will be undone; when the operator clicks the history and selects a specific history, the process will be undone to the canvas state of the specified history.

[0024] The reset is used to reset the $data storage based on Vue to its initial state. The operation logic is to reset the split-screen array and canvas object to their initial state.

[0025] As a preferred approach, right-click menu events are bound to HTML DOM elements, and operation events such as cancel splicing, cancel splitting, and unbinding are added.

[0026] The cancellation of splicing means restoring the spliced ​​split screen to multiple unspliced ​​split screens;

[0027] The cancellation of the split is to restore the split screen to an unsplit single screen;

[0028] The unbinding refers to removing the association between the DOM element and the split screen;

[0029] The bound window size change event is to listen for window size change events. When the window size changes, the relevant split screen coordinates, width and height are recalculated, and the canvas is drawn.

[0030] As a preferred method, the encapsulated split-screen objects are stored in a database using Axios.

[0031] Secondly, the present invention provides a Vue+Canvas-based split-screen and merging system for dynamically splitting and merging screens using the Vue+Canvas-based split-screen and merging method as described in any of the first aspects, the system comprising:

[0032] The component building module is used to build a split-screen container component based on Vue and Canvas. The split-screen container component is used to implement two-way data binding between the front-end interface memory and the front-end interface page based on Vue, and to provide a canvas for drawing based on Canvas, and to call Canvas for rendering.

[0033] The component initialization module is used to initialize the configuration of the split-screen container component, including initializing the configuration of the split screen, canvas and history. The configuration information of the split screen is used to describe the split-screen operation. The canvas is an HTML Canvas-based canvas used to draw and call HTML Canvas for rendering. The history is used to record historical operations.

[0034] The component function configuration module is used to define the operation items of the split-screen container component and set the implementation logic of the operation items. The operation items are the functional services provided by the split-screen container component, including split-screen selection operation, split-screen split operation, split-screen splicing operation, drag and drop binding elements, history rollback and reset.

[0035] A component operation binding module is used to bind operation events of the split-screen container component and set the implementation logic of the operation events. The operation events include mouse right-click menu events and window size change events.

[0036] A component encapsulation module is used to encapsulate the split-screen container component and store the encapsulated split-screen object in a database.

[0037] A database, wherein the database is used to store the split-screen objects;

[0038] The front-end interface is used to load the split-screen object and dynamically split and merge screens based on the split-screen container component.

[0039] Preferably, the configuration of the split screen includes a two-dimensional array of split screens, a reference value for container width, a reference value for container height, an array of supported split screen divisions, a supported split screen division hierarchy, and a selected split screen array;

[0040] The canvas configuration includes canvas object, canvas width, canvas height, canvas X-axis coordinate, canvas Y-axis coordinate, border width, and whether to display window number;

[0041] The configuration of the history records includes the history record array, the maximum number of records to retain, and the history record name conversion configuration.

[0042] Preferably, the split-screen selection is based on Html Canvas for drawing and calls the Html Canvas API for rendering, including single-selection split-screen and multi-selection split-screen;

[0043] The operation logic of the single-selection split screen includes listening for mouse click events, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the click coordinates, updating the color of the selection box on the canvas and rendering it;

[0044] The operation logic of the multi-select split screen includes listening to the mouse MouseMove event, calculating the coordinates of the mouse drag rectangle, drawing the mouse drag rectangle on the canvas, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the overlap of the selection box, updating the color of the selection box on the canvas and rendering it.

[0045] The operation logic for split-screen is as follows: after selecting a single split screen, the split operation is performed. By selecting a specified number of split screens, the (X,Y) coordinates and width and height of each split screen are calculated based on the selected split screens and the number of split screens. The canvas is then redrawn and the data objects are updated. When multiple split screens are selected, the split operation is not supported.

[0046] The operation logic for multi-screen splicing is as follows: after selecting multiple split screens, the splicing operation is performed. By clicking the splicing button, the (X,Y) coordinates and width and height of the spliced ​​split screen are calculated based on whether the selected split screen is rectangular. The canvas is then redrawn and the data object is updated. When a single split screen is selected, the splicing operation is not supported.

[0047] The drag-and-drop binding element supports dragging elements onto the split screen, including dragging monitoring points from the tree to the split screen. The split screen container will listen for mouse drag events. When the mouse is released, it will obtain the (X,Y) coordinates and width and height of the specified split screen, get the split screen number, bind the dragged element object to the split screen object in the split screen array, and redraw the canvas.

[0048] The history rollback supports rewinding history. The operation logic is as follows: the split-screen array and canvas object after each operation are backed up to the history array through the history array. When rollback is selected, the canvas is redrawn according to the split-screen array and canvas object. The specific operations include: when the operator clicks the undo button, the previous operation will be undone; when the operator clicks the history and selects a specific history, the process will be undone to the canvas state of the specified history.

[0049] The reset is used to reset the $data storage based on Vue to its initial state. The operation logic is to reset the split-screen array and canvas object to their initial state.

[0050] Preferably, the component operation binding module is used to bind mouse right-click menu events based on Html DOM elements, and add operation events such as cancel splicing, cancel splitting, and cancel binding;

[0051] The cancellation of splicing means restoring the spliced ​​split screen to multiple unspliced ​​split screens;

[0052] The cancellation of the split is to restore the split screen to an unsplit single screen;

[0053] The unbinding refers to removing the association between the DOM element and the split screen;

[0054] The bound window size change event is to listen for window size change events. When the window size changes, the relevant split screen coordinates, width and height are recalculated, and the canvas is drawn.

[0055] Preferably, the component encapsulation module is used to store the encapsulated split-screen objects to a database via Axios.

[0056] The method and system for implementing split-screen and merging screens based on Vue and Canvas of the present invention have the following advantages:

[0057] 1. Leveraging the two-way data binding feature of the Vue framework and the rendering capabilities of canvas far exceeding those of DOM, a large amount of business-irrelevant code is simplified, making the code logic simpler and clearer, which is beneficial to the development work of coders. This implementation solution has simpler and clearer code logic and strong extensibility.

[0058] 2. Compared to simply dividing into 4, 9, 16, 25, 36 split screens, it supports arbitrary cutting and splicing of split screens of different sizes, and also supports operations such as history rollback and reset;

[0059] 3. This implementation method can support and adapt to a variety of business scenarios, has good versatility and scalability, is applicable to a wider range of scenarios, and is more convenient for users to operate;

[0060] 4. Use the Html Canvas API to perform pixel-level rendering directly, resulting in fast rendering speed. Attached Figure Description

[0061] To more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0062] The invention will be further described below with reference to the accompanying drawings.

[0063] Figure 1 This is a flowchart of the split-screen and merging implementation method based on Vue and Canvas in Example 1;

[0064] Figure 2 This is a diagram illustrating the overall architecture of the split-screen container component in Example 1, which is based on Vue and Canvas for split-screen and merging implementation. Detailed Implementation

[0065] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, so that those skilled in the art can better understand and implement the present invention. However, the embodiments are not intended to limit the present invention. In the absence of conflict, the embodiments of the present invention and the technical features in the embodiments can be combined with each other.

[0066] This invention provides a method and system for implementing split-screen and merging based on Vue and Canvas, which solves the technical problem of how to implement dynamic split-screen and merging in a simple and scalable way.

[0067] Example 1:

[0068] This invention provides a method for implementing split-screen and merging screens based on Vue+Canvas, comprising the following steps:

[0069] S100. Construct a split-screen container component based on Vue and Canvas. The split-screen container component is used to implement two-way data binding between the memory of the front-end interface and the front-end interface based on Vue, and is used to provide a canvas for drawing based on Canvas, and call Canvas for rendering.

[0070] S200. Initialize the configuration of the split-screen container component, including initializing the configuration of the split screen, canvas and history. The configuration information of the split screen is used to describe the split-screen operation. The canvas is an Html Canvas-based canvas used to draw and call Html Canvas for rendering. The history is used to record historical operations.

[0071] S300. Define the operation items of the split-screen container component and set the implementation logic of the operation items. The operation items are the functional services provided by the split-screen container component, including split-screen selection operation, split-screen splitting operation, split-screen splicing operation, drag and drop binding element, history rollback and reset.

[0072] S400, Bind the operation events of the split-screen container component and set the implementation logic of the operation events, the operation events including mouse right-click menu events and window size change events;

[0073] S500: Encapsulate the split-screen container component and store the encapsulated split-screen object in the database;

[0074] S600: Load the split-screen object and dynamically split and merge the screens based on the split-screen container component.

[0075] Step S100 leverages Vue's two-way data binding feature and the rendering capabilities of canvas, which far surpass those of DOM-based methods, to construct a container-based split-screen component. Vue is an MVVM framework, meaning that when data changes, the view changes accordingly, and vice versa. Traditional one-way data binding results in a large amount of code, a lengthy data flow process, and much redundant code. Furthermore, due to the strict requirement for independent management of application state (a single global store), it becomes verbose and cumbersome when handling scenarios with many local states (such as "rich form" applications with extensive user input). Therefore, integrating Vue's two-way data binding feature simplifies a significant amount of business logic-irrelevant code, making the code logic simpler and clearer. By using HTML5 canvas and Vue-related technologies, a cross-platform, cross-frontend interface, and highly reusable split-screen and merging solution is achieved. This improves DOM element rendering efficiency while maintaining clear code logic, user-friendly operation, and enhanced frontend interface usability.

[0076] Step S200 initializes the split-screen, canvas, and history configurations. Specifically, split-screen configurations include a two-dimensional array of split screens, a base value for container width, a base value for container height, an array of supported split-screen segments, supported split-screen levels, and the selection of the split-screen array. Canvas configurations include the canvas object, canvas width, canvas height, canvas X-axis coordinate, canvas Y-axis coordinate, border width, and whether to display window numbers. History configurations include a history array, a maximum number of history records to retain, and history record name conversion settings.

[0077] Step S300 configures the relevant operations (i.e. functions) of this component. The specific details for each operation are as follows:

[0078] Split-screen selection: This operation supports single-selection split-screen and multi-selection split-screen. Since HTML Canvas is used for drawing, all operations require the coder to calculate and draw on the canvas themselves.

[0079] The single-selection split screen includes listening for mouse click events, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the click coordinates, updating the color of the selection box on the canvas, and rendering.

[0080] Split-screen multi-selection includes listening to the mouseMove event, calculating the coordinates of the mouse drag rectangle, drawing the mouse drag rectangle on the canvas, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the overlap of the selection box, updating the color of the selection box on the canvas and rendering it.

[0081] During the canvas rendering process, thanks to Vue's two-way data binding feature, after each calculation is completed, the pre-written redraw canvas can be called, reducing redundant code.

[0082] Split-screen operation: This operation supports splitting after selecting a single split screen. By selecting a specified number of splits, the (X,Y) coordinates and width and height of each split screen are calculated based on the selected split screens and the number of splits. The canvas is then redrawn and the data objects are updated. Split-screen operation is not supported when multiple split screens are selected.

[0083] Split-screen splicing: This operation supports splicing multiple split screens after selection. By clicking the splice button, the (X,Y) coordinates and width and height of the spliced ​​split screen are calculated based on whether the selected split screen is rectangular. The canvas is then redrawn and the data objects are updated. Splicing is not supported when a single split screen is selected.

[0084] Drag and drop elements: This operation supports dragging elements onto the split screen. For example, dragging a monitoring point from the tree to the split screen. The split screen container will listen for mouse drag events. When the mouse is released, it will get the (X,Y) coordinates and width and height of the specified split screen, obtain the split screen number, bind the dragged element object to the split screen object in the split screen array, and redraw the canvas.

[0085] History Reversal: This operation supports reversing back to the past. When the operator clicks the Undo button, the previous operation will be undone. When the operator clicks the History tab and selects a specific history tab, the process will revert to the canvas state of that specific history tab. The main implementation is to back up the split-screen array and canvas object to the history tab after each operation. When the reversal option is selected, the canvas is redrawn based on the split-screen array and canvas object.

[0086] The reset function supports resetting to the initial state. It mainly resets the split-screen array and canvas object to their initial state. It uses Vue's $data storage for resetting, so coders do not need to back up the relevant initialization objects themselves, making it simple and fast.

[0087] Binding operation events includes right-click menu events and window size change events. The right-click menu event is used to add functions like cancel splicing, cancel splitting, and unbinding. To quickly execute some operations, some operations are bound to the right-hand menu. Since the right-click menu needs to follow the mouse movement, using an HTML DOM element is more suitable. Cancel splicing restores spliced ​​screens to multiple unspliced ​​screens; canceling splitting restores split screens to single, unspliced ​​screens; and unbinding removes the association between the DOM element and the screen. Because the HTML Canvas does not adapt to window changes, binding window size change events requires listening for these events. When the window size changes, the relevant screen coordinates, width, and height need to be recalculated, and the canvas redrawn.

[0088] Axios is a Promise-based HTTP library that supports the Promise API, intercepts and transforms request and response data. Therefore, the encapsulated components can use Axios to send the completed split-screen objects to the backend and save them to the database. When the split-screen container component is loaded, the time period can be drawn onto the split canvas directly by reading the saved data.

[0089] This embodiment implements a cross-platform, cross-browser, and highly reusable split-screen and merging solution by using HTML5 canvas and Vue-related technologies. While improving the rendering efficiency of DOM elements, the code logic is clear, the user operation is convenient, and the user-friendliness of the front-end interface is improved.

[0090] Example 2:

[0091] This invention discloses a split-screen and merging-screen implementation system based on Vue+Canvas, including a component building module, a component initialization module, a component function configuration module, a component operation binding module, a component encapsulation module, a database, and a front-end interface.

[0092] The component building module is used to build split-screen container components based on Vue and Canvas. The split-screen container components are used to implement two-way data binding between the memory of the front-end interface and the front-end interface based on Vue, and to provide a canvas for drawing based on Canvas, and to call Canvas for rendering.

[0093] This module leverages Vue's two-way data binding feature and the rendering capabilities of canvas, which far surpass those of DOM-based methods, to build container-based split-screen components. Vue is an MVVM framework, meaning that when data changes, the view changes accordingly, and vice versa. Traditional one-way data binding results in large amounts of code, lengthy data flow, and much redundant code. Furthermore, the strict requirement for independent application state management (a single global store) makes it verbose and cumbersome in scenarios with many local states (such as "rich form" applications with extensive user input). Therefore, integrating Vue's two-way data binding simplifies a significant amount of business logic-irrelevant code, resulting in clearer and simpler logic. By using HTML5 canvas and Vue-related technologies, a cross-platform, cross-frontend interface, and highly reusable split-screen / combination solution is achieved. This improves DOM element rendering efficiency while maintaining clear code logic, user-friendly operation, and enhanced frontend interface usability.

[0094] The component initialization module is used to initialize the configuration of the split-screen container component, including initializing the configuration of the split screen, canvas, and history. The configuration information of the split screen is used to describe the split-screen operation. The canvas is an Html Canvas-based canvas used to draw and call Html Canvas for rendering. The history is used to record historical operations.

[0095] In practice, split-screen configurations include a two-dimensional array of split screens, a baseline value for container width, a baseline value for container height, an array of supported split-screen segments, supported split-screen levels, and the selection of a specific split-screen array. Canvas configurations include the canvas object, canvas width, canvas height, canvas X-axis coordinate, canvas Y-axis coordinate, border width, and whether to display window numbers. History configurations include a history array, a maximum number of history records to retain, and history name conversion settings.

[0096] The component function configuration module is used to define the operation items of the split-screen container component and set the implementation logic of the operation items. The operation items are the functional services provided by the split-screen container component, including split-screen selection, split-screen splitting, split-screen splicing, drag-and-drop element binding, history rewind, and reset. The specific implementation logic for each operation is as follows:

[0097] Split-screen selection: This operation supports single-selection split-screen and multi-selection split-screen. Since Html Canvas is used for drawing, all operations need to be calculated and drawn on the canvas by the coder.

[0098] The single-selection split screen includes listening for mouse click events, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the click coordinates, updating the color of the selection box on the canvas, and rendering.

[0099] Split-screen multi-selection includes listening to the mouseMove event, calculating the coordinates of the mouse drag rectangle, drawing the mouse drag rectangle on the canvas, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the overlap of the selection box, updating the color of the selection box on the canvas and rendering it.

[0100] During the canvas rendering process, thanks to Vue's two-way data binding feature, after each calculation is completed, the pre-written redraw canvas can be called, reducing redundant code.

[0101] Split-screen splitting: This operation supports splitting after selecting a single split screen. By selecting a specified number of splits, the (X,Y) coordinates and width and height of each split screen are calculated based on the selected split screens and the number of splits. The canvas is then redrawn and the data objects are updated. Split-screen splitting is not supported when multiple split screens are selected.

[0102] Split-screen stitching: This operation supports stitching multiple split screens after selection. By clicking the stitch button, the (X,Y) coordinates and width and height of the stitched split screen are calculated based on whether the selected split screen is rectangular. The canvas is then redrawn and the data objects are updated. Stitching is not supported when a single split screen is selected.

[0103] Drag and drop elements: This operation supports dragging elements onto the split screen. For example, dragging a monitoring point from the tree to the split screen. The split screen container will listen for mouse drag events. When the mouse is released, it will obtain the (X,Y) coordinates and width and height of the specified split screen, get the split screen number, bind the dragged element object to the split screen object in the split screen array, and redraw the canvas.

[0104] History Reversal: This operation supports reversing back to the past. When the operator clicks the Undo button, the previous operation will be undone. When the operator clicks the History tab and selects a specific history tab, the operation will revert to the canvas state of that specific history tab. The main implementation is to back up the split-screen array and canvas object after each operation to the history tab array. When the reversal is selected, the canvas is redrawn based on the split-screen array and canvas object.

[0105] The reset function supports resetting to the initial state. It mainly resets the split-screen array and canvas object to their initial state. It uses Vue's $data storage for resetting, so coders do not need to back up the relevant initialization objects themselves, making it simple and fast.

[0106] The component operation binding module is used to bind the operation events of the split-screen container component and set the implementation logic of the operation events. The operation events include mouse right-click menu events and window size change events.

[0107] As a specific implementation of the aforementioned operation events, the right-click menu event is bound. To add functions such as cancel splicing, cancel splitting, and unbinding, and to quickly execute some operations, some operations are bound to the right-hand menu. Since the right-click menu needs to follow the mouse movement, using an HTML DOM element is more suitable. Cancel splicing restores spliced ​​screens to multiple unspliced ​​screens; cancel splitting restores split screens to single, unspliced ​​screens; and unbinding removes the association between the DOM element and the screen. Because the HTML Canvas does not adapt to window changes, binding the window size change event requires listening to the window size change event. When the window size changes, the relevant screen coordinates, width, and height need to be recalculated, and the canvas redrawn.

[0108] The component encapsulation module is used to encapsulate the split-screen container component and store the encapsulated split-screen object in the database. The database is used to store the split-screen object.

[0109] In practice, Axios is used to transmit the completed split-screen objects to the backend and save them to the database. Axios is a Promise-based HTTP library that supports the Promise API and can intercept and transform request and response data.

[0110] The front-end interface is used to load the split-screen object and dynamically split and merge screens based on the split-screen container component. When the split-screen container component is loaded, the time period can be directly drawn onto the split canvas by reading the saved data.

[0111] The system dynamically splits and merges screens using the method disclosed in Example 1.

[0112] The present invention has been shown and described in detail above with reference to the accompanying drawings and preferred embodiments. However, the present invention is not limited to these disclosed embodiments. Based on the above embodiments, those skilled in the art will know that more embodiments of the present invention can be obtained by combining the code review methods in the different embodiments. These embodiments are also within the protection scope of the present invention.

Claims

1. A method for implementing split-screen and merging screens based on Vue + Canvas, characterized in that... Includes the following steps: A split-screen container component is built based on Vue and Canvas. The split-screen container component is used to implement two-way data binding between the memory of the front-end interface and the front-end interface based on Vue, and to provide a canvas for drawing based on Canvas, and to call Canvas for rendering. Initialize the configuration of the split-screen container component, including initializing the configuration of the split screen, canvas and history. The configuration information of the split screen is used to describe the split-screen operation. The canvas is an Html Canvas-based canvas used to draw and call Html Canvas for rendering. The history is used to record historical operations. Define the operation items of the split-screen container component and set the implementation logic of the operation items. The operation items are the functional services provided by the split-screen container component, including split-screen selection operation, split-screen split operation, split-screen splicing operation, drag and drop binding element, history rollback and reset. Bind the operation events of the split-screen container component and set the implementation logic of the operation events, including the right-click menu event and the window size change event; The split-screen container component is encapsulated, and the encapsulated split-screen object is stored in the database. Load the split-screen object and dynamically split and merge the screens based on the split-screen container component.

2. The method for implementing split-screen and merging screens based on Vue+Canvas according to claim 1, characterized in that... The configuration of the split screen includes a two-dimensional array of split screens, a reference value for container width, a reference value for container height, an array of supported split screen segments, a list of supported split screen levels, and a selected split screen array. The canvas configuration includes canvas object, canvas width, canvas height, canvas X-axis coordinate, canvas Y-axis coordinate, border width, and whether to display window number; The configuration of the history records includes the history record array, the maximum number of records to retain, and the history record name conversion configuration.

3. The method for implementing split-screen and merging screens based on Vue+Canvas according to claim 1, characterized in that... The split-screen selection is based on Html Canvas for drawing and calls the Html Canvas API for rendering, including single-selection split-screen and multi-selection split-screen; The operation logic of the single-selection split screen includes listening for mouse click events, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the click coordinates, updating the color of the selection box on the canvas and rendering it; The operation logic of the multi-select split screen includes listening to the mouse MouseMove event, calculating the coordinates of the mouse drag rectangle, drawing the mouse drag rectangle on the canvas, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the overlap of the selection box, updating the color of the selection box on the canvas and rendering it. The operation logic for split-screen is as follows: after selecting a single split screen, the split operation is performed. By selecting a specified number of split screens, the (X,Y) coordinates and width and height of each split screen are calculated based on the selected split screens and the number of split screens. The canvas is then redrawn and the data objects are updated. When multiple split screens are selected, the split operation is not supported. The operation logic of multi-screen splicing is as follows: after selecting multiple split screens, the splicing operation is performed. By clicking the splicing button, the (X,Y) coordinates and width and height of the spliced ​​split screen are calculated according to whether the selected split screen is a rectangle. The canvas is then redrawn and the data object is updated. When a single split screen is selected, splicing is not supported; The drag-and-drop binding element supports dragging elements onto the split screen, including dragging monitoring points from the tree to the split screen. The split screen container will listen for mouse drag events. When the mouse is released, it will obtain the (X,Y) coordinates and width and height of the specified split screen, get the split screen number, bind the dragged element object to the split screen object in the split screen array, and redraw the canvas. The history rollback supports rewinding history. The operation logic is as follows: the split-screen array and canvas object after each operation are backed up to the history array through the history array. When rollback is selected, the canvas is redrawn according to the split-screen array and canvas object. The specific operation includes: when the operator clicks the cancel button, the previous operation will be canceled; When an operator clicks on the history and selects a specific history record, the process will revert to the canvas state of that specific history record. The reset is used to reset the $data storage based on Vue to its initial state. The operation logic is to reset the split-screen array and canvas object to their initial state.

4. The method for implementing split-screen and merging screens based on Vue+Canvas according to claim 1, characterized in that... Based on the HtmlDom element, right-click menu events are bound to the element, and operation events such as cancel splicing, cancel splitting, and unbinding are added. The cancellation of splicing means restoring the spliced ​​split screen to multiple unspliced ​​split screens; The cancellation of the split is to restore the split screen to an unsplit single screen; The unbinding refers to removing the association between the DOM element and the split screen; The bound window size change event is to listen for window size change events. When the window size changes, the relevant split screen coordinates, width and height are recalculated, and the canvas is drawn.

5. The method for implementing split-screen and merging screens based on Vue+Canvas according to claim 1, characterized in that... The encapsulated split-screen objects are stored in the database using Axios.

6. A split-screen and merging system based on Vue+Canvas, characterized in that... The system is used for dynamically splitting and merging screens using the Vue+Canvas-based split-screen and merging method as described in any one of claims 1-5, the system comprising: The component building module is used to build split-screen container components based on Vue and Canvas. The split-screen container components are used to implement two-way data binding between the memory of the front-end interface and the front-end interface based on Vue, and to provide a canvas for drawing based on Canvas, and to call Canvas for rendering. The component initialization module is used to initialize the configuration of the split-screen container component, including initializing the configuration of the split screen, canvas and history. The configuration information of the split screen is used to describe the split-screen operation. The canvas is an HTML Canvas-based canvas used to draw and call HTML Canvas for rendering. The history is used to record historical operations. The component function configuration module is used to define the operation items of the split-screen container component and set the implementation logic of the operation items. The operation items are the functional services provided by the split-screen container component, including split-screen selection operation, split-screen split operation, split-screen splicing operation, drag and drop binding elements, history rollback and reset. A component operation binding module is used to bind operation events of the split-screen container component and set the implementation logic of the operation events. The operation events include mouse right-click menu events and window size change events. A component encapsulation module is used to encapsulate the split-screen container component and store the encapsulated split-screen object in a database. A database, wherein the database is used to store the split-screen objects; The front-end interface is used to load the split-screen object and dynamically split and merge screens based on the split-screen container component.

7. The split-screen and merging-screen implementation system based on Vue+Canvas according to claim 6, characterized in that... The configuration of the split screen includes a two-dimensional array of split screens, a reference value for container width, a reference value for container height, an array of supported split screen segments, a list of supported split screen levels, and a selected split screen array. The canvas configuration includes canvas object, canvas width, canvas height, canvas X-axis coordinate, canvas Y-axis coordinate, border width, and whether to display window number; The configuration of the history records includes the history record array, the maximum number of records to retain, and the history record name conversion configuration.

8. The split-screen and merging-screen implementation system based on Vue+Canvas according to claim 6, characterized in that... The split-screen selection is based on Html Canvas for drawing and calls the Html Canvas API for rendering, including single-selection split-screen and multi-selection split-screen; The operation logic of the single-selection split screen includes listening for mouse click events, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the click coordinates, updating the color of the selection box on the canvas and rendering it; The operation logic of the multi-select split screen includes listening to the mouse MouseMove event, calculating the coordinates of the mouse drag rectangle, drawing the mouse drag rectangle on the canvas, calculating the selected split screen based on the (X,Y) coordinates of each split screen and the overlap of the selection box, updating the color of the selection box on the canvas and rendering it. The operation logic for split-screen is as follows: after selecting a single split screen, the split operation is performed. By selecting a specified number of split screens, the (X,Y) coordinates and width and height of each split screen are calculated based on the selected split screens and the number of split screens. The canvas is then redrawn and the data objects are updated. When multiple split screens are selected, the split operation is not supported. The operation logic of multi-screen splicing is as follows: after selecting multiple split screens, the splicing operation is performed. By clicking the splicing button, the (X,Y) coordinates and width and height of the spliced ​​split screen are calculated according to whether the selected split screen is a rectangle. The canvas is then redrawn and the data object is updated. When a single split screen is selected, splicing is not supported; The drag-and-drop binding element supports dragging elements onto the split screen, including dragging monitoring points from the tree to the split screen. The split screen container will listen for mouse drag events. When the mouse is released, it will obtain the (X,Y) coordinates and width and height of the specified split screen, get the split screen number, bind the dragged element object to the split screen object in the split screen array, and redraw the canvas. The history rollback supports rewinding history. The operation logic is as follows: the split-screen array and canvas object after each operation are backed up to the history array through the history array. When rollback is selected, the canvas is redrawn according to the split-screen array and canvas object. The specific operation includes: when the operator clicks the cancel button, the previous operation will be canceled; When an operator clicks on the history and selects a specific history record, the process will revert to the canvas state of that specific history record. The reset is used to reset the $data storage based on Vue to its initial state. The operation logic is to reset the split-screen array and canvas object to their initial state.

9. The split-screen and merging-screen implementation system based on Vue+Canvas according to claim 6, characterized in that... The component operation binding module is used to bind mouse right-click menu events based on HTML Dom elements, and add operation events such as cancel splicing, cancel splitting, and cancel binding. The cancellation of splicing means restoring the spliced ​​split screen to multiple unspliced ​​split screens; The cancellation of the split is to restore the split screen to an unsplit single screen; The unbinding refers to removing the association between the DOM element and the split screen; The bound window size change event is to listen for window size change events. When the window size changes, the relevant split screen coordinates, width and height are recalculated, and the canvas is drawn.

10. The split-screen and merging-screen implementation system based on Vue+Canvas according to claim 6, characterized in that... The component encapsulation module is used to store the encapsulated split-screen objects to the database via Axios.

Images