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

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

【技术实现步骤摘要】
基于Vue和Canvas的分屏合屏实现方法及系统


[0001]本专利技术涉及前端处理
，具体地说是基于Vue和Canvas的分屏合屏实现方法及系统。

技术介绍

[0002]所谓分屏合屏，就是将屏幕、电视墙等切割成4、9、16、25、36等数量的分屏，该场景广泛应用于视频监控、电视墙、视频会议等场景。一般业务场景下，计算机用户都是使用单一的分屏屏来观察显示的信息，可以满足一般业务需求。但是在一些特殊的场景下，例如需要对现场进行大范围的监控、电视墙、或应用电子地图技术等的情况下，需要全景显示时，用户就不得不要求足够多的分屏，以便对场景的细节看的更清楚、操作起来更方便。
[0003]Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，相对于旧式前端框架，体积小、更高的运行效率、基于虚拟DOM、双向数据绑定；因此更多的让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上。
[0004]HTML5 canvas技术是用来专门绘制图形的，canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘，并且绘制图形的方法是使用JavaScript调用canvas的一些API函数进行绘制的。
[0005]目前实现的分屏合屏主要采用两种方式，一种是基于html原生dom的方式，一种是基于JS+Canvas的方式。上述两种方式相对功能单一，如何借助于Vue框架双向数据绑定特性、以及canvas远远超过dom方式的渲染能力，简单、扩展性的实现动态分屏合屏，是需要解决的技术问题。

技术实现思路

[0006]本专利技术的技术任务是针对以上不足，提供基于Vue和Canvas的分屏合屏实现方法及系统，来解决如何简单、扩展性的实现动态分屏合屏的技术问题。
[0007]第一方面，本专利技术的一种基于Vue+Canvas的分屏合屏实现方法，包括如下步骤：
[0008]基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面的内存与前端界面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；
[0009]初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；
[0010]定义所述分屏容器组件的操作项并设定操作项的实现逻辑，所述操作项为所述分屏容器组件提供的功能服务，包括分屏选中操作、分屏分割操作、分屏拼接操作、拖拽绑定元素、历史回退以及重置；
[0011]绑定所述分屏容器组件的操作事件并设定操作事件的实现逻辑，所述操作事件包
括鼠标右键菜单事件和窗口大小变化事件；
[0012]对所述分屏容器组件进行封装，将封装得到的分屏对象存储至数据库；
[0013]加载所述分屏对象，基于所述分屏容器组件动态分屏合屏。
[0014]作为优选，所述分屏的配置包括分屏二维数组、容器宽度基准值、容器高度基准值、支持分屏分割数数组、支持分屏分割层级、选中分屏数组；
[0015]所述画布的配置包括画布对象、画布宽度、画布高度、画布X轴坐标、画布Y轴坐标、边框宽度、是否显示窗口序号；
[0016]所述历史记录的配置包括历史记录数组、最大保留数量、历史记录名称转换配置。
[0017]作为优选，所述分屏选为基于Html Canvas进行绘制，并调用Html Canvas的API进行渲染，包括单选分屏和多选分屏；
[0018]所述单选分屏的操作逻辑包括监听鼠标点击事件、根据各个分屏的(X,Y)坐标和点击坐标计算选中分屏、在画布上更新选中框的颜色并渲染；
[0019]所述多选分屏的操作逻辑包括监听鼠标MouseMove事件、计算鼠标拖拽矩形的坐标、在画布上绘制鼠标拖拽矩形框、根据各个分屏的(X,Y)坐标宽高和选中框的重合计算选中分屏、在画布上更新选中框的颜色并渲染；
[0020]所述分屏分割的操作逻辑为：选中单个分屏后，执行分割操作，通过选中指定的分割数，根据选中分屏和分割数，计算分割后每个分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中多个分屏时，不支持分割操；
[0021]所述多屏拼接的操作逻辑为：选中多个分屏后，执行拼接操作，通过点击拼接按钮，根据选中分屏是否为矩形，计算拼接后分屏的(X,Y)坐标和宽高，重新绘制画布，更新数据对象；选中单个分屏时，不支持拼接操作；
[0022]所述拖拽绑定元素支持往分屏上拖到元素，包括从树上拖拽监控点到分屏上，分屏容器会监听鼠标拖拽事件，当鼠标松开后，获取拖拽指定的分屏(X,Y)坐标和宽高，获得分屏序号，在分屏数组中将拖拽元素对象与分屏对象绑定，重新绘制画布；
[0023]所述历史退回支持回退历史，操作逻辑为：通过历史记录数组，将每次操作后的分屏数组、画布对象备份到历史记录数组，当选择回退时，根据分屏数组、画布对象重新绘制画布；具体操作包括：当操作人员点击撤销按钮，会撤销上一步操作；当操作人员点击历史记录，选中指定历史记录时，会撤销到指定历史记录的画布状态；
[0024]所述重置用于基于Vue的$data存储重置为初始状态，操作逻辑为将分屏数组、画布对象重置为初始时状态。
[0025]作为优选，基于Html Dom元素绑定鼠标右键菜单事件，增加取消拼接、取消分割以及取消绑定的操作事件；
[0026]所述取消拼接为将拼接分屏还原为未拼接的多个分屏；
[0027]所述取消分割为将已分割的分屏还原为未分割的单个屏；
[0028]所述取消绑定为将Dom元素和分屏的关联关系去除；
[0029]所述绑定窗口大小变化事件为监听窗口大小变化事件，当窗口大小变化时，重新进行相关分屏坐标、宽高的计算，并绘制画布。
[0030]作为优选，通过Axios将封装得到的分屏对象存储至数据库。
[0031]第二方面，本专利技术的一种基于Vue+Canvas的分屏合屏实现系统，用于通过如第一
方面任一项所述的基于Vue+Canvas的分屏合屏实现方法动态分屏合屏，所述系统包括：
[0032]组件构建模块，所述组件构建模块用于基于Vue和Canvas构建分屏容器组件，所述分屏容器组件用于基于Vue实现前端界面内存与前端界面页面之间数据的双向绑定，并用于基于Canvas提供用于绘制的画布，并调用Canvas进行渲染；
[0033]组件初始化模块，所述组件初始化模块用于初始化所述分屏容器组件的配置，包括初始化分屏、画布以及历史记录的配置，所述分屏的配置信息用于描述分屏操作，所述画布为基于Html Canvas的画布，用于绘制并调用Html Canvas进行渲染，所述历史记录用于记录历史操作；...

【技术保护点】

【技术特征摘要】
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的分屏合屏实现方法，其特征在于基于Html Dom元素绑定鼠标右键菜单事件，增加取消拼接、取消分割以及取消绑定的操作事件；所述取消拼接为将拼接分屏还原为未拼接的多个分屏；所述取消分割为将已分割的分屏还原为未分割的单个屏；所述取消绑定为将Dom元素和分屏的关联关系去除；所述绑定窗口大小变化事件为监听窗口大小变化事件，当窗口大小变化时，重新进行相关分屏坐标、宽高的计算，并绘制画布。5.根据权利要求1所述的基于Vue+Canvas的分屏合屏实现方法，其特征在于通过Axios将封装得到的分屏对象存储至数据库。6.一种基于Vue+Canvas的分屏合屏实现系统，其特征在于用于通过如权利要求1
‑
5任一项所述的基于Vue+Canvas的分屏合屏实现方法动态分屏合屏，所述系统包括：组件构建模块，所述组件构建...

【专利技术属性】
技术研发人员：朱继学，高美容，安晓博，林栋，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：