A rich text implementation method and terminal based on Laya engine

Abstract

The present invention discloses a rich text implementation method and terminal based on the Laya engine; the present invention stores rich text information input by a user in a preset custom control, the custom control inherits from the laya.box control, and the properties of the custom control include a text alignment mode and a text array; the text array in the custom control is traversed, and according to the information of each text object in the text array, text configuration information including information of the text object corresponding to each text and the configuration coordinates of each text is generated; according to the text alignment mode in the custom control, the initial correction coordinates of each text are calculated, and the texts are printed in sequence according to the text configuration information and the initial correction coordinates; the present invention inherits the laya.box control through the preset custom control, and adds properties such as the text alignment mode and the text array, thereby achieving a rich text effect, and uses the laya control without using the htmlDivElement control, and does not differ from other native laya controls in use, and is more convenient to use.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a rich text implementation method and terminal based on a Laya engine. Background Art

[0002] The Laya engine is an HTML5 engine developed in multiple languages (ActionScript3, TypeScript, JavaScript). It can simultaneously support 2D / 3D / VR / AR, UI libraries, slow-motion animation, sequence frame animation, skeletal animation, vertex animation, particle systems, networks, physical systems, etc., and can be applied to small games, large games, advertising, education, marketing, APP and other industries.

[0003] However, the Laya engine does not provide an officially developed rich text control. Therefore, to achieve rich text effects in the Laya engine, you can only use the native HTMLDivElement control. However, there are some differences between the native control and other controls provided by the Laya engine, making it inconvenient to use. Summary of the Invention

[0004] The technical problem to be solved by the present invention is to provide a rich text implementation method and terminal based on the Laya engine, so that the implementation of rich text is more convenient.

[0005] In order to solve the above technical problems, the technical solution adopted by the present invention is:

[0006] A rich text implementation method based on the Laya engine, comprising:

[0007] S1. Store the rich text information input by the user into a preset custom control, which inherits from the laya.box control and has properties including text alignment and text array;

[0008] S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character according to information of each text object in the text array;

[0009] S3. Calculate the initial correction coordinates of each character according to the character alignment in the custom control, and print the characters in sequence according to the character configuration information and the initial correction coordinates.

[0010] In order to solve the above technical problems, another technical solution adopted by the present invention is:

[0011] A terminal for implementing rich text based on a Laya engine includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the following steps are implemented:

[0012] S1. Store the rich text information input by the user into a preset custom control, which inherits from the laya.box control and has properties including text alignment and text array;

[0013] S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character according to information of each text object in the text array;

[0014] S3. Calculate the initial correction coordinates of each character according to the character alignment in the custom control, and print the characters in sequence according to the character configuration information and the initial correction coordinates.

[0015] The beneficial effects of the present invention are: the present invention inherits the laya.box control through a preset custom control, and adds properties such as text alignment and text array, thereby achieving a rich text effect, and uses the laya control, does not need to use the html native htmlDivElement control, and will not be different from other native laya controls in usage, and is more convenient to use. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 This is a flowchart of a method for implementing rich text based on the Laya engine according to an embodiment of the present invention;

[0017] Figure 2 This is a structural diagram of a rich text implementation terminal based on the Laya engine according to an embodiment of the present invention;

[0018] Figure 3 A schematic diagram of text configuration information content of a rich text implementation method based on the Laya engine according to an embodiment of the present invention;

[0019] Description of labels:

[0020] 1. A rich text implementation terminal based on the Laya engine; 2. A processor; 3. A memory. DETAILED DESCRIPTION

[0021] To illustrate the technical content, achieved objectives and effects of the present invention in detail, the following description is given in conjunction with the embodiments and accompanying drawings.

[0022] Please refer to Figure 1 as well as Figure 3, a rich text implementation method based on the Laya engine, comprising:

[0023] S1. Store the rich text information input by the user into a preset custom control, which inherits from the laya.box control and has properties including text alignment and text array;

[0024] S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character according to information of each text object in the text array;

[0025] S3. Calculate the initial correction coordinates of each character according to the character alignment in the custom control, and print the characters in sequence according to the character configuration information and the initial correction coordinates.

[0026] From the above description, it can be seen that the beneficial effects of the present invention are: the present invention inherits the laya.box control through a preset custom control, and adds properties such as text alignment and text array, so as to achieve a rich text effect, and uses the laya control, without the need to use the html native htmlDivElement control, and there is no difference in usage from other native laya controls, and it is more convenient to use.

[0027] Furthermore, the properties of the custom control include coordinates, width, character spacing and line spacing, and the information of the text object includes font size, stroke width and whether line wrap is required;

[0028] The step S2 is specifically as follows:

[0029] Traverse the text array in the custom control and arrange the text objects according to the order of the text objects in the text array. The first text is configured at (0, 0), and the subsequent texts are configured at the following coordinates:

[0030] x2=x1+x1.size+x1.stroke×2+wordSpace;

[0031] Determine whether the x2+x2.size of a text is greater than the width of the custom control or whether the information of the text object corresponding to the text indicates that a line break is required. If so, a line break is performed. The configuration vertical coordinate of each line is:

[0032] y2=y1+y1.maxSize+leading;

[0033] Thus, the character configuration information including the configuration coordinates of each character is obtained;

[0034] Wherein, x1 is the configured horizontal coordinate of the previous text, x1.size is the font size of the previous text, x1.stroke is the stroke width of the previous text, wordSpace is the word spacing, y1 is the configured vertical coordinate of the previous line of text, y1.maxSize is the maximum font size of all text in the previous line, leading is the line spacing, and the configured coordinates are the relative coordinates obtained by establishing a rectangular coordinate system based on the control coordinates of the custom control on the page.

[0035] From the above description, we can know that the text is arranged by the character spacing, line spacing and width in the properties of the custom control, as well as the font size, stroke width and whether line wrapping is required for the text object, to obtain the relative coordinates of each character relative to the coordinates of the custom control.

[0036] Furthermore, the information of the text object also includes font, font color and stroke color. The step S3 is specifically as follows:

[0037] According to the horizontal and vertical alignment of the text in the custom control, calculate the corresponding corrected horizontal and vertical coordinates, so that the final coordinates of each text are:

[0038] x=x0+xr;

[0039] y=y0+yr;

[0040] Wherein x0 represents the configured horizontal coordinate in the configured coordinates of the text, y0 represents the configured vertical coordinate in the configured coordinates of the text, xr is the corrected horizontal coordinate, and yr is the corrected vertical coordinate;

[0041] The text is printed according to the final coordinates of the text and the corresponding font, font size, font color, stroke color and stroke width attributes in the text configuration information.

[0042] From the above description, it can be seen that according to the preset horizontal and vertical alignment modes of the control, the corrected horizontal and vertical coordinates are calculated, and the final coordinates of the text relative to the custom control coordinates are calculated in combination with the configured coordinates, so that the text is printed.

[0043] Furthermore, the horizontal alignment includes left alignment, left-center alignment, and right alignment;

[0044] If the horizontal alignment is left alignment, the correction horizontal coordinate is 0;

[0045] If the horizontal alignment is left-right centering, then the total width of the text in each line is obtained according to the configured horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is:

[0046] xr = (line.width - Width) / 2;

[0047] If the horizontal alignment is right alignment, then the total width of the text in each line is obtained according to the horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is:

[0048] xr = line.width - Width;

[0049] Among them, xr represents the corrected horizontal coordinate, line.width represents the total width of the text in the current line, and Width represents the width attribute of the custom control.

[0050] As can be seen from the above description, the calculation of the corrected horizontal coordinates for different horizontal alignment modes is different, and the corresponding corrected horizontal coordinates need to be calculated according to different horizontal alignment modes.

[0051] Furthermore, the vertical alignment includes top alignment, top and bottom centering, and bottom alignment;

[0052] If the vertical alignment is top alignment, the correction vertical coordinate is 0;

[0053] If the vertical alignment is centered, the total height of the text is obtained based on the maximum font size in each line and the line spacing. The corrected vertical coordinate is:

[0054] yr=0.5×(Height-text.height);

[0055] If the vertical alignment is bottom alignment, the total height of the text is obtained according to the maximum font size in each line and the line spacing. The corrected vertical coordinate is:

[0056] yr = Height - text.height;

[0057] Wherein, yr represents the corrected vertical coordinate, Height represents the height attribute of the custom control, and text.height represents the total height of the text.

[0058] It can be seen from the above description that the calculation of the corrected vertical coordinate corresponding to different vertical alignment methods is different, and the corresponding corrected vertical coordinate needs to be calculated according to different vertical alignment methods.

[0059] Please refer to Figure 2 A terminal for implementing rich text based on the Laya engine includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the following steps are implemented:

[0060] S1. Store the rich text information input by the user into a preset custom control, which inherits from the laya.box control and has properties including text alignment and text array;

[0061] S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character according to information of each text object in the text array;

[0062] S3. Calculate the initial correction coordinates of each character according to the character alignment in the custom control, and print the characters in sequence according to the character configuration information and the initial correction coordinates.

[0063] From the above description, it can be seen that the beneficial effects of the present invention are: the present invention inherits the laya.box control through a preset custom control, and adds properties such as text alignment and text array, so as to achieve a rich text effect, and uses the laya control, without the need to use the html native htmlDivElement control, and there is no difference in usage from other native laya controls, and it is more convenient to use.

[0064] Furthermore, the properties of the custom control include coordinates, width, character spacing and line spacing, and the information of the text object includes font size, stroke width and whether line wrap is required;

[0065] The step S2 is specifically as follows:

[0066] Traverse the text array in the custom control and arrange the text objects according to the order of the text objects in the text array. The first text is configured at (0, 0), and the subsequent texts are configured at the following coordinates:

[0067] x2=x1+x1.size+x1.stroke×2+wordSpace;

[0068] Determine whether the x2+x2.size of a text is greater than the width of the custom control or whether the information of the text object corresponding to the text indicates that a line break is required. If so, a line break is performed. The configuration vertical coordinate of each line is:

[0069] y2=y1+y1.maxSize+leading;

[0070] Thus, the character configuration information including the configuration coordinates of each character is obtained;

[0071] Wherein, x1 is the configured horizontal coordinate of the previous text, x1.size is the font size of the previous text, x1.stroke is the stroke width of the previous text, wordSpace is the word spacing, y1 is the configured vertical coordinate of the previous line of text, y1.maxSize is the maximum font size of all text in the previous line, leading is the line spacing, and the configured coordinates are the relative coordinates obtained by establishing a rectangular coordinate system based on the control coordinates of the custom control on the page.

[0072] From the above description, we can know that the text is arranged by the character spacing, line spacing and width in the properties of the custom control, as well as the font size, stroke width and whether line wrapping is required for the text object, to obtain the relative coordinates of each character relative to the coordinates of the custom control.

[0073] Furthermore, the information of the text object also includes font, font color and stroke color. The step S3 is specifically as follows:

[0074] According to the horizontal and vertical alignment of the text in the custom control, calculate the corresponding corrected horizontal and vertical coordinates, so that the final coordinates of each text are:

[0075] x=x0+xr;

[0076] y=y0+yr;

[0077] Wherein x0 represents the configured horizontal coordinate in the configured coordinates of the text, y0 represents the configured vertical coordinate in the configured coordinates of the text, xr is the corrected horizontal coordinate, and yr is the corrected vertical coordinate;

[0078] The text is printed according to the final coordinates of the text and the corresponding font, font size, font color, stroke color and stroke width attributes in the text configuration information.

[0079] From the above description, it can be seen that according to the preset horizontal and vertical alignment modes of the control, the corrected horizontal and vertical coordinates are calculated, and the final coordinates of the text relative to the custom control coordinates are calculated in combination with the configured coordinates, so that the text is printed.

[0080] Furthermore, the horizontal alignment includes left alignment, left-center alignment, and right alignment;

[0081] If the horizontal alignment is left alignment, the correction horizontal coordinate is 0;

[0082] If the horizontal alignment is left-right centering, then the total width of the text in each line is obtained according to the configured horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is:

[0083] xr = (line.width - Width) / 2;

[0084] If the horizontal alignment is right alignment, then the total width of the text in each line is obtained according to the horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is:

[0085] xr = line.width - Width;

[0086] Among them, xr represents the corrected horizontal coordinate, line.width represents the total width of the text in the current line, and Width represents the width attribute of the custom control.

[0087] As can be seen from the above description, the calculation of the corrected horizontal coordinates for different horizontal alignment modes is different, and the corresponding corrected horizontal coordinates need to be calculated according to different horizontal alignment modes.

[0088] Furthermore, the vertical alignment includes top alignment, top and bottom centering, and bottom alignment;

[0089] If the vertical alignment is top alignment, the correction vertical coordinate is 0;

[0090] If the vertical alignment is centered, the total height of the text is obtained based on the maximum font size in each line and the line spacing. The corrected vertical coordinate is:

[0091] yr=0.5×(Height-text.height);

[0092] If the vertical alignment is bottom alignment, the total height of the text is obtained according to the maximum font size in each line and the line spacing. The corrected vertical coordinate is:

[0093] yr = Height - text.height;

[0094] Wherein, yr represents the corrected vertical coordinate, Height represents the height attribute of the custom control, and text.height represents the total height of the text.

[0095] It can be seen from the above description that the calculation of the corrected vertical coordinate corresponding to different vertical alignment methods is different, and the corresponding corrected vertical coordinate needs to be calculated according to different vertical alignment methods.

[0096] Please refer to Figure 1 and Figure 3 , embodiment 1 of the present invention is:

[0097] A rich text implementation method based on the Laya engine, comprising:

[0098] S1. The rich text information input by the user is stored in a preset custom control, where the custom control inherits from the laya.box control and has properties including text alignment and text array.

[0099] Among them, the laya.box control is one of the basic container controls officially provided by the Laya engine, which includes basic properties such as width, height, coordinates, scale, and anchor point.

[0100] In this embodiment, the custom control inherits the laya.box control and adds the following properties: leading, wordSpace, default font, default font size, horizontal alignment, vertical alignment, and the text to be set. The effect of rich text is customized by setting the content of Text. Text is an array, and the format of each text object in the text array is as follows:

[0101] {text: "Displayed content", style: {size: 40, fontColor: "#ffffff", font: "font", stroke: 2, strokeColor: "#ffffff", isLineWrap: false}}

[0102] Each text object includes text content and the corresponding style of the text, including properties such as font size, font color, font, stroke width, stroke color, and whether to need line break.

[0103] S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character according to information of each text object in the text array;

[0104] The step S2 is specifically as follows:

[0105] Traverse the text array in the custom control and arrange the text objects according to the order of the text objects in the text array. The first text is configured at (0, 0), and the subsequent texts are configured at the following coordinates:

[0106] x2=x1+x1.size+x1.stroke×2+wordSpace;

[0107] Determine whether the x2+x2.size of a text is greater than the width of the custom control or whether the information of the text object corresponding to the text indicates that a line break is required. If so, a line break is performed. The configuration vertical coordinate of each line is:

[0108] y2 = y1 + y1.maxSize + leading;

[0109] Thus, the text configuration information including the configuration coordinates of each character is obtained;

[0110] Where x1 is the configuration abscissa of the previous character, x1.size is the font size of the previous character, x1.stroke is the stroke width of the previous character, wordSpace is the character spacing, y1 is the configuration ordinate of the previous line of text, y1.maxSize is the maximum font size among all the characters in the previous line, leading is the line spacing, and the configuration coordinates are relative coordinates obtained by establishing a rectangular coordinate system with the control coordinates of the custom control in the page.

[0111] First, synchronize the concept. In a web page, a rectangular coordinate system of the web page is established with the point in the upper left corner as (0, 0), the x-axis is horizontal to the right, and the y-axis is horizontal downward. In this application, the coordinates of the custom control correspond to the rectangular coordinate system of the web page, and all the coordinates included in the custom control are based on the relative rectangular coordinate system established with the coordinates of the custom control in the rectangular coordinate system of the web page, and are all relative coordinates relative to the coordinates of the custom control.

[0112] In this embodiment, the width and height set for the rich text are 100 * 100, the line spacing is 20, the character spacing is 10, and the text array Text in the custom space is as follows:

[0113]

[0114] Then, calculated according to the above method, the obtained text configuration information is as Figure 3 shown. Taking the character "富" as an example, its content in the text configuration information includes the configuration abscissa x: 0, the configuration ordinate y: 0, the font size size: 40, the font color fontColor: "#ffffff", the font font: "字体", the stroke width stroke: 0, the stroke color strokeColor: "#ffffff", and whether line break is required isLineWrap: false, etc.

[0115] S3, Calculate the initial correction coordinates of each character according to the text alignment method in the custom control, and print the characters in sequence according to the text configuration information and the initial correction coordinates;

[0116] The specific steps of step S3 are as follows:

[0117] According to the horizontal and vertical alignment of the text in the custom control, calculate the corresponding corrected horizontal and vertical coordinates, so that the final coordinates of each text are:

[0118] x=x0+xr;

[0119] y=y0+yr;

[0120] Wherein x0 represents the configured horizontal coordinate in the configured coordinates of the text, y0 represents the configured vertical coordinate in the configured coordinates of the text, xr is the corrected horizontal coordinate, and yr is the corrected vertical coordinate;

[0121] and printing the text according to the final coordinates of the text and the corresponding font, font size, font color, stroke color, and stroke width attributes in the text configuration information;

[0122] The horizontal alignment includes left alignment, left-center alignment, and right alignment;

[0123] If the horizontal alignment is left alignment, the correction horizontal coordinate is 0;

[0124] If the horizontal alignment is left-right centering, then the total width of the text in each line is obtained according to the configured horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is:

[0125] xr = (line.width - Width) / 2;

[0126] If the horizontal alignment is right alignment, then the total width of the text in each line is obtained according to the horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is:

[0127] xr = line.width - Width;

[0128] Wherein, xr represents the corrected horizontal coordinate, line.width represents the total width of the text in the current line, and Width represents the width attribute of the custom control;

[0129] The vertical alignment includes top alignment, top and bottom centering, and bottom alignment;

[0130] If the vertical alignment is top alignment, the correction vertical coordinate is 0;

[0131] If the vertical alignment is centered, the total height of the text is obtained based on the maximum font size in each line and the line spacing. The corrected vertical coordinate is:

[0132] yr=0.5×(Height-text.height);

[0133] If the vertical alignment is bottom alignment, the total height of the text is obtained according to the maximum font size in each line and the line spacing. The corrected vertical coordinate is:

[0134] yr = Height - text.height;

[0135] Wherein, yr represents the corrected vertical coordinate, Height represents the height attribute of the custom control, and text.height represents the total height of the text.

[0136] In this embodiment, after the first traversal obtains the text configuration information, a second traversal is required. Before the second traversal, the corrected coordinates of the characters must be calculated based on the set text alignment, such as left-right alignment, top-bottom centering, etc. After calculating the corrected coordinates for each character, the second traversal can begin. Each character in the text configuration information is traversed, and the final coordinates of the character after adding the corrected coordinates are calculated. The characters are then printed based on other attributes corresponding to the characters in the text configuration information.

[0137] Please refer to Figure 2 , the second embodiment of the present invention is:

[0138] A rich text implementation terminal 1 based on the Laya engine includes a processor 2, a memory 3, and a computer program stored in the memory 3 and executable on the processor 2. When the processor 2 executes the computer program, the steps in the above embodiment 1 are implemented.

[0139] To sum up, the present invention provides a rich text implementation method and terminal based on the Laya engine, which inherits the laya.box control through a preset custom control, and adds properties such as text alignment and text array, so as to achieve a rich text effect. It uses the laya control and does not require the use of the html native htmlDivElement control. There is no difference in usage from other native laya controls, and it is more convenient to use.

[0140] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent transformations made using the contents of the present invention's description and drawings, or directly or indirectly applied in related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A rich text implementation method based on Laya engine, characterized in that: include: S1. Store the rich text information input by the user into a preset custom control, which inherits from the laya.box control and has properties including text alignment and text array; S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character based on information of each text object in the text array; the text object information also includes font, font color, and stroke color; S3. Calculate the initial correction coordinates of each character according to the character alignment in the custom control, and print the characters in sequence according to the character configuration information and the initial correction coordinates; The step S3 is specifically as follows: According to the horizontal alignment and vertical alignment of the text in the custom control, the horizontal alignment includes left alignment, left-center alignment, and right alignment; If the horizontal alignment is left alignment, the horizontal coordinate is corrected to 0; If the horizontal alignment is left-right centering, then the total width of the text in each line is obtained according to the configured horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is: xr=(line.width-Width) / 2; If the horizontal alignment is right alignment, then the total width of the text in each line is obtained according to the horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is: xr=line.width-Width; Wherein, xr represents the corrected horizontal coordinate, line.width represents the total width of the text in the current line, and Width represents the width attribute of the custom control; The vertical alignment includes top alignment, top and bottom centering, and bottom alignment; If the vertical alignment is top alignment, the correction vertical coordinate is 0; If the vertical alignment is centered, the total height of the text is obtained based on the maximum font size and line spacing in each line. The corrected vertical coordinate is: yr=0.5×(Height-text.height); If the vertical alignment is bottom alignment, the total height of the text is obtained according to the maximum font size in each line and the line spacing. The corrected vertical coordinate is: yr=Height-text.height; Wherein, yr represents the corrected ordinate, Height represents the height attribute of the custom control, and text.height represents the total height of the text; Calculate the corresponding corrected horizontal and vertical coordinates to obtain the final coordinates of each character: x=x0+xr; y=y0+yr; Wherein x0 represents the configured horizontal coordinate of the character in the configured coordinates, y0 represents the configured vertical coordinate of the character in the configured coordinates, xr is the corrected horizontal coordinate, and yr is the corrected vertical coordinate; The text is printed according to the final coordinates of the text and the corresponding font, font size, font color, stroke color and stroke width attributes in the text configuration information.

2. A rich text implementation method based on Laya engine according to claim 1, characterized in that: The properties of the custom control include coordinates, width, character spacing and line spacing, and the information of the text object includes font size, stroke width and whether line wrap is required; The step S2 is specifically as follows: Traverse the text array in the custom control and arrange the text objects according to the order of the text objects in the text array. The first text is configured at (0, 0), and the subsequent text is configured at the horizontal coordinates of: x2=x1+x1.size+x1.stroke×2+wordSpace; Determine whether the x2+x2.size of a text is greater than the width of the custom control or whether the information of the text object corresponding to the text indicates that a line break is required. If so, a line break is performed. The configuration vertical coordinate of each line is: y2=y1+y1.maxSize+leading; Thus, the character configuration information including the configuration coordinates of each character is obtained; Wherein, x1 is the configured horizontal coordinate of the previous text, x1.size is the font size of the previous text, x1.stroke is the stroke width of the previous text, wordSpace is the word spacing, y1 is the configured vertical coordinate of the previous line of text, y1.maxSize is the maximum font size of all text in the previous line, leading is the line spacing, and the configured coordinates are the relative coordinates obtained by establishing a rectangular coordinate system based on the control coordinates of the custom control on the page.

3. A rich text implementation terminal based on the Laya engine, comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the following steps are implemented: S1. Store the rich text information input by the user into a preset custom control, which inherits from the laya.box control and has properties including text alignment and text array; S2. Traverse the text array in the custom control and generate text configuration information including information of the text object corresponding to each character and configuration coordinates of each character based on information of each text object in the text array; the text object information also includes font, font color, and stroke color; S3. Calculate the initial correction coordinates of each character according to the character alignment in the custom control, and print the characters in sequence according to the character configuration information and the initial correction coordinates; The step S3 is specifically as follows: According to the horizontal alignment and vertical alignment of the text in the custom control, the horizontal alignment includes left alignment, left-center alignment, and right alignment; If the horizontal alignment is left alignment, the horizontal coordinate is corrected to 0; If the horizontal alignment is left-right centering, then the total width of the text in each line is obtained according to the configured horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is: xr=(line.width-Width) / 2; If the horizontal alignment is right alignment, then the total width of the text in each line is obtained according to the horizontal coordinate and font size of the last character in each line in the text configuration information. The corrected horizontal coordinate is: xr=line.width-Width; Wherein, xr represents the corrected horizontal coordinate, line.width represents the total width of the text in the current line, and Width represents the width attribute of the custom control; The vertical alignment includes top alignment, top and bottom centering, and bottom alignment; If the vertical alignment is top alignment, the correction vertical coordinate is 0; If the vertical alignment is centered, the total height of the text is obtained based on the maximum font size and line spacing in each line. The corrected vertical coordinate is: yr=0.5×(Height-text.height); If the vertical alignment is bottom alignment, the total height of the text is obtained according to the maximum font size in each line and the line spacing. The corrected vertical coordinate is: yr=Height-text.height; Wherein, yr represents the corrected ordinate, Height represents the height attribute of the custom control, and text.height represents the total height of the text; Calculate the corresponding corrected horizontal and vertical coordinates to obtain the final coordinates of each character: x=x0+xr; y=y0+yr; Wherein x0 represents the configured horizontal coordinate of the character in the configured coordinates, y0 represents the configured vertical coordinate of the character in the configured coordinates, xr is the corrected horizontal coordinate, and yr is the corrected vertical coordinate; The text is printed according to the final coordinates of the text and the corresponding font, font size, font color, stroke color and stroke width attributes in the text configuration information.

4. A rich text implementation terminal based on the Laya engine according to claim 3, characterized in that: The properties of the custom control include coordinates, width, character spacing and line spacing, and the information of the text object includes font size, stroke width and whether line wrap is required; The step S2 is specifically as follows: Traverse the text array in the custom control and arrange the text objects according to the order of the text objects in the text array. The first text is configured at (0, 0), and the subsequent text is configured at the horizontal coordinates of: x2=x1+x1.size+x1.stroke×2+wordSpace; Determine whether the x2+x2.size of a text is greater than the width of the custom control or whether the information of the text object corresponding to the text indicates that a line break is required. If so, a line break is performed. The configuration vertical coordinate of each line is: y2=y1+y1.maxSize+leading; Thus, the character configuration information including the configuration coordinates of each character is obtained; Wherein, x1 is the configured horizontal coordinate of the previous text, x1.size is the font size of the previous text, x1.stroke is the stroke width of the previous text, wordSpace is the word spacing, y1 is the configured vertical coordinate of the previous line of text, y1.maxSize is the maximum font size of all text in the previous line, leading is the line spacing, and the configured coordinates are the relative coordinates obtained by establishing a rectangular coordinate system based on the control coordinates of the custom control on the page.

Images