[發明專利]一種矩形樹圖組件的實現方法

有效

• 申請號: 202010162336.3
• 申請日: 2020-03-10
• 公開（公告）號: CN111381822B
• 公開（公告）日: 2022-03-15
• 發明（設計）人: 李凡
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 四川省成都市天策商標專利事務所(有限合伙) 51213
• 代理人: 張秀敏

1.一種矩形樹圖組件的實現方法，其特征在于，包括：

步驟S1：搭建矩形樹圖的結構，包括：

步驟S11：向矩形繪制函數中傳入方向參數，通過判斷方向參數的布爾值，來決定矩形的縱橫；

步驟S12：依據用戶傳入數據data的長度，矩形繪制函數循環調用自身，每循環繪制一次，方向參數取反，更換矩形繪制方向，直到完成矩形樹圖的結構搭建；在創建矩形路徑之前，需要依次獲取各個矩形的起始坐標和矩形寬高：采用if、else語句對不同方向的矩形進行所需值的設定，具體方式為：

(1)當r的值為true時，記為縱向繪制，矩形高度為當前剩余區域的高；寬度由當前data[i]的value值占剩余data總值的比例乘以剩余區域的寬度所得；新的初始坐標x0’賦值為當前x0的值加上當前矩形的水平寬度所得，新的初始坐標y0’仍為當前y0的值；

(2)當r的值為false時，記為橫向繪制，繪制寬度為當前剩余區域的寬；高度由當前data[i]的value值占剩余data總值的比例乘以剩余區域高度所得；新的初始坐標x0’仍為當前x0的值，新的初始坐標y0’為當前y0的值加上當前矩形的垂直高度所得；

通過當前r的值獲取到繪制矩形所需的值后，調用CanvasContext.rect()和相應的canvas繪制方法，即完成當前data[i]的矩形繪制；

步驟S2：將矩形樹圖的各個層級獨立劃分，實現各個層級模塊的循環繪制；

步驟S3：將矩形樹圖進行組件化，供用戶引入并使用矩形樹圖組件。

2.根據權利要求1所述的一種矩形樹圖組件的實現方法，其特征在于，所述步驟S2具體為：在canvas繪制圖表的基礎上，將矩形樹圖的各個層級進行獨立劃分，并利用遞歸函數實現各個層級的循環繪制。

3.根據權利要求2所述的一種矩形樹圖組件的實現方法，其特征在于，所述步驟S3中將矩形樹圖組件化的方法為：采用組件化邏輯將矩形樹圖劃分為用戶模塊、事件模塊、視圖模塊和繪圖模塊，并進行封裝和調用，實現矩形樹圖的組件化。