【技术实现步骤摘要】
一种基于Canvas的UI界面字符展示方法及显示设备
本申请涉及显示领域,特别涉及一种基于Canvas的UI界面字符展示方法及一种显示设备。
技术介绍
随着HTML5(HyperTextMarkupLanguage5.0,超级文本标记语言5.0)标准逐渐成为主流,在智能电视UI(UserInterface,用户界面)领域,越来越多的厂商开始采用基于浏览器的WebUI开发模式。Canvas(HTML中的一种元素)是HTML5标准中一个新的标签,主要是用来处理图像数据的渲染和控制,它提供的绘图API(ApplicationProgrammingInterface,应用程序编程接口)能够直接调用GPU(GraphicsProcessingUnit,图形处理器)资源,实现图像绘制的硬件加速,大幅提高网页的图像处理性能。在UI界面展示时,对于控件或者元素,往往需要进行文字的说明。但有些场景,其文字说明的长度已经超出了对应控件或元素的长度。UI只能将前面部分的文字内容显示出来。如图1所示,为现有技术中的一种长文字在UI界面中的场景。因为说明文字过长,需要截取其中部分字符串进行 ...
【技术保护点】
一种基于Canvas的UI界面字符展示方法,其特征在于,所述方法包括:当UI界面的焦点移动至基于Canvas的展示区域时,读取所述Canvas中存储的字符串信息;当所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时,每隔预设时间间隔,计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时,所述展示区域中当前待显示字符串的信息;将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像,并刷新所述UI界面,以使生成的所述图像在所述展示区域内显示。
【技术特征摘要】
1.一种基于Canvas的UI界面字符展示方法,其特征在于,所述方法包括:当UI界面的焦点移动至基于Canvas的展示区域时,读取所述Canvas中存储的字符串信息;当所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时,每隔预设时间间隔,计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时,所述展示区域中当前待显示字符串的信息;将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像,并刷新所述UI界面,以使生成的所述图像在所述展示区域内显示。2.如权利要求1所述的方法,其特征在于,所述每隔预设时间间隔,计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时,所述展示区域中当前待显示字符串的信息,具体包括:每隔预设时间间隔,确定自所述焦点移动至Canvas的展示区域开始,到当前时刻所经过的时间长度;根据所述时间长度,按照预设的滚动速度和方向,确定所述Canvas中存储的字符串所移动的距离;根据所述Canvas中存储的字符串所移动的距离,以及所述展示区域预设的起始位置,在所述Canvas中存储的字符串中确定显示原点的当前位置,所述显示原点为对应所述展示区域待显示字符串的起始坐标;基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置,以及所述展示区域的尺寸信息,确定所述展示区域待显示的字符串的长度信息;根据所述显示原点的当前位置以及所述展示区域待显示的字符串的长度信息,在所述Canvas中存储的字符串中获取所述展示区域中当前待显示字符串的信息,直到所述Canvas中存储的字符串的结束边界的当前位置到达所述展示区域预设的结束位置。3.如权利要求2所述的方法,其特征在于,基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置,以及所述展示区域的尺寸信息,确定所述展示区域待显示的字符串的长度信息,具体包括:识别所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置;当所述Canvas中存储的字符串的起始边界位于所述展示区域中时,确定所述显示原点的当前位置相对于所述展示区域的起始位置的距离,并将所述展示区域的长度与所述距离的差值作为所述展示区域待显示的字符串的长度信息;当所述Canvas中存储的字符串的结束边界位于所述展示区域中时,将所述显示原点的当前位置到所述Canvas中存储的字符串的结束边界之间的长度值作为所述展示区域待显示的字符串的长度信息;当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时,将所述展示区域的长度值作为所述展示区域待显示的字符串的长度信息。4.如权利要求3所述的方法,其特征在于,将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像,具体包括:当所述Canvas中存储的字符串的起始边界位于所述展示区域中时,根据所述Canvas中存储的字符串的起始边界与所述展示区域的起始边界之间的距离生成填充图像块,并将所述填充图像块置于所述显示原点之前,与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息,进行组合,生成图像;当所述Canvas中存储的字符串的结束边界位于所述展示区域中时,根据所述Canvas中存储的字符串的结束边界与所述展示区域的结束边界之间的距离生成填充图像块,并将所述填充图像块置于所述Canvas中存储的字符串的结束边界之后,与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息,进行组合,生成图像;当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时,根据在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息,生成图像。5.如权利要求2所述的方法,其特征在于,所述每隔预设时间间隔,确定自所述焦点移动至Canvas的展示区域开始,到当前时刻所经过的时间长度,还包括:所述每隔预设时间间隔,判断所述UI界面的焦点是否位于所述展示区域;若是,则继续对所述焦点移动至Canvas的展示区域的时间进行计时,并确定自所述焦点移动至Canvas的展示区域开始,到当前时刻所经过...
【专利技术属性】
技术研发人员:邵肖明,
申请(专利权)人:青岛海信电器股份有限公司,
类型:发明
国别省市:山东,37
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。