一种基于Canvas API的多端绘图方法技术

本发明专利技术公开了一种基于Canvas API的多端绘图方法，通过调用Canvas API定义的绘图方法进行绘图，同时生成若干个绘制逻辑，然后将若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合，最后将命令集合传输至原生端，以供原生端根据命令集合，触发视图绘制并完成绘图，采用发明专利技术提供的实施例，能够提高绘图性能与易用性，降低了开发与维护的成本。

A multi terminal drawing method based on canvas API

【技术实现步骤摘要】
一种基于CanvasAPI的多端绘图方法
本专利技术涉及数据处理
，尤其涉及一种基于CanvasAPI的多端绘图方法。
技术介绍
ReactNative框架是Facebook公司开发并使用的基于JavaScript和React编写原生移动应用的开源框架。ReactNative所使用的基础UI组件和原生应用完全一致，实现了一套代码同时开发iOS与Android多端应用。图表，是一种与各种图形相关的数据可视化的表达形式。在证券类APP里，各种理财类产品，股票行情K线，证券分析类产品的展示都需要用图表来展示。CanvasAPI是一种Web开发技术，由W3C(WorldWideWebConsortium，万维网联盟)定义了图形绘制的方法与实现规范。CanvasAPI主要聚焦于2D图形，定义了各种图形绘制的方法。使用CanvasAPI绘图是编写命令式的代码与调用方式。在ReactNative框架中，对于复杂图表的技术选型，主要有两个常见方案可以选择WebView与原生端组件方案，WebView方案是使用Web图表库，在网页里绘制图表，然后在ReactNative中用WebView将网页展示出来。这种方法简单，将Web成熟的图表库如echarts、highCharts等用WebView组件封装一下，就能直接使用。原生端(iOS与Android)方案是Android与IOS端分别实现图表功能，让JS端直接调用展示。然而，上述两种常见的方案却存在着以下技术问题：(1)WebView方案虽然使用成本低，但是因为要加载与解析网页，存在着首次加载速度慢，内存占用高等性能问题。(2)原生端实现的方案，需要编写两端代码分别负责绘制逻辑，开发与维护成本高。
技术实现思路
本专利技术实施例的目的是提供一种基于CanvasAPI的多端绘图方法，能够提高绘图性能与易用性，降低了开发与维护的成本。为实现上述目的，本专利技术实施例提供了一种基于CanvasAPI的多端绘图方法，包括以下步骤：调用CanvasAPI定义的绘图方法进行绘图，同时生成若干个绘制逻辑；将所述若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合；将所述命令集合传输至原生端，以供所述原生端根据所述命令集合，触发视图绘制并完成绘图。进一步的，所述绘制命令包括绘制方法和绘制参数。进一步的，所述原生端在接收到所述命令集合后，根据所述命令集合中的绘制方法和绘制参数，采用反射动态调用技术调用对应的CanvasAPI方法完成绘图。进一步的，通过ReactNativebridge与原生端进行数据传输。进一步的，所述原生端包括iOS端和Android端。进一步的，所述iOS端通过CoreGraphics图形绘制库触发视图绘制并完成绘图。进一步的，所述Android端通过graphicsCanvas相关图形绘制包触发视图绘制并完成绘图。实施本专利技术实施例，具有如下有益效果：本专利技术提供一种基于CanvasAPI的多端绘图方法，通过调用CanvasAPI定义的绘图方法进行绘图，同时生成若干个绘制逻辑，然后将若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合，最后将命令集合传输至原生端，以供原生端根据命令集合，触发视图绘制并完成绘图。与现有技术相比，本专利技术提供的实施例具有以下优点：(1)性能方面：相比于WebView绘制图表方法，本方面提供的实施例在iOS端表现为内存使用少、FPS稳定，在Android端变现为CPU使用率低、内存使用少、性能很理想。(2)易用性方面：实现了Web开发技术标准的CanvasAPI，并兼容了Web端成熟的图表库，在JS端实现的图表绘制逻辑可以使用现成的图表库实现，降低了使用成本。(3)开发与维护成本方面：只需要在JS端实现绘图业务逻辑，无需原生端实现业务逻辑，降低了开发与维护成本。附图说明图1是本专利技术提供的基于CanvasAPI的多端绘图方法的一个实施例的流程示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。请参见图1，图1是本专利技术提供的基于CanvasAPI的多端绘图方法的一种实施例的流程示意图。如图1所示，该基于CanvasAPI的多端绘图方法包括步骤S1至步骤S3，各步骤具体如下：S1，调用CanvasAPI定义的绘图方法进行绘图，同时生成若干个绘制逻辑。作为本专利技术的一个优选实施例，本专利技术是在JS端使用CanvasAPI方法来实现具体的图形如折线图等图表的绘制逻辑。S2，将所述若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合。作为本专利技术的一个优选实施例，所述绘制命令包括绘制方法和绘制参数，其中，绘制参数具体为颜色、坐标等信息。需要说明的是，这些绘制命令由对应的方法名与方法参数构成。比如调用一个绘制方法translate(50,50)，则会生成{“method”:“translate”,“arguments”:[50,50]}这样的命令添加到命令集。S3，将所述命令集合传输至原生端，以供所述原生端根据所述命令集合，触发视图绘制并完成绘图。作为本专利技术的一个优选实施例，所述原生端在接收到所述命令集合后，根据所述命令集合中的绘制方法和绘制参数，采用反射动态调用技术调用对应的CanvasAPI方法完成绘图。在本实施例中，是通过ReactNativebridge与原生端进行数据传输，从而能够将命令集合传输至原生端。优选的，所述原生端包括iOS端和Android端，所述iOS端通过CoreGraphics图形绘制库触发视图绘制并完成绘图，所述Android端通过graphicsCanvas相关图形绘制包触发视图绘制并完成绘图。为了更好的说明本专利技术提供的多端绘图方法，以下为本专利技术方法的工作原理：首先，通过JS端调用CanvasAPI方法进行绘图，并将这些方法转换成绘制命令，然后通过ReactNative提供的通信手段“ReactNativebridge”将命令传到原生端，原生端在收到命令后调用原生端实现的CanvasAPI绘图方法进行绘图，从而完成图形绘制。综上所述，本专利技术提供的基于CanvasAPI的多端绘图方法，通过调用CanvasAPI定义的绘图方法进行绘图，同时生成若干个绘制逻辑，然后将若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合，最后将命令集合传输至原生端，以供原生端根据命令集合，触发视图绘制并完成绘图。与现有技术相比，本专利技术提供的实施例具有以下优点：(1)性能方面本文档来自技高网...

【技术保护点】
1.一种基于Canvas API的多端绘图方法，其特征在于，包括以下步骤：/n调用Canvas API定义的绘图方法进行绘图，同时生成若干个绘制逻辑；/n将所述若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合；/n将所述命令集合传输至原生端，以供所述原生端根据所述命令集合，触发视图绘制并完成绘图。/n

【技术特征摘要】
1.一种基于CanvasAPI的多端绘图方法，其特征在于，包括以下步骤：
调用CanvasAPI定义的绘图方法进行绘图，同时生成若干个绘制逻辑；
将所述若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合；
将所述命令集合传输至原生端，以供所述原生端根据所述命令集合，触发视图绘制并完成绘图。


2.如权利要求1所述的基于CanvasAPI的多端绘图方法，其特征在于，所述绘制命令包括绘制方法和绘制参数。


3.如权利要求1所述的基于CanvasAPI的多端绘图方法，其特征在于，所述原生端在接收到所述命令集合后，根据所述命令集合中的绘制方法和绘制参数，采用反射动态调用技术调用对应的Canvas...

【专利技术属性】
技术研发人员：谢杨玲，张淼，杜瑞罡，蒋荣，
申请(专利权)人：广发证券股份有限公司，
类型：发明
国别省市：广东;44