Electronic whiteboard grid generation method and device based on SVG template and computer readable storage medium

Abstract

The invention discloses an electronic whiteboard grid generation method and device based on an SVG template and a computer readable storage medium, and relates to the technical field of teaching software development. Gt; and dynamically generating a grid structure with any size by utilizing a circular logic through the matts and the *-shaped grid templates of the elements. Lt; gt; elements serve as reusable units, coordinate positioning is achieved by replacing translateX and translateY parameters, and flexible configuration of the number of transverse and longitudinal grids is supported. And after a complete SVG label character string is generated, converting the complete SVG label character string into a picture and inserting the picture into an electronic whiteboard canvas. The method solves the problems of efficiency and standardization of generation of the matts / *-shaped grids in the electronic whiteboard, and has better application value in teaching of some language and Chinese subjects.

Description

Technical Field

[0001] The present invention relates to the technical field of teaching software development, and more particularly, to a method, device, and computer-readable storage medium for generating an electronic whiteboard grid based on an SVG template. Background Art

[0002] A web-based electronic whiteboard is an advanced online education and teaching software tool that provides a multi-person real-time whiteboard interaction service, breaking the limitations of information transmission by instructors in online teaching. With the rapid development of online education, as an essential online teaching tool, the electronic whiteboard has richer, more intuitive, and more diverse functions than traditional blackboard writing in offline teaching, enabling functions such as dust-free writing, freehand writing, and remote communication. Using the electronic whiteboard, instructors can achieve functions such as interactive graffiti, real-time trajectory synchronization, document sharing, document transcoding, and data playback.

[0003] Although current electronic whiteboards can perform operations such as writing, drawing, arbitrary dragging, scaling, rotating, and erasing, the electronic whiteboard products on the market do not have the function of inserting a Tian character grid or a Mi character grid. Generating a Tian character grid or a Mi character grid depends on manual drawing by users, which is not only inefficient but also results in uneven quality, imposing certain limitations on the teaching of some language and Chinese-related disciplines. Summary of the Invention

[0004] The purpose of the present invention is to provide a method, device, and computer-readable storage medium for generating an electronic whiteboard grid based on an SVG template, which can quickly generate Tian character grids / Mi character grids supporting any combination of the number of horizontal and vertical grids, solving the problems of efficiency and standardization in generating Tian character grids / Mi character grids in electronic whiteboards.

[0005] Embodiments of the present invention are implemented as follows: A method for generating an electronic whiteboard grid based on an SVG template, comprising: S1. Pre-define an SVG graphic template library, the template library at least includes a Tian character grid template and a Mi character grid template, and each template is composed of <g>The element defines a reusable unit; S2. Receive the number of horizontal grids M and the number of vertical grids N input by the user, where both M and N are positive integers; S3. According to M and N, dynamically splice the SVG template through loop logic to generate an SVG string containing an M×N grid; S4. Convert the SVG string into an image format and insert it into the electronic whiteboard Canvas.

[0006] 2. The method for generating an electronic whiteboard grid based on an SVG template according to claim 1, wherein the specific process of generating the SVG string containing the M×N grid in step S3 is as follows: S31. Horizontal traversal: For each horizontal position i (i = 0, 1,..., M - 1), perform translateX parameter replacement to generate a horizontally arranged template unit; S32. Vertical traversal: For each vertical position j (j = 0, 1,..., N - 1), perform translateY parameter replacement to generate a vertically arranged template unit.

[0007] Further, in other preferred embodiments of the present invention, in step S1, the tic-tac-toe template includes a central crosshair and four corner positioning points; the cross-shaped template adds 45° diagonal line intersections on the basis of the tic-tac-toe template.

[0008] Further, in other preferred embodiments of the present invention, in step S2, the user sets M and N by dragging the slider or directly inputting values, and the method responds to the input changes in real time and updates the SVG string generation result.

[0009] Further, in other preferred embodiments of the present invention, in step S3, the dynamic splicing process is implemented through a string replacement function, specifically including: Replace translateX in the template with i*width, and translateY with j*height, where width and height are the preset width and height values of a single grid.

[0010] Further, in other preferred embodiments of the present invention, step S4 includes: S41. Upload the SVG string to the server through an HTTP request and return the network image URL; S42. Draw the network image onto the Canvas through the canvasCtx.drawImage() method and add a layer management identifier.

[0011] An electronic whiteboard grid generation device, which includes: A preprocessing module for loading and parsing an SVG template file to generate a template string with replaceable parameters; A parameter input module configured to receive the number of horizontal grids M and the number of vertical grids N set by the user; A dynamic splicing module that performs horizontal and vertical loop traversals based on M and N and generates a complete SVG graphic through string replacement; A rendering output module that converts the SVG graphic into a bitmap format and overlays it on the main canvas of the electronic whiteboard.

[0012] Further, in other preferred embodiments of the present invention, the dynamic splicing module includes: A horizontal splicing unit for calculating the horizontal displacement amount according to the formula translateX = i * (baseWidth + spacingX), where baseWidth is the width of a single template and spacingX is the horizontal spacing; A vertical splicing unit for calculating the vertical displacement amount according to the formula translateY = j * (baseHeight + spacingY), where baseHeight is the height of a single template and spacingY is the vertical spacing.

[0013] Further, in other preferred embodiments of the present invention, the rendering output module includes a resolution adaptation unit for: Dynamically adjusting the SVG export ratio according to the DPI value of the electronic whiteboard screen so that the finally generated grid line width maintains a physical width of 0.5 - 1.5 mm on the canvas.

[0014] A computer-readable storage medium stores a computer program, and when the program is executed by a processor, it implements the steps of the method for generating an electronic whiteboard grid based on an SVG template according to any one of claims 1 to 6. The beneficial effects of the embodiments of the present invention are: The embodiments of the present invention provide a method, device, and computer-readable storage medium for generating an electronic whiteboard grid based on an SVG template, which predefine in SVG <g>The grid templates of the elements, namely the tic-tac-toe grid and the cross grid, are used to dynamically generate grid structures of any size using loop logic. <g>The element, as a reusable unit, realizes coordinate positioning by replacing the translateX and translateY parameters, and supports flexible configuration of the number of horizontal and vertical grids. After generating the complete SVG tag string, it is converted into an image and inserted into the electronic whiteboard canvas. It solves the efficiency and standardization problems of generating Tian character grids / cross grids in electronic whiteboards, and has good application value in the teaching of some languages and Chinese-related disciplines. Brief Description of the Drawings

[0015] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention, and thus should not be regarded as limiting the scope. For those of ordinary skill in the art, without creative efforts, other relevant drawings can also be obtained based on these drawings.

[0016] Figure 1 It is a diagram showing the effect of a method for generating an electronic whiteboard grid based on an SVG template provided by an embodiment of the present invention. Detailed Embodiments

[0017] To make the purpose, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of the present invention. Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the present invention to be protected, but merely represents the selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of the present invention. Embodiment

[0018] This embodiment provides a method for generating an electronic whiteboard grid based on an SVG template, which includes: S1. Pre-define an SVG graphic template library, which at least includes a Tian character grid template and a cross grid template, and each template consists of <g>The element defines a reusable unit.

[0019] Among them, the tic-tac-toe template includes a central crosshair and four corner positioning points; the cross-grid template adds 45° diagonal intersections on the basis of the tic-tac-toe template.

[0020] Optionally, each tic-tac-toe grid is an independent unit, and the size of a single template is fixed at 150*150. The drawing logic of the graphic includes: The outer frame is drawn as a rectangular border of 150*150 to form a closed path; the main crosshair is composed of a horizontal line and a vertical line.

[0021] The horizontal line is composed of a group of horizontal dotted lines. Each dotted line unit consists of a short horizontal line + interval to form a dotted line effect. The short horizontal line is 4.9 in length and the interval is 2; from x = 144.5 (right side) to x = 10.4 (left side), there are 16 horizontal dotted lines in total.

[0022] The vertical line is composed of a group of vertical dotted lines. Each dotted line unit consists of a short vertical line + interval to form a dotted line effect. The short vertical line is 4.9 in length and the interval is 2; from y = 144.5 (bottom) to y = 10.4 (top), there are 16 vertical dotted lines in total.

[0023] The cross-grid template adds 45° diagonal intersections on the basis of the tic-tac-toe template. The diagonal line is composed of 16 short diagonal lines + intervals to form a dotted line effect. The short diagonal line is 7 in length and the interval is 2.

[0024] Furthermore, a method for generating an electronic whiteboard grid based on an SVG template provided in this embodiment further includes: S2. Receive the number of horizontal grids M and the number of vertical grids N input by the user, where both M and N are positive integers.

[0025] Specifically, the user sets M and N by dragging the slider or directly inputting values. The method responds to the input changes in real time and updates the SVG string generation result. It should be noted that setting M and N by dragging the slider triggers parameter transmission when the slider value changes, and maps the value to M and N. This is prior art and will not be elaborated here.

[0026] Furthermore, a method for generating an electronic whiteboard grid based on an SVG template provided in this embodiment further includes: S3. According to M and N, dynamically splice the SVG template through a loop logic to generate an SVG string containing M×N grids.

[0027] Specifically, the specific process of generating an SVG string containing M×N grids in step S3 is as follows: S31. Horizontal traversal: For each horizontal position i (i = 0, 1,..., M - 1), perform translateX parameter substitution to generate horizontally arranged template units; S32. Vertical traversal: For each vertical position j (j = 0, 1, …, N - 1), perform the replacement of the translateY parameter to generate vertically arranged template units.

[0028] The dynamic splicing process is implemented through a string replacement function, specifically including: Replace translateX in the template with i * width, and translateY with j * height, where width and height are the preset width and height values of a single grid.

[0029] In this embodiment, width and height are set to 148, that is, the size of a single grid unit is 148 * 148 pixels, and a 2 - pixel interval is reserved between each grid.

[0030] Furthermore, a method for generating an electronic whiteboard grid based on an SVG template provided in this embodiment further includes: S4. Convert the SVG string into an image format and insert it into the electronic whiteboard Canvas.

[0031] Specifically, step S4 includes: S41. Upload the SVG string to the server through an HTTP request and return the network image URL; S42. Draw the network image onto the Canvas through the canvasCtx.drawImage() method and add a layer management identifier.

[0032] This method combines the high - definition characteristics of SVG vector graphics and the dynamic rendering ability of Canvas, solving the compatibility problem of directly embedding vector graphics into Canvas. By generating images through server transfer, it avoids differences in SVG parsing by different browsers and ensures consistent display effects.

[0033] Furthermore, this embodiment also provides an electronic whiteboard grid generation device, which includes: A pre - processing module for loading and parsing the SVG template file to generate a template string with replaceable parameters; A parameter input module configured to receive the number of horizontal grids M and the number of vertical grids N set by the user; A dynamic splicing module that performs horizontal and vertical loop traversals based on M and N and generates a complete SVG graphic through string replacement; A rendering output module that converts the SVG graphic into a bitmap format and superimposes it on the main canvas of the electronic whiteboard.

[0034] Furthermore, the dynamic splicing module includes: The horizontal splicing unit is used to calculate the horizontal displacement according to the formula translateX = i * (baseWidth + spacingX), where baseWidth is the width of a single template and spacingX is the horizontal spacing; The vertical splicing unit is used to calculate the vertical displacement according to the formula translateY = j * (baseHeight + spacingY), where baseHeight is the height of a single template and spacingY is the vertical spacing.

[0035] The rendering output module includes a resolution adaptation unit for: Dynamically adjusting the SVG export ratio according to the DPI value of the electronic whiteboard screen, so that the finally generated grid line width remains a physical width of 0.5 - 1.5 mm on the canvas.

[0036] This embodiment also provides a computer-readable storage medium storing a computer program, which when executed by a processor implements the steps of the above-mentioned method for generating an electronic whiteboard grid based on an SVG template. In summary, the embodiments of the present invention provide a method, device and computer-readable storage medium for generating an electronic whiteboard grid based on an SVG template, which predefine in SVG <g>The grid templates of the elements in the form of a tic-tac-toe grid and a cross grid are used to dynamically generate grid structures of any size using loop logic. <g>The element, as a reusable unit, realizes coordinate positioning by replacing the translateX and translateY parameters, and supports flexible configuration of the number of horizontal and vertical grids. After generating the complete SVG tag string, it is converted into an image and inserted into the electronic whiteboard canvas. It solves the efficiency and standardization problems of generating the Chinese character grid / cross grid in the electronic whiteboard, and has better application value in the teaching of some languages and Chinese-related disciplines.

[0037] The above are only the preferred embodiments of the present invention and are not intended to limit the present invention. For those skilled in the art, the present invention can have various changes and modifications. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.< / g> < / g> < / g> < / g> < / g> < / g>

Claims

1. A method for generating an electronic whiteboard grid based on an SVG template, characterized in that: include: S1, pre-defined SVG graphic template library, the template library at least includes a Tianzi grid template and a Mizi grid template, each template consists of <g> Elements define reusable units;< / g> S2, receiving the horizontal grid number M and the vertical grid number N input by the user, where M and N are both positive integers; S3. Dynamically splicing the SVG templates according to M and N through loop logic to generate an SVG string containing an M×N grid; S4. Convert the SVG string into a picture format and insert it into the electronic whiteboard Canvas.

2. The electronic whiteboard grid generation method based on SVG template according to claim 1, characterized in that: The specific process of generating an SVG string containing an M×N grid in step S3 is as follows: S31, horizontal traversal: for each horizontal position i (i=0,1,…,M-1), perform translateX parameter replacement to generate horizontally arranged template units; S32, vertical traversal: for each vertical position j (j=0,1,…,N-1), perform translateY parameter replacement to generate vertically arranged template units.

3. The electronic whiteboard grid generation method based on SVG template according to claim 1, characterized in that: In step S1, the grid template includes a central cross line and four corner positioning points; the grid template adds 45° oblique cross lines on the basis of the grid template.

4. The method for generating an electronic whiteboard grid based on an SVG template according to claim 1, characterized in that: In step S2, the user sets M and N by dragging the slider or directly inputting numerical values, and the method responds to the input changes in real time and updates the SVG string generation result.

5. The electronic whiteboard grid generation method based on SVG template according to claim 1, characterized in that: In step S3, the dynamic splicing process is implemented by a string replacement function, which specifically includes: Replace translateX in the template with i*width and translateY with j*height, where width and height are the preset width and height values ​​of a single grid.

6. The method for generating an electronic whiteboard grid based on an SVG template according to claim 1, characterized in that: The step S4 comprises: S41, upload the SVG string to the server via HTTP request, and return the URL of the network image; S42, drawing the network image onto the Canvas canvas through the canvasCtx.drawImage() method, and adding a layer management identifier.

7. An electronic whiteboard grid generation device, characterized in that: include: Preprocessing module, used to load and parse SVG template files and generate template strings with replaceable parameters; A parameter input module is configured to receive a horizontal grid number M and a vertical grid number N set by a user; A dynamic splicing module performs horizontal and vertical loop traversal based on the M and N, and generates a complete SVG graphic by string replacement; The rendering output module converts the SVG graphics into a bitmap format and overlays it on the main canvas of the electronic whiteboard.

8. The electronic whiteboard grid generating device according to claim 7, characterized in that: The dynamic splicing module includes: The horizontal splicing unit is used to calculate the horizontal displacement according to the formula translateX = i * (baseWidth + spacingX), where baseWidth is the width of a single template and spacingX is the horizontal spacing; The vertical stitching unit is used to calculate the vertical displacement according to the formula translateY = j * (baseHeight + spacingY), where baseHeight is the height of a single template and spacingY is the vertical spacing.

9. The electronic whiteboard grid generation device according to claim 7, characterized in that: The rendering output module includes a resolution adaptation unit, which is used to: The SVG export ratio is dynamically adjusted according to the DPI value of the electronic whiteboard screen, so that the final generated grid line width maintains a physical width of 0.5-1.5mm on the canvas.

10. A computer-readable storage medium storing a computer program, characterized in that: When the program is executed by a processor, the steps of the electronic whiteboard grid generation method based on an SVG template described in any one of claims 1 to 6 are implemented.

Images