[發(fā)明專利]一種基于canvas繪制多功能時(shí)間模板的方法及系統(tǒng)

在審

• 申請(qǐng)?zhí)枺?/td>: 202010616557.3
• 申請(qǐng)日: 2020-07-01
• 公開(kāi)（公告）號(hào): CN111753241A
• 公開(kāi)（公告）日: 2020-10-09
• 發(fā)明（設(shè)計(jì)）人: 林棟;高美容;張亮;尹萍;安曉博
• 申請(qǐng)（專利權(quán)）人: 浪潮云信息技術(shù)股份公司
• 主分類號(hào): G06F16/958
• 分類號(hào): G06F16/958
• 代理公司: 濟(jì)南信達(dá)專利事務(wù)所有限公司 37100
• 代理人: 姜明

1.一種基于canvas繪制多功能時(shí)間模板的方法，其特征是所述的方法具體步驟如下：

S1利用canvas初始化時(shí)間模板；

S2通過(guò)拖拽選擇時(shí)間段；

S3通過(guò)點(diǎn)擊時(shí)間段進(jìn)一步精準(zhǔn)時(shí)間；

S4對(duì)時(shí)間段同時(shí)進(jìn)行合并與復(fù)制；

S5利用數(shù)據(jù)交互對(duì)時(shí)間模板進(jìn)行保存。

2.根據(jù)權(quán)利要求1所述的基于canvas繪制多功能時(shí)間模板的方法，其特征是所述S2通過(guò)拖拽選擇時(shí)間段的具體步驟包括：

S201通過(guò)監(jiān)聽(tīng)canvas的mousedown和mousemove事件來(lái)實(shí)現(xiàn)拖拽選擇時(shí)間段；

S202通過(guò)監(jiān)聽(tīng)click事件判斷鼠標(biāo)落點(diǎn)；

S203根據(jù)保存位置的數(shù)組和時(shí)間與位置的關(guān)系，將時(shí)間段通過(guò)fillRect方法進(jìn)行復(fù)制。

3.根據(jù)權(quán)利要求2所述的基于canvas繪制多功能時(shí)間模板的方法，其特征是所述S4對(duì)時(shí)間段同時(shí)進(jìn)行合并與復(fù)制中對(duì)時(shí)間段合并的具體步驟包括：

S401通過(guò)監(jiān)聽(tīng)canvas的mousedown事件先判斷是否選中時(shí)間段；

S402利用canvas的mousemove事件將選中的時(shí)間段進(jìn)行移動(dòng)；

S403利用clearRect方法將同一時(shí)間軸內(nèi)移動(dòng)的時(shí)間位置相同的時(shí)間段繼續(xù)清除；

S404利用fillRect方法將所清除時(shí)間段的重合位置繪制合并后的時(shí)間段。

4.根據(jù)權(quán)利要求1-3任一所述的基于canvas繪制多功能時(shí)間模板的方法，其特征是所述S5通過(guò)Vue插件利用數(shù)據(jù)交互對(duì)時(shí)間模板進(jìn)行保存。

5.一種基于canvas繪制多功能時(shí)間模板的系統(tǒng)，其特征是所述的系統(tǒng)具體包括初始化模塊、選擇模塊、精準(zhǔn)模塊、編輯模塊和保存模塊：

初始化模塊：利用canvas初始化時(shí)間模板；

選擇模塊：通過(guò)拖拽選擇時(shí)間段；

精準(zhǔn)模塊：通過(guò)點(diǎn)擊時(shí)間段進(jìn)一步精準(zhǔn)時(shí)間；

編輯模塊：對(duì)時(shí)間段同時(shí)進(jìn)行合并與復(fù)制；

保存模塊：利用數(shù)據(jù)交互對(duì)時(shí)間模板進(jìn)行保存。

6.根據(jù)權(quán)利要求5所述的基于canvas繪制多功能時(shí)間模板的系統(tǒng)，其特征是所述選擇模塊具體包括拖拽模塊、判斷模塊和選擇復(fù)制模塊：

拖拽模塊：通過(guò)監(jiān)聽(tīng)canvas的mousedown和mousemove事件來(lái)實(shí)現(xiàn)拖拽選擇時(shí)間段；

判斷模塊：通過(guò)監(jiān)聽(tīng)click事件判斷鼠標(biāo)落點(diǎn)；

選擇復(fù)制模塊：根據(jù)保存位置的數(shù)組和時(shí)間與位置的關(guān)系，將時(shí)間段通過(guò)fillRect方法進(jìn)行復(fù)制。

7.根據(jù)權(quán)利要求6所述的基于canvas繪制多功能時(shí)間模板的系統(tǒng)，其特征是所述編輯模塊具體包括監(jiān)聽(tīng)模塊、移動(dòng)模塊、清除模塊和合并模塊：

監(jiān)聽(tīng)模塊：通過(guò)監(jiān)聽(tīng)canvas的mousedown事件先判斷是否選中時(shí)間段；

移動(dòng)模塊：利用canvas的mousemove事件將選中的時(shí)間段進(jìn)行移動(dòng)；

清除模塊：利用clearRect方法將同一時(shí)間軸內(nèi)移動(dòng)的時(shí)間位置相同的時(shí)間段繼續(xù)清除；

合并模塊：利用fillRect方法將所清除時(shí)間段的重合位置繪制合并后的時(shí)間段。

8.根據(jù)權(quán)利要求5-7任一所述的基于canvas繪制多功能時(shí)間模板的系統(tǒng)，其特征是所述保存模塊通過(guò)Vue插件利用數(shù)據(jù)交互對(duì)時(shí)間模板進(jìn)行保存。