[發明專利]一種進度條的繪制方法及系統

有效

• 申請號: 201710095176.3
• 申請日: 2017-02-22
• 公開（公告）號: CN106990951B
• 公開（公告）日: 2020-04-17
• 發明（設計）人: 劉德建;林冰棋;方振華;郭玉湖
• 申請（專利權）人: 福建天泉教育科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 福州市博深專利事務所(普通合伙) 35214
• 代理人: 林志崢

1.一種進度條的繪制方法，其特征在于，包括以下步驟：

S1：在GTK界面上預設比例控件的窗口；

S2：攔截進度條的繪制進程；

S3：分割所述窗口為進度條顯示區域和進度背景區域，所述進度條顯示區域和預設進度圖形的大小和形狀相同；

S4：獲取所述進度條所在音視頻畫面的背景顏色；

S5：渲染所述進度背景區域為所述背景顏色；渲染所述進度條顯示區域為預設第一顏色；

還包括：根據所述進度條的進度指示圖標，分割所述進度條顯示區域為第一區域和第二區域；

設置所述第一區域的背景為預設第一圖像；

設置所述第二區域的背景為預設第二圖像；

還包括：若所述進度指示圖標的位置發生變化，則根據所述進度指示圖標，分割所述進度條顯示區域為第三區域和第四區域；

利用九宮格算法拉伸或壓縮所述第一圖像直至與所述第三區域重合；

利用九宮格算法拉伸或壓縮所述第二圖像直至與所述第四區域重合。

2.根據權利要求1所述的一種進度條的繪制方法，其特征在于，還包括：

獲取所述進度指示圖標所在的區域，得到第五區域；

設置所述第五區域的背景為預設的指示圖像。

3.根據權利要求2所述的一種進度條的繪制方法，其特征在于，還包括：

在所述比例控件的窗口上建立二維坐標系；

獲取所述進度背景區域所包括的像素點的坐標集合，得到第一集合；

獲取所述進度條顯示區域所包括的像素點的坐標集合，得到第二集合；

獲取所述第五區域所包括的像素點的坐標集合，得到第三集合；

利用圖形渲染庫渲染所述第一集合所在的區域為所述背景顏色；

利用圖形渲染庫渲染所述第二集合所在的區域為所述第一顏色；

利用圖形渲染庫渲染所述第三集合所在的區域為預設第二顏色。

4.一種進度條的繪制系統，其特征在于，包括：

預設模塊，用于在GTK界面上預設比例控件的窗口；

攔截模塊，用于攔截進度條的繪制進程；

第一分割模塊，用于分割所述窗口為進度條顯示區域和進度背景區域，所述進度條顯示區域和預設進度圖形的大小和形狀相同；

第一獲取模塊，用于獲取所述進度條所在音視頻畫面的背景顏色；

第一渲染模塊，用于渲染所述進度背景區域為所述背景顏色；渲染所述進度條顯示區域為預設第一顏色；

還包括：第二分割模塊，用于根據所述進度條的進度指示圖標，分割所述進度條顯示區域為第一區域和第二區域；

第一設置模塊，用于設置所述第一區域的背景為預設第一圖像；設置所述第二區域的背景為預設第二圖像；

還包括：第三分割模塊，用于若所述進度指示圖標的位置發生變化，則根據所述進度指示圖標，分割所述進度條顯示區域為第三區域和第四區域；

圖像處理模塊，用于利用九宮格算法拉伸或壓縮所述第一圖像直至與所述第三區域重合；利用九宮格算法拉伸或壓縮所述第二圖像直至與所述第四區域重合。

5.根據權利要求4所述的一種進度條的繪制系統，其特征在于，還包括：

第二獲取模塊，用于獲取所述進度指示圖標所在的區域，得到第五區域；

第二設置模塊，用于設置所述第五區域的背景為預設的指示圖像。

6.根據權利要求5所述的一種進度條的繪制系統，其特征在于，還包括：

建立模塊，用于在所述比例控件的窗口上建立二維坐標系；

第三獲取模塊，用于獲取所述進度背景區域所包括的像素點的坐標集合，得到第一集合；

第四獲取模塊，用于獲取所述進度條顯示區域所包括的像素點的坐標集合，得到第二集合；

第五獲取模塊，用于獲取所述第五區域所包括的像素點的坐標集合，得到第三集合；

第二渲染模塊，用于利用圖形渲染庫渲染所述第一集合所在的區域為所述背景顏色；

第三渲染模塊，用于利用圖形渲染庫渲染所述第二集合所在的區域為所述第一顏色；

第四渲染模塊，用于利用圖形渲染庫渲染所述第三集合所在的區域為預設第二顏色。