CN106095437A - 用户界面从右到左rtl的布局方式的实现方法及装置 - Google Patents
用户界面从右到左rtl的布局方式的实现方法及装置 Download PDFInfo
- Publication number
- CN106095437A CN106095437A CN201610407205.0A CN201610407205A CN106095437A CN 106095437 A CN106095437 A CN 106095437A CN 201610407205 A CN201610407205 A CN 201610407205A CN 106095437 A CN106095437 A CN 106095437A
- Authority
- CN
- China
- Prior art keywords
- canvas
- user interface
- picture
- flip horizontal
- character string
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000010422 painting Methods 0.000 claims abstract description 23
- 230000008569 process Effects 0.000 claims abstract description 22
- 238000012545 processing Methods 0.000 claims description 30
- 238000009877 rendering Methods 0.000 claims description 8
- 238000006243 chemical reaction Methods 0.000 claims description 3
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 10
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 11
- 230000000694 effects Effects 0.000 description 6
- 230000000875 corresponding effect Effects 0.000 description 5
- 230000008859 change Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 239000000203 mixture Substances 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供一种用户界面从右到左RTL的布局方式的实现方法及装置。本发明用户界面从右到左RTL的布局方式的实现方法，包括：获取待显示的用户界面中的所有元素；将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；将所述图片以及所述元素中的原始图片进行水平翻转；将包含处理后的所有元素的画布Canvas进行水平翻转得到翻转后的用户界面；显示所述翻转后的用户界面。本发明实现了RTL功能，而且没有增加开发工作量，并且不会造成整体UI刷新性能的明显消耗。
Description
技术领域
本发明涉及智能电视技术领域，尤其涉及一种用户界面从右到左RTL的布局方式的实现方法及装置。
背景技术
随着超文本标记语言(HyperText Markup Language，简称HTML)5标准的发展，在智能电视的用户界面(User Interface，简称UI)领域，越来越多的厂商开始采用基于HTML5标准的网页UI开发模式。HTML5标准的绘图功能是通过画布(Canvas)实现的，如果网页中包含一个Canvas标签，就可以通过客户端脚本语言(JavaScript)代码在这个标签的区域范围内，使用Canvas的绘图应用程序编程接口(Application Programming Interface，简称API)绘制UI中的元素。
图1为从左到右的布局方式的用户界面示意图一。图2为从右到左RTL的布局方式的用户界面示意图。目前，通过Canvas绘制的UI，通常是从左向右布局排列的UI，如图1所示。而在面向阿拉伯语等从右向左阅读方式国家的智能电视中，需要实现从右向左(Right-To-Left，简称RTL)的布局方式的UI，如图2所示。在从左向右布局排列的基础上，实现RTL的布局方式具有一定的难度，在实现本发明的过程中，发明人经过研究发现可能的实现方式有以下两种：1、配置专用坐标文件；具体的，在UI开发中专门为RTL功能配置一套坐标文件，根据用户的选择，读取相应的坐标配置。这种方式能够实现RTL功能，但产生了额外的开发工作量，即每个UI界面除了需要配置LTR对应的坐标文件，还需要配置RTL对应的坐标文件，即需要配置两套坐标文件。2、实时控制元素坐标。具体的，在UI刷新时，实时根据整个UI界面或元素容器的宽度，计算并变换元素的坐标。此方式虽然对于UI的开发没有产生额外的工作量，但在UI每帧刷新过程中，需要进行复杂的坐标计算，会带来额外的性能开销，在复杂的场景可能会造成UI的卡顿，影响用户体验。
因此，在尽量减少系统资源消耗，并减少开发工作量的情况下，通过Canvas实现RTL的布局方式是本领域技术人员亟需解决的技术问题。
发明内容
本发明提供一种用户界面从右到左RTL的布局方式的实现方法及装置，以实现RTL的布局方式。
第一方面，本发明提供一种基于Canvas开发的用户界面中从右到左RTL的布局方式的实现方法，包括：
获取待显示的用户界面中的所有元素；
将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；
将所述图片以及所述元素中的原始图片进行水平翻转；
将包含处理后的所有元素的画布Canvass进行水平翻转得到翻转后的用户界面；
显示所述翻转后的用户界面。
可选的，作为一种可实施的方式，将倒序排列后的字符串转换成图片，包括：
将所述倒序排列后的字符串绘制到所述Canvas中的临时Canvas中，生成所述图片。
可选的，作为一种可实施的方式，将所述图片以及所述元素中的原始图片进行水平翻转，包括：
将所述Canvas进行水平翻转得到翻转后的Canvas；
在所述翻转后的Canvas上绘制所述图片和所述原始图片；
将所述翻转后的Canvas再次水平翻转。
可选的，作为一种可实施的方式，在所述翻转后的Canvas上绘制所述图片和所述原始图片，包括：
通过所述Canvas的绘图应用程序编程接口API在所述翻转后的Canvas上绘制所述图片和所述原始图片。
第二方面，本发明提供一种基于Canvas开发的用户界面中从右到左RTL的布局方式的实现装置，包括：
获取模块，用于获取待显示的用户界面中的所有元素；
处理模块，用于将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；
所述处理模块，还用于将所述图片以及所述元素中的原始图片进行水平翻转；
所述处理模块，还用于将包含处理后的所有元素的画布Canvas进行水平翻转得到翻转后的用户界面；
显示模块，用于显示所述翻转后的用户界面。
可选的，作为一种可实施的方式，所述处理模块，具体用于：
将所述倒序排列后的字符串绘制到所述Canvas中的临时Canvas中，生成所述图片。
可选的，作为一种可实施的方式，所述处理模块，具体用于：
将所述Canvas进行水平翻转得到翻转后的Canvas；
在所述翻转后的Canvas上绘制所述图片和所述原始图片；
将所述翻转后的Canvas再次水平翻转。
可选的，作为一种可实施的方式，所述处理模块，具体用于：
通过所述Canvas的绘图应用程序编程接口API在所述翻转后的Canvas上绘制所述图片和所述原始图片。
本发明用户界面从右到左RTL的布局方式的实现方法及装置，通过获取待显示的用户界面中的所有元素；将元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；将图片以及元素中的原始图片进行水平翻转；将处理后的所有元素绘制在画布Canvas中，并将Canvas进行水平翻转得到翻转后的用户界面；显示所述翻转后的用户界面，实现了RTL功能，而且本发明是按照正常UI布局方式(即从左到右)来配置坐标，而不用配置任何额外的坐标文件，而且该方法是在UI逻辑处理完毕，需要绘制到屏幕时执行的，因此没有增加开发人员开发过程中的工作量，进一步的，由于在刷新每一帧时，并没有进行大量的坐标计算，而仅仅是通过将字符串倒序排列以及图片翻转处理实现了从右到左的布局方式，不会造成整体UI刷新性能的明显消耗，因此可以给用户提供更流畅的体验。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为从左到右的布局方式的用户界面示意图一；
图2为从右到左RTL的布局方式的用户界面示意图；
图3为本发明用户界面从右到左RTL的布局方式的实现方法一实施例的流程示意图；
图4A为本发明一实施例中字符串倒序示意图；
图4B为本发明一实施例中将字符串生成的图片进行水平翻转示意图；
图4C为本发明一实施例中将原始图片进行水平翻转示意图；
图5为从左到右的布局方式的用户界面示意图二；
图6为本发明用户界面从右到左RTL的布局方式的实现装置一实施例的结构示意图；
图7为本发明终端一实施例的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
Canvas是HTML5标准中一个新的标签，它提供的绘图API能够直接调用GPU资源，实现图像绘制的硬件加速，大幅提高网页的图像处理性能。Canvas是逐像素刷新的，相当于一个可以用JavaScript操作的位图，HTML文档对象模型(Document Object Model，简称DOM)和层叠样式表(CascadingStyle Sheets，简称CSS)等布局管理和控制的机制并不适用于Canvas，所以Canvas UI布局没有可用的布局管理机制，也不能直接使用CSS的方向(direction)属性。Canvas的布局方式是基于坐标实现的，常规情况下的UI是从左向右(Left-To-Right，简称LTR)布局排列的，通过Canvas绘制UI时，根据坐标确定UI中元素的位置，然后进行绘制，在LTR的基础上，实现RTL的布局方式具有一定的难度，在实现本发明的过程中，发明人经过研究发现可能的实现方式有以下两种：
1、配置专用坐标文件；
具体的，在UI开发中专门为RTL功能配置一套坐标文件，根据用户的选择，读取相应的坐标配置。这种方式能够实现RTL功能，但产生了额外的开发工作量，即每个UI界面除了需要配置LTR对应的坐标文件，还需要配置RTL对应的坐标文件，即需要配置两套坐标文件。
2、实时控制元素坐标。
具体的，这种方式不需要配置两套坐标文件，而是在UI刷新时，实时根据整个UI界面或元素容器的宽度，计算并变换元素的坐标。此方式虽然对于UI的开发没有产生额外的工作量，但在UI每帧刷新过程中，需要进行复杂的坐标计算，会带来额外的性能开销，在复杂的场景可能会造成UI的卡顿，影响用户体验。
本发明实施例的方法可以应用于智能终端设备中，包括但不限于智能电视、智能手机等智能终端设备，以下实施例中仅以智能电视进行举例说明。
下面以具体地实施例对本发明的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。
图3为本发明用户界面从右到左RTL的布局方式的实现方法一实施例的流程示意图。如图3所示，本实施例的方法，包括：
步骤301、获取待显示的用户界面中的所有元素；
步骤302、将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；
步骤303、将所述图片以及所述元素中的原始图片进行水平翻转；
步骤304、将包含处理后的所有元素的画布(Canvas)进行水平翻转得到翻转后的用户界面；
步骤305、显示所述翻转后的用户界面。
具体的，通常从左向右布局排列的UI，如图1所示。在UI主界面绘制元素时，从UI主界面的起始点坐标(0,0)开始向X方向和Y方向分别延伸，图1中UI主界面的像素为1080×1920，在UI主界面的元素容器中绘制了图片元素和文字元素。
本发明实施例中在UI需要刷新，通过Canvas绘制整个用户界面时，首先需遍历用户界面中所有元素。
图4A为本发明一实施例中字符串倒序示意图。如果该元素是文字元素，则将文字元素组成的字符串进行字符串倒序排列，如图4A所示。
在实际应用中，字符串倒序排列可以是，通过将字符串中第i个字符和第n-i+1个字符进行交换，生成倒序排列后的字符串；i取值为1到n为字符串的字符个数；表示上取整。
将倒序排列后的字符串转换成图片；字符串包括至少两个文字元素，文字元素可以包括字母、数字、符号等。
图4B为本发明一实施例中将字符串生成的图片进行水平翻转示意图。图4C为本发明一实施例中将原始图片进行水平翻转示意图。然后将字符串转换的图片和用户界面中的原始图片，进行水平翻转，如图4B和4C所示。
图5为从左到右的布局方式的用户界面示意图二。包含处理后的所有元素的画布Canvas如图5所示，然后将所述Canvas进行水平翻转得到翻转后的用户界面并显示，最终的用户界面如图2所示。
具体的，将所述Canvas进行水平翻转，可以利用Canvas提供的API，改变Canvas的scale状态，将其设置为-1，则实现水平翻转效果。
示例代码如下：ctx即Canvas的上下文对象，drawImage、translate、scale等是Canvas提供的API。
ctx.translate(canvas_width,0)；//canvas_width表示Canvas的宽度；
ctx.scale(-1,1)；
正常绘制可以通过如下函数实现：
ctx.drawImage(img,px,py)；//img表示图片对象，px表示绘制的起始点的x坐标，py表示绘制的起始点的y坐标。
本发明实施例的方法，仅按正常UI布局方式(即从左到右)来配置坐标，而不用配置任何额外的坐标文件，而且该方法是在UI逻辑处理完毕，需要绘制到屏幕时执行的，因此没有增加开发人员开发过程中的工作量；
由于HTML Canvas是逐像素一帧一帧刷新的，在刷新每一帧时，并没有进行大量的坐标计算，而仅仅是通过将字符串倒序排列以及图片翻转处理实现了从右到左的布局方式，不会造成整体UI刷新性能的明显消耗。
进一步的，在有动画的应用场景下，由于在显示时对整个Canvas进行水平翻转，因此动画效果也是按照RTL模式从右侧渐入的。
本实施例提供的用户界面中从右到左RTL的布局方式的实现方法，获取待显示的用户界面中的所有元素；将元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；将图片以及元素中的原始图片进行水平翻转；将处理后的所有元素绘制在画布Canvas中，并将Canvas进行水平翻转得到翻转后的用户界面；显示所述翻转后的用户界面，实现了RTL功能，而且本发明是按照正常UI布局方式(即从左到右)来配置坐标，而不用配置任何额外的坐标文件，而且该方法是在UI逻辑处理完毕，需要绘制到屏幕时执行的，因此没有增加开发人员开发过程中的工作量，进一步的，由于在刷新每一帧时，并没有进行大量的坐标计算，而仅仅是通过将字符串倒序排列以及图片翻转处理实现了从右到左的布局方式，不会造成整体UI刷新性能的明显消耗，因此可以给用户提供更流畅的体验。
在上述实施例的基础上，本实施例中，步骤302中将倒序排列后的字符串转换成图片具体可以通过如下方式实现：
将倒序排列后的字符串绘制到Canvas中的临时Canvas中，生成图片。
具体的，上述实现方式是利用Canvas可以将另一个Canvas绘制到该Canvas中的特性实现的，具体如下：
1、先创建一个离屏临时Canvas(在内存中，不会显示在界面上)，其大小和字符串的大小一致；
var cacheCanvas＝document.createElement(‘canvas’)；
cacheCanvas.width＝txt.width；//cacheCanvas.width为临时Canvas的宽度，txt.width为字符串的宽度；
cacheCanvas.height＝txt.height；//cacheCanvas.height临时Canvas的高度，txt.height为字符串的高度；
2、调用临时Canvas的API将字符串绘制到临时Canvas中。
var ctx＝cacheCanvas.getContext("2d")；
ctx.fillText(txt,0,0)//txt表示文字元素，(0,0)表示绘制的起始点的坐标。
3、这时字符串相当于已经转换为图片，可以将临时Canvas绘制到Canvas中。
具体可以通过如下的函数实现：
mainCtx.drawImage(cacheCanvas,0,0)。
在上述实施例的基础上，进一步的，步骤303具体可以通过如下方式实现：
将所述Canvas进行水平翻转得到翻转后的Canvas；
在所述翻转后的Canvas上绘制所述图片和所述原始图片；
将所述翻转后的Canvas再次水平翻转。
具体的，想要水平翻转图片可以通过以下步骤实现：
1.水平“翻转”画布；
ctx.translate(canvas_width,0)；//将画布的原点(0，0)从左上角定位到右上角；
ctx.scale(-1,1)；//将画布的水平方向scale设置为-1，垂直方向不变，相当于将画布整个水平翻转；
2、调用drawImage绘制图片，将图片绘制到已翻转的画布上；
ctx.drawImage(img,canvas_width-img.width-px,py)；//其坐标参数因为已经将画布原点从左上角定位到右上角，所以需要转换一下，保证图片还是绘制在原来的位置上。
3、再将画布的原点从右上角再定位到左上角，并将画布再次水平翻转。
ctx.translate(canvas_width,0)；
ctx.scale(-1,1)；
上述过程，图片是绘制在水平翻转的画布上，再次翻转画布后，相当于画布恢复了原样，但是图片已经被水平翻转了。
在上述实施例的基础上，进一步的，在所述翻转后的Canvas上绘制所述图片和所述原始图片具体可以通过如下方式实现：
通过所述Canvas的绘图API在所述翻转后的Canvas上绘制所述图片和所述原始图片。
具体的，由于Canvas提供了绘图API，因此可以通过绘图API将处理后的所有元素绘制在画布Canvas中，具体是通过JavaScript代码调用绘图API进行绘制。
例如，ctx.drawImage(img,px,py)；//img表示图片对象，px表示绘制的起始点的x坐标，py表示绘制的起始点的y坐标。
图6为本发明用户界面从右到左RTL的布局方式的实现装置的一实施例的结构示意图。如图6所示，本实施例的用户界面中从右到左RTL的布局方式的实现装置，包括：
获取模块601、处理模块602和显示模块603；
其中，获取模块601，用于获取待显示的用户界面中的所有元素；
处理模块602，用于将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；
所述处理模块602，还用于将所述图片以及所述元素中的原始图片进行水平翻转；
所述处理模块602，还用于将包含处理后的所有元素的画布Canvas进行水平翻转得到翻转后的用户界面；
显示模块603，用于显示所述翻转后的用户界面。
具体的，在UI需要刷新，通过Canvas绘制整个用户界面时，首先获取模块601需遍历用户界面中所有元素。
如果该元素是文字元素，则处理模块602将文字元素组成的字符串进行字符串倒序排列，如图4A所示。
在实际应用中，字符串倒序排列可以是，通过将字符串中第i个字符和第n-i+1个字符进行交换，生成倒序排列后的字符串；i取值为1到n为字符串的字符个数；表示上取整。
处理模块602将倒序排列后的字符串转换成图片；字符串包括至少两个文字元素，文字元素可以包括字母、数字、符号等。
然后处理模块602将字符串转换的图片和用户界面中的原始图片，进行水平翻转，如图4B和4C所示。
包含处理后的所有元素的画布Canvas如图5所示，然后处理模块602将所述Canvas进行水平翻转得到翻转后的用户界面并通过显示模块603显示，最终的用户界面如图2所示。
具体的，将所述Canvas进行水平翻转，可以利用Canvas提供的API，改变Canvas的scale状态，将其设置为-1，则实现水平翻转效果。
示例代码如下：ctx即Canvas的上下文对象，drawImage、translate、scale等是Canvas提供的API。
ctx.translate(canvas_width,0)；//canvas_width表示Canvas的宽度；
ctx.scale(-1,1)；
正常绘制可以通过如下函数实现：
ctx.drawImage(img,px,py)；//img表示图片对象，px表示绘制的起始点的x坐标，py表示绘制的起始点的y坐标。
本发明实施例的装置中，仅按正常UI布局方式(即从左到右)来配置坐标，而不用配置任何额外的坐标文件，而且该方法是在UI逻辑处理完毕，需要绘制到屏幕时执行的，因此没有增加开发人员开发过程中的工作量；
由于HTML Canvas是逐像素一帧一帧刷新的，在刷新每一帧时，并没有进行大量的坐标计算，而仅仅是通过将字符串倒序排列以及图片翻转处理实现了从右到左的布局方式，不会造成整体UI刷新性能的明显消耗。
进一步的，在有动画的应用场景下，由于在显示时对整个Canvas进行水平翻转，因此动画效果也是按照RTL模式从右侧渐入的。
本实施例提供的用户界面中从右到左RTL的布局方式的实现装置，实现了RTL功能，而且本发明是按照正常UI布局方式(即从左到右)来配置坐标，而不用配置任何额外的坐标文件，而且该方法是在UI逻辑处理完毕，需要绘制到屏幕时执行的，因此没有增加开发人员开发过程中的工作量，进一步的，由于在刷新每一帧时，并没有进行大量的坐标计算，而仅仅是通过将字符串倒序排列以及图片翻转处理实现了从右到左的布局方式，不会造成整体UI刷新性能的明显消耗，因此可以给用户提供更流畅的体验。
可选的，作为一种可实施的方式，所述处理模块602，具体用于：
将所述倒序排列后的字符串绘制到所述Canvas中的临时Canvas中，生成所述图片。
可选的，作为一种可实施的方式，所述处理模块602，具体用于：
将所述Canvas进行水平翻转得到翻转后的Canvas；
在所述翻转后的Canvas上绘制所述图片和所述原始图片；
将所述翻转后的Canvas再次水平翻转。
可选的，作为一种可实施的方式，所述处理模块602，具体用于：
通过所述Canvas的绘图API在所述翻转后的Canvas上绘制所述图片和所述原始图片。
本实施例的装置，可以用于执行如图3所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。
图7为本发明终端一实施例的结构示意图。如图7所示，本实施例的终端，可以包括：存储器701、处理器702和显示器703；其中，存储器701，用于存储程序；具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器701可能包含随机存取存储器(random access memory，简称RAM)，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。
处理器702，用于执行存储器701存储的程序，用于执行本发明法实施例所提供的技术方案，其实现原理和技术效果类似，可参考图3所示的方法实施例，此处不再赘述。
显示器703，用于显示用户界面；
上述装置中获取模块和处理模块的功能可以通过处理器702实现；
上述装置中显示模块的功能可以通过显示器703实现。
上述部件通过一条或多条总线进行通信。本领域技术人员可以理解，图7中示出的终端的结构并不构成对本发明的限定，它既可以是总线形结构，也可以是星型结构，还可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
需要说明的是，对于终端实施例而言，由于其基本相应于方法实施例，所以相关之处参见方法实施例的部分说明即可。
在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述单元或模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或模块可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，设备或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
Claims (8)
1.一种基于Canvas开发的用户界面从右到左RTL的布局方式的实现方法，其特征在于，包括：
获取待显示的用户界面中的所有元素；
将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；
将所述图片以及所述元素中的原始图片进行水平翻转；
将包含处理后的所有元素的画布Canvas进行水平翻转得到翻转后的用户界面；
显示所述翻转后的用户界面。
2.根据权利要求1所述的方法，其特征在于，将倒序排列后的字符串转换成图片，包括：
将所述倒序排列后的字符串绘制到所述Canvas中的临时Canvas中，生成所述图片。
3.根据权利要求1或2所述的方法，其特征在于，将所述图片以及所述元素中的原始图片进行水平翻转，包括：
将所述Canvas进行水平翻转得到翻转后的Canvas；
在所述翻转后的Canvas上绘制所述图片和所述原始图片；
将所述翻转后的Canvas再次水平翻转。
4.根据权利要求3所述的方法，其特征在于，在所述翻转后的Canvas上绘制所述图片和所述原始图片，包括：
通过所述Canvas的绘图应用程序编程接口API在所述翻转后的Canvas上绘制所述图片和所述原始图片。
5.一种基于Canvas开发的用户界面从右到左RTL的布局方式的实现装置，其特征在于，包括：
获取模块，用于获取待显示的用户界面中的所有元素；
处理模块，用于将所述元素中的字符串进行倒序排列，并将倒序排列后的字符串转换成图片；
所述处理模块，还用于将所述图片以及所述元素中的原始图片进行水平翻转；
所述处理模块，还用于将包含处理后的所有元素的画布Canvass进行水平翻转得到翻转后的用户界面；
显示模块，用于显示所述翻转后的用户界面。
6.根据权利要求5所述的装置，其特征在于，所述处理模块，具体用于：
将所述倒序排列后的字符串绘制到所述Canvas中的临时Canvas中，生成所述图片。
7.根据权利要求5或6所述的装置，其特征在于，所述处理模块，具体用于：
将所述Canvas进行水平翻转得到翻转后的Canvas；
在所述翻转后的Canvas上绘制所述图片和所述原始图片；
将所述翻转后的Canvas再次水平翻转。
8.根据权利要求7所述的装置，其特征在于，所述处理模块，具体用于：
通过所述Canvas的绘图应用程序编程接口API在所述翻转后的Canvas上绘制所述图片和所述原始图片。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610407205.0A CN106095437B (zh) | 2016-06-12 | 2016-06-12 | 用户界面从右到左rtl的布局方式的实现方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610407205.0A CN106095437B (zh) | 2016-06-12 | 2016-06-12 | 用户界面从右到左rtl的布局方式的实现方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106095437A true CN106095437A (zh) | 2016-11-09 |
| CN106095437B CN106095437B (zh) | 2019-09-17 |
Family
ID=57228596
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610407205.0A Active CN106095437B (zh) | 2016-06-12 | 2016-06-12 | 用户界面从右到左rtl的布局方式的实现方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106095437B (zh) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107066186A (zh) * | 2017-02-23 | 2017-08-18 | 青岛海信电器股份有限公司 | 一种基于Canvas的UI界面字符展示方法及显示设备 |
| CN107368643A (zh) * | 2017-07-13 | 2017-11-21 | 湖南中云飞华信息技术有限公司 | 基于rtl的模块划分方法、装置及终端设备 |
| CN108958859A (zh) * | 2018-06-01 | 2018-12-07 | 东软集团股份有限公司 | 基于Android的RTL布局适配方法、装置、存储介质及电子设备 |
| CN109710364A (zh) * | 2018-12-27 | 2019-05-03 | 北京微播视界科技有限公司 | 调整布局方式的方法、装置、电子设备及存储介质 |
| CN109783172A (zh) * | 2019-01-08 | 2019-05-21 | 北京三快在线科技有限公司 | 语言切换方法、装置、电子设备及可读存储介质 |
| CN111475248A (zh) * | 2020-04-17 | 2020-07-31 | 崔晓珂 | 一种rtl处理方法、系统、存储介质及电子设备 |
| CN111479155A (zh) * | 2020-04-02 | 2020-07-31 | 青岛海信传媒网络技术有限公司 | 显示设备及用户界面显示方法 |
| CN111651113A (zh) * | 2020-07-16 | 2020-09-11 | 广州朱雀信息科技有限公司 | 页面展示方法、装置、设备及存储介质 |
| CN112100539A (zh) * | 2020-08-13 | 2020-12-18 | 福建天泉教育科技有限公司 | 基于canvas的图片平铺方法、存储介质 |
| CN112379811A (zh) * | 2020-12-07 | 2021-02-19 | 五八同城信息技术有限公司 | 一种界面的处理方法和装置 |
| CN112579218A (zh) * | 2019-09-27 | 2021-03-30 | 北京字节跳动网络技术有限公司 | 用户界面展示方法、装置、计算机可读介质及电子设备 |
| CN113760424A (zh) * | 2021-06-29 | 2021-12-07 | 杭州国芯科技股份有限公司 | 一种适用于自右向左书写习惯国家的界面转换方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101051270A (zh) * | 2007-05-11 | 2007-10-10 | 华为技术有限公司 | 界面布局变换方法及界面显示控制器 |
| CN103092596A (zh) * | 2011-11-08 | 2013-05-08 | 中国移动通信集团陕西有限公司 | 低级界面开发自动实现界面反转的方法及装置 |
| CN103677786A (zh) * | 2012-09-21 | 2014-03-26 | 国际商业机器公司 | 用于辅助图形化用户界面设计的方法和装置 |
| CN104166574A (zh) * | 2014-08-18 | 2014-11-26 | 深圳市九洲电器有限公司 | 界面显示方法及系统 |
| US20160071241A1 (en) * | 2014-09-08 | 2016-03-10 | Apple Inc. | Landscape Springboard |
-
2016
- 2016-06-12 CN CN201610407205.0A patent/CN106095437B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101051270A (zh) * | 2007-05-11 | 2007-10-10 | 华为技术有限公司 | 界面布局变换方法及界面显示控制器 |
| CN103092596A (zh) * | 2011-11-08 | 2013-05-08 | 中国移动通信集团陕西有限公司 | 低级界面开发自动实现界面反转的方法及装置 |
| CN103677786A (zh) * | 2012-09-21 | 2014-03-26 | 国际商业机器公司 | 用于辅助图形化用户界面设计的方法和装置 |
| CN104166574A (zh) * | 2014-08-18 | 2014-11-26 | 深圳市九洲电器有限公司 | 界面显示方法及系统 |
| US20160071241A1 (en) * | 2014-09-08 | 2016-03-10 | Apple Inc. | Landscape Springboard |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107066186A (zh) * | 2017-02-23 | 2017-08-18 | 青岛海信电器股份有限公司 | 一种基于Canvas的UI界面字符展示方法及显示设备 |
| CN107368643B (zh) * | 2017-07-13 | 2020-12-01 | 湖南中易利华信息技术有限公司 | 基于rtl的模块划分方法、装置及终端设备 |
| CN107368643A (zh) * | 2017-07-13 | 2017-11-21 | 湖南中云飞华信息技术有限公司 | 基于rtl的模块划分方法、装置及终端设备 |
| CN108958859A (zh) * | 2018-06-01 | 2018-12-07 | 东软集团股份有限公司 | 基于Android的RTL布局适配方法、装置、存储介质及电子设备 |
| CN109710364A (zh) * | 2018-12-27 | 2019-05-03 | 北京微播视界科技有限公司 | 调整布局方式的方法、装置、电子设备及存储介质 |
| CN109783172A (zh) * | 2019-01-08 | 2019-05-21 | 北京三快在线科技有限公司 | 语言切换方法、装置、电子设备及可读存储介质 |
| CN112579218A (zh) * | 2019-09-27 | 2021-03-30 | 北京字节跳动网络技术有限公司 | 用户界面展示方法、装置、计算机可读介质及电子设备 |
| WO2021057738A1 (zh) * | 2019-09-27 | 2021-04-01 | 北京字节跳动网络技术有限公司 | 用户界面展示方法、装置、计算机可读介质及电子设备 |
| GB2604253A (en) * | 2019-09-27 | 2022-08-31 | Beijing Bytedance Network Tech Co Ltd | User interface presentation method and apparatus, computer-readable medium and electronic device |
| JP2022549872A (ja) * | 2019-09-27 | 2022-11-29 | 北京字節跳動網絡技術有限公司 | ユーザーインターフェース展示方法、装置、コンピュータ読み取り可能な媒体及び電子装置 |
| US12008219B2 (en) | 2019-09-27 | 2024-06-11 | Beijing Bytedance Network Technology Co., Ltd. | User interface presentation method and apparatus, computer-readable medium and electronic device |
| CN111479155A (zh) * | 2020-04-02 | 2020-07-31 | 青岛海信传媒网络技术有限公司 | 显示设备及用户界面显示方法 |
| CN111475248A (zh) * | 2020-04-17 | 2020-07-31 | 崔晓珂 | 一种rtl处理方法、系统、存储介质及电子设备 |
| CN111651113A (zh) * | 2020-07-16 | 2020-09-11 | 广州朱雀信息科技有限公司 | 页面展示方法、装置、设备及存储介质 |
| CN111651113B (zh) * | 2020-07-16 | 2021-09-07 | 广州朱雀信息科技有限公司 | 页面展示方法、装置、设备及存储介质 |
| CN112100539A (zh) * | 2020-08-13 | 2020-12-18 | 福建天泉教育科技有限公司 | 基于canvas的图片平铺方法、存储介质 |
| CN112379811A (zh) * | 2020-12-07 | 2021-02-19 | 五八同城信息技术有限公司 | 一种界面的处理方法和装置 |
| CN113760424A (zh) * | 2021-06-29 | 2021-12-07 | 杭州国芯科技股份有限公司 | 一种适用于自右向左书写习惯国家的界面转换方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106095437B (zh) | 2019-09-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106095437B (zh) | 用户界面从右到左rtl的布局方式的实现方法及装置 | |
| CN107992301B (zh) | 用户界面实现方法、客户端及存储介质 | |
| CN110069257B (zh) | 一种界面处理方法、装置及终端 | |
| CN105096368B (zh) | 三维对象处理方法和相关装置 | |
| CN107832108A (zh) | 3D canvas网页元素的渲染方法、装置及电子设备 | |
| US20160283096A1 (en) | Method of generating a link by utilizing a picture and system thereof | |
| CN105528207A (zh) | 一种虚拟现实系统及其中显示安卓应用图像的方法和装置 | |
| CN106484408A (zh) | 一种基于html5的节点关系图显示方法及系统 | |
| CN102902535A (zh) | 一种图片自适应方法、系统和终端设备 | |
| CN107707965B (zh) | 一种弹幕的生成方法和装置 | |
| CN104050185A (zh) | 一种页面内容缩放显示处理方法及装置 | |
| CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| CN105279251A (zh) | 虚拟礼物展示方法和装置 | |
| CN108932413A (zh) | 一种数字签名生成方法、装置及存储介质 | |
| CN106354355A (zh) | 用户界面布局方法、装置及系统 | |
| CN106991096A (zh) | 动态页面渲染方法及装置 | |
| CN107147940A (zh) | 内容轮播的方法、装置、电子设备和存储介质 | |
| CN105335410A (zh) | 一种基于合成渲染加速的网页更新方法和装置 | |
| CN104995622A (zh) | 用于图形函数的合成器支持 | |
| CN106204439A (zh) | 图片自适应处理的方法和系统 | |
| CN105844683A (zh) | 基于Canvas和WebWorker的像素差逐帧动画的实现方法 | |
| WO2018226349A1 (en) | Vector graphics handling processes for user applications | |
| CN104240273A (zh) | 栅格图片的处理方法及装置 | |
| CN103914223A (zh) | 终端应用界面的生成方法及装置 | |
| CN115391692A (zh) | 视频处理方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 266555 Qingdao economic and Technological Development Zone, Shandong, Hong Kong Road, No. 218 Patentee after: Hisense Visual Technology Co., Ltd. Address before: 266555 Qingdao economic and Technological Development Zone, Shandong, Hong Kong Road, No. 218 Patentee before: QINGDAO HISENSE ELECTRONICS Co.,Ltd. |