[发明专利]页面渲染方法及装置有效
申请号: | 201710562304.0 | 申请日: | 2017-07-11 |
公开(公告)号: | CN107402757B | 公开(公告)日: | 2021-03-02 |
发明(设计)人: | 康永威;张菊元 | 申请(专利权)人: | 北京潘达互娱科技有限公司 |
主分类号: | G06F9/451 | 分类号: | G06F9/451;G06F16/957 |
代理公司: | 北京太合九思知识产权代理有限公司 11610 | 代理人: | 刘戈 |
地址: | 100041 北京市石景山*** | 国省代码: | 北京;11 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 页面 渲染 方法 装置 | ||
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值的步骤。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于北京潘达互娱科技有限公司,未经北京潘达互娱科技有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201710562304.0/1.html,转载请声明来源钻瓜专利网。
- 上一篇:用于绘制页面的方法、装置及终端
- 下一篇:桌面主题的互动方法和装置