CN111488149B - Canvas element-based table rendering method and device and computer equipment - Google Patents
Canvas element-based table rendering method and device and computer equipment Download PDFInfo
- Publication number
- CN111488149B CN111488149B CN202010164578.6A CN202010164578A CN111488149B CN 111488149 B CN111488149 B CN 111488149B CN 202010164578 A CN202010164578 A CN 202010164578A CN 111488149 B CN111488149 B CN 111488149B
- 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.)
- Active
Links
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 canvas element-based table rendering method, device 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 into a page of a Table to be created so as to globally use a canvas-Table function; 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 workbench thread by using the canvas-Table function; uploading the data to be rendered corresponding to each element node to be rendered to the workbench thread and handing over the control right of canvas; and rendering and generating a table on the workbench thread by utilizing a drawing function in the data to be rendered. The method and the device are suitable for rendering and generating the table.
Description
Technical Field
The application is applicable to the technical field of computers, and particularly relates to a canvas element-based table rendering method and device and computer equipment.
Background
In the development process, the form is most commonly used, so that the generation speed of the form is increased in order to quickly make the form and bind the data, a rendering mode is often adopted, the code quantity is greatly reduced, and the form is more convenient and accurate to generate.
At present, an outdated table label is still used for layout in a table rendering component in the industry, however, the table label has poor performance support on a mobile terminal, and due to the self-adaptive characteristic of sub-elements, a plurality of style problems can occur in the display of the mobile terminal, even the display is directly crashed, so that the rendering efficiency is lower.
Disclosure of Invention
In view of the above, the present application provides a method, an apparatus, and a computer device for rendering a table based on canvas elements, which can solve the problems of poor compatibility and low rendering efficiency when rendering and generating the table.
According to one aspect of the present application, there is provided a canvas element-based table rendering method, the method comprising:
introducing a canvas-Table JavaScript file into a page of a Table to be created so as to globally use a canvas-Table function;
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 workbench thread by using the canvas-Table function;
uploading the data to be rendered corresponding to each element node to be rendered to the workbench thread and handing over the control right of canvas;
and rendering and generating a table on the workbench thread by utilizing a 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, the apparatus comprising:
the system comprises an introduction module, a generation module and a storage module, wherein the introduction module is used for introducing a canvas-Table JavaScript file into a page of a Table to be created so as to globally use a canvas-Table function;
the inserting module is used for creating a canvas element in the main thread based on the canvas-Table function and inserting the canvas element into an element node to be rendered;
the creation 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 workbench thread and handing over the control right of canvas;
and the generating module is used for rendering and generating a table on the workbench thread by utilizing the drawing function in the data to be rendered.
According to yet another aspect of the present application, there is provided a non-volatile 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 still another aspect of the present application, there is provided a computer device including a nonvolatile readable storage medium, a processor, and a computer program stored on the nonvolatile readable storage medium and executable on the processor, the processor implementing the canvas element-based table rendering method described above when executing the program.
By means of the technical scheme, compared with the mode of generating the Table by using the Table label rendering at present, the Table rendering method, device and computer equipment based on the canvas element can use the canvas to render the Table component, and a canvas-Table JavaScript file can be introduced into a page of the Table to be created at first, so that a canvas-Table function is globally used; then creating canvas elements and a Worker thread by using a canvas-Table function, and inserting the canvas elements into the element nodes to be rendered; uploading data to be rendered corresponding to the element nodes to be rendered to a workbench thread, and rendering a generation table on the workbench thread by using a drawing function in the data to be rendered. In the method, the canvas is utilized to render and generate the table, and because the canvas is independent of the frame and can be used in cooperation with the large main stream frames of the acts, vue and the regular, 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 embodiments of the application and together with the description serve to explain the application and do not constitute an undue limitation to the present application. In the drawings:
fig. 1 shows a flow diagram of a canvas element-based table rendering method according to an embodiment of the present application;
FIG. 2 is a flow chart of another method for rendering a canvas element-based table according to an embodiment of the present application;
fig. 3 shows a schematic structural diagram of a canvas element-based table rendering apparatus according to an embodiment of the present application;
fig. 4 shows 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 hereinafter with reference to the accompanying drawings in conjunction with embodiments. It should be noted that, without conflict, the embodiments and features of the embodiments in the present application may be combined with each other.
Aiming at the problems of poor compatibility and low rendering efficiency when a table is generated by using table label rendering at present, the embodiment of the application provides a table rendering method based on canvas elements, as shown in fig. 1, which comprises the following steps:
101. and introducing a canvas-Table JavaScript file into a page of the Table to be created so as to globally use a canvas-Table function.
The canvas-Table function is a creation function for creating canvas elements and workbench threads; a canvas element is an HTML element that can use scripts (referred to herein as JavaScript) to draw graphics. The method provides a series of complete interfaces, and compared with the combination of the original table label and CSS, the canvas can use JavaScript to perform more detailed operation, and the controllability is better. The drawn form has better expressive force, and the user experience is greatly enhanced.
102. Creating canvas elements in the main thread based on the canvas-Table function, and inserting the canvas elements into element nodes to be rendered.
The element to be rendered may include a width and a height of a table, a width and a height of a cell, a width and a color of a border, a table header data, a table data, and the like. And the element node to be rendered corresponds to the htm element node where each element to be rendered is located, and the canvas element is inserted into the element node to be rendered, so that each table component is generated by utilizing canvas rendering.
103. And creating a workbench thread by using a canvas-Table function.
In a specific application scenario, the JavaScript language adopts a single-threaded model, that is, all tasks can be completed on one thread only, and only one thing can be done at a time. The former task is not done and the latter task can only be done. With the enhancement of the computing power of a computer, particularly the appearance of a multi-core CPU, a 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 (hosting environment), that is, by introducing JavaScript "multithreading" technology, another separate JavaScript thread or threads can be loaded and executed in the JavaScript thread of the main running page, thereby creating a multithreading environment, allowing the main thread to assign tasks to the latter running. While the main thread runs, the workbench thread runs in the background, and the workbench thread are not interfered with each other. Waiting until the Worker thread completes the calculation task, and returning the result to the main thread. This has the advantage that some computationally intensive or high latency tasks, which are burdened by the Worker thread, are fluent and not blocked or slowed down by the main thread (which is usually responsible for UI interactions).
104. Uploading the data to be rendered corresponding to each element node to be rendered to a workbench thread and handing over the control right of canvas.
In a specific application scene, uploading data to be rendered corresponding to each element node to be rendered to a workbench thread, and after the control right of a canvas is handed over, rendering operation of a table can be realized in the workbench thread.
105. And rendering and generating a table on the workbench 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.
Through the canvas element-based Table rendering method in the embodiment, a canvas can be used for rendering a Table component, and a canvas-Table JavaScript file can be introduced into a page of a Table to be created so as to globally use a canvas-Table function; then creating canvas elements and a Worker thread by using a canvas-Table function, and inserting the canvas elements into the element nodes to be rendered; uploading data to be rendered corresponding to the element nodes to be rendered and off-screen canvas to a workbench thread, and rendering a generation table on the workbench thread by using a drawing function in the data to be rendered. In the method, the canvas is utilized to render and generate the table, and because the canvas is independent of the frame and can be used in cooperation with the large main stream frames of the acts, vue and the regular, the compatibility of table generation can be improved.
Further, as a refinement and extension of the foregoing embodiment, in order to fully describe the implementation procedure in this embodiment, another method for rendering a table based on canvas elements is provided, as shown in fig. 2, which includes:
201. and introducing a canvas-Table JavaScript file into a page of the 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 the JavaScript file is written by using the native JavaScript file, so that the JavaScript file is independent of any framework. The corresponding frameworks must be bound against the Table component of the Ant Design and Element UI. The assembly is compatible with various main stream frames on the market at present, and needs no special treatment for each frame, and can be used after being unpacked.
202. Creating canvas elements in the main thread based on the canvas-Table function, and inserting the canvas elements into element nodes to be rendered.
For this embodiment, creating a canvas element in the main thread based on a canvas-Table function and inserting the canvas element into pseudocode in an element node to be rendered may be:
the element node to be rendered may be obtained from the element ID (elementId) to be rendered, and after the canvas element is built, it is inserted into the wrapement element.
203. And creating a workbench thread by using a canvas-Table function.
In a specific application scene, the rendering can be performed by independently opening up threads. The main thread is not blocked for large data rendering.
Accordingly, off-screen canvas may be generated by transfer control tooffscreen.
Wherein, the pseudo code for creating the worker thread may be:
accordingly, the pseudocode that generates the off-screen canvas may be:
204. uploading the data to be rendered corresponding to each element node to be rendered to a workbench thread and handing over the control right of canvas.
In a specific application scenario, the latest feature transfer control tooffscreen of H5 may be used to directly hand over rendering of the canvas to the Worker thread through the Worker. The main thread is not blocked, more idle time is given to the main thread, and compared with the traditional table component, the rendering is faster, and the user experience is better.
The pseudo code for uploading the data to be rendered corresponding to each element node to be rendered to the workbench thread and handing over the control right of canvas may be:
205. and receiving the uploaded data to be rendered in the workbench thread and acquiring the control right of the canvas.
In a specific application scenario, the onmessage may be used to accept the transmitted data to be rendered and obtain the control right of the canvas.
206. And extracting each target rendering element contained in the data to be rendered.
The target rendering element corresponds to a table component needing rendering operation, such as width and height of a table, width and height of a cell, width and color of a frame, header data of the table, 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 rendering and generating each rendering element. In a specific application scenario, if there is a customized rendering function, a default rendering function is not used, but an incoming function needs to be converted into a character string, and a rendering thread (offscreen canvas. Js) is executed in an eval manner. (Worker threads cannot currently transfer functions, and transfer functions can only be executed by eval mode)
In a specific application scenario, personalized customization of the table can be achieved 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 can be set by using canvas renderingContext2D.strokeStyle, and the outer frame corresponding to the configuration information is drawn by using canvas renderingContext2D.strokeRect; when the inner frame needs to be customized, canvasRenderingContext2D.lineWidth, canvasRenderingContext2D.strokeStyle can be utilized to set a frame style corresponding to the configuration information, and the canvas renderingContext2D.strokeRect is utilized to draw the outer frame corresponding to the configuration information; when the cell needs to be customized, canvasRenderingContext2D.font, canvasRenderingContext2D.textAlign, canvasRenderingContext2D.textBaseline, textBaseline.fillStyle can be used for setting a cell style corresponding to the configuration information, and CanvasRenderingContext2D.fillRect, canvasRenderingContext2D.fillText or canvas renderingContext2D.strokeText is used for drawing characters corresponding to the configuration information;
208. and if the fact that the customized drawing function corresponding to the target rendering element does not exist in the data to be rendered is judged, determining a default drawing function corresponding to the target rendering element as a target drawing function.
In a specific application scene, each element to be rendered has a default drawing function, when the custom drawing function is judged to exist, a table component is generated by preferentially using the custom drawing function, and when the custom drawing function is judged not to exist, the default drawing function corresponding to the target rendering element is determined to be the target drawing function, so that the user personalized customization 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.
Wherein, the file types of the data to be rendered may include: init, change, paint, etc.
210. A table is rendered in the Worker thread using respective target rendering functions based on the file type.
In a specific application scenario, if the file type of the data to be rendered is init, the embodiment step 210 may specifically include: calling getContext () on an off-screen canvas to obtain a 2D rendering context provided by a canvas render Context2D interface; determining configuration information corresponding to a table to be generated by utilizing parameter information corresponding to each target rendering element in the data to be rendered; drawing an outer border corresponding to the configuration information according to an outer border 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 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: drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last 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 drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last row.
Wherein off-screen canvas refers to canvas in a workbench thread. The getContext () is an object that draws a 2D rendering context, and by calling the getContext () method, an environment for drawing on the canvas can be returned, and the parameter ContextID specifies the type that is desired to be drawn on the canvas. The current unique legal value is "2D", which specifies a two-dimensional drawing, and returns a Canvas renderingcontext2D object that exports a two-dimensional drawing API with which it can be drawn into the Canvas element.
Accordingly, if the file type of the data to be rendered is change, the embodiment step 210 may specifically include: acquiring data in a table, and an incoming parameter and configuration information of a cell in data to be rendered; drawing a cell corresponding to the configuration information according to a 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, specifically including: drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last 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, specifically including: and drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last row.
In a specific application scenario, if the file type of the data to be rendered is a point, the embodiment step 210 may specifically include: extracting position information contained in data to be rendered; and rendering and generating a 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 title of the table to be drawn is: 'name', 'phone number', 'birthday', 'gender', 'certificate number', 'vendor',
b. the table contents to be drawn are: the term "test list" is used to refer to the list of "159", "3951", "2019-11-03", "male", "320999", "2711", "vendor 01", "and" male "as described herein
c. Table width 720, table height 400, frame width 1, frame color #aaa,
d. the element id value and configuration parameters of the Table to be inserted are transmitted into the function canvas-Table, so that the Table can be rendered out, as shown in Table 1.
| Name of name | Mobile phone number | Birthday | Sex (sex) | Certificate number | Suppliers (suppliers) |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
| Test list | 159****3951 | 2019-11-03 | Man's body | 320999********2711 | Supplier 01 |
TABLE 1
By the canvas element-based Table rendering method, a canvas can be used for rendering a Table component, and a canvas-Table JavaScript file is introduced into a page of a Table to be created so as to globally use a canvas-Table function; then creating canvas elements and a Worker thread by using a canvas-Table function, and inserting the canvas elements into the element nodes to be rendered; uploading data to be rendered corresponding to the element nodes to be rendered and off-screen canvas to a workbench thread, and rendering a generation table on the workbench thread by using a drawing function in the data to be rendered. The drawing functions corresponding to the elements to be rendered can be subjected to personalized customization so as to meet the personalized requirements of users. When the drawing function is used for rendering and generating the table, different table rendering operations can be executed according to the file type corresponding to the data to be rendered. In the method, the canvas is utilized to render and generate the table, and because the canvas is independent of the frame and can be used in cooperation with the large main stream frames of the acts, vue and the regular, the compatibility of table generation can be improved.
Further, as an embodiment of the method shown in fig. 1 and fig. 2, an embodiment of the present application provides a canvas element-based table rendering apparatus, as shown in fig. 3, including: an introduction module 31, an insertion module 32, a creation module 33, an uploading 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 insertion module 32, configured to create a canvas element in the main thread based on a canvas-Table function, and insert the canvas element into an element node to be rendered;
a creation module 33, configured to create a Worker thread using a 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 workbench thread and handover control rights of canvas;
the generating module 35 may be configured to render, on the workbench thread, a table with the drawing function in the data to be rendered.
In a specific application scenario, in order to upload to-be-rendered data corresponding to each to-be-rendered element node to a workbench thread and transfer control rights of canvas, a table is rendered and generated in the workbench thread, as shown in fig. 4, the device further includes: a receiving module 36.
The receiving module 36 may be configured to receive the uploaded data to be rendered in the workbench thread and obtain control rights of the canvas.
Accordingly, in order to generate the table data satisfying the user definition, as shown in fig. 4, the apparatus further includes: extraction module 37, determination module 38.
An extraction module 37 operable to extract each target rendering element contained in the data to be rendered;
a determining module 38, configured to determine, as a target rendering function, a custom rendering function corresponding to each target rendering element in the data to be rendered;
the determining module 38 may be further configured to determine, if it is determined that the custom drawing function corresponding to the target rendering element does not exist in the data to be rendered, a default drawing function corresponding to the target rendering element as the target drawing function.
In a specific application scenario, in order to render a table on a workbench thread by using a drawing function in data to be rendered, the generating module 35 is specifically configured to obtain a file type of the data to be rendered; a table is rendered in the Worker thread using respective target rendering functions 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 the off-screen canvas to obtain a 2D rendering context provided by the canvas rendering context2D interface; determining configuration information corresponding to a table to be generated by utilizing parameter information corresponding to each target rendering element in the data to be rendered; drawing an outer border corresponding to the configuration information according to an outer border 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 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: drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last 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 drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last 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 obtain data in a table, an incoming parameter of a cell in the data to be rendered, and configuration information; drawing a cell corresponding to the configuration information according to a 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, specifically including: drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last 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, specifically including: and drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last row.
Correspondingly, if the file type of the data to be rendered is paint, the generating module 35 may be specifically configured to extract the position to be generated of the table included in the data to be rendered; the table data at the position to be generated is generated at the uppermost rendering layer of the canvas.
It should be noted that, other corresponding descriptions of each functional unit related to the canvas element-based table rendering apparatus provided in this embodiment may refer to corresponding descriptions in fig. 1 to 2, and are not repeated herein.
Based on the above methods shown in fig. 1 and fig. 2, correspondingly, the embodiments of the present application further provide a storage medium, on which a computer program is stored, which 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 (may be a CD-ROM, a U-disk, a mobile hard disk, etc.), and includes several instructions for causing a computer device (may be a personal computer, a server, or a network device, etc.) to perform the method of each implementation scenario of the present application.
Based on the methods shown in fig. 1 and fig. 2 and the virtual device embodiments shown in fig. 3 and fig. 4, in order to achieve the above objects, the embodiments of the present application further provide a computer device, which may specifically be a personal computer, a server, a network device, etc., where the entity device includes a storage medium and a processor; a storage medium storing a computer program; a processor for executing a computer program to implement the canvas element based table rendering method as described above and 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, WI-FI modules, and the like. The user interface may include a Display screen (Display), an input unit such as a Keyboard (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., bluetooth interface, WI-FI interface), etc.
It will be appreciated by those skilled in the art that the computer device structure provided in this embodiment is not limited to this physical device, and may include more or fewer components, or may combine certain components, or may be arranged in different components.
The non-volatile readable storage medium may also include an operating system, a network communication module, etc. An operating system is a program for table rendering entity device hardware and software resources, supporting the execution of information handling 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 embodiments, those skilled in the art can clearly understand that the application can be implemented by means of software plus necessary general hardware platform, and can also use canvas to render a Table component, and by introducing a canvas-Table JavaScript file into a page of a Table to be created, so as to globally use a canvas-Table function; then creating canvas elements and a Worker thread by using a canvas-Table function, and inserting the canvas elements into the element nodes to be rendered; uploading data to be rendered corresponding to the element nodes to be rendered to a workbench thread, and rendering a generation table on the workbench thread by using a drawing function in the data to be rendered. The drawing functions corresponding to the elements to be rendered can be subjected to personalized customization so as to meet the personalized requirements of users. When the drawing function is used for rendering and generating the table, different table rendering operations can be executed according to the file type corresponding to the data to be rendered. In the method, the canvas is utilized to render and generate the table, and because the canvas is independent of the frame and can be used in cooperation with the large main stream frames of the acts, vue and the regular, the compatibility of table generation can be improved.
Those skilled in the art will appreciate that the drawings are merely schematic illustrations of one preferred implementation scenario, and that the modules or flows in the drawings are not necessarily required to practice the present application. Those skilled in the art will appreciate that modules in an apparatus in an implementation scenario may be distributed in an apparatus in an implementation scenario according to an implementation scenario description, or that corresponding changes may be located in one or more apparatuses different from the implementation scenario. The modules of the implementation scenario may be combined into one module, or may be further split into a plurality of sub-modules.
The foregoing application serial numbers are merely for description, and do not represent advantages or disadvantages of the implementation scenario. The foregoing disclosure is merely a few specific implementations of the present application, but the present application is not limited thereto and any variations that can be considered by a person skilled in the art shall fall within the protection scope of the present application.
Claims (8)
1. A canvas element-based form rendering method, comprising:
introducing a JavaScript file of a canvas-Table function into a page of a Table to be created so as to globally use the canvas-Table function;
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 workbench thread by using the canvas-Table function;
uploading the data to be rendered corresponding to each element node to be rendered to the workbench thread and handing over the control right of canvas;
rendering and generating a table on the workbench thread by using a drawing function in the data to be rendered;
rendering a generation table on the workbench thread by using a drawing function in the data to be rendered, wherein the generation table comprises the following specific steps:
acquiring the file type of the data to be rendered;
rendering and generating a table in the workbench thread by utilizing each target drawing function based on the file type;
if the file type of the data to be rendered is init, rendering and generating a table in the workbench thread by using each target drawing function based on the file type, wherein the method specifically comprises the following steps:
calling getContext () on an off-screen canvas to obtain a 2D rendering context provided by a canvas render Context2D interface;
determining configuration information corresponding to a table to be generated by utilizing 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 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 of 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:
drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last column;
if the incoming parameter merge of the cell is col, the drawing of 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 drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last row.
2. The method of claim 1, wherein after uploading the data to be rendered corresponding to each element node to be rendered to the workbench thread and handing over the control right of canvas, further specifically comprising:
and receiving the uploaded data to be rendered in the workbench thread and acquiring the control right of the canvas.
3. The method according to claim 2, characterized by, before rendering a generated table on the Worker thread using a drawing function in the data to be rendered, in particular further comprising:
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 fact that the customized drawing function corresponding to the target rendering element does not exist in the data to be rendered is judged, determining a default drawing function corresponding to the target rendering element as the target drawing function.
4. The method according to claim 1, wherein if the file type of the data to be rendered is change, the generating a table in the Worker thread by using each target drawing function rendering based on the file type specifically includes:
acquiring data in a table, and an incoming parameter and configuration information of a cell in the data to be rendered;
drawing a cell corresponding to the configuration information according to a cell drawing function in the target drawing function and the incoming parameter;
if the incoming parameter merge of the cell is row, the drawing of the cell corresponding to the configuration information according to the cell drawing function in the target drawing function and the incoming parameter specifically includes:
drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last column;
if the incoming parameter merge of the cell is col, the drawing of 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 drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last row.
5. The method according to claim 1, wherein if the file type of the data to be rendered is paint, the generating a table in the Worker thread by using each target drawing function rendering based on the file type specifically includes:
extracting a table to-be-generated position contained in the data to be rendered;
and generating the table data at the position to be generated in the uppermost rendering layer of the canvas.
6. A canvas element-based form rendering apparatus, comprising:
the system comprises an introduction module, a generation module and a storage module, wherein the introduction module is used for introducing a canvas-Table JavaScript file into a page of a Table to be created so as to globally use a canvas-Table function;
an insertion module for creating canvas elements in the main thread based on the canvas-Table function and integrating the canvas elements
The canvas element is inserted into an element node to be rendered;
the creation 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 workbench thread and handing over the control right of canvas;
the generating module is used for rendering and generating a table on the workbench thread by utilizing a drawing function in the data to be rendered;
the generation module is specifically configured to obtain a file type of data to be rendered; rendering and generating a table in a workbench thread by utilizing each target drawing function based on the file type;
if the file type of the data to be rendered is init, the generating module may be specifically configured to:
calling getContext () on an off-screen canvas to obtain a 2D rendering context provided by a canvas render Context2D interface;
determining configuration information corresponding to a table to be generated by utilizing 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 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 of 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:
drawing row data in advance, and if the data in the current column is identical to the data in the last column, merging the cells of the current column with the cells of the last column;
if the incoming parameter merge of the cell is col, the drawing of 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 drawing column data in advance, and if the data in the current row is identical with the data in the last row, merging the cells of the current row with the cells of the last row.
7. A non-transitory readable storage medium having stored thereon a computer program, wherein the computer program when executed by a processor implements the canvas element based table rendering method as claimed in any one of claims 1 to 5.
8. 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, characterized in that the processor implements the canvas element based table rendering method as claimed in any one of claims 1 to 5 when executing the program.
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 CN111488149A (en) | 2020-08-04 |
| CN111488149B true 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) |
Families Citing this family (9)
| 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 |
| CN112699653B (en) * | 2021-01-07 | 2024-02-23 | 北京明略软件系统有限公司 | React-based data table rendering method and data table assembly |
| 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 |
| CN113486281B (en) * | 2021-07-20 | 2024-07-09 | 北京达佳互联信息技术有限公司 | Page display method and device, electronic equipment and storage medium |
| CN116484815B (en) * | 2023-06-08 | 2023-08-29 | 北京纷扬科技有限责任公司 | Canvas-based high-performance table rendering method |
Citations (7)
| 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 |
| 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 |
Family Cites Families (1)
| 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 |
-
2020
- 2020-03-11 CN CN202010164578.6A patent/CN111488149B/en active Active
Patent Citations (7)
| 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 |
| 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 Worker提高Web的应用性能研究;邱珊;;软件导刊(12);全文 * |
| 基于Html5的Web Map矢量渲染技术研究;丁立国;周斌;熊伟;;测绘工程(08);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111488149A (en) | 2020-08-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111488149B (en) | Canvas element-based table rendering method and device and computer equipment | |
| TWI808393B (en) | Page processing method, device, apparatus and storage medium | |
| WO2017088509A1 (en) | Page customization method and device | |
| CN107392842B (en) | Image stylization processing method and device, computing equipment and computer storage medium | |
| CN111045655A (en) | Page rendering method and device, rendering server and storage medium | |
| CN107277615B (en) | Live broadcast stylization processing method and device, computing device and storage medium | |
| CN105700925B (en) | A kind of interface implementing method and device of APP | |
| US10642590B2 (en) | Method and electronic device for rendering scalable vector graphics content | |
| US20100091024A1 (en) | Method and device for generating custom fonts | |
| CN108121539B (en) | Component processing method and device | |
| CN110018876A (en) | The international method, apparatus of software application and electronic equipment | |
| WO2019238145A1 (en) | Webgl-based graphics rendering method, apparatus and system | |
| CN107436786A (en) | Using starting guide method, apparatus and computer-readable recording medium | |
| CN111596919B (en) | Display method and device of graphic drawing result, computer equipment and storage medium | |
| WO2022048141A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN111857878B (en) | Skeleton screen page generation method and device, electronic equipment and storage medium | |
| CN110750664A (en) | Picture display method and device | |
| CN111880813A (en) | Method and storage medium for realizing UI (user interface) of android card | |
| CN107678741B (en) | List view implementation method and device, readable storage medium and equipment | |
| CN111026368A (en) | Python-based plug-in generation method, device, equipment and storage medium | |
| CN106933439B (en) | image processing method and system based on social platform | |
| CN106293658B (en) | Interface component generation method and equipment | |
| CN110647371A (en) | Multi-language resource file analysis method and system based on service configuration | |
| CN106648623B (en) | Display method and device for characters in android system | |
| JP2012113710A (en) | Apparatus and method for changing electronic book contents |
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 |