[發明專利]一種基于canvas繪制和瀏覽器拖動事件的信號線繪制方法

在審

• 申請號: 202211637490.7
• 申請日: 2022-12-16
• 公開（公告）號: CN115964773A
• 公開（公告）日: 2023-04-14
• 發明（設計）人: 應勇杰;黃燁明
• 申請（專利權）人: 浙江迪捷軟件科技有限公司
• 主分類號: G06F30/12
• 分類號: G06F30/12;G06F3/0481;G06T11/20
• 代理公司: 北京天江律師事務所 11537
• 代理人: 何志國

1.一種基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：具體步驟如下：

1)繪制一條初始信號線；

2)圖像繪制；

3)拖動畫布上的元素；

4)數據校驗。

2.根據權利要求1所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：所述步驟1的具體過程為：

通過設定橫向t軸開始值與結束值，限定繪制區域的橫向范圍：在橫軸t等于開始值與結束值，縱軸y等于0處通過瀏覽器canvas工具的arc函數分別繪制兩個信號點，并將位于邊界的它們稱為邊界點；

在每兩個信號點之間，使用瀏覽器canvas工具的lineTo函數繪制一條信號線，連接兩邊界點。

3.根據權利要求1所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：所述圖像繪制的具體過程為：

a.使用canvas工具的arc畫點函數和lineTo畫線函數為繪制區域內已有信號點與信號線位置上方，繪制相同大小的點或線，但不填充顏色，使其透明；

b.為步驟b中繪制的透明元素設置當鼠標點擊、開始拖動、拖動中和拖動結束行為發生時執行的回調函數；

c.當鼠標在畫布上操作時，獲取光標的位置，并依次與記錄的信號點與信號線位置信息做比較，若點擊位置在步驟b中繪制的透明元素內，則認定當前的操作對象為該透明元素。

4.根據權利要求1所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：所述步驟3的具體過程為：當拖動信號點或信號線上透明元素時，觸發的瀏覽器回調函數會依據分配到的信號點信息，對原有的信號點位置信息進行修改。

5.根據權利要求1所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：所述數據校驗即檢查信號點的橫坐標是否越過相鄰點，具體包括拖動信號點、拖動信號線兩種操作。

6.根據權利要求5所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：拖動信號點的數據校驗過程如下：

f.原有信號點的位置信息發生變動時，通過檢查該點的橫坐標t值是否小于左側點并且大于右側點，來判斷信號點是否越位；

g.若不發生步驟f中的越位，則根據修改后的信號點數據，重新繪制圖像，完成圖像的更新；

h.被拖動元素若發生步驟f中的越位，給出相應提示信息并將移動的信號點t值設為越位側信號點t值，并重新繪制圖像。

7.根據權利要求6所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：當拖動信號點時，其橫軸t值超出相鄰兩點的t值，即視為超出可拖動范圍限制；

若超出可拖動范圍且超出范圍一側為兩個t值相同的信號點，加入拖動點后形成三個信號點t值相同的圖像，此時進行信號點合并，去除中間位置的信號點，斷開與其相連的信號線，剩余兩點間繪制一條新的信號線。

8.根據權利要求7所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：拖動信號線的數據校驗過程如下：

信號線的拖動方向受其斜率影響，拖動信號線時，若其兩端的信號點t值相同，其斜率則不存在，則僅能水平拖動；若斜率存在，則僅能垂直拖動；垂直拖動時，端點需與相鄰點保持相同t值，若不滿足，則端點分化出新的信號點。

9.根據權利要求8所述的基于canvas繪制和瀏覽器拖動事件的信號線繪制方法，其特征在于：信號線的拖動會同時修改其兩端的信號點坐標，因此位于兩端的信號點需同時不超出可拖動范圍，信號線的拖動才有效，通過對信號點執行步驟f、g和h來驗證兩端信號點，來確定信號線的拖動是否正確。