[發明專利]頁面渲染方法及裝置

有效

• 申請號: 201710562304.0
• 申請日: 2017-07-11
• 公開（公告）號: CN107402757B
• 公開（公告）日: 2021-03-02
• 發明（設計）人: 康永威;張菊元
• 申請（專利權）人: 北京潘達互娛科技有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F16/957
• 代理公司: 北京太合九思知識產權代理有限公司 11610
• 代理人: 劉戈

1.一種頁面渲染方法，其特征在于，包括：

根據屏幕寬度和預設滿屏rem值，確定轉換系數，所述滿屏rem值是滿屏顯示時對應的rem值；

根據頁面的像素值、所述頁面中待渲染元素的第一像素值以及所述預設滿屏rem值，確定所述待渲染元素對應的rem值；

根據所述轉換系數和所述待渲染元素對應的rem值，確定所述待渲染元素對應的第二像素值；

以所述第二像素值渲染所述待渲染元素；

所述根據屏幕寬度和預設滿屏rem值，確定轉換系數，包括：

根據所述屏幕的像素密度比確定所述屏幕的縮放比例；

根據所述縮放比例和所述屏幕的分辨率，確定所述縮放屏幕寬度；

確定所述轉換系數為：所述縮放屏幕寬度/所述預設滿屏rem值，其中，所述縮放屏幕寬度=屏幕寬度/縮放比例；

頁面渲染工具獲取顯示設備的屏幕寬度以及預設滿屏rem值，其中，滿屏rem值是將頁面中的內容進行滿屏顯示時對應的rem值；

頁面渲染工具在獲取的屏幕寬度和預設滿屏rem值的基礎上，采用以下公式確定出轉換系數：

轉換系數=屏幕寬度/預設滿屏rem值

此轉換系數體現出在某個寬度的屏幕下，1rem與像素之間的對應關系：1rem=轉換系數px，其中，px為像素單位；

頁面渲染工具在獲取到已經完成布局的一個頁面后，即可獲取該頁面的像素值，再通過量取頁面中各個待渲染元素的像素值，即可獲取在該頁面中各待渲染元素對應的第一像素值，內置于頁面渲染工具中的圖像處理軟件量取頁面中各待渲染元素的第一像素值，頁面中待渲染元素對應的rem設置為X，則頁面渲染工具通過頁面的像素值、待渲染元素的第一像素值、預設滿屏rem值以及X之間的比例關系即可確定出待渲染元素對應的rem值；

頁面渲染工具利用確定出的轉換系數以及待渲染元素對應的rem值即可進一步確定出以原始顯示形式將待渲染元素顯示于屏幕寬度與預設頁面寬度不符的顯示設備上時，此待渲染元素對應的第二像素值，根據以下公式確定出待渲染元素的第二像素值：

第二像素值=待渲染元素的rem值*轉換系數

頁面渲染工具根據用于顯示頁面的顯示設備的屏幕寬度以及預設滿屏rem值確定轉換系數，其中，預設滿屏rem值為頁面滿屏顯示時對應的rem值，此轉換系數用于對待渲染元素進行相應縮放，通過對待渲染元素的縮放使頁面在不同寬度的顯示設備上以相同的顯示形式進行顯示，頁面渲染工具再根據頁面的像素值、頁面中待渲染元素的第一像素值以及預設滿屏rem值確定出待渲染元素對應的rem值；

基于確定出的轉換系數以及待渲染元素對應的rem值得到渲染元素在用于顯示頁面的屏幕中對應的第二像素值，此第二像素值是利用轉換系數對第一像素值進行縮放后得到的，并且是適應于顯示屏幕寬度的，頁面渲染工作根據此適應于顯示屏幕寬度的第二像素值渲染待渲染元素，從而保證頁面在任何尺寸的屏幕中都能以相同的顯示形式顯示，優化頁面顯示效果；

頁面渲染工具獲取顯示設備屏幕自身的像素密度比，顯示設備的像素密度比越大，則顯示設備顯示畫面細節就越豐富，并且縮放比例與像素密度比之間存在倒數關系，像素密度比取1、2、3，相對地，縮放比例即為1，1/2，1/3；

將待渲染元素在不同像素密度比的屏幕上以相同的清晰度顯示時，每個待渲染元素對應的像素值也是不同的；

在獲取用于計算轉換系數時所需的屏幕寬度時，為了保證頁面顯示的清晰度，則還需要考慮屏幕的縮放比例，基于此，轉換系數為：縮放屏幕寬度/預設滿屏rem值。

2.根據權利要求1所述的方法，其特征在于，所述根據頁面的像素值、所述頁面中待渲染元素的第一像素值以及所述預設滿屏rem值，確定所述待渲染元素對應的rem值，包括：

通過如下公式確定所述待渲染元素對應的rem值：

所述頁面中待渲染元素的第一像素值/所述頁面的像素值=所述待渲染元素對應的rem值/所述預設滿屏rem值。

3.根據權利要求1所述的方法，其特征在于，所述根據頁面的像素值、所述頁面中待渲染元素的第一像素值以及所述預設滿屏rem值之前，還包括：

識別所述待渲染元素是否為可縮放類型的待渲染元素；

若所述待渲染元素為可縮放類型的待渲染元素，則執行所述根據頁面的像素值、所述頁面中待渲染元素的第一像素值以及所述預設滿屏rem值，確定所述待渲染元素對應的rem值的步驟。