CN115576547A - 基于Vue和Canvas的分屏合屏实现方法及系统 - Google Patents

Abstract

本发明公开了基于Vue和Canvas的分屏合屏实现方法及系统，属于前端处理技术领域，要解决的技术问题为如何简单、扩展性的实现动态分屏合屏。包括如下步骤：基于Vue和Canvas构建分屏容器组件；初始化所述分屏容器组件的配置；定义分屏容器组件的操作项并设定操作项的实现逻辑，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；绑定分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件；对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。

Description

基于Vue和Canvas的分屏合屏实现方法及系统

技术领域

本发明涉及前端处理技术领域，具体地说是基于Vue和Canvas的分屏合屏实现方法及系统。

背景技术

所谓分屏合屏，就是将屏幕、电视墙等切割成4、9、16、25、36等数量的分屏，该场景广泛应用于视频监控、电视墙、视频会议等场景。一般业务场景下，计算机用户都是使用单一的分屏屏来观察显示的信息，可以满足一般业务需求。但是在一些特殊的场景下，例如需要对现场进行大范围的监控、电视墙、或应用电子地图技术等的情况下，需要全景显示时，用户就不得不要求足够多的分屏，以便对场景的细节看的更清楚、操作起来更方便。

Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，相对于旧式前端框架，体积小、更高的运行效率、基于虚拟DOM、双向数据绑定；因此更多的让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上。

HTML5 canvas技术是用来专门绘制图形的，canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘，并且绘制图形的方法是使用JavaScript调用canvas的一些API函数进行绘制的。

目前实现的分屏合屏主要采用两种方式，一种是基于html原生dom的方式，一种是基于JS+Canvas的方式。上述两种方式相对功能单一，如何借助于Vue框架双向数据绑定特性、以及canvas远远超过dom方式的渲染能力，简单、扩展性的实现动态分屏合屏，是需要解决的技术问题。

发明内容

本发明的技术任务是针对以上不足，提供基于Vue和Canvas的分屏合屏实现方法及系统，来解决如何简单、扩展性的实现动态分屏合屏的技术问题。

第一方面，本发明的一种基于Vue+Canvas的分屏合屏实现方法，包括如下步骤：

基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面的内存与前端界面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；

初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；

定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；

绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件；

对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；

加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。

作为优选，所述分屏的配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组；

所述画布的配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号；

所述历史记录的配置包括历史记录数组、最大保留数量、历史记录名称转换配置。

作为优选，所述分屏选为基于Html Canvas进行绘制，并调用Html Canvas的API进行渲染，包括单选分屏和多选分屏；

所述单选分屏的操作逻辑包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染；

所述多选分屏的操作逻辑包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染；

所述分屏分割的操作逻辑为：选中单个分屏后，执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操；

所述多屏拼接的操作逻辑为：选中多个分屏后，执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作；

所述拖拽绑定元素支持往分屏上拖到元素，包括从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布；

所述历史退回支持回退历史，操作逻辑为：通过历史记录数组，将每次操作后的分屏数组、画布对象备份到历史记录数组，当选择回退时，根据分屏数组、画布对象重新绘制画布；具体操作包括：当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；

所述重置用于基于Vue的$data存储重置为初始状态，操作逻辑为将分屏数组、画布对象重置为初始时状态。

作为优选，基于Html Dom元素绑定鼠标右键菜单事件，增加取消拼接、取消分割以及取消绑定的操作事件；

所述取消拼接为将拼接分屏还原为未拼接的多个分屏；

所述取消分割为将已分割的分屏还原为未分割的单个屏；

所述取消绑定为将Dom元素和分屏的关联关系去除；

所述绑定窗口大小变化事件为监听窗口大小变化事件，当窗口大小变化时，重新进行相关分屏坐标、宽高的计算，并绘制画布。

作为优选，通过Axios将封装得到的分屏对象存储至数据库。

第二方面，本发明的一种基于Vue+Canvas的分屏合屏实现系统，用于通过如第一方面任一项所述的基于Vue+Canvas的分屏合屏实现方法动态分屏合屏，所述系统包括：

组件构建模块，所述组件构建模块用于基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面内存与前端界面页面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；

组件初始化模块，所述组件初始化模块用于初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；

组件功能配置模块，所述组件功能配置模块用于定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；

组件操作绑定模块，所述组件操作绑定模块用于绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件；

组件封装模块，所述组件封装模块用于对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；

数据库，所述数据库用于存储所述分屏对象；

前端界面，所述前端界面用于加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。

作为优选，所述分屏的配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组；

所述画布的配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号；

所述历史记录的配置包括历史记录数组、最大保留数量、历史记录名称转换配置。

作为优选，所述分屏选中为基于Html Canvas进行绘制，并调用Html Canvas的API进行渲染，包括单选分屏和多选分屏；

所述单选分屏的操作逻辑包括包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染；

所述多选分屏的操作逻辑包括包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染；

所述分屏分割的操作逻辑为：选中单个分屏后，执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操；

所述多屏拼接的操作逻辑为：选中多个分屏后，执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作；

所述拖拽绑定元素支持往分屏上拖到元素，包括从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布；

所述历史退回支持回退历史，操作逻辑为：通过历史记录数组，将每次操作后的分屏数组、画布对象备份到历史记录数组，当选择回退时，根据分屏数组、画布对象重新绘制画布；具体操作包括：当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；

所述重置用于基于Vue的$data存储重置为初始状态，操作逻辑为将分屏数组、画布对象重置为初始时状态。

作为优选，所述组件操作绑定模块用于基于Html Dom元素绑定鼠标右键菜单事件，增加取消拼接、取消分割以及取消绑定的操作事件；

所述取消拼接为将拼接分屏还原为未拼接的多个分屏；

所述取消分割为将已分割的分屏还原为未分割的单个屏；

所述取消绑定为将Dom元素和分屏的关联关系去除；

所述绑定窗口大小变化事件为监听窗口大小变化事件，当窗口大小变化时，重新进行相关分屏坐标、宽高的计算，并绘制画布。

作为优选，所述组件封装模块用于通过Axios将封装得到的分屏对象存储至数据库。

本发明的基于Vue和Canvas的分屏合屏实现方法及系统具有以下优点：

1、借助于Vue框架双向数据绑定特性，以及canvas远远超过dom方式的渲染能力，简化了大量业务无关的代码，代码逻辑更简单清晰，有利于编码人员开发工作，该实现方案代码逻辑更简单清晰、扩展性强；

2、相对于简单的分成4、9、16、25、36等分屏，支持不同大小的分屏任意切割、拼接操作，同时，支持历史回退、重置等操作；

3、该实现方法可支持适应于多种业务场景，具有良好的通用性和可拓展性，适用场景更广，用户操作起来更方便；

4、使用Html Canvas的API，直接进行像素级渲染，渲染速度快。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

下面结合附图对本发明进一步说明。

图1为实施例1基于Vue和Canvas的分屏合屏实现方法的流程框图；

图2为实施例1基于Vue和Canvas的分屏合屏实现方法中分屏容器组件的整体架构框图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定，在不冲突的情况下，本发明实施例以及实施例中的技术特征可以相互结合。

本发明实施例提供基于Vue和Canvas的分屏合屏实现方法及系统，用于解决如何简单、扩展性的实现动态分屏合屏的技术问题。

实施例1：

本发明一种基于Vue+Canvas的分屏合屏实现方法，包括如下步骤：

S100、基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面的内存与前端界面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；

S200、初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；

S300、定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；

S400、绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件；

S500、对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；

S600、加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。

步骤S100借助于Vue框架双向数据绑定特性，以及canvas远远超过dom方式的渲染能力构建容器分屏组件。Vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。在传统的单项绑定，代码量大，数据的流转过程长，出现很多类似的冗余代码，同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。因此，整合vue的双向数据绑定特性，会简化大量业务无关的代码，代码逻辑更简单清晰。通过使用HTML5 canvas、Vue相关技术来实现可以跨平台、跨前端界面、高复用性的分屏合屏方案，在提高DOM元素渲染效率的同时，代码逻辑清晰，用户操作方便，提高前端界面操作友好度。

步骤S200始化分屏、画布、历史记录配置，作为具体实施，分屏相关配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组等。画布相关配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号等。历史记录配置包括历史记录数组、最大保留数量、历史记录名称转换配置等。

步骤S300配置该组件的相关操作(即功能)，对于每个操作具体如下：

分屏选中，本操作支持单选分屏和多选分屏，由于采用Html Canvas进行绘制，各种操作均需要编码人员自己在画布上计算绘制。

单选分屏包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染。

分屏多选包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染。

在画布渲染绘制过程中，由于采用Vue双向数据绑定特性，每次计算完成后，调用编写好的重新绘制画布即可，减少冗余代码。

分屏分割，本操作支持在选中单个分屏后，可执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操作。

分屏拼接，本操作支持在选中多个分屏后，可执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作。

拖拽绑定元素，本操作支持往分屏上拖到元素，例如从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布。

历史回退，本操作支持回退历史，当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；主要实现是通过历史记录数组，将每次操作后，分屏数组、画布对象备份到历史记录数组，当回退选，根据分屏数组、画布对象重新绘制画布。

重置，本操作支持重置为初始状态，主要实现是将分屏数组、画布对象重置为初始时状态即可，采用Vue的$data存储进行重置，不需要编码人员自己备份相关初始化对象，简单快捷。

绑定操作事件包括鼠标右键菜单事件和窗口大小变化事件。绑定鼠标右键菜单事件，为增加取消拼接，取消分割，取消绑定，为了快速执行部分操作，将部分操作绑定到了右侧菜单上，并且由于右键菜单要跟随鼠标移动，采用Html Dom元素的方式更合适；取消拼接会将拼接分屏还原为未拼接的多个分屏，取消分割会将已分割的分屏还原为未分割的单个屏，取消绑定会将Dom元素和分屏的关联关系去除。由于Html Canvas画布不会自适应窗口变化，绑定窗口大小变化事件需要监听窗口大小变化事件，当窗口大小变化时，需要重新进行相关分屏坐标、宽高的计算，并绘制画布。

Axios是一个基于Promise的HTTP库，具有支持Promise API、拦截和转换请求与响应数据等特性，因而封装后的组件可以通过Axios将已操作完成的分屏对象传到后台并保存到数据库中，当加载分屏容器组件时可直接通过读取保存的数据将时间段绘制到分画布。

本实施例实现方法通过使用HTML5 canvas、Vue相关技术来实现可以跨平台、跨浏览器、高复用性的分屏合屏方案，在提高DOM元素渲染效率的同时，代码逻辑清晰，用户操作方便，提高前端界面操作友好度。

实施例2：

本发明一种基于Vue+Canvas的分屏合屏实现系统，包括组件构建模块、组件初始化模块、组件功能配置模块、组件操作绑定模块、组件封装模块、数据库以及前端界面。

组件构建模块用于基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面的内存与前端界面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染。

该模块借助于Vue框架双向数据绑定特性，以及canvas远远超过dom方式的渲染能力构建容器分屏组件。Vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。在传统的单项绑定，代码量大，数据的流转过程长，出现很多类似的冗余代码，同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。因此，整合vue的双向数据绑定特性，会简化大量业务无关的代码，代码逻辑更简单清晰。通过使用HTML5 canvas、Vue相关技术来实现可以跨平台、跨前端界面、高复用性的分屏合屏方案，在提高DOM元素渲染效率的同时，代码逻辑清晰，用户操作方便，提高前端界面操作友好度。

组件初始化模块用于初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作。

作为具体实施，分屏相关配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组等。画布相关配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号等。历史记录配置包括历史记录数组、最大保留数量、历史记录名称转换配置等。

组件功能配置模块用于定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置。对于各个操作的实现逻辑，具体如下：

分屏选中，本操作支持单选分屏和多选分屏，由于采用Html Canvas进行绘制，各种操作均需要编码人员自己在画布上计算绘制；

单选分屏包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染；

分屏多选包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染；

在画布渲染绘制过程中，由于采用Vue双向数据绑定特性，每次计算完成后，调用编写好的重新绘制画布即可，减少冗余代码；

分屏分割，本操作支持在选中单个分屏后，可执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操作；

分屏拼接，本操作支持在选中多个分屏后，可执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作；

拖拽绑定元素，本操作支持往分屏上拖到元素，例如从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布；

历史回退，本操作支持回退历史，当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；主要实现是通过历史记录数组，将每次操作后，分屏数组、画布对象备份到历史记录数组，当回退选，根据分屏数组、画布对象重新绘制画布；

重置，本操作支持重置为初始状态，主要实现是将分屏数组、画布对象重置为初始时状态即可，采用Vue的$data存储进行重置，不需要编码人员自己备份相关初始化对象，简单快捷。

组件操作绑定模块用于绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件。

作为上述操作事件的具体实施，绑定鼠标右键菜单事件，为增加取消拼接，取消分割，取消绑定，为了快速执行部分操作，将部分操作绑定到了右侧菜单上，并且由于右键菜单要跟随鼠标移动，采用Html Dom元素的方式更合适；取消拼接会将拼接分屏还原为未拼接的多个分屏，取消分割会将已分割的分屏还原为未分割的单个屏，取消绑定会将Dom元素和分屏的关联关系去除。由于Html Canvas画布不会自适应窗口变化，绑定窗口大小变化事件需要监听窗口大小变化事件，当窗口大小变化时，需要重新进行相关分屏坐标、宽高的计算，并绘制画布。

组件封装模块用于对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库。数据库用于存储所述分屏对象。

作为具体实施，通过Axios将已操作完成的分屏对象传到后台并保存到数据库中。Axios是一个基于Promise的HTTP库，具有支持Promise API、拦截和转换请求与响应数据等特性。

前端界面用于加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。当加载分屏容器组件时可直接通过读取保存的数据将时间段绘制到分画布。

该系统通过实施例1公开的方法动态分屏合屏。

上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基与上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。

Claims (10)

1.一种基于Vue+Canvas的分屏合屏实现方法，其特征在于包括如下步骤：

基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面的内存与前端界面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；

初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；

定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；

绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件；

对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；

加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。

2.根据权利要求1所述的基于Vue+Canvas的分屏合屏实现方法，其特征在于所述分屏的配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组；

所述画布的配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号；

所述历史记录的配置包括历史记录数组、最大保留数量、历史记录名称转换配置。

3.根据权利要求1所述的基于Vue+Canvas的分屏合屏实现方法，其特征在于所述分屏选为基于Html Canvas进行绘制，并调用Html Canvas的API进行渲染，包括单选分屏和多选分屏；

所述单选分屏的操作逻辑包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染；

所述多选分屏的操作逻辑包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染；

所述分屏分割的操作逻辑为：选中单个分屏后，执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操；

所述多屏拼接的操作逻辑为：选中多个分屏后，执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作；

所述拖拽绑定元素支持往分屏上拖到元素，包括从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布；

所述历史退回支持回退历史，操作逻辑为：通过历史记录数组，将每次操作后的分屏数组、画布对象备份到历史记录数组，当选择回退时，根据分屏数组、画布对象重新绘制画布；具体操作包括：当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；

所述重置用于基于Vue的$data存储重置为初始状态，操作逻辑为将分屏数组、画布对象重置为初始时状态。

4.根据权利要求1所述的基于Vue+Canvas的分屏合屏实现方法，其特征在于基于HtmlDom元素绑定鼠标右键菜单事件，增加取消拼接、取消分割以及取消绑定的操作事件；

所述取消拼接为将拼接分屏还原为未拼接的多个分屏；

所述取消分割为将已分割的分屏还原为未分割的单个屏；

所述取消绑定为将Dom元素和分屏的关联关系去除；

所述绑定窗口大小变化事件为监听窗口大小变化事件，当窗口大小变化时，重新进行相关分屏坐标、宽高的计算，并绘制画布。

5.根据权利要求1所述的基于Vue+Canvas的分屏合屏实现方法，其特征在于通过Axios将封装得到的分屏对象存储至数据库。

6.一种基于Vue+Canvas的分屏合屏实现系统，其特征在于用于通过如权利要求1-5任一项所述的基于Vue+Canvas的分屏合屏实现方法动态分屏合屏，所述系统包括：

组件构建模块，所述组件构建模块用于基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面的内存与前端界面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；

组件初始化模块，所述组件初始化模块用于初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；

组件功能配置模块，所述组件功能配置模块用于定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；

组件操作绑定模块，所述组件操作绑定模块用于绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包括鼠标右键菜单事件和窗口大小变化事件；

组件封装模块，所述组件封装模块用于对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；

数据库，所述数据库用于存储所述分屏对象；

前端界面，所述前端界面用于加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。

7.根据权利要求6所述的基于Vue+Canvas的分屏合屏实现系统，其特征在于所述分屏的配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组；

所述画布的配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号；

所述历史记录的配置包括历史记录数组、最大保留数量、历史记录名称转换配置。

8.根据权利要求6所述的基于Vue+Canvas的分屏合屏实现系统，其特征在于所述分屏选中为基于Html Canvas进行绘制，并调用Html Canvas的API进行渲染，包括单选分屏和多选分屏；

所述单选分屏的操作逻辑包括包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染；

所述多选分屏的操作逻辑包括包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染；

所述分屏分割的操作逻辑为：选中单个分屏后，执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操；

所述多屏拼接的操作逻辑为：选中多个分屏后，执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作；

所述拖拽绑定元素支持往分屏上拖到元素，包括从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布；

所述历史退回支持回退历史，操作逻辑为：通过历史记录数组，将每次操作后的分屏数组、画布对象备份到历史记录数组，当选择回退时，根据分屏数组、画布对象重新绘制画布；具体操作包括：当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；

所述重置用于基于Vue的$data存储重置为初始状态，操作逻辑为将分屏数组、画布对象重置为初始时状态。

9.根据权利要求6所述的基于Vue+Canvas的分屏合屏实现系统，其特征在于所述组件操作绑定模块用于基于Html Dom元素绑定鼠标右键菜单事件，增加取消拼接、取消分割以及取消绑定的操作事件；

所述取消拼接为将拼接分屏还原为未拼接的多个分屏；

所述取消分割为将已分割的分屏还原为未分割的单个屏；

所述取消绑定为将Dom元素和分屏的关联关系去除；

所述绑定窗口大小变化事件为监听窗口大小变化事件，当窗口大小变化时，重新进行相关分屏坐标、宽高的计算，并绘制画布。

10.根据权利要求6所述的基于Vue+Canvas的分屏合屏实现系统，其特征在于所述组件封装模块用于通过Axios将封装得到的分屏对象存储至数据库。

Images