[发明专利]一种基于Canvas API的多端绘图方法

说明书

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

技术领域

本发明涉及数据处理技术领域，尤其涉及一种基于Canvas API的多端绘图方法。

背景技术

React Native 框架是 Facebook公司开发并使用的基于JavaScript和 React 编写原生移动应用的开源框架。React Native所使用的基础UI组件和原生应用完全一致，实现了一套代码同时开发 iOS 与 Android 多端应用。

图表，是一种与各种图形相关的数据可视化的表达形式。在证券类APP里，各种理财类产品，股票行情 K 线，证券分析类产品的展示都需要用图表来展示。

Canvas API是一种 Web 开发技术，由W3C（World Wide Web Consortium，万维网联盟）定义了图形绘制的方法与实现规范。Canvas API 主要聚焦于2D图形，定义了各种图形绘制的方法。使用 Canvas API 绘图是编写命令式的代码与调用方式。

在 React Native 框架中，对于复杂图表的技术选型，主要有两个常见方案可以选择WebView 与原生端组件方案，WebView方案是使用 Web 图表库，在网页里绘制图表，然后在 React Native 中用 WebView 将网页展示出来。这种方法简单，将 Web 成熟的图表库如echarts、highCharts 等用 WebView 组件封装一下，就能直接使用。原生端（iOS与Android）方案是Android 与 IOS 端分别实现图表功能，让JS端直接调用展示。

然而，上述两种常见的方案却存在着以下技术问题：

（1）WebView 方案虽然使用成本低，但是因为要加载与解析网页，存在着首次加载速度慢，内存占用高等性能问题。

（2）原生端实现的方案，需要编写两端代码分别负责绘制逻辑，开发与维护成本高。

发明内容

本发明实施例的目的是提供一种基于Canvas API的多端绘图方法，能够提高绘图性能与易用性，降低了开发与维护的成本。

为实现上述目的，本发明实施例提供了一种基于Canvas API的多端绘图方法，包括以下步骤：

调用Canvas API定义的绘图方法进行绘图，同时生成若干个绘制逻辑；

将所述若干个绘制逻辑转换成对应的绘制命令，并以所有的绘制命令构建命令集合；

将所述命令集合传输至原生端，以供所述原生端根据所述命令集合，触发视图绘制并完成绘图。

进一步的，所述绘制命令包括绘制方法和绘制参数。

进一步的，所述原生端在接收到所述命令集合后，根据所述命令集合中的绘制方法和绘制参数，采用反射动态调用技术调用对应的Canvas API方法完成绘图。

进一步的，通过React Native bridge与原生端进行数据传输。

进一步的，所述原生端包括iOS端和Android端。

进一步的，所述iOS端通过Core Graphics图形绘制库触发视图绘制并完成绘图。

进一步的，所述Android 端通过graphics Canvas图形绘制包触发视图绘制并完成绘图。