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

权利要求书

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

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

S2通过拖拽选择时间段；

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

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

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

2.根据权利要求1所述的基于canvas绘制多功能时间模板的方法，其特征是所述S2通过拖拽选择时间段的具体步骤包括：

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

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

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

3.根据权利要求2所述的基于canvas绘制多功能时间模板的方法，其特征是所述S4对时间段同时进行合并与复制中对时间段合并的具体步骤包括：

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

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

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

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

4.根据权利要求1-3任一所述的基于canvas绘制多功能时间模板的方法，其特征是所述S5通过Vue插件利用数据交互对时间模板进行保存。

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

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

选择模块：通过拖拽选择时间段；

精准模块：通过点击时间段进一步精准时间；

编辑模块：对时间段同时进行合并与复制；

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

6.根据权利要求5所述的基于canvas绘制多功能时间模板的系统，其特征是所述选择模块具体包括拖拽模块、判断模块和选择复制模块：

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

判断模块：通过监听click事件判断鼠标落点；

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

7.根据权利要求6所述的基于canvas绘制多功能时间模板的系统，其特征是所述编辑模块具体包括监听模块、移动模块、清除模块和合并模块：

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

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

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

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

8.根据权利要求5-7任一所述的基于canvas绘制多功能时间模板的系统，其特征是所述保存模块通过Vue插件利用数据交互对时间模板进行保存。