[发明专利]基于WEB交互的TIP显示内容处理方法、装置及电子设备有效
申请号: | 201811550058.8 | 申请日: | 2018-12-18 |
公开(公告)号: | CN109710355B | 公开(公告)日: | 2020-01-10 |
发明(设计)人: | 姚成昊 | 申请(专利权)人: | 北京字节跳动网络技术有限公司 |
主分类号: | G06F9/451 | 分类号: | G06F9/451 |
代理公司: | 11706 北京竹辰知识产权代理事务所(普通合伙) | 代理人: | 陈龙 |
地址: | 100041 北京市石景山区*** | 国省代码: | 北京;11 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 提示框 显示内容 装置及电子设备 数据处理技术 文字排列 重新显示 占位符 占位 申请 | ||
1.一种基于WEB交互的TIP显示内容处理方法,其特征在于,包括:
获取TIP提示框的整体宽度W、第一边缘宽度W11、第二边缘宽度W12及提示框中的显示内容,其中,所述第一边缘宽度W11是TIP提示框中Margin定义的左侧空白距离,所述第二边缘宽度W12是TIP提示框中Margin定义的右侧空白距离;
基于所述整体宽度W、第一边缘宽度W11、第二边缘宽度W12及提示框中的显示内容确定所述TIP提示框每行分布的字符;
判断在每行字符中的始末字符是否存在不饱满占位字符;
若存在,则计算所述不饱满占位符导致的空白宽度W2,并使用Canvas工具重绘所述TIP提示框,使所述显示内容在W-W11-W12-W2的宽度范围内重新显示。
2.根据权利要求1所述的方法,其特征在于,所述获取TIP提示框的整体宽度W、第一边缘宽度W11、第二边缘宽度W12及提示框中的显示内容,包括:
获取所述显示内容的显示时间;
在获取所述显示内容之前,提前获取所述显示内容的CSS代码;
在CSS代码中读取所述显示内容的Margin属性,基于所述Margin属性确定所述TIP提示框的整体宽度W、第一边缘宽度W11及第二边缘宽度W12。
3.根据权利要求2所述的方法,其特征在于,所述基于所述Margin属性确定所述TIP提示框的整体宽度W、第一边缘宽度W11及第二边缘宽度W12,包括:
判断所述CSS代码是否存在padding层;
若存在,则进一步读取所述padding层的属性设置;
基于所述padding层的属性设置及所述Margin属性,确定第一边缘宽度W11及第二边缘宽度W12。
4.根据权利要求1所述的方法,其特征在于,所述基于所述整体宽度W、第一边缘宽度W11、第二边缘宽度W12及提示框中的显示内容确定所述TIP提示框每行分布的字符,包括:
从CSS代码中获取所述显示内容中每个字符的宽度;
从所述显示内容的Margin属性获取显示内容的对齐方式;
按照所述对齐方式及每个字符的宽度计算W-W11-W12的宽度范围应当分布的字符个数;
基于计算的每行的字符个数,依序确定所述TIP提示框每行分布的字符。
5.根据权利要求1所述的方法,其特征在于,所述判断在每行字符中的始末字符是否存在不饱满占位字符,包括:
获取所述TIP提示框每行分布的字符及所述显示内容的Margin属性;
在所述Margin属性左对齐的情况下,进一步判断所述显示内容中每行的末字符中是否存在半占位字符;
若存在,则认定该行字符中的末字符为不饱满占位字符。
6.根据权利要求5所述的方法,其特征在于,所述判断在每行字符中的始末字符是否存在不饱满占位字符,还包括:
在所述Margin属性右对齐的情况下,进一步判断所述显示内容中每行的始字符中是否存在半占位字符;
若存在,则认定该行字符中的始字符为不饱满占位字符。
7.根据权利要求1所述的方法,其特征在于,所述使用Canvas工具重绘所述TIP提示框,包括:
获取CSS代码为所述不饱满占位符分配的显示宽度;
判断所述不饱满占位符的显示宽度与饱和占位符的显示宽度的比值是否小于预设阈值;
若是,则将饱和占位符的显示宽度与不饱满占位符的显示宽度的差值作为W2,并基于W2重绘所述TIP提示框。
8.根据权利要求7所述的方法,其特征在于,所述基于W2重绘所述TIP提示框,包括:
通过获取所述显示内容的ID为Canvas元素获取DOM对象;
基于所述DOM对象来绘制所述显示内容的上下文;
基于所述CSS代码中的Margin属性,确定显示区域的边界特性;
判断所述显示内容是否加载完成,若是,则在W-W11-W12-W2的宽度范围内,使用绘制函数在所述边界特性之内绘制所述显示内容。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于北京字节跳动网络技术有限公司,未经北京字节跳动网络技术有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201811550058.8/1.html,转载请声明来源钻瓜专利网。