Text rendering method, font transformation method and related equipment

Abstract

The embodiment of the invention provides a text rendering method, a font transformation method and related equipment, and belongs to the technical field of graphic rendering. The text rendering method comprises the following steps: receiving a text editing instruction through a Web drawing board, and identifying a target character and a font style in the text editing instruction; analyzing a vector font file corresponding to the font information, and extracting original contour vertex data of the target character; if the font information is inconsistent with the font information of the vector font file, transforming the original contour vertex data according to the font information, and storing the transformed contour vertex data into a buffer region corresponding to the color information; and calling a webpage graphics library drawing instruction, and carrying out combined drawing on the vertex data in the buffer area on the Web drawing board. Different font styles can be realized based on one font file.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of graphic rendering, and in particular to a text rendering method, a glyph transformation method and related equipment. BACKGROUND

[0002] A Web drawing board is a Web-side application for drawing, editing and displaying graphics, which can render graphics drawn by a user, display various elements such as shapes, tables, mind maps, etc. Among these elements, text content can be included, and multiple fonts can be used in the text at the same time to improve the readability and aesthetics of the text.

[0003] If multiple fonts are used in the text at the same time, multiple font files need to be loaded, and the vector graphic data of the required characters needs to be extracted by separately analyzing the multiple font files, and then the vector graphic data of each character is rendered and displayed in the Web drawing board in turn.

[0004] In this way, loading multiple font files will occupy a large amount of device memory and network transmission bandwidth, resulting in slow page loading speed. SUMMARY

[0005] The embodiments of the present application provide a text rendering method, a glyph transformation method and related equipment, which can solve the technical problem that loading multiple font files will occupy a large amount of device memory and network transmission bandwidth, resulting in slow page loading speed. To achieve the above purpose, the technical solutions provided by the embodiments of the present application are as follows:

[0006] In a first aspect, the embodiments of the present application provide a text rendering method, comprising:

[0007] receiving a text editing instruction through a Web drawing board, and identifying a target character and a font style in the text editing instruction; wherein the font style includes font information, glyph information and color information;

[0008] analyzing a vector font file corresponding to the font information, and extracting original contour vertex data of the target character; wherein the original contour vertex data includes original coordinates of each vertex;

[0009] if the glyph information is inconsistent with the glyph information of the vector font file, transforming the original contour vertex data according to the glyph information, and storing the transformed contour vertex data in a buffer corresponding to the color information;

[0010] calling a web graphics library drawing instruction to merge and draw the vertex data in the buffer on the Web drawing board.

[0011] In a second aspect, the embodiments of the present application provide a glyph transformation method, comprising:

[0012] The vector font file is parsed to extract the original contour vertex data of each character; wherein, the original contour vertex data includes the original coordinates of each vertex;

[0013] The original contour vertex data is transformed, and the transformed contour vertex data is stored in a buffer corresponding to the color information;

[0014] The drawing instructions from the web page graphics library are invoked to merge and draw the vertex data in the buffer, resulting in the individual characters after glyph transformation.

[0015] Thirdly, embodiments of this application provide a text rendering apparatus, including:

[0016] The instruction recognition module is used to receive text editing instructions through the Web canvas and recognize the target characters and font styles in the text editing instructions; wherein, the font style includes font information, glyph information, and color information;

[0017] The file parsing module is used to parse the vector font file corresponding to the font information and extract the original contour vertex data of the target character; wherein, the original contour vertex data includes the original coordinates of each vertex;

[0018] The glyph transformation module is used to transform the original contour vertex data according to the glyph information if the glyph information is inconsistent with the glyph information of the vector font file, and store the transformed contour vertex data in a buffer corresponding to the color information;

[0019] The graphics drawing module is used to call drawing instructions from the web graphics library to merge and draw the vertex data in the buffer on the Web canvas.

[0020] Fourthly, embodiments of this application provide an intelligent interactive flat panel, comprising: a processor and a memory; the memory stores a computer program adapted to be loaded by the processor and executed as described in the first aspect.

[0021] Fifthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first or second aspect.

[0022] In the embodiments provided in this application, after parsing the contour vertex data of each character from a font file, the contour vertex data is transformed, and text rendering is performed based on the transformed contour vertex data, resulting in multiple variations of the font. Thus, this application implements different glyph styles based on a single font file, significantly reducing the number of font files that need to be loaded and managed, thereby reducing webpage loading time and memory usage, and improving overall rendering performance. Furthermore, the contour vertex data of multiple characters are merged into a single buffer for rendering. This reduces the number of drawing command calls and switching when multiple fonts appear alternately on the canvas, thereby speeding up rendering and further reducing webpage loading time.

[0023] Furthermore, by adjusting the stroke style and shear variation, various artistic effects can be created for each character, providing designers with more creative freedom. No additional font variant files are required; the thickness and slant of text lines can be dynamically adjusted during rendering. This means that the appearance of text can be changed in real time according to user preferences or different display needs, achieving dynamic font style adjustments. Attached Figure Description

[0024] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 A schematic diagram illustrating the rendering effect of text using multiple fonts, provided for an embodiment of this application;

[0026] Figure 2 A flowchart illustrating a text rendering method provided in an embodiment of this application;

[0027] Figure 3 A timing diagram of a text rendering method provided in an embodiment of this application;

[0028] Figure 4 A schematic diagram of the original outline vertices of a regular script character provided for an embodiment of this application;

[0029] Figure 5 This is a schematic diagram illustrating the drawing of vertex data corresponding to a conventional font, as provided in an embodiment of this application.

[0030] Figure 6 This is a schematic diagram of vertex data drawing corresponding to a bold font provided in an embodiment of this application;

[0031] Figure 7This is a schematic diagram illustrating the drawing of vertex data corresponding to a slanted font, as provided in an embodiment of this application.

[0032] Figure 8 This is a schematic diagram of vertex data drawing corresponding to a slanted bold font provided in an embodiment of this application;

[0033] Figure 9 A flowchart illustrating a character transformation method provided in an embodiment of this application;

[0034] Figure 10 This is a schematic diagram of the structure of a text rendering device provided in an embodiment of this application;

[0035] Figure 11 This is a schematic diagram of the structure of a smart interactive flat panel provided in an embodiment of this application. Detailed Implementation

[0036] Web drawing boards are web-based applications for drawing, editing, and displaying graphics. They can render user-drawn graphics and display various elements such as shapes, tables, and mind maps through a user interface. These elements may contain text content. Furthermore, to emphasize key points, differentiate different content, and enhance visual appeal, multiple fonts can be used simultaneously to enrich the drawing effect and improve the readability and aesthetics of the text.

[0037] With continuous technological advancements and innovation, Web canvases have evolved from supporting 2D graphics rendering to supporting 3D scene rendering, and from static displays to dynamic interactions, bringing users a richer experience and more functionality. For example, by integrating WebGL (Web Graphics Library) technology, Web canvases can provide more diverse and dynamic content display effects.

[0038] When rendering text in WebGL, it's typically necessary to first load a vector font file, such as a TrueType Font (abbreviated as .ttf) or OpenType Font (abbreviated as .otf). Then, a font parsing library (such as opentype.js) can be used to parse the vector font file and extract the vector graphics data for each character. Afterward, based on the parsed vector graphics data, WebGL's drawing APIs (such as CanvasRenderingContext2D) can be used to draw the vector graphics of each character on a web canvas.

[0039] In a web page, if multiple fonts are used simultaneously in the text, it is often necessary to load multiple font files, parse each font file separately, extract the vector graphic data of the required characters, and then render and display the vector graphic data of each character in the Web drawing board in sequence. In this way, the page loading speed is slow, and loading multiple font files will occupy more device memory and network transmission bandwidth.

[0040] For example, see Figure 1 , the text "Case discussion on whether the Java language can turn things around" uses Times New Roman, regular running script, and multiple variants of regular running script. Among them, the characters "J", "a", "v", "a" use Times New Roman, the characters "语", "言", "案", "例", "讨", "论" use regular running script, the characters "是", "否", "能" use bold running script, the characters "扭", "转" use italic running script, and the characters "乾", "坤" use italic bold running script. Then, when the Web drawing board renders the text "Case discussion on whether the Java language can turn things around", it is necessary to load the Times New Roman font file, regular running script font file, bold running script font file, italic running script font file, and italic bold running script font file, and call and switch the drawing instructions multiple times to render different fonts separately. In this way, the number of font files to be loaded is large, the data volume is large, and the drawing instruction switching is frequent, which leads to a slow web page loading speed.

[0041] It should be noted that the above text rendering method based on WebGL was obtained by the inventors of this application during the research and development of the Web drawing board, and it is not a processing method known to the public at home and abroad before this application was proposed.

[0042] Based on this, this application provides a text rendering method. After parsing the contour vertex data of each character from a certain font file, by transforming the contour vertex data and performing text rendering based on the transformed contour vertex data, multiple variants of this font can be obtained. In this way, this application realizes different glyph styles based on one font file, significantly reducing the number of font files that need to be loaded and managed, and thus reducing the web page loading time and memory occupancy. And, the contour vertex data of multiple characters are merged into one buffer for rendering. In this way, when multiple fonts appear alternately in the drawing board, the number of drawing instruction calls and switches can be reduced, thereby accelerating the rendering speed and further reducing the web page loading time.

[0043] To make the purpose, technical solution, and advantages of this application clearer, the following will further describe the embodiments of this application in detail with reference to the accompanying drawings.

[0044] It should be understood that the described embodiments are merely some, not all, of the embodiments in this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0045] In the following description, when referring to the accompanying drawings, the same numbers in different drawings denote the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0046] In the description of this application, it should be understood that the terms "first," "second," "third," etc., are used only to distinguish similar objects and are not necessarily used to describe a specific order or sequence, nor should they be construed as indicating or implying relative importance. Those skilled in the art can understand the specific meaning of the above terms in this application according to the specific circumstances. Furthermore, in the description of this application, unless otherwise stated, "multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0047] Figure 2 This is a flowchart illustrating a text rendering method provided in an embodiment of this application. The following will describe a specific implementation method. Figure 2 The processing flow shown is explained in detail below:

[0048] S202 receives text editing instructions via the Web canvas and identifies the target characters and font styles in the text editing instructions.

[0049] The font style can include font information, glyph information, and color information.

[0050] In implementation, users can create and display content on the Web canvas using client devices such as smart interactive whiteboards. For example, they can input any characters and set font styles for them. Based on the user's text operations on the Web canvas, the smart interactive whiteboard can generate corresponding text editing instructions and send these instructions to the Web canvas for execution. For ease of description, the arbitrary character entered by the user can be referred to as the target character.

[0051] It should be noted that a vector font file needs to be prepared before the user can edit the text. For example, see [link to example]. Figure 3, after the user opens the Web drawing board and selects the regular running script font, the intelligent interactive flat panel can download the vector font file corresponding to the running script font from the server of the font provider or the open-source font library.

[0052] Of course, the intelligent interactive flat panel can temporarily download the vector font file from the server or store and manage the vector font file locally. This application does not limit this. That is to say, the vector font file can be pre-stored locally on the intelligent interactive flat panel. When the user creates and displays content in the Web drawing board, the intelligent interactive flat panel can directly read the vector font file stored locally.

[0053] S204, parse the vector font file corresponding to the font information, and extract the original contour vertex data of the target character.

[0054] The glyphs of each character can be regarded as a graph surrounded by a series of curves. The key points on the character contour (i.e., the text edge path Path) can be called vertices. Correspondingly, the original contour vertex data of each character can be stored in the vector font file. The original contour vertex data of each character can include the original coordinates of each vertex.

[0055] For example, see Figure 4 , the original contour vertex data of the character "Kun" can be the coordinates of all vertices on the inner and outer contours of the character "Kun". See Figure 5 , when calling the WebGL drawing instruction, the GPU (Graphics Processing Unit) of the intelligent interactive flat panel can draw the original contour vertex data of the character "Kun" by drawing triangles one by one.

[0056] See again Figure 1 , according to the text editing instruction received by the intelligent interactive flat panel, the character "Kun" should adopt the italic and bold running script font. However, the contour vertex data stored in the vector font file obtained by the intelligent interactive flat panel is the contour vertex data of the regular running script font and does not include the contour vertex data of the italic and bold running script font. At this time, the intelligent interactive flat panel can parse the regular running script font file that has been obtained, extract the original contour vertex data of the character "Kun". Then, by transforming the original contour vertex data of the character "Kun", obtain the font style specified by the text editing instruction.

[0057] S206, if the glyph information is inconsistent with the glyph information of the vector font file, transform the original contour vertex data according to the glyph information, and store the transformed contour vertex data in the buffer corresponding to the color information.

[0058] In implementation, the vector font files obtained by the intelligent interactive flat panel may not include the font styles set by the user. For example, the fonts required for the target characters input by the user include regular script and various variants of regular script, while the vector font files obtained by the intelligent interactive flat panel include a regular script font file and a Times New Roman font file, and do not include the vector font files corresponding to bold regular script, italic regular script, and bold italic regular script. If the target characters input by the user are directly rendered based on the existing vector font files, the rendering effect set by the user cannot be obtained. However, the intelligent interactive flat panel provided in this embodiment can, after receiving the text editing instruction of the user, recognize the target characters input by the user and the font styles set for each target character. When the vector font files do not include the font styles set by the user, the font styles are changed based on the existing vector font files to obtain the required font styles.

[0059] See again Figure 1 , according to the text editing instruction received by the intelligent interactive flat panel, the black characters "语" and "言", and the red characters "案", "例", "讨", "论" should adopt regular script, which is consistent with the glyph information of the regular script font file obtained by the intelligent interactive flat panel. Then, the intelligent interactive flat panel can directly store the original contour vertex data of the black characters "语" and "言" into the buffer corresponding to black for rendering, and directly store the original contour vertex data of the red characters "案", "例", "讨", "论" into the buffer corresponding to red for rendering.

[0060] The characters "是", "否", "能" should adopt bold regular script, the characters "扭", "转" should adopt italic regular script, and the characters "乾", "坤" should adopt bold italic regular script, which is inconsistent with the glyph information of the regular script font file obtained by the intelligent interactive flat panel. Then, the intelligent interactive flat panel can transform the original contour vertex data of these characters to obtain the contour vertex data corresponding to the font style specified by the text editing instruction, and store the transformed contour vertex data into the buffer corresponding to black for rendering.

[0061] In one embodiment, if a bold font is to be rendered, the process of transforming the original contour vertex data according to the glyph information may specifically include: adding a border to the character contour of the target character according to the bold width indicated by the glyph information, and obtaining the border vertex data; merging the border vertex data and the original contour vertex data to obtain the transformed contour vertex data.

[0062] In implementation, along the text edge path of each character, a stroke can be made again with a certain width to obtain a bold version of the character. Taking the character "坤" as an example, when the vector font file is a regular running script font and the glyph information specified by the text editing instruction is bold, it can be done at Figure 5 add a border with a preset bold width of w to the character outline of the character "坤" shown, and obtain the data of each key point on the border outline (i.e., border vertex data). After that, merge the border vertex data and the original outline vertex data to obtain the transformed outline vertex data. See Figure 6 . When calling the WebGL drawing instruction, the GPU (Graphics Processing Unit) of the intelligent interactive flat panel can draw the transformed outline vertex data of the character "坤" by drawing triangles one by one to obtain the bold character "坤".

[0063] For example, before performing the transformation processing of the outline vertex data, the following variables can be predefined:

[0064] V = {v1, v2,..., v n}: represents the original vertex set corresponding to the original outline vertex data of each character. Among them, each vertex v i can contain two values, respectively representing the abscissa x i of the vertex v i and, the ordinate y i of the vertex v i , that is, the vertex v i can be denoted as v i = (x i , y i ).

[0065] w: represents the preset default bold width.

[0066] V' = {v'1, v'2,..., v' n}: represents the stroke vertex set.

[0067] Then, by adding a border with a width of w around the original vertex v i , the border vertex v' i corresponding to the original vertex v i can be obtained, and a new vertex set V' = {v'1, v'2,..., v' n} is obtained. After that, merge the original vertex set V and the new vertex set V' to obtain the final vertex set V final = V ∪ V', that is, the transformed outline vertex data.

[0068] In one embodiment, the font style also includes font size information; before obtaining the transformed contour vertex data, the following processing may also be included: calculating a scaling factor based on the target font size indicated by the font size information and the original font size; scaling the coordinates of each vertex in the merged vertex data according to the scaling factor to obtain the transformed contour vertex data.

[0069] In practice, if the font size of the target character changes, the stroke width can be adaptively scaled. If the font size is smaller, the value of the bold width can be reduced, and if the font size is larger, the value of the bold width can be increased, so that the thickness of the character strokes is coordinated with the size of the character.

[0070] For example, before performing the transformation processing on the contour vertex data, the following variables can be further defined:

[0071] font_size: Represents the font size specified in the font size information of the text editing command (also known as the target font size).

[0072] origin_font_size: Indicates the default original font size used by the Web canvas.

[0073] Then, the scaling factor (scale) can be obtained by calculating the ratio of the target font size to the original font size using the following formula:

[0074]

[0075] Then, through the original vertex v i Adding a border of width w around the original vertex v will result in a shape similar to the original vertex v. i Corresponding border vertex v' i This yields a new vertex set V' = {v'1, v'2, ..., v'}. n Then, the original vertex set V is merged with the new vertex set V' to obtain the merged vertex set V'. final =V∪V'. Then, based on the scaling factor scale, the merged vertex set V is... final The position of each vertex in the set is adjusted to obtain the final vertex set. For example, if the scaling factor is 2, then the merged vertex set V will be adjusted accordingly. final The x and y coordinates of each vertex are multiplied by 2 to obtain the final transformed contour vertex data. Thus, when rendering based on this transformed contour vertex data, the actual stroke width is approximately equal to w·scale.

[0076] In one embodiment, adding a border of a specified width to the character outline of the target character according to the line thickness specified by the glyph information and obtaining border vertex data includes: adding a border to the character outline of the target character according to the line thickness specified by the glyph information to obtain the original border vertex data; updating the endpoint style and connection style of the lines between the vertices in the original border vertex data, and obtaining the border vertex data after the line style update is completed.

[0077] In practice, when adding borders to the outline of a target character, adjacent borders may not connect properly or the connection may be unnatural, resulting in an unsatisfactory character shape rendered based on these borders. In such cases, the `join` and `cap` properties can be set at the corners of the stroke path.

[0078] The `join` attribute determines the style when two line segments (or edges) meet. In graphic design, when two line segments are connected, they form an angle at their intersection. The `join` attribute can be set to one of the following types:

[0079] miter: This is the default setting, which means that the angle will extend out to form a sharp angle until the outer edges of the two line segments meet.

[0080] round: This setting will turn the corner into an arc, which is suitable for scenarios where a smooth transition is desired.

[0081] bevel: This setting creates a bevel at the corner, allowing the two line segments to transition smoothly instead of forming a sharp angle.

[0082] The `cap` property determines the shape of the start and end points of the path (i.e., the two ends of the line). The `cap` property can also be set to one of the following types:

[0083] butt: This is the default setting, meaning that the start and end points of the lines are straight, without any additional decoration.

[0084] round: This setting will make the start and end points of the line rounded, which is suitable for those who want the ends of the line to be rounded.

[0085] square: This setting adds a small square at the start and end of the line, making the line appear to be truncated.

[0086] In one embodiment, the corners of the text edge path can be processed using join==miter and cap==butt, so that the stroked lines during rendering are smoothly connected and the character strokes are fluent. By setting different widths for the stroked path and different attribute values for the corners of the stroked path, developers can precisely control the rendering effect of the text, including the stroked width, connection, and endpoint styles, to meet specific design requirements.

[0087] In one embodiment, if an inclined font is to be rendered, the original contour vertex data is transformed according to the glyph information. Specifically, it can include: calculating the offset coordinates of the original coordinates of each vertex in the original contour vertex data according to the specified inclination degree in the glyph information; replacing the original coordinates of each vertex in the original contour vertex data with the offset coordinates to obtain the transformed contour vertex data. Refer to Figure 7 , when the WebGL drawing instruction is called, the GPU (Graphics Processing Unit) of the intelligent interactive flat panel can draw the transformed contour vertex data of the character "Kun" by drawing triangles one by one to obtain the inclined character "Kun".

[0088] In implementation, by performing a shear transformation on the text edge path of each character along the x-axis, an italic effect can be achieved. Among them, an angle parameter for the shear transformation can be set, and the degree of text inclination can be controlled by adjusting this angle parameter. Usually, a relatively small angle, such as 10-15 degrees, is sufficient to make the text呈现出明显的斜体效果。用户可根据创作需求对文字倾斜程度进行设置,本申请对此不作限制。

[0089] In one embodiment, the font style can also include font size information; the process of calculating the offset coordinates of the original coordinates of each vertex in the original contour vertex data according to the specified inclination degree in the glyph information can specifically include: calculating the ratio of the target font size indicated by the font size information to the original font size; calculating the offset coordinates of the original coordinates of each vertex in the original contour vertex data according to the specified inclination degree in the glyph information and the ratio.

[0090] In implementation, if the font size of the target character changes, the distances between the vertices of the target character will change. When the font size becomes smaller, the distances between the vertices of the target character will shrink; when the font size becomes larger, the distances between the vertices of the target character will increase. Therefore, when calculating the offset coordinates of each vertex, the italic offset and the font size scaling offset can be considered simultaneously.

[0091] For example, before performing the transformation process on the contour vertex data, the following variables can be predefined:

[0092] V = {v1, v2, ..., v} n} represents the original vertex set corresponding to the original contour vertex data of each character. Where each vertex v i It can contain two values, representing vertex v. i x-coordinate i and the ordinate y i That is, vertex v i It can be written as v i =(x i ,y i ).

[0093] V' = {v'1, v'2, ..., v'} n} represents the set of vertices for italic offset. Each vertex v' i It can contain two values, representing vertex v' i x' i and the ordinate x' i That is, vertex v' i It can be written as v' i =(x' i ,y' i ).

[0094] xoffse t : Indicates the offset on the x-axis.

[0095] yoffse t : Indicates the offset on the y-axis.

[0096] font_size: Represents the font size specified in the font size information of the text editing command (also known as the target font size).

[0097] origin_font_size: Indicates the default original font size used by the Web canvas.

[0098] italic_skew: Italic offset, indicating the degree of text slant, which can be set using the getItalicSkew() function.

[0099] The coordinates of each vertex v'i after transformation can then be calculated using the following formula:

[0100] x' i =x i ·scale+y i ·italic_skew+x offset

[0101] y′ i =y i·scale+y offset

[0102] In other words, the x-coordinate of each vertex can be scaled according to the font size. If an italic effect is needed, an italic offset can be added to the x-coordinate, and finally, the offset on the x-axis can be added. The y-coordinate of each vertex can be scaled according to the font size, and then the offset on the y-axis can be added.

[0103] It's understandable that the larger the absolute value of the italic offset, the greater the degree of text skewing. If the italic offset `italic_skew` is 0, the font does not need a skewing effect. If the italic offset `italic_skew` is positive, the characters can skew to the right; if the italic offset `italic_skew` is negative, the characters can skew to the left. By adjusting the italic offset and the horizontal and vertical coordinate offsets, developers can precisely control the degree of text skewing transformation to meet specific design requirements.

[0104] S208 calls the drawing instructions from the web graphics library to merge and draw the vertex data in the buffer on the Web canvas.

[0105] In implementation, a web canvas can contain various elements, each employing different rendering logics. Different rendering effects are achieved by switching between different drawing calls. See also... Figure 1 The text "Can Java Language Turn the Tide?" needs to be rendered in black. The text "Case Discussion" needs to be rendered in red. In one embodiment, Figure 1 Each character in the text shown requires a separate rendering command call. Frequent calls and switching of WebGL rendering commands will result in slow text rendering speed.

[0106] To reduce the number of draw calls, the outline vertex data of black characters can be stored in a first buffer, and the outline vertex data of red characters can be stored in a second buffer. Each buffer can use its own shader program to merge and draw all the vertex data temporarily stored in the buffer. In this way, combining multiple character elements into a single draw call reduces the number of WebGL draw command calls and switching, thereby speeding up rendering and further reducing webpage loading time.

[0107] In implementation, after parsing the vertex data of each character from the font file, new vertex data corresponding to the desired glyph can be obtained through coordinate transformation. For example, see [link to example]. Figure 6 Adding a border around the original vertices, merging the vertices on the added border with the original vertices, and then rendering the merged vertex data produces bold text. For another example, see...Figure 7 The original vertices are offset to obtain new vertex data. Then, the new vertex data is rendered to produce a slanted font. For example, see [link to example]. Figure 8 The original vertices are offset to obtain tilted vertex data. A border is added around the tilted vertices, and the vertices on the added border are merged with the tilted vertices. Then, the merged vertex data is rendered to obtain the tilted bold text.

[0108] As can be seen from the above, this application only requires one font file to achieve multiple variations of the font. This significantly reduces the number of font files that need to be loaded and managed, thereby reducing webpage loading time and memory usage, and improving overall rendering performance. By adjusting the stroke style and shear transformation degree, various artistic effects can be created for each character, providing designers with more creative space. No additional font variant files are needed to dynamically adjust the thickness and slant of text lines during rendering. This means that the appearance of the text can be changed in real time according to user preferences or different display needs, achieving dynamic font style adjustment. Furthermore, the vertex data of multiple elements can be merged into a buffer and then rendered through a single draw call. Thus, when multiple glyphs appear alternately in the text on the canvas, there is no need to frequently call and switch drawing instructions, thereby reducing the number of drawing instruction calls and further accelerating the rendering speed.

[0109] Based on the same technical concept, this application also provides a character shape transformation method, which can be applied to client devices such as smart interactive flat panels, as well as servers. See also... Figure 9 The glyph transformation method may include the following processing:

[0110] Step S902: Parse the vector font file and extract the original contour vertex data of each character.

[0111] The original contour vertex data includes the original coordinates of each vertex.

[0112] Step S904: Transform the original contour vertex data and store the transformed contour vertex data in a buffer corresponding to the color information.

[0113] Step S906: Call the drawing instructions of the web page graphics library to merge and draw the vertex data in the buffer to obtain the characters after glyph transformation.

[0114] In practice, the processing of step S902 can be referred to step S204, the processing of step S904 can be referred to step S206, and the processing of step S906 can be referred to step S208. These will not be elaborated here.

[0115] Based on the glyph transformation method provided in this application, multiple font rendering effects can be achieved without providing multiple font variant files, reducing the storage space and transmission bandwidth required for font files. Managing and updating a single font file is simpler and more efficient than managing multiple font variants, making font files easier to maintain and update. For applications that require downloading font files, using a single font allows for fast downloads even in mobile network environments, reducing user download time.

[0116] Based on the same technical concept, this application also provides a text rendering device, see [link to relevant documentation]. Figure 10 It can include:

[0117] The instruction recognition module is used to receive text editing instructions through the Web canvas and recognize the target characters and font styles in the text editing instructions; wherein, the font style includes font information, glyph information, and color information;

[0118] The file parsing module is used to parse the vector font file corresponding to the font information and extract the original contour vertex data of the target character; wherein, the original contour vertex data includes the original coordinates of each vertex;

[0119] The glyph transformation module is used to transform the original contour vertex data according to the glyph information if the glyph information is inconsistent with the glyph information of the vector font file, and store the transformed contour vertex data in a buffer corresponding to the color information;

[0120] The graphics drawing module is used to call drawing instructions from the web graphics library to merge and draw the vertex data in the buffer on the Web canvas.

[0121] In one embodiment, the glyph transformation module is specifically used for:

[0122] Based on the bold width indicated by the glyph information, a border is added to the character outline of the target character, and the border vertex data is obtained;

[0123] The bounding box vertex data and the original contour vertex data are merged to obtain the transformed contour vertex data.

[0124] In one embodiment, the font style also includes font size information; the font transformation module is further used for:

[0125] Calculate the scaling factor based on the target font size indicated by the font size information and the original font size;

[0126] Based on the scaling factor, the coordinates of each vertex in the merged vertex data are scaled to obtain the transformed contour vertex data.

[0127] In one embodiment, the character transformation module is further used for:

[0128] Based on the line thickness specified by the glyph information, a border is added to the character outline of the target character to obtain the original border vertex data;

[0129] Update the endpoint style and connection style of the lines between vertices in the original border vertex data, and obtain the border vertex data after the line style update is completed.

[0130] In one embodiment, the glyph transformation module is specifically used for:

[0131] Based on the tilt degree specified by the glyph information, calculate the offset coordinates of the original coordinates of each vertex in the original contour vertex data;

[0132] The original coordinates of each vertex in the original contour vertex data are replaced with the offset coordinates to obtain the transformed contour vertex data.

[0133] In one embodiment, the font style further includes font size information; the font transformation module is specifically used for:

[0134] Calculate the scaling factor based on the target font size indicated by the font size information and the original font size;

[0135] Based on the tilt degree specified by the glyph information and the scaling factor, calculate the offset coordinates of the original coordinates of each vertex in the original contour vertex data.

[0136] Based on the same technical concept, this application also provides a smart interactive flat panel, which can be found in [reference needed]. Figure 11 The smart interactive flat panel may include a processor and a memory; the memory stores a computer program adapted to be loaded by the processor and executed as described in any of the above embodiments.

[0137] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This text rendering and / or character transformation software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., including storing several instructions to cause an electronic device to execute the methods described in various embodiments or some parts of the embodiments.

[0138] The above description is only a preferred embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A text rendering method, characterized in that, include: The system receives text editing instructions via a web canvas and identifies the target characters and font styles within those instructions; the font styles include font information, glyph information, and color information. The vector font file corresponding to the font information is parsed to extract the original contour vertex data of the target character; wherein, the original contour vertex data includes the original coordinates of each vertex; If the glyph information is inconsistent with the glyph information of the vector font file, the original contour vertex data is transformed according to the glyph information, and the transformed contour vertex data is stored in the buffer corresponding to the color information; The drawing instructions from the web graphics library are invoked to merge and draw the vertex data in the buffer on the Web canvas.

2. The method as described in claim 1, characterized in that, The transformation of the original contour vertex data based on the glyph information specifically includes: Based on the bold width indicated by the glyph information, a border is added to the character outline of the target character, and the border vertex data is obtained; The bounding box vertex data and the original contour vertex data are merged to obtain the transformed contour vertex data.

3. The method as described in claim 2, characterized in that, The font style also includes font size information; before obtaining the transformed contour vertex data, the method further includes: Calculate the scaling factor based on the target font size indicated by the font size information and the original font size; Based on the scaling factor, the coordinates of each vertex in the merged vertex data are scaled to obtain the transformed contour vertex data.

4. The method as described in claim 2, characterized in that, The step of adding a border to the character outline of the target character according to the bold width indicated by the glyph information and obtaining the border vertex data includes: Based on the line thickness specified by the glyph information, a border is added to the character outline of the target character to obtain the original border vertex data; Update the endpoint style and connection style of the lines between vertices in the original border vertex data, and obtain the border vertex data after the line style update is completed.

5. The method as described in claim 1, characterized in that, The transformation of the original contour vertex data based on the glyph information includes: Based on the tilt degree specified by the glyph information, calculate the offset coordinates of the original coordinates of each vertex in the original contour vertex data; The original coordinates of each vertex in the original contour vertex data are replaced with the offset coordinates to obtain the transformed contour vertex data.

6. The method as described in claim 5, characterized in that, The font style also includes font size information; the step of calculating the offset coordinates of the original coordinates of each vertex in the original contour vertex data according to the slant degree specified by the font information includes: Calculate the scaling factor based on the target font size indicated by the font size information and the original font size; Based on the tilt degree specified by the glyph information and the scaling factor, calculate the offset coordinates of the original coordinates of each vertex in the original contour vertex data.

7. A character shape transformation method, characterized in that, include: The vector font file is parsed to extract the original contour vertex data of each character; wherein, the original contour vertex data includes the original coordinates of each vertex; The original contour vertex data is transformed, and the transformed contour vertex data is stored in a buffer corresponding to the color information; The drawing instructions from the web page graphics library are invoked to merge and draw the vertex data in the buffer, resulting in the individual characters after glyph transformation.

8. A text rendering device, characterized in that, include: The instruction recognition module is used to receive text editing instructions through the Web canvas and recognize the target characters and font styles in the text editing instructions; wherein, the font style includes font information, glyph information, and color information; The file parsing module is used to parse the vector font file corresponding to the font information and extract the original contour vertex data of the target character; wherein, the original contour vertex data includes the original coordinates of each vertex; The glyph transformation module is used to transform the original contour vertex data according to the glyph information if the glyph information is inconsistent with the glyph information of the vector font file, and store the transformed contour vertex data in a buffer corresponding to the color information; The graphics drawing module is used to call drawing instructions from the web graphics library to merge and draw the vertex data in the buffer on the Web canvas.

9. A smart interactive flat panel, characterized in that, include: Processor and memory; The memory stores a computer program adapted to be loaded by the processor and executed as described in any one of claims 1-6.

10. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the text rendering method as described in any one of claims 1-6 or the glyph transformation method as described in claim 7.

Images