CN114064017A

CN114064017A - 一种绘制方法及相关设备

Info

Publication number: CN114064017A
Application number: CN202010773295.1A
Authority: CN
Inventors: 邓水雄
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2020-08-04
Filing date: 2020-08-04
Publication date: 2022-02-18
Anticipated expiration: 2040-08-04
Also published as: CN114064017B

Abstract

本申请提供了一种绘制方法及相关设备，打通了不同操作系统之间的屏障，并在绘图时可以减少重绘次数，提升图形绘制的效率，减少性能损耗。该方法包括：接收用户的第一操作指令；基于第一操作指令，通过目标接口调用第一绘制命令，目标接口为跨平台框架中的原生绘制接口，跨平台框架中的原生绘制接口与至少两个移动设备操作系统具有关联关系；确定第一绘制命令的第一标识以及第一绘制命令的第一调用参数；将第一标识以及第一调用参数存储至绘制命令数组，绘制命令数组中包括当前周期内的多个绘制命令的标识以及调用参数；当当前周期结束时，根据绘制命令数组中的所有绘制命令的标识以及绘制命令数组中所有绘制命令的调用参数进行绘制。

Description

一种绘制方法及相关设备

技术领域

本申请涉及图形绘制领域，尤其涉及一种绘制方法及相关设备。

背景技术

React Native：Facebook官方推出的跨平台框架，开发者可以使用web全球广域网(World Wide Web，web)开发语言(JavaScript/TypeScript)来编写移动应用，一套代码可以同时编译出IOS和Android客户端，构建出来的应用性能媲美原生应用，极大的提升了开发效率和用户体验，成为市场上的主流跨平台开发方案。

目前React Native是市场的主流开发跨平台方案，有非常多的组件库可以使用，但是在绘图这个领域可以使用的方案少之又少，一些对性能要求很高的绘图需求例如开发游戏、绘制数据图表可选的方案非常少，而业界上成熟的Web绘图库却很难移植到ReactNative这个平台。

目前主要通过React Native嵌套webview方案来实现图形的绘制，此方案的核心是使用webview已有的canvas，webview提供一套和canvas交互的接口给React Native使用，因此React Native会和webview频繁的通信，当数据量特别大或者交互特别频繁时会有性能问题，绘图效率不高，且容易造成卡顿甚至应用崩溃。

发明信息

本申请提供了一种绘制方法及相关设备，不但打通了不同操作系统之间的屏障，通过一个接口即可以调用不同操作系统的绘制接口，且在绘图时可以减少重绘次数，提升图形绘制的效率，减少性能损耗。

本申请第一方面提供了一种绘制方法，包括：

接收用户的第一操作指令；

基于所述第一操作指令，通过目标接口调用第一绘制命令，其中，所述目标接口为跨平台框架中的原生绘制接口，所述跨平台框架中的原生绘制接口与至少两个移动设备操作系统具有关联关系；

确定所述第一绘制命令的第一标识以及所述第一绘制命令的第一调用参数；

将所述第一标识以及所述第一调用参数存储至绘制命令数组，所述绘制命令数组中包括当前周期内的多个绘制命令的标识以及调用参数；

当所述当前周期结束时，根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中所有绘制命令的调用参数进行绘制。

可选地，所述方法还包括：

确定所述至少两个移动设备操作系统对应的原生绘制接口；

对所述至少两个移动设备操作系统对应的原生绘制接口进行封装，以得到所述目标接口。

可选地，所述根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中的所有绘制命令的调用参数进行绘制包括：

将所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中的所有绘制命令对应的调用参数通过目标绘制方法批量绘制至设备的屏幕，所述目标绘制方法为底层矢量绘图库中与所述绘制命令数组中的所有绘制命令对应的绘制方法，所述底层矢量绘图库为包括所述目标绘制方法在内的多个绘制方法的跨平台绘图库，且所述底层矢量绘图库与所述跨平台框架相对应。

可选地，所述方法还包括：

接收所述用户的第二操作指令；

根据所述第二操作指令调用矩阵变换接口；

通过所述矩阵变换接口创建目标矩阵，以对绘制的图形进行调整。

可选地，所述根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中的所有绘制命令的调用参数进行绘制之后，所述方法还包括：

将所述绘制命令数组进行重置，并将所述当前周期的下一周期内获取到的第二绘制命令的第二标识以及所述第二绘制命令的第二调用参数存储至重置后的所述绘制命令数组内。

本申请第二方面提供了一种绘制装置，包括：

接收单元，用于接收用户的第一操作指令；

调用单元，用于基于所述第一操作指令，通过目标接口调用第一绘制命令，其中，所述目标接口为跨平台框架中的原生绘制接口，所述跨平台框架中的原生绘制接口与至少两个移动设备操作系统具有关联关系；

确定单元，用于确定所述第一绘制命令的第一标识以及所述第一绘制命令的第一调用参数；

存储单元，用于将所述第一标识以及所述第一调用参数存储至绘制命令数组，所述绘制命令数组中包括当前周期内的多个绘制命令的标识以及调用参数；

绘制单元，用于当所述当前周期结束时，根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中所有绘制命令的调用参数进行绘制。

可选地，所述确定单元，还用于确定所述至少两个移动设备操作系统对应的原生绘制接口；

所述绘制装置还包括：

封装单元，用于对所述至少两个移动设备操作系统对应的原生绘制接口进行封装，以得到所述目标接口。

可选地，所述绘制单元具体用于：

可选地，所述接收单元，还用于接收所述用户的第二操作指令；

所述调用单元，还用于根据所述第二操作指令调用矩阵变换接口；

所述绘制单元，还用于通过所述矩阵变换接口创建目标矩阵，以对绘制的图形进行调整。

可选地，所述装置还包括：

重置单元，用于将所述绘制命令数组进行重置，并将所述当前周期的下一周期内获取到的第二绘制命令的第二标识以及所述第二绘制命令的第二调用参数存储至重置后的所述绘制命令数组内。

本申请第三方面提供了一种计算机装置，其包括至少一个连接的处理器、存储器和收发器，其中，所述存储器用于存储程序代码，所述程序代码由所述处理器加载并执行以实现上述所述的绘制方法的步骤。

本申请第四方面提供了一种计算机可读存储介质，其包括指令，当其在计算机上运行时，使得计算机执行上述所述的绘制方法的步骤。

综上所述，可以看出，本申请提供的实施例中，绘制装置通过目标接口调用绘制命令，该目标接口与至少两个移动设备操作系统的原生绘制接口相关联，并确定绘制命令的标识以及调用参数，并将该绘制命令的标识以及调用参数存储至绘制命令数组，该绘制命令数组中包括当前周期内的多个绘制命令的标识以及调用参数，在当前周期结束时，根据绘制命令数组中的所有绘制命令的标识以及绘制命令数组中所有绘制命令的调用参数进行绘制。这样不但打通了不同操作系统之间的屏障，通过一个接口即可以调用不同操作系统的绘制接口，且在一次周期内，绘制相关的命令可以被调用许多次，但不会立即绘制在设备屏幕上，而是在周期结束的时候才会绘制，从而大大减少重绘次数，提升绘图效率。

附图说明

图1为本申请实施例提供的绘制方法的网络架构示意图；

图2为本申请实施例提供的绘制方法的具体使用流程图；

图3为本申请实施例提供的canvas的接口示意图；

图4为本申请实施例提供CanvasRenderingContext2D对应的方法示意图；

图5为本申请实施例提供图片裁剪以及放置的示意图；

图6为本申请实施例提供的绘制方法的一个流程示意图；

图7为本申请实施例提供的绘制方法的另一流程示意图；

图8为本申请实施例提供的绘制装置的虚拟结构示意图；

图9为本申请实施例提供的绘制装置的硬件结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的信息以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式，例如多个模块可以结合成或集成在另一个系统中，或一些特征向量可以忽略，或不执行，另外，所显示的或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，模块之间的间接耦合或通信连接可以是电性或其他类似的形式，本申请中均不作限定。并且，作为分离部件说明的模块或子模块可以是也可以不是物理上的分离，可以是也可以不是物理模块，或者可以分布到多个电路模块中，可以根据实际的需要选择其中的部分或全部模块来实现本申请方案的目的。

请参阅图1，图1为本申请实施例提供的绘制方法的网络架构示意图，其中，ECharts103和d3.js 104是运行在web上的成熟的绘图库，不能直接在React Native101中使用，当在React Native101中实现了Canvas API102后，通过简单的适配(具体的可以通过调配相应的环境参数)就可以直接在React Native上使用这些绘图库了，相当于一份代码可以直接运行在Web和React Native上，不需要另外开发，另外其他依赖canvas的应用105可以直接在React Native上使用。

其中，React Native ART为React Native官方推出的底层矢量绘图库，提供基础的绘图功能例如绘制线条以及多边形等，提供的应用程序接口(Application ProgrammingInterface，API)比较底层。

Canvas是超级文本5.0(Hyper Text Markup Language5.0，HTML5)新增的元素，canvas提供了一套2D绘图API，开发者可以利用该套API开发出性能优异的动画、游戏以及绘图工具，功能十分强大。

ECharts为百度推出的由JavaScript编写的开源可视化库，集成了许多图表，例如折线图、柱状图、饼状图、散点图等，底层渲染引擎是ZRender而ZRender的底层是Canvas。

请参阅图2，图2为本申请实施例提供的绘制方法的具体使用流程图，本申请的是基于IOS和Android实现一套Canvas API，整个设计分两层，分别是React Native层和Native层，Native层包含Android和IOS，也即图2中的Native Android201以及NativeIOS202，Native层提供原生绘制接口给React Native层(即图2中的React Nativecanvas203)使用，其中Android端通过Graphic Canvas实现原生接口，IOS端通过CoreGraphics实现原生接口，React Native层是对Native原生接口的封装并对外提供一致的接口给更上层的React Native应用204使用，抹平了两大平台的差异，开发者在使用时无需关心底层实现。

请参阅图3，图3为本申请实施例提供的canvas的接口示意图，包括：

Canvas300、CanvasRenderingContext2D301、Pattern302、Path2D303、DOMMatrix2DInit304以及DOMMatrixInit305；

其中，CanvasRenderingContenxt2D301接口的主要功能是提供绘制图形、绘制线条、绘制图像以及进行矩阵变化；

Pattern302用来创建一个Pattern对象给CanvasRenderingContext2D301使用；

Path2D 303用来构造一个路径对象，并可以被CanvasRenderingContext2D 301使用；

DOMMatrix2DInit304用来创建一个2x 2矩阵对通过CanvasRenderingContext2D301绘制的图形进行2D操作使用，例如可以通过对DOMMatrix2DInit304创建的矩阵进行矩阵变换来控制CanvasRenderingContext2D 301绘制的图像进行缩放、平移以及旋转等2D操作；

DOMMatrixInit305用于创建一个4x 4矩阵对CanvasRenderingContext2D 301绘制的图形进行3D操作使用，例如可以通过对DOMMatrixInit305创建的矩阵进行矩阵变换来控制CanvasRenderingContext2D 301绘制的图像进行缩放、平移以及旋转等3D操作。

请参阅图4，图4为本申请实施例提供的CanvasRenderingContext2D对应的方法示意图，包括如下命令：

fillRect401、fillText402、drawImage403、timer404以及_draw405，其中，canvas表示canvas对象引用；

drawImage403命令用来绘制图片，通过对drawImage的调用参数进行设置来绘制图片，参数设置如下image：any，sx：any，sy：any，sw？：any，sh？：any，dx？：any，dy？：any，dw？：any，dh？：any，下面说明上述各个参数的具体用法：

sx->source axisX；

sy->source axisY；

sw->source width；

sh->source height；

通过以上参数来裁剪源图片，选择要绘制图片的哪些部分，如图5所示，501为源图片，通过sx、sy、sw以及sh来确定如何对源图片进行裁剪，5011为裁剪后得到的图片；

通过以下参数的设置对裁剪后得到的图片5011进行放置，如图5中的将图片5011放置于502中，具体的放置位置如下：

dx->destination axisX；

dy->destination axisY；

dw->destination width；

dh->destination height；

在对源图片501按照上述调用参数进行裁剪后得到图片5011，可以通过dx、dy、dw以及dh的参数设置确定要将图片5011绘制在canvas(也即图5中的502)上的哪个位置和范围。

fillRect401表示填充矩形区域，通过如下参数来进行设置，x：number，y：number，w：number，h：number，其中number用来设置具体的数值，如图5中的501以及502；其中，fill(path？：any，fillRule？：any)表示填充当前路径；rect(x：number，y：number，w：number，h：number)表示绘制矩形路径；

fillText402用于绘制指定的文字，通过如下参数来进行设置，text：string(表示具体文字)，x：number，y：number，maxWidth？：number|undefined；

raf表示定时器，用于定时向Native层发送消息；

ctx表示Native层提供的绘图对象。

Commands表示绘制命令数组，用于存储调用的绘制方法的方法名以及调用参数；

_draw405表示自定义的绘制方法，该方法会调用Native层进行图形绘制，也即上述所说的通过Android的Graphic Canvas接口和iOS的Core Graphics接口来实现的Native接口。

其中rafctx、commands以及_draw为自定义的属性和方法，基于性能的考量ReactNative与Native之间的通信都是异步的，React Native层的绘制命令会存储在commands中，通过requestAnimationFrame(其中，requestAnimationFrame会在React Native完成每一帧的渲染之后调用)实现异步调用Native方法。可以理解的是，这里的requestAnimationFrame是React Native的原生API，这个API会调用注册在上面的方法(如drawImage、fillText以及react等方法)，调用时机就是React Native完成每一帧渲染的间隙，使用这种方式不会频繁的触发绘制，从而提升性能。

下面对Path2D接口的实现进行说明，具体如下：

addPath：表示添加一个新的路径到当前路径中；

arc(x：number，y：number，radius：number，startAngle：number，endAngle：number，anticlockwise？：boolean|undefined)：表示绘制圆弧路径，其中，x和y标识圆弧中心的位置，radius表示半径，startAngle为起始角度，endAngle为终止角度；

arcTo(x1：number，y1：number，x2：number，y2：number，radius：number)：表示依据某点绘制圆弧路径，其中，x1，y1为第1点的位置，x2，y2为第2点的位置，radius为半径；

bezierCurveTo(cp1x：number，cp1y：number，cp2x：number，cp2y：number，x：number，y：number)：表示绘制三次贝塞尔曲线，cp1x，cp1y，cp2x，cp2y，x，y表示三个点的位置；

closePath()：从当前点到起始点绘制一条路径；

ellipse(x：number，y：number，radiusX：number，radiusY：number，rotation：number，startAngle：number，endAngle：number，anticlockwise？：boolean|undefined)：表示绘制椭圆路径；

lineTo(x：number，y：number)：表示绘制当前点到终点的路径；

moveTo(x：number，y：number)：表示移动路径起点而不绘制新的路径；

quadraticCurveTo(cpx：number，cpy：number，x：number，y：number)：表示绘制两次贝塞尔曲线；

rect(x：number，y：number，w：number，h：number)：表示绘制矩形路径。也就是说，用户如果想绘制圆弧路径，则可以调用arc方法，并将arc方法的标识以及调用参数(该调用参数为上述arc命令中的number，可以理解的是，上述所有的number均为各自命令对应的调用参数，用户可以通过对number的修改绘制出不同的线条或者圆弧)存储绘制命令数组，当执行周期来到时，将绘制命令数组中的所有命令的标识以及调用参数批量导入Native层，以将图形绘制到设备上，由此不用频繁的进行绘图，提升绘制效率以及设备性能。

下面从绘制装置的角度对本申请提供的绘制方法进行说明，请参阅图6，图6为本申请实施例提供的绘制方法的流程示意图，包括：

601、接收用户的第一操作指令。

602、基于第一操作指令，通过目标接口调用第一绘制命令。

本实施例中，绘制装置可以基于第一操作指令，通过目标接口调用第一绘制命令，其中，该目标接口为跨平台接口中的原生绘制接口，该跨平台框架中的原生绘制接口与至少两个移动设备操作系统具有关联关系，该第一绘制命令包括但不限于文本绘制命令、图像绘制命令以及线条绘制命令。也就是说，绘制装置可以根据用户的第一操作指令通过目标接口调用相应的绘制命令，例如可以根据用户的第一操作指令通过目标接口调用与绘制相关的方法，例如drawImage、fillText以及react方法。如图2所示，此处的至少两个移动设备操作系统包括Android和IOS，当然也还可以包括其他的移动设备操作系统，例如WindowsPhone操作系统，具体不做限定，此处以Android和ios为例进行说明，Android通过GraphicCanvas，IOS端通过Core Graphics实现原生接口，也即目标接口。

需要说明的是，绘制装置可首先确定至少两个移动设备操作系统对应的原生绘制接口，并对至少两个移动设备操作系统对应的原生绘制接口进行封装得到目标接口，也即对Android端的Graphic Canvas原生绘制接口和IOS端的Core Graphics接口进行封装，由此可以保证在Android操作系统通过目标接口调用第一绘制命令时，是通过GraphicCanvas实现的，IOS操作系统通过目标接口调用第一绘制命令时，是通过Core Graphics实现的，打通了至少两个移动设备操作系统之间的屏障。

一个实施例中，生成该第一操作指令的操作至少包括手势操作、滑动操作、点击操作以及声控操作中的一种，例如用户进行点击操作时，绘制装置可以接收到该点击操作，此时，该点击操作即生成第一操作指令，也就是说，可以提前定义操作指令，例如提前定义滑动操作为调用第一绘制命令的操作(如左滑操作、右滑操作、上滑操作以及下滑操作等等)，或者定义点击操作为调用第一绘制命令的操作(如单击操作或双击操作等等)，或者定义手势操作为调用第一绘制命令的操作(如向左摆动手腕或手臂，向右摆动手腕或手臂，如四根手指收缩操作或者三根手指上滑操作等等)，或者定义声控操作为调用第一绘制命令的操作(如收到调用绘制命令的声音以及具体的调用哪个绘制方法的)，上述仅为举例说明，并不代表对生成第一操作指令的操作进行限定。

603、确定第一绘制命令的第一标识以及第一绘制命令的第一调用参数。

本实施例中，绘制装置在调用第一绘制命令之后，可以确定该第一绘制命令的第一标识以及第一绘制命令的第一调用参数。也就是说，每一次与绘制相关的方法例如drawImage，fillText以及react被调用时，会确定被调用的方法也即绘制命令的标识以及调用参数，例如调用的绘制命令fillText(‘hello’，10，20)后，可以确定该绘制命令的标识为fillText，该绘制命令的调用参数为‘hello’，10，20。

604、将第一标识以及第一调用参数存储至绘制命令数组。

本实施例中，绘制装置在确定第一绘制命令的第一标识以及第一绘制命令的第一调用参数之后，可以将该第一标识以及第一调用参数存储至绘制命令数组，其中，该绘制命令数组中存储有当前周期内的多个绘制命令的标识以及调用参数，也就是说，在当前周期内，绘制相关的命令(如drawImage，fillText以及react)会被调用很多次，每次绘制相关的命令被调用后都会将绘制命令对应的标识以及调用参数存储至绘制命令数组commands内。也即将该绘制命令的标识以及调用方法存储在commands中(此处以绘制命令的标识为绘制命令的名称为例进行说明，当然也还可以是其他的标识，只要能唯一标识该绘制命令即可，具体不做限定)，例如第一绘制命令为调用fillText(‘hello’，10，20)后，可以将该第一绘制命令的第一标识fillText以及该第一绘制的第一调用参数‘hello’，10，20存储至commands，其中，该第一标识以及第一调用参数在commands内存储的数据具体如下：

605、当当前周期结束时，根据绘制命令数组中的所有绘制命令的标识以及绘制命令数组中所有绘制命令的调用参数进行绘制。

本实施例中，在当前周期结束时，绘制装置可以根据绘制命令数组中的所有绘制命令的标识以及绘制命令数组中所有绘制命令的调用参数进行绘制。具体的，可以将绘制命令数组中的所有绘制命令的标识以及绘制命令数组中的所有绘制命令对应的调用参数通过目标绘制方法批量绘制至设备的屏幕，该目标绘制方法为底层矢量绘图库中与绘制命令数组中的所有绘制命令对应的绘制方法，该底层矢量绘图库为包括所述目标绘制方法在内的多个绘制方法的跨平台绘图库，且该底层矢量绘图库与跨平台框架相对应。也就是说，在requestAnimationFrame的执行周期到来的时候(也即当前周期结束，将requestAnimationFrame的执行周期作为一个周期来进行说明)，将commands内的数据通过ctx.draw(ctx.draw为native层提供的绘制方法)方法批量绘制到设备(该设备可以是安卓设备也可以是苹果设备，具体不限定)上，以上为完整的一个绘制周期。依次循环往复，绘制图形。所以在一次requestAnimationFrame周期内，绘制相关的方法可以被调用许多次，但不会立即绘制在设备屏幕上，而是在执行周期到来的时候才会绘制，从而大大减少重绘次数，也即该requestAnmationFrame的执行是有周期的，在每个执行周期之间，绘制装置可以获取用户的多个绘制命令，这些绘制命令的标识以及调用参数会缓存在commands中，等requestAnmationFrame的执行周期到了，再批量执行这些绘制命令，提高绘制效率。

一个实施例中，绘制装置在根据绘制命令数组中的所有绘制命令的标识以及绘制命令数组中的所有绘制命令的调用参数进行绘制之后，还执行如下操作：

将绘制命令数组进行重置，并将当前周期的下一周期内获取到的第二绘制命令的第二标识以及第二绘制命令的第二调用参数存储至重置后的绘制命令数组内。

本实施例中，在requestAnimationFrame的执行周期到来的时候，绘制装置将commands内的数据通过ctx.draw(native层提供的绘制方法)方法批量绘制到设备上之后，可以将绘制命令数组commands进行重置操作，并重复上述操作，获取用户指令，根据用户指令确定绘制命令，并将绘制命令的标识以及调用参数存储至重置后的绘制命令数组中，之后当requestAnimationFrame的执行周期再一次到来的时候，将commands内的数据通过ctx.draw方法批量绘制到设备上之后，将绘制命令数组commands进行重置操作，依次循环往复，绘制图形。

请参阅图7，图7为本申请实施例提供的绘制方法的另一流程示意图，包括：

701、RenderingContext2D的绘制方法被调用(drawImage，fillText)，绘制装置可以根据用户的操作指令通过目标接口调用RenderingContext2D的绘制方法，例如drawImage方法或者fillText方法；

702、RenderingContext2D的commands，绘制装置根据用户的操作指令通过目标接口调用RenderingContext2D的绘制方法，例如drawImage方法或者fillText方法，之后将调用的RenderingContext2D的绘制方法的标识以及调用参数存储至RenderingContext2D的commands内；

703、requestAnimationFrame循环，也即requestAnimationFrame的执行时机，每一帧渲染完后会调用通过requestAnimationFrame注册的方法，只要发生了图形绘制行为，requestAnimationFrame就会执行，相当于是一个循环。

704、Native层绘图方法，绘制装置会将RenderingContext2D的commands中的标识以及调用参数批量导入Native层进行图形的绘制；

705、IOS/Android，将图形绘制在IOS设备或者Android设备的屏幕上。

也就是说，每一次与绘制相关的方法例如drawImage，fillText，react被调用时(例如用户想要裁剪图片，就会调用drawImage方法)，会将该方法的方法名以及调用参数存入commands中，例如调用fillText(‘hello’，10，20)后，commands内存储的数据为，标识：fillText，调用参数：‘hello’，10，20；在requestAnimationFrame的执行周期到来的时候，将commands内的数据通过ctx.draw(native层提供的绘制方法)方法批量绘制到安卓设备或者苹果设备上。之后可以将commands进行重置，依次循环往复，绘制图形。

所以在一次requestAnimationFrame周期内，绘制相关的方法可以被调用许多次，但不会立即绘制在(调用ctx.draw方法)设备屏幕上，而是在执行周期到来的时候才会绘制，从而大大减少重绘次数，提升绘图效率。

在一个实施例中，绘制装置可以接收用户的第二操作指令，并根据第二操作指令调用矩阵变换接口，通过矩阵变换接口创建目标矩阵，以对绘制的图形进行调整。

本实施例中，当用户需要对绘制的图形进行调整时，可以对绘制的图形进行操作，此时绘制装置可以接收到该用户的第二操作指令，并根据第二操作指令调用相应的接口创建对应的矩阵对绘制的图像进行调整。如图3中所示的，绘制装置可以根据用户的第二操作指令，调用DOMMatrix2DInit304用来创建一个2 x 2矩阵对绘制的图形进行2D操作使用，例如可以通过对DOMMatrix2DInit创建的矩阵进行矩阵变换来控制绘制的图像进行缩放、平移以及旋转等2D操作；或者绘制装置可以根据用户的第二操作指令调用DOMMatrixInit305用于创建一个4 x 4矩阵对绘制的图形进行3D操作使用，例如可以通过对DOMMatrixInit305创建的矩阵进行矩阵变换来控制绘制的图像进行缩放、平移以及旋转等3D操作。

上面从的绘制方法的角度对本申请进行说明，下面从绘制装置的角度对本申请进行说明。

请参阅图8，图8为本申请实施例提供的一种绘制装置的虚拟结构示意图，包括：

接收单元801，用于接收用户的第一操作指令；

调用单元802，用于基于所述第一操作指令，通过目标接口调用第一绘制命令，其中，所述目标接口为跨平台框架中的原生绘制接口，所述跨平台框架中的原生绘制接口与至少两个移动设备操作系统具有关联关系；

确定单元803，用于确定所述第一绘制命令的第一标识以及所述第一绘制命令的第一调用参数；

存储单元804，用于将所述第一标识以及所述第一调用参数存储至绘制命令数组，所述绘制命令数组中包括当前周期内的多个绘制命令的标识以及调用参数；

绘制单元805，用于当所述当前周期结束时，根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中所有绘制命令的调用参数进行绘制。

可选地，所述确定单元803，还用于确定所述至少两个移动设备操作系统对应的原生绘制接口；

所述绘制装置还包括：

封装单元806，用于对所述至少两个移动设备操作系统对应的原生绘制接口进行封装，以得到所述目标接口。

可选地，所述绘制单元805具体用于：

将所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中的所有绘制命令对应的调用参数通过目标绘制方法批量绘制至设备的屏幕，所述目标绘制方法为底层矢量绘图库中与所述绘制命令数组中的所有绘制命令对应的绘制方法，所述底层矢量绘图库为包括所述目标绘制方法在内的多个绘制方法的跨平台绘图库。

可选地，所述接收单元801，还用于接收所述用户的第二操作指令；

所述调用单元802，还用于根据所述第二操作指令调用矩阵变换接口；

所述绘制单元805，还用于通过所述矩阵变换接口创建目标矩阵，以对绘制的图形进行调整。

可选地，所述装置还包括：

重置单元807，用于将所述绘制命令数组进行重置，并将所述当前周期的下一周期内获取到的第二绘制命令的第二标识以及所述第二绘制命令的第二调用参数存储至重置后的所述绘制命令数组内。

综上所述，可以看出，本申请提供的实施例中，绘制装置通过目标接口调用绘制命令，该目标接口与至少两个移动设备操作系统的原生绘制接口相关联，并确定绘制命令的标识以及调用参数，并将该绘制命令的标识以及调用参数存储至绘制命令数组，该绘制命令数组中包括当前周期内的多个绘制命令的标识以及调用参数，在当前周期结束时，根据绘制命令数组中的所有绘制命令的标识以及绘制命令数组中所有绘制命令的调用参数进行绘制。这样打通了不同操作系统之间的屏障，通过一个接口即可以调用不同操作系统的绘制接口，且在一次周期内，绘制相关的命令可以被调用许多次，但不会立即绘制在设备屏幕上，而是在周期结束的时候才会绘制，从而大大减少重绘次数，提升绘图效率。

本申请实施例还提供了另一种绘制装置，如图9所示，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请实施例方法部分。该绘制装置可以为终端，该终端可以为包括手机、平板电脑、PDA(Personal Digital Assistant，个人数字助理)、POS(Point of Sales，销售终端)、车载电脑等任意终端设备，以终端为手机为例：

图9示出的是与本申请实施例提供的终端相关的手机的部分结构的框图。参考图9，手机包括：射频(Radio Frequency，RF)电路910、存储器920、输入单元930、显示单元940、传感器950、音频电路960、无线保真(wireless fIDelity，WiFi)模块970、处理器980、以及电源990等部件。本领域技术人员可以理解，图9中示出的手机结构并不构成对手机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图9对手机的各个构成部件进行具体的介绍：

RF电路910可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器980处理；另外，将设计上行的数据发送给基站。通常，RF电路910包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low NoiseAmplifier，LNA)、双工器等。此外，RF电路910还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GlobalSystem of Mobile communication，GSM)、通用分组无线服务(General Packet RadioService，GPRS)、码分多址(Code Division Multiple Access，CDMA)、宽带码分多址(WIDeband Code Division Multiple Access，WCDMA)、长期演进(Long Term Evolution，LTE)、电子邮件、短消息服务(Short Messaging Service，SMS)等。

存储器920可用于存储软件程序以及模块，处理器980通过运行存储在存储器920的软件程序以及模块，从而执行手机的各种功能应用以及数据处理。存储器920可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器920可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元930可用于接收输入的数字或字符信息，以及产生与手机的用户设置以及功能控制有关的键信号输入。具体地，输入单元930可包括触控面板931以及其他输入设备932。触控面板931，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板931上或在触控面板931附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板931可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器980，并能接收处理器980发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板931。除了触控面板931，输入单元930还可以包括其他输入设备932。具体地，其他输入设备932可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元940可用于显示由用户输入的信息或提供给用户的信息以及手机的各种菜单。显示单元940可包括显示面板941，可选的，可以采用液晶显示器(LiquID CrystalDisplay，LCD)、有机发光二极管(Organic Light-Emitting Diode，OLED)等形式来配置显示面板941。进一步的，触控面板931可覆盖显示面板941，当触控面板931检测到在其上或附近的触摸操作后，传送给处理器980以确定触摸事件的类型，随后处理器980根据触摸事件的类型在显示面板941上提供相应的视觉输出。虽然在图9中，触控面板931与显示面板941是作为两个独立的部件来实现手机的输入和输入功能，但是在某些实施例中，可以将触控面板931与显示面板941集成而实现手机的输入和输出功能。

手机还可包括至少一种传感器950，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板941的亮度，接近传感器可在手机移动到耳边时，关闭显示面板941和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路960、扬声器961，传声器962可提供用户与手机之间的音频接口。音频电路960可将接收到的音频数据转换后的电信号，传输到扬声器961，由扬声器961转换为声音信号输出；另一方面，传声器962将收集的声音信号转换为电信号，由音频电路960接收后转换为音频数据，再将音频数据输出处理器980处理后，经RF电路910以发送给比如另一手机，或者将音频数据输出至存储器920以便进一步处理。

WiFi属于短距离无线传输技术，手机通过WiFi模块970可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图9示出了WiFi模块970，但是可以理解的是，其并不属于手机的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器980是手机的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器920内的软件程序和/或模块，以及调用存储在存储器920内的数据，执行手机的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器980可包括一个或多个处理单元；优选的，处理器980可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器980中。

手机还包括给各个部件供电的电源990(比如电池)，优选的，电源可以通过电源管理系统与处理器980逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，手机还可以包括摄像头、蓝牙模块等，在此不再赘述。

在本申请实施例中，上述由绘制装置所执行的步骤可以由该终端所包括的处理器980来执行。

本申请实施例还提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现上述所述绘制方法的步骤。

本申请实施例还提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述所述绘制方法的步骤。

本申请实施例还提供了一种终端设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，所述程序代码由所述处理器加载并执行以实现上述所述绘制方法的步骤。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行上述所述绘制方法的步骤。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims

1.一种绘制方法，其特征在于，包括：

接收用户的第一操作指令；

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

确定所述至少两个移动设备操作系统对应的原生绘制接口；

3.根据权利要求1所述的方法，其特征在于，所述根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中的所有绘制命令的调用参数进行绘制包括：

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述方法还包括：

接收所述用户的第二操作指令；

根据所述第二操作指令调用矩阵变换接口；

5.根据权利要求1至3中任一项所述的方法，其特征在于，所述根据所述绘制命令数组中的所有绘制命令的标识以及所述绘制命令数组中的所有绘制命令的调用参数进行绘制之后，所述方法还包括：

6.一种绘制装置，其特征在于，包括：

接收单元，用于接收用户的第一操作指令；

7.根据权利要求6所述的装置，其特征在于，

所述确定单元，还用于确定所述至少两个移动设备操作系统对应的原生绘制接口；

所述绘制装置还包括：

8.根据权利要求6所述的装置，其特征在于，所述绘制单元具体用于：

9.一种计算机装置，其特征在于，包括：

至少一个连接的处理器、存储器和收发器，其中，所述存储器用于存储程序代码，所述程序代码由所述处理器加载并执行以实现上述1至5中任一项所述的绘制方法的步骤。

10.一种计算机可读存储介质，其特征在于，包括指令，当所述指令在计算机上运行时，使得计算机执行上述权利要求1至5中任一项所述的绘制方法的步骤。