CN111488149A - Table rendering method and device based on canvas element and computer equipment - Google Patents
Table rendering method and device based on canvas element and computer equipment Download PDFInfo
- Publication number
- CN111488149A CN111488149A CN202010164578.6A CN202010164578A CN111488149A CN 111488149 A CN111488149 A CN 111488149A CN 202010164578 A CN202010164578 A CN 202010164578A CN 111488149 A CN111488149 A CN 111488149A
- Authority
- CN
- China
- Prior art keywords
- data
- canvas
- rendered
- rendering
- function
- 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
Images
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
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Image Generation (AREA)
Abstract
The application discloses a table rendering method and device based on canvas elements and computer equipment, which can solve the problems of poor compatibility and low rendering efficiency when a table is generated by rendering. The method comprises the following steps: introducing a canvas-Table JavaScript file in a page of a Table to be created so as to use a canvas-Table function globally; creating a canvas element in a main thread based on the canvas-Table function, and inserting the canvas element into an element node to be rendered; creating a Worker thread by using the canvas-Table function; uploading the data to be rendered corresponding to each element node to be rendered to the Worker thread and transferring the control right of canvas; and rendering and generating a table on the Worker thread by using the drawing function in the data to be rendered. The method and the device are suitable for rendering generation of the table.
Description
Technical Field
The application is applicable to the technical field of computers, and particularly relates to a table rendering method and device based on canvas elements and computer equipment.
Background
Because the form is most commonly used in the development process, in order to quickly make the form and bind the data and further accelerate the generation speed of the form, a rendering mode is often adopted, so that the code amount is greatly reduced, and the form is more convenient and accurate to generate.
At present, table rendering components still use outdated table tags for layout in the industry, however, the table tags have poor performance support on a mobile terminal, and due to the characteristic of self-adaption of sub-elements, a plurality of style problems can occur in display of the mobile terminal, even direct collapse is caused, and rendering efficiency is low.
Disclosure of Invention
In view of this, the present application provides a table rendering method and apparatus based on canvas elements, and a computer device, which can solve the problems of poor compatibility and low rendering efficiency when a generated table is rendered.
According to an aspect of the present application, there is provided a canvas element-based table rendering method, including:
introducing a canvas-Table JavaScript file in a page of a Table to be created so as to use a canvas-Table function globally;
creating a canvas element in a main thread based on the canvas-Table function, and inserting the canvas element into an element node to be rendered;
creating a Worker thread by using the canvas-Table function;
uploading the data to be rendered corresponding to each element node to be rendered to the Worker thread and transferring the control right of canvas;
and rendering and generating a table on the Worker thread by using the drawing function in the data to be rendered.
According to another aspect of the present application, there is provided a canvas element-based table rendering apparatus, comprising:
the system comprises an introduction module, a search module and a search module, wherein the introduction module is used for introducing a canvas-Table JavaScript file in a page of a Table to be created so as to use a canvas-Table function globally;
the inserting module is used for creating a canvas element in a main thread based on the canvas-Table function and inserting the canvas element into an element node to be rendered;
the creating module is used for creating a Worker thread by using the canvas-Table function;
the uploading module is used for uploading the data to be rendered corresponding to each element node to be rendered to the Worker thread and transferring the control right of canvas;
and the generating module is used for rendering and generating a table on the Worker thread by using the drawing function in the data to be rendered.
According to yet another aspect of the present application, there is provided a non-transitory readable storage medium having stored thereon a computer program which, when executed by a processor, implements the canvas element-based table rendering method described above.
According to yet another aspect of the present application, there is provided a computer device, including a non-volatile readable storage medium, a processor, and a computer program stored on the non-volatile readable storage medium and executable on the processor, wherein the processor implements the canvas element-based table rendering method when executing the program.
By means of the technical scheme, compared with the mode of generating the Table by using Table label rendering at present, the Table rendering method, the Table rendering device and the computer equipment based on the canvas element can use the canvas for rendering the Table component, and can introduce the JavaScript file of the canvas-Table into the page of the Table to be created so as to use the canvas-Table function globally; then creating a canvas element and a Worker thread by using a canvas-Table function, and inserting the canvas element into an element node to be rendered; uploading data to be rendered corresponding to the element node to be rendered to a Worker thread, and rendering and generating a table on the Worker thread by using a drawing function in the data to be rendered. In the application, the canvas is used for rendering and generating the table, and the canvas is independent of the frame and can be used together with the real, vue and regular main flow frames, so that the compatibility of table generation can be improved.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application to the disclosed embodiment. In the drawings:
fig. 1 is a flowchart illustrating a table rendering method based on canvas elements according to an embodiment of the present application;
fig. 2 is a flowchart illustrating another canvas-element-based table rendering method according to an embodiment of the present application;
fig. 3 is a schematic structural diagram of a table rendering apparatus based on canvas elements according to an embodiment of the present application;
fig. 4 is a schematic structural diagram of another canvas-element-based table rendering apparatus according to an embodiment of the present application.
Detailed Description
The present application will be described in detail below with reference to the accompanying drawings in conjunction with embodiments. It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict.
Aiming at the problems of poor compatibility and low rendering efficiency when a table is rendered and generated by using a table tag at present, the embodiment of the present application provides a table rendering method based on canvas elements, as shown in fig. 1, the method includes:
101. introducing a JavaScript file of canvas-Table into a page of a Table to be created so as to globally use a canvas-Table function.
The canvas-Table function is a creating function for creating canvas elements and Worker threads, the canvas element is an HTM L element which can draw graphics by using scripts (particularly JavaScript), a series of complete interfaces are provided, compared with the combination of an original Table label and a CSS, the canvas can be more finely operated by using JavaScript, the controllability of the canvas is better, the drawn Table is more expressive, and the user experience is greatly enhanced.
102. Creating a canvas element in the main thread based on the canvas-Table function, and inserting the canvas element into the element node to be rendered.
The elements to be rendered may include the width and height of the table, the width and height of the cells, the width and color of the border, the header data of the table, the table data, and the like. And the element nodes to be rendered correspond to the htm element nodes where the elements to be rendered are located, and canvas elements are inserted into the element nodes to be rendered so as to generate each table component by using canvas rendering.
103. The canvas-Table function is used to create the Worker thread.
In a specific application scenario, the JavaScript language uses a single-threaded model, that is, all tasks can be completed on only one thread, and only one task can be done at a time. The former task is not done and the latter task can only wait. With the enhancement of the computing power of the computer, especially with the appearance of a multi-core CPU, the single thread brings great inconvenience, and the computing power of the computer cannot be fully exerted. The Worker thread provides an API for a browser (a host environment), namely, through the 'multithreading' technology of introducing JavaScript, the JavaScript thread which is mainly run in the page can be loaded and run by one or more other independent JavaScript threads, so that a multithreading environment is created, and the main thread is allowed to allocate some tasks to the running of the latter. And when the main thread runs, the Worker thread runs in the background, and the main thread and the Worker thread do not interfere with each other. And when the Worker thread finishes the calculation task, returning the result to the main thread. This has the advantage that some computationally intensive or highly delayed tasks are burdened by the Worker thread and the main thread (which is typically responsible for UI interactions) is very fluid and not blocked or slowed down.
104. And uploading the data to be rendered corresponding to each element node to be rendered to a Worker thread and transferring the control right of canvas.
In a specific application scene, the data to be rendered corresponding to each element node to be rendered is uploaded to a Worker thread, and after the control right of canvas is handed over, the rendering operation of the table can be realized in the Worker thread.
105. And rendering and generating a table on a Worker thread by using a drawing function in the data to be rendered.
In a specific application scene, different elements to be rendered correspond to one drawing function, and drawing of each table component can be realized by calling the corresponding drawing function.
By the Table rendering method based on canvas elements in the embodiment, the canvas can be used for rendering the Table component, and a canvas-Table JavaScript file can be introduced into a page of a Table to be created so as to use a canvas-Table function globally; then creating a canvas element and a Worker thread by using a canvas-Table function, and inserting the canvas element into an element node to be rendered; uploading data to be rendered corresponding to the element node to be rendered and off-screen canvas to a Worker thread, and rendering and generating a table on the Worker thread by using a drawing function in the data to be rendered. In the application, the canvas is used for rendering and generating the table, and the canvas is independent of the frame and can be used in cooperation with the real, vue and regular main flow frames, so that the compatibility of table generation can be improved.
Further, as a refinement and an extension of the specific implementation of the above embodiment, in order to fully illustrate the specific implementation process in this embodiment, another table rendering method based on canvas elements is provided, as shown in fig. 2, the method includes:
201. introducing a JavaScript file of canvas-Table into a page of a Table to be created so as to globally use a canvas-Table function.
In a specific application scene, the JavaScript file of the canvas-table can be introduced and written by using native JavaScript without depending on any framework. The corresponding framework must be bound with respect to the Table component of the Ant Design and Element UI. At present, the assembly is compatible with various mainstream frames on the market, special processing is not needed for each frame, and the assembly can be used after being unpacked.
202. Creating a canvas element in the main thread based on the canvas-Table function, and inserting the canvas element into the element node to be rendered.
For the present embodiment, the pseudo code for creating a canvas element in the main thread based on the canvas-Table function and inserting the canvas element into the to-be-rendered element node may be:
the element node to be rendered may be obtained from the element id (elementary id) to be rendered, and after the canvas element is established, the element node to be rendered may be inserted into the wrapElement.
203. The canvas-Table function is used to create the Worker thread.
In a specific application scene, threads can be independently developed for rendering. The main thread is not blocked for large data rendering.
Accordingly, an off-screen canvas may be generated by transfercontroltoffscreen.
The pseudo code for creating the workder thread may be:
accordingly, the pseudo code that generates the off-screen canvas may be:
204. and uploading the data to be rendered corresponding to each element node to be rendered to a Worker thread and transferring the control right of canvas.
In a specific application scenario, the latest feature of H5, transfercontroltoffscreen, may be used to directly hand over the rendering of the canvas to the Worker thread through the workder. The main thread is not blocked, more idle time is given to the main thread, rendering is faster compared with a traditional table component, and user experience is better.
The pseudo code for uploading the data to be rendered corresponding to each element node to be rendered to a Worker thread and transferring the control right of canvas may be:
205. and receiving the uploaded data to be rendered in the Worker thread and acquiring the control right of canvas.
In a specific application scenario, the onmessage may be used to receive the transmitted data to be rendered and obtain control of canvas.
206. And extracting each target rendering element contained in the data to be rendered.
The target rendering element corresponds to a table component which needs to be subjected to rendering operation, such as the width and height of a table, the width and height of a cell, the width and color of a frame, table header data, table data and the like.
207. And determining the customized drawing function corresponding to each target rendering element in the data to be rendered as a target drawing function.
The target drawing function is a drawing function for generating each rendering element in a rendering mode. In a specific application scenario, if there is a customized rendering function, the default rendering function is not used, but the incoming function needs to be converted into a character string, and a rendering thread (offscreenvarvas. (Worker thread can not transmit function at present, and can only execute the transmitted function in eval way)
In a specific application scene, personalized customization of the table can be realized by modifying the drawing function of each target rendering element. For example, when the outer frame needs to be customized, a frame style corresponding to the configuration information may be set by using canvas renderingcontext2d. When the inner frame needs to be customized, a frame style corresponding to the configuration information can be set by using canvas enhanced context2D. When the cell needs to be customized, a cell style corresponding to the configuration information can be set by using a canvas format context2D.font, a canvas format context2D.textalign, a canvas format context2D.textbase and a textbase format, and characters corresponding to the configuration information can be drawn by using the canvas format context2 D.fileRect, the canvas format context2 D.fileText or the canvas format context2 D.strokeText;
208. and if the data to be rendered does not have the customized drawing function corresponding to the target rendering element, determining the default drawing function corresponding to the target rendering element as the target drawing function.
In a specific application scene, each element to be rendered has a default drawing function, when the existence of the customized drawing function is judged, the customized drawing function is preferentially used for generating a table component, and when the existence of the customized drawing function is judged, the default drawing function corresponding to the target rendering element is determined as the target drawing function, so that the personalized customization of a user is met, and meanwhile, the complete drawing of the table can be ensured.
209. And acquiring the file type of the data to be rendered.
The file type of the data to be rendered may include: init, change, paint, etc.
210. And rendering and generating a table by utilizing each target drawing function in the Worker thread based on the file type.
In a specific application scenario, if the file type of the data to be rendered is init, embodiment step 210 may specifically include: invoking getContext () on the off-screen canvas to obtain the 2D rendering background provided by the canvas renderingContext2D interface; determining configuration information corresponding to a table to be generated by using parameter information corresponding to each target rendering element in data to be rendered; drawing an outer frame corresponding to the configuration information according to an outer frame drawing function in the target drawing function; drawing an inner frame corresponding to the configuration information by using an inner frame drawing function in the target drawing function; drawing the cells corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameters of the cells in the data to be rendered; if the incoming parameter merge of the cell is row, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter of the cell in the data to be rendered, specifically including: pre-drawing row data, and if the data in the current column is judged to be the same as the data in the previous column, merging the cells in the current column with the cells in the previous column; if the incoming parameter merge of the cell is col, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter of the cell in the data to be rendered, specifically including: and pre-drawing column data, and merging the cells of the current row and the cells of the previous row if the data in the current row is judged to be the same as the data in the previous row.
Wherein an off-screen canvas refers to a canvas in a Worker thread. getContext () is an object that draws a 2D rendering context, and by calling the getContext () method, an environment for drawing on a canvas can be returned, with the parameter ContextID specifying the type that is desired to be drawn on the canvas. The only current legal value is "2d", which specifies a two-dimensional drawing, and returns a Canvas drawing context2D object that exports a two-dimensional drawing API with which it can be drawn into a Canvas element.
Correspondingly, if the file type of the data to be rendered is change, the embodiment step 210 may specifically include: acquiring data in a table, incoming parameters of cells in data to be rendered and configuration information; drawing the cells corresponding to the configuration information according to the cell drawing function in the target drawing function and the input parameters; if the incoming parameter merge of the cell is row, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter, which specifically includes: pre-drawing row data, and if the data in the current column is judged to be the same as the data in the previous column, merging the cells in the current column with the cells in the previous column; if the incoming parameter merge of the cell is col, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter, which specifically includes: and pre-drawing column data, and merging the cells of the current row and the cells of the previous row if the data in the current row is judged to be the same as the data in the previous row.
In a specific application scenario, if the file type of the data to be rendered is paint, embodiment step 210 may specifically include: extracting position information contained in data to be rendered; and rendering a generation table on the uppermost layer of the canvas according to the position information.
For example, an embodiment of table rendering is as follows:
a. the table title to be drawn is: [ NAME ', ' MOBILE PHONE ', ' BINDER ', ' SIGE number ', ' PROVIDER ' ]
b. The table contents to be drawn are: [ test list ', '159 a.3951 ', '2019-11-03', ' male ', '320999 a.2711 ', ' supplier 01', ]
c. Table width 720, table height 400, bezel width 1, bezel color # aaa,
d. the Table can be rendered by passing the element id values that need to be inserted into the Table, and the configuration parameters into the function canvas-Table, as shown in Table 1.
| Name (I) | Mobile phone number | Birthday | Sex | Certificate number | Suppliers of goods |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | For male | 320999********2711 | Supplier 01 |
TABLE 1
By the Table rendering method based on the canvas element, the canvas can be used for rendering the Table component, and the canvas-Table JavaScript file is introduced into the page of the Table to be created so as to use the canvas-Table function globally; then creating a canvas element and a Worker thread by using a canvas-Table function, and inserting the canvas element into an element node to be rendered; uploading data to be rendered corresponding to the element node to be rendered and off-screen canvas to a Worker thread, and rendering and generating a table on the Worker thread by using a drawing function in the data to be rendered. And the drawing function corresponding to each element to be rendered can be subjected to personalized customization so as to meet the personalized requirements of the user. When the table is generated by rendering through the drawing function, different table rendering operations can be executed according to the file type corresponding to the data to be rendered. In the application, the canvas is used for rendering and generating the table, and the canvas is independent of the frame and can be used in cooperation with the real, vue and regular main flow frames, so that the compatibility of table generation can be improved.
Further, as a specific embodiment of the method shown in fig. 1 and fig. 2, an embodiment of the present application provides a table rendering apparatus based on canvas elements, as shown in fig. 3, the apparatus includes: an introduction module 31, an insertion module 32, a creation module 33, an upload module 34, a generation module 35.
The introducing module 31 may be configured to introduce a canvas-Table JavaScript file into a page of a Table to be created, so as to globally use a canvas-Table function;
an inserting module 32, configured to create a canvas element in the main thread based on the canvas-Table function, and insert the canvas element into the to-be-rendered element node;
a creating module 33, configured to create a Worker thread using the canvas-Table function;
the uploading module 34 is configured to upload data to be rendered corresponding to each element node to be rendered to a Worker thread and transfer the control right of canvas;
the generating module 35 may be configured to render a generated table on a Worker thread by using a drawing function in the data to be rendered.
In a specific application scenario, in order to render and generate a table in a Worker thread after uploading data to be rendered corresponding to each element node to be rendered to the Worker thread and handing over a control right of a canvas, as shown in fig. 4, the apparatus further includes: a receiving module 36.
The receiving module 36 may be configured to receive the uploaded data to be rendered in the Worker thread and obtain the control right of the canvas.
Correspondingly, in order to generate the table data meeting the user-defined definition, as shown in fig. 4, the apparatus further includes: an extraction module 37 and a determination module 38.
An extracting module 37, configured to extract each target rendering element included in the data to be rendered;
a determining module 38, configured to determine a customized rendering function corresponding to each target rendering element in the data to be rendered as a target rendering function;
the determining module 38 may be further configured to determine, if it is determined that there is no customized rendering function corresponding to the target rendering element in the data to be rendered, a default rendering function corresponding to the target rendering element as the target rendering function.
In a specific application scenario, in order to render and generate a table on a Worker thread by using a drawing function in data to be rendered, the generating module 35 may be specifically configured to obtain a file type of the data to be rendered; and rendering and generating a table by utilizing each target drawing function in the Worker thread based on the file type.
Correspondingly, if the file type of the data to be rendered is init, the generating module 35 may be specifically configured to call getContext () on an off-screen canvas to obtain a 2D rendering background provided by a canvas renderingcontext2D interface; determining configuration information corresponding to a table to be generated by using parameter information corresponding to each target rendering element in data to be rendered; drawing an outer frame corresponding to the configuration information according to an outer frame drawing function in the target drawing function; drawing an inner frame corresponding to the configuration information by using an inner frame drawing function in the target drawing function; drawing the cells corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameters of the cells in the data to be rendered; if the incoming parameter merge of the cell is row, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter of the cell in the data to be rendered, specifically including: pre-drawing row data, and if the data in the current column is judged to be the same as the data in the previous column, merging the cells in the current column with the cells in the previous column; if the incoming parameter merge of the cell is col, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter of the cell in the data to be rendered, specifically including: and pre-drawing column data, and merging the cells of the current row and the cells of the previous row if the data in the current row is judged to be the same as the data in the previous row.
In a specific application scenario, if the file type of the data to be rendered is change, the generating module 35 may be specifically configured to acquire data in a table, and incoming parameters and configuration information of cells in the data to be rendered; drawing the cells corresponding to the configuration information according to the cell drawing function in the target drawing function and the input parameters; if the incoming parameter merge of the cell is row, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter, which specifically includes: pre-drawing row data, and if the data in the current column is judged to be the same as the data in the previous column, merging the cells in the current column with the cells in the previous column; if the incoming parameter merge of the cell is col, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter, which specifically includes: and pre-drawing column data, and merging the cells of the current row and the cells of the previous row if the data in the current row is judged to be the same as the data in the previous row.
Correspondingly, if the file type of the data to be rendered is paint, the generating module 35 may be specifically configured to extract a position to be generated of a table included in the data to be rendered; rendering at the canvas top generates table data at the location to be generated.
It should be noted that other corresponding descriptions of the functional units related to the table rendering device based on canvas elements provided in this embodiment may refer to the corresponding descriptions in fig. 1 to fig. 2, and are not repeated herein.
Based on the above method shown in fig. 1 and fig. 2, correspondingly, the embodiment of the present application further provides a storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the canvas element-based table rendering method shown in fig. 1 and fig. 2.
Based on such understanding, the technical solution of the present application may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (which may be a CD-ROM, a usb disk, a removable hard disk, etc.), and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method of the embodiments of the present application.
Based on the method shown in fig. 1 and fig. 2 and the virtual device embodiment shown in fig. 3 and fig. 4, in order to achieve the above object, an embodiment of the present application further provides a computer device, which may specifically be a personal computer, a server, a network device, and the like, where the entity device includes a storage medium and a processor; a storage medium for storing a computer program; a processor for executing a computer program to implement the canvas element based table rendering method as shown in fig. 1 and 2.
Optionally, the computer device may also include a user interface, a network interface, a camera, Radio Frequency (RF) circuitry, sensors, audio circuitry, a WI-FI module, and so forth. The user interface may include a Display screen (Display), an input unit such as a keypad (Keyboard), etc., and the optional user interface may also include a USB interface, a card reader interface, etc. The network interface may optionally include a standard wired interface, a wireless interface (e.g., a bluetooth interface, WI-FI interface), etc.
It will be understood by those skilled in the art that the computer device structure provided in the present embodiment is not limited to the physical device, and may include more or less components, or combine some components, or arrange different components.
The nonvolatile readable storage medium can also comprise an operating system and a network communication module. The operating system is a program for the table rendering entity device hardware and software resources, supporting the execution of information processing programs and other software and/or programs. The network communication module is used for realizing communication among components in the nonvolatile readable storage medium and communication with other hardware and software in the entity device.
Through the description of the above embodiment, those skilled in the art can clearly understand that the present application can be implemented by software plus a necessary general hardware platform, and can also use canvas for rendering a Table component, so as to globally use the canvas-Table function by introducing a canvas-Table JavaScript file into a page of a Table to be created; then creating a canvas element and a Worker thread by using a canvas-Table function, and inserting the canvas element into an element node to be rendered; uploading data to be rendered corresponding to the element node to be rendered to a Worker thread, and rendering and generating a table on the Worker thread by using a drawing function in the data to be rendered. And the drawing function corresponding to each element to be rendered can be subjected to personalized customization so as to meet the personalized requirements of the user. When the table is generated by rendering through the drawing function, different table rendering operations can be executed according to the file type corresponding to the data to be rendered. In the application, the canvas is used for rendering and generating the table, and the canvas is independent of the frame and can be used in cooperation with the real, vue and regular main flow frames, so that the compatibility of table generation can be improved.
Those skilled in the art will appreciate that the figures are merely schematic representations of one preferred implementation scenario and that the blocks or flow diagrams in the figures are not necessarily required to practice the present application. Those skilled in the art will appreciate that the modules in the devices in the implementation scenario may be distributed in the devices in the implementation scenario according to the description of the implementation scenario, or may be located in one or more devices different from the present implementation scenario with corresponding changes. The modules of the implementation scenario may be combined into one module, or may be further split into a plurality of sub-modules.
The above application serial numbers are for description purposes only and do not represent the superiority or inferiority of the implementation scenarios. The above disclosure is only a few specific implementation scenarios of the present application, but the present application is not limited thereto, and any variations that can be made by those skilled in the art are intended to fall within the scope of the present application.
Claims (10)
1. A method for rendering a table based on canvas elements, comprising:
introducing a JavaScript file of a canvas-Table function into a page of a Table to be created so as to use the canvas-Table function globally;
creating a canvas element in a main thread based on the canvas-Table function, and inserting the canvas element into an element node to be rendered;
creating a Worker thread by using the canvas-Table function;
uploading the data to be rendered corresponding to each element node to be rendered to the Worker thread and transferring the control right of canvas;
and rendering and generating a table on the Worker thread by using the drawing function in the data to be rendered.
2. The method according to claim 1, wherein after uploading data to be rendered corresponding to each element node to be rendered to the Worker thread and handing over control right of canvas, the method further comprises:
and receiving the uploaded data to be rendered in the Worker thread and acquiring the control right of canvas.
3. The method according to claim 2, wherein before rendering the generated table by using the drawing function in the data to be rendered on the Worker thread, the method specifically comprises:
extracting each target rendering element contained in the data to be rendered;
determining a customized drawing function corresponding to each target rendering element in the data to be rendered as a target drawing function;
and if the data to be rendered does not have the customized drawing function corresponding to the target rendering element, determining a default drawing function corresponding to the target rendering element as the target drawing function.
4. The method according to claim 3, wherein the step of rendering and generating a table on the Worker thread by using the drawing function in the data to be rendered specifically comprises the steps of:
acquiring the file type of the data to be rendered;
and rendering and generating a table by utilizing each target drawing function in the Worker thread based on the file type.
5. The method according to claim 4, wherein if the file type of the data to be rendered is init, the rendering generation of the table by using each of the target rendering functions in the Worker thread based on the file type specifically comprises:
invoking getContext () on the off-screen canvas to obtain the 2D rendering background provided by the canvas renderingContext2D interface;
determining configuration information corresponding to a table to be generated by using parameter information corresponding to each target rendering element in the data to be rendered;
drawing an outer frame corresponding to the configuration information according to an outer frame drawing function in the target drawing function;
drawing an inner frame corresponding to the configuration information by using an inner frame drawing function in the target drawing function;
drawing the cells corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameters of the cells in the data to be rendered;
if the incoming parameter merge of the cell is row, the drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter of the cell in the data to be rendered specifically includes:
pre-drawing row data, and if the data in the current column is judged to be the same as the data in the previous column, merging the cells in the current column with the cells in the previous column;
if the incoming parameter merge of the cell is col, drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter of the cell in the data to be rendered specifically includes:
and pre-drawing column data, and merging the cells of the current row and the cells of the previous row if the data in the current row is judged to be the same as the data in the previous row.
6. The method of claim 4, wherein if the file type of the data to be rendered is change, the rendering generation of the table by using each of the target rendering functions in the Worker thread based on the file type specifically comprises:
acquiring data in a table, and incoming parameters and configuration information of cells in the data to be rendered;
drawing the cells corresponding to the configuration information according to the cell drawing function in the target drawing function and the transmitted parameters;
if the incoming parameter merge of the cell is row, the drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter specifically includes:
pre-drawing row data, and if the data in the current column is judged to be the same as the data in the previous column, merging the cells in the current column with the cells in the previous column;
if the incoming parameter merge of the cell is col, the drawing the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter specifically includes:
and pre-drawing column data, and merging the cells of the current row and the cells of the previous row if the data in the current row is judged to be the same as the data in the previous row.
7. The method according to claim 4, wherein if the file type of the data to be rendered is paint, the rendering generation of the table by using each target rendering function in the Worker thread based on the file type specifically comprises:
extracting a table to-be-generated position contained in the data to be rendered;
and rendering at the canvas top layer to generate the table data at the position to be generated.
8. A canvas element-based table rendering apparatus, comprising:
the system comprises an introduction module, a search module and a search module, wherein the introduction module is used for introducing a canvas-Table JavaScript file in a page of a Table to be created so as to use a canvas-Table function globally;
the inserting module is used for creating a canvas element in a main thread based on the canvas-Table function and inserting the canvas element into an element node to be rendered;
the creating module is used for creating a Worker thread by using the canvas-Table function;
the uploading module is used for uploading the data to be rendered corresponding to each element node to be rendered to the Worker thread and transferring the control right of canvas;
and the generating module is used for rendering and generating a table on the Worker thread by using the drawing function in the data to be rendered.
9. A non-transitory readable storage medium having stored thereon a computer program, wherein the program, when executed by a processor, implements the canvas element-based table rendering method of any one of claims 1 to 7.
10. A computer device comprising a non-volatile readable storage medium, a processor and a computer program stored on the non-volatile readable storage medium and executable on the processor, wherein the processor when executing the program implements the canvas element based table rendering method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010164578.6A CN111488149B (en) | 2020-03-11 | 2020-03-11 | Canvas element-based table rendering method and device and computer equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010164578.6A CN111488149B (en) | 2020-03-11 | 2020-03-11 | Canvas element-based table rendering method and device and computer equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111488149A true CN111488149A (en) | 2020-08-04 |
| CN111488149B CN111488149B (en) | 2023-07-25 |
Family
ID=71794435
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010164578.6A Active CN111488149B (en) | 2020-03-11 | 2020-03-11 | Canvas element-based table rendering method and device and computer equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111488149B (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112380296A (en) * | 2020-11-23 | 2021-02-19 | 北京明略软件系统有限公司 | ER (ER) graph generation method, system, electronic equipment and storage medium |
| CN112506495A (en) * | 2020-11-09 | 2021-03-16 | 中科金审(北京)科技有限公司 | Method for rapidly uploading large data through visualization and local virtualization |
| CN112632936A (en) * | 2020-12-24 | 2021-04-09 | 山东中创软件工程股份有限公司 | Electronic form generation method, system and related device |
| CN112699653A (en) * | 2021-01-07 | 2021-04-23 | 北京明略软件系统有限公司 | React-based data table rendering method and data table component |
| CN112988026A (en) * | 2021-03-03 | 2021-06-18 | 京东数字科技控股股份有限公司 | Scroll bar display method and device and electronic equipment |
| CN113126984A (en) * | 2021-04-06 | 2021-07-16 | 北京明略昭辉科技有限公司 | Data rendering method, system, device and storage medium based on table component |
| CN113361241A (en) * | 2021-06-21 | 2021-09-07 | 深圳平安智汇企业信息管理有限公司 | Table configuration method and device, computer equipment and storage medium |
| CN113486281A (en) * | 2021-07-20 | 2021-10-08 | 北京达佳互联信息技术有限公司 | Page display method and device, electronic equipment and storage medium |
| CN116484815A (en) * | 2023-06-08 | 2023-07-25 | 北京纷扬科技有限责任公司 | Canvas-based high-performance table rendering method |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103336690A (en) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | HTML (Hypertext Markup Language) 5-based text-element drawing method and device |
| US20130297600A1 (en) * | 2012-05-04 | 2013-11-07 | Thierry Charles Hubert | Method and system for chronological tag correlation and animation |
| CN107239287A (en) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | A kind of Webpage display process, device, electronic equipment and storage medium |
| CN107391158A (en) * | 2017-08-02 | 2017-11-24 | 郑州云海信息技术有限公司 | A kind of method and apparatus that form drafting is realized based on iDataTable encapsulation |
| CN108665520A (en) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | A kind of method and device that page animation renders |
| CN109491742A (en) * | 2018-10-31 | 2019-03-19 | 天津字节跳动科技有限公司 | Page tabular rendering method and device |
| CN109491654A (en) * | 2018-09-18 | 2019-03-19 | 西安葡萄城信息技术有限公司 | A kind of table method for drafting and system based on HTML5 Canvas |
| CN109783102A (en) * | 2019-01-18 | 2019-05-21 | 北京城市网邻信息技术有限公司 | Method, apparatus, equipment and the storage medium that Canvas painting canvas generates in a kind of small routine |
-
2020
- 2020-03-11 CN CN202010164578.6A patent/CN111488149B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130297600A1 (en) * | 2012-05-04 | 2013-11-07 | Thierry Charles Hubert | Method and system for chronological tag correlation and animation |
| CN103336690A (en) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | HTML (Hypertext Markup Language) 5-based text-element drawing method and device |
| CN107239287A (en) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | A kind of Webpage display process, device, electronic equipment and storage medium |
| CN107391158A (en) * | 2017-08-02 | 2017-11-24 | 郑州云海信息技术有限公司 | A kind of method and apparatus that form drafting is realized based on iDataTable encapsulation |
| CN108665520A (en) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | A kind of method and device that page animation renders |
| CN109491654A (en) * | 2018-09-18 | 2019-03-19 | 西安葡萄城信息技术有限公司 | A kind of table method for drafting and system based on HTML5 Canvas |
| CN109491742A (en) * | 2018-10-31 | 2019-03-19 | 天津字节跳动科技有限公司 | Page tabular rendering method and device |
| CN109783102A (en) * | 2019-01-18 | 2019-05-21 | 北京城市网邻信息技术有限公司 | Method, apparatus, equipment and the storage medium that Canvas painting canvas generates in a kind of small routine |
Non-Patent Citations (2)
| Title |
|---|
| 丁立国;周斌;熊伟;: "基于Html5的Web Map矢量渲染技术研究", 测绘工程, no. 08 * |
| 邱珊;: "使用HTML5 Web Worker提高Web的应用性能研究", 软件导刊, no. 12 * |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112506495A (en) * | 2020-11-09 | 2021-03-16 | 中科金审(北京)科技有限公司 | Method for rapidly uploading large data through visualization and local virtualization |
| CN112380296A (en) * | 2020-11-23 | 2021-02-19 | 北京明略软件系统有限公司 | ER (ER) graph generation method, system, electronic equipment and storage medium |
| CN112632936A (en) * | 2020-12-24 | 2021-04-09 | 山东中创软件工程股份有限公司 | Electronic form generation method, system and related device |
| CN112699653A (en) * | 2021-01-07 | 2021-04-23 | 北京明略软件系统有限公司 | React-based data table rendering method and data table component |
| CN112699653B (en) * | 2021-01-07 | 2024-02-23 | 北京明略软件系统有限公司 | React-based data table rendering method and data table assembly |
| CN112988026A (en) * | 2021-03-03 | 2021-06-18 | 京东数字科技控股股份有限公司 | Scroll bar display method and device and electronic equipment |
| CN112988026B (en) * | 2021-03-03 | 2024-05-28 | 京东科技控股股份有限公司 | Scroll bar display method and device and electronic equipment |
| CN113126984A (en) * | 2021-04-06 | 2021-07-16 | 北京明略昭辉科技有限公司 | Data rendering method, system, device and storage medium based on table component |
| CN113361241A (en) * | 2021-06-21 | 2021-09-07 | 深圳平安智汇企业信息管理有限公司 | Table configuration method and device, computer equipment and storage medium |
| CN113486281A (en) * | 2021-07-20 | 2021-10-08 | 北京达佳互联信息技术有限公司 | Page display method and device, electronic equipment and storage medium |
| CN116484815A (en) * | 2023-06-08 | 2023-07-25 | 北京纷扬科技有限责任公司 | Canvas-based high-performance table rendering method |
| CN116484815B (en) * | 2023-06-08 | 2023-08-29 | 北京纷扬科技有限责任公司 | Canvas-based high-performance table rendering method |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111488149B (en) | 2023-07-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111488149A (en) | Table rendering method and device based on canvas element and computer equipment | |
| TWI808393B (en) | Page processing method, device, apparatus and storage medium | |
| CN107992301B (en) | User interface implementation method, client and storage medium | |
| CN110069257B (en) | Interface processing method and device and terminal | |
| US8745573B2 (en) | Platform-independent application development framework | |
| CN111045655A (en) | Page rendering method and device, rendering server and storage medium | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN105354014A (en) | Application interface rendering display method and apparatus | |
| CN111177621B (en) | Web page development method, device and system | |
| EP3278217B1 (en) | Enhanced preview technology for application add-ins | |
| CN108121539B (en) | Component processing method and device | |
| CN112256990B (en) | Image processing method and device and computer readable storage medium | |
| WO2019238145A1 (en) | Webgl-based graphics rendering method, apparatus and system | |
| CN111880813B (en) | Method for realizing android card UI (user interface) and storage medium | |
| US10664980B2 (en) | Vector graphics handling processes for user applications | |
| CN115080016A (en) | Extended function implementation method, device, equipment and medium based on UE editor | |
| CN112068879B (en) | Method and device for constructing client application program development framework based on configuration | |
| CN106933439B (en) | image processing method and system based on social platform | |
| CN112817595A (en) | Interface rendering method and device, storage medium and electronic equipment | |
| US11126410B2 (en) | Method and apparatus for building pages, apparatus and non-volatile computer storage medium | |
| CN110647371A (en) | Multi-language resource file analysis method and system based on service configuration | |
| CN111352665A (en) | Page loading method, device, equipment and storage medium thereof | |
| CN115329720A (en) | Document display method, device, equipment and storage medium | |
| US10296566B2 (en) | Apparatus and method for outputting web content that is rendered based on device information | |
| CN115131470A (en) | Image-text material synthesis method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |