CN111240675B

CN111240675B - Multi-terminal drawing method based on Canvas API

Info

Publication number: CN111240675B
Application number: CN202010027928.4A
Authority: CN
Inventors: 谢杨玲; 张淼; 杜瑞罡; 蒋荣
Original assignee: Gf Securities Co ltd
Current assignee: Gf Securities Co ltd
Priority date: 2020-01-10
Filing date: 2020-01-10
Publication date: 2023-07-25
Anticipated expiration: 2040-01-10
Also published as: CN111240675A

Abstract

The invention discloses a multi-terminal drawing method based on Canvas API, which draws by calling the drawing method defined by Canvas API, simultaneously generates a plurality of drawing logics, then converts the drawing logics into corresponding drawing commands, constructs command sets by all the drawing commands, and finally transmits the command sets to a native terminal so as to enable the native terminal to draw and complete drawing according to the command sets.

Description

Multi-terminal drawing method based on Canvas API

Technical Field

The invention relates to the technical field of data processing, in particular to a multi-terminal drawing method based on Canvas API.

Background

The real Native framework is an open source framework developed and used by Facebook corporation to write Native mobile applications based on JavaScript and real. The basic UI component used by the real Native is completely consistent with the Native application, so that a set of codes can be developed into iOS and Android multi-terminal applications simultaneously.

A chart is an expression of data visualization associated with various graphics. In securities APP, various financial products, stock quotation K lines and securities analysis products are displayed by charts.

Canvas API is a Web development technology, and the method and implementation specification of graphics rendering are defined by W3C (World Wide Web Consortium ). The Canvas API focuses mainly on 2D graphics, defining various graphics rendering methods. Drawing using Canvas API is a way to write imperative code and calls.

In the real Native framework, for the technical choice of complex charts, there are mainly two common schemes that can select WebView and Native end component schemes, and the WebView scheme uses a Web chart library to draw charts in Web pages, and then uses WebView to display the Web pages in the real Native framework. The method is simple, and the Web mature chart library such as echarts, highCharts and the like can be directly used after being packaged by a WebView component. The original terminal (iOS and Android) scheme is that the Android and the iOS terminal respectively realize the chart function, so that the JS terminal directly calls and displays.

However, the two common solutions have the following technical problems:

(1) Although the WebView scheme has low use cost, the WebView scheme has the performance problems of low first loading speed, high memory occupation and the like because of loading and analyzing the webpage.

(2) The scheme of the original terminal implementation needs to write codes at two ends to be respectively responsible for drawing logic, and has high development and maintenance cost.

Disclosure of Invention

The embodiment of the invention aims to provide a multi-terminal drawing method based on Canvas API, which can improve drawing performance and usability and reduce development and maintenance cost.

In order to achieve the above object, an embodiment of the present invention provides a multi-terminal drawing method based on Canvas API, including the steps of:

calling a drawing method defined by a Canvas API to draw, and generating a plurality of drawing logics at the same time;

converting the drawing logics into corresponding drawing commands, and constructing a command set by using all the drawing commands;

transmitting the command set to a native terminal, so that the native terminal triggers view drawing and completes drawing according to the command set.

Further, the drawing command includes a drawing method and drawing parameters.

Further, after receiving the command set, the originating terminal calls a corresponding Canvas API method to complete drawing by adopting a reflection dynamic call technology according to a drawing method and drawing parameters in the command set.

Further, data transmission is performed with the native terminal through React Native bridge.

Further, the native terminal comprises an iOS terminal and an Android terminal.

Further, the iOS terminal triggers view drawing and completes drawing through a Core Graphics graphic drawing library.

Further, the Android terminal triggers view drawing and completes drawing through a graphics Canvas graphic drawing package.

The embodiment of the invention has the following beneficial effects:

the invention provides a multi-terminal drawing method based on Canvas API, which draws by calling the drawing method defined by Canvas API, simultaneously generates a plurality of drawing logics, then converts the drawing logics into corresponding drawing commands, constructs command sets by all drawing commands, and finally transmits the command sets to a native terminal, so that the native terminal can trigger the drawing of a view and complete drawing according to the command sets.

Compared with the prior art, the embodiment provided by the invention has the following advantages:

(1) Performance aspects: compared with a WebView chart drawing method, the embodiment provided by the scheme is characterized by less memory use and stable FPS at the iOS end, and is changed into a CPU with low use rate, less memory use and ideal performance at the Android end.

(2) Ease of use: the Canvas API of the Web development technical standard is realized, the graph library mature at the Web end is compatible, and the graph drawing logic realized at the JS end can be realized by using the existing graph library, so that the use cost is reduced.

(3) Development and maintenance costs: drawing business logic is only needed to be realized at the JS end, business logic is not needed to be realized at the original end, and development and maintenance cost is reduced.

Drawings

FIG. 1 is a flow chart of one embodiment of a Canvas API-based multi-port drawing method provided by the present invention.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

Referring to fig. 1, fig. 1 is a schematic flow chart of an embodiment of a multi-terminal drawing method based on Canvas API according to the present invention.

As shown in fig. 1, the multi-terminal drawing method based on Canvas API includes steps S1 to S3, and the steps are as follows:

s1, calling a drawing method defined by a Canvas API to draw, and generating a plurality of drawing logics.

As a preferred embodiment of the invention, the invention uses Canvas API method to realize drawing logic of specific graph such as line graph.

S2, converting the drawing logics into corresponding drawing commands, and constructing a command set by using all the drawing commands.

As a preferred embodiment of the present invention, the drawing command includes a drawing method and drawing parameters, wherein the drawing parameters are specific information of color, coordinates, and the like.

It should be noted that these drawing commands are composed of corresponding method names and method parameters. Such as invoking a rendering method transform (50, 50), commands such as { "method": "transform", "parameters": [50,50] } are generated and added to the command set.

And S3, transmitting the command set to a native terminal, so that the native terminal triggers view drawing and completes drawing according to the command set.

As a preferred embodiment of the invention, after receiving the command set, the native terminal adopts a reflection dynamic calling technology to call a corresponding Canvas API method to complete drawing according to a drawing method and drawing parameters in the command set.

In this embodiment, the data transmission is performed with the native terminal through React Native bridge, so that the command set can be transmitted to the native terminal.

Preferably, the native terminal comprises an iOS terminal and an Android terminal, the iOS terminal triggers the drawing of the view and completes the drawing through a Core Graphics drawing library, and the Android terminal triggers the drawing of the view and completes the drawing through a Graphics Canvas Graphics drawing package.

In order to better illustrate the multi-terminal drawing method provided by the invention, the following is the working principle of the method of the invention: firstly, calling Canvas API methods through a JS end to draw, converting the methods into drawing commands, then transmitting the commands to a Native end through a communication means 'React Nativebridge' provided by a real Native, and calling the Canvas API drawing methods realized by the Native end to draw after the Native end receives the commands, thereby completing drawing of graphics.

In summary, the multi-terminal drawing method based on Canvas API provided by the invention draws by calling the drawing method defined by Canvas API, simultaneously generates a plurality of drawing logics, converts the drawing logics into corresponding drawing commands, constructs command sets by all drawing commands, and finally transmits the command sets to the original terminal, so that the original terminal can trigger the drawing of the view and complete the drawing according to the command sets.

Those skilled in the art will appreciate that implementing all or part of the above-described methods in accordance with the embodiments may be accomplished by way of a computer program stored on a computer readable storage medium, which when executed may comprise the steps of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), or the like.

While the foregoing is directed to the preferred embodiments of the present invention, it will be appreciated by those skilled in the art that changes and modifications may be made without departing from the principles of the invention, such changes and modifications are also intended to be within the scope of the invention.

Claims

1. A Canvas API based multi-terminal drawing method comprising the steps of:

calling a drawing method defined by a Canvas API to draw, and generating a plurality of drawing logics at the same time; the drawing logic includes a chart drawn using a Canvas API method;

converting the drawing logics into corresponding drawing commands, and constructing a command set by using all the drawing commands; the drawing command comprises a drawing method and drawing parameters;

transmitting the command set to a native terminal, so that the native terminal triggers view drawing and completes drawing according to the command set; data transmission is carried out with the original terminal through React Native bridge;

and after receiving the command set, the native terminal calls a corresponding Canvas API method to complete drawing by adopting a reflection dynamic call technology according to a drawing method and drawing parameters in the command set.

2. The Canvas API-based multi-terminal drawing method according to claim 1, wherein the native terminal comprises an iOS terminal and an Android terminal.

3. The multi-terminal drawing method based on Canvas API according to claim 2, wherein the iOS terminal triggers the drawing of the view and completes the drawing through the Core Graphics drawing library.

4. The Canvas API-based multi-terminal drawing method according to claim 2, wherein the Android terminal triggers view drawing and completes drawing through a graphics Canvas graphic drawing package.