[发明专利]一种基于canvas绘制多功能时间模板的方法及系统

说明书

本发明公开了一种基于canvas绘制多功能时间模板的方法及系统，属于端工程化领域；所述的方法具体步骤如下：S1利用canvas初始化时间模板；S2通过拖拽选择时间段；S3通过点击时间段进一步精准时间；S4对时间段同时进行合并与复制；S5利用数据交互对时间模板进行保存；本发明通过使用HTML5 canvas相关技术来绘制可以跨平台、跨浏览器、无插件的时间模板，在提高时间模板渲染效率的同时，方便用户操作，提高前端界面操作友好度。

技术领域

本发明公开一种基于canvas绘制多功能时间模板的方法及系统，涉及前端工程化技术领域。

背景技术

所谓时间模板，就是在一定的时间周期(如一年/一月/一周)内，选择一个或多个时间段并保存，以此来保证某个任务或者事件在既定的时间段执行或者发生。时间模板按照周期可以分为年模板、月模板和周模板等：比如年模板可以以月为时间轴，一年分12为12个时间轴，每个时间轴的最小刻度为天；周模板可以以天为时间轴，每周分为7个时间轴，每个时间轴的最小刻度可以为小时，也可以为秒，本发明支持最小刻度精确到秒。

目前实现的时间模板主要采用两种方案，一种是基于html原生dom的方式，一种是基于flash的方式。借助于GPU加速，canvas的渲染能力远远超过dom方式；使用flash，其缺点是主流的浏览器都不再更新并逐渐取消对其支持，而HTML5则是WEB端开发的主流和未来的趋势。

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

发明内容

本发明针对现有技术的问题，提供一种基于canvas绘制多功能时间模板的方法及系统，所采用的技术方案为：

一种基于canvas绘制多功能时间模板的方法，所述的方法具体步骤如下：

S1利用canvas初始化时间模板；

S2通过拖拽选择时间段；

S3通过点击时间段进一步精准时间；

S4对时间段同时进行合并与复制；

S5利用数据交互对时间模板进行保存。

所述S2通过拖拽选择时间段的具体步骤包括：

S201通过监听canvas的mousedown和mousemove事件来实现拖拽选择时间段；

S202通过监听click事件判断鼠标落点；

S203根据保存位置的数组和时间与位置的关系，将时间段通过fillRect方法进行复制。

所述S4对时间段同时进行合并与复制中对时间段合并的具体步骤包括：

S401通过监听canvas的mousedown事件先判断是否选中时间段；

S402利用canvas的mousemove事件将选中的时间段进行移动；

S403利用clearRect方法将同一时间轴内移动的时间位置相同的时间段继续清除；

S404利用fillRect方法将所清除时间段的重合位置绘制合并后的时间段。

所述S5通过Vue插件利用数据交互对时间模板进行保存。

一种基于canvas绘制多功能时间模板的系统，所述的系统具体包括初始化模块、选择模块、精准模块、编辑模块和保存模块：

初始化模块：利用canvas初始化时间模板；