Text particle generation method, device and equipment

Abstract

The application relates to a character particle generation method, device and equipment, wherein the method comprises the following steps: determining the font size of a to-be-displayed character based on first size information of a display area, rendering the to-be-displayed character on an off-screen canvas according to the font size of the to-be-displayed character and setting parameters; the off-screen canvas is created based on the font size of the to-be-displayed character and the first size information; obtaining pixel data of each pixel point on the off-screen canvas, and interval sampling each pixel point according to a sampling step length to obtain a plurality of sampling points; the pixel data comprises a transparency value; the sampling step length is determined according to the font size of the to-be-displayed character; determining effective sampling points from the sampling points based on the comparison result of the transparency value of each sampling point and a preset transparency threshold; converting the coordinates of the effective sampling points in the off-screen canvas into target coordinates in a main canvas, and generating a character particle set according to the target coordinates of each effective sampling point; thereby greatly improving the generation efficiency of the character particles.

Description

Technical Field

[0001] This application relates to the field of text rendering technology, and in particular to a method, apparatus and device for generating text particles. Background Technology

[0002] With the rapid development of internet content creation, short video effects, data visualization, and human-computer interaction interfaces, dynamically presenting text content using particle systems has become a widely used visual effects technique. Typical applications include dynamic particle displays of music lyrics and entrance animations for brand titles.

[0003] In related technologies, the text to be displayed is typically rendered onto the main canvas to form a bitmap. Then, the entire pixel area containing the bitmap is scanned point by point to read the position and color information of each pixel. Based on the position and color information of each pixel, the text outline is formed on the main canvas and displayed in the display area. However, this method consumes a large amount of computational resources on reading and judging blank background pixels. The reading results of these blank background pixels do not generate effective particle data, resulting in low efficiency in generating text particles for the text to be displayed. Summary of the Invention

[0004] Therefore, it is necessary to provide a method, apparatus, and device for generating text particles to address the aforementioned technical problems.

[0005] In a first aspect, this application provides a method for generating text particles, the method comprising:

[0006] The font size of the text to be displayed is determined based on the first size information of the display area. The text to be displayed is rendered on the off-screen canvas according to the font size and setting parameters. The off-screen canvas is created based on the font size and first size information of the text to be displayed.

[0007] The pixel data of each pixel on the off-screen canvas is obtained, and each pixel is sampled at intervals according to the sampling step size to obtain multiple sampling points; the pixel data includes the transparency value; the sampling step size is determined according to the font size of the text to be displayed;

[0008] Based on the comparison between the transparency value of each sampling point and the preset transparency threshold, the valid sampling points are determined from each sampling point;

[0009] The coordinates of the valid sampling points in the off-screen canvas are converted into target coordinates in the main canvas, and a set of text particles is generated based on the target coordinates of each valid sampling point.

[0010] In one embodiment, determining the font size of the text to be displayed based on first size information of the display area includes:

[0011] Based on the first size information, the second size information of the safe drawing area is determined; the safe drawing area is determined based on the display area.

[0012] Based on the second size information, determine the font size of the text to be displayed.

[0013] In one embodiment, the method further includes:

[0014] In the preset temporary off-screen canvas, the text to be displayed is rendered according to the font size and settings parameters to obtain the rendered text;

[0015] Get the width value of the rendered text, and determine the size information of the off-screen canvas based on the width value of the rendered text, the font size of the text to be displayed, and the second size information;

[0016] Create an off-screen canvas based on its dimensions.

[0017] In one embodiment, the size information of the off-screen canvas includes the width and height values ​​of the off-screen canvas; the size information of the off-screen canvas is determined based on the width value of the rendered text, the font size of the text to be displayed, and the second size information, including:

[0018] Based on the product of the width value in the second size information and the preset reduction factor, the first width value of the off-screen canvas is determined, and based on the font size of the text to be displayed and the width value of the rendered text, the second width value of the off-screen canvas is determined.

[0019] The minimum value between the first width value and the second width value is determined as the width value of the off-screen canvas;

[0020] The height of the off-screen canvas is determined based on the product of the font size of the text to be displayed and the preset magnification factor.

[0021] In one embodiment, determining a second width value for the off-screen canvas based on the font size of the text to be displayed and the width value of the rendered text includes:

[0022] The width reference value is determined based on the product of the font size of the text to be displayed and a preset coefficient;

[0023] The second width value of the off-screen canvas is determined based on the width reference value and the width value of the rendered text.

[0024] In one embodiment, rendering the text to be displayed on an off-screen canvas according to the font size and setting parameters includes:

[0025] Based on the size information of the off-screen canvas, determine the drawing anchor point of the text to be displayed in the off-screen canvas;

[0026] Using the anchor point as a reference, the text to be displayed is rendered on the off-screen canvas according to the font size of the text to be displayed.

[0027] In one embodiment, valid sampling points are determined from each sampling point based on a comparison between the transparency value of each sampling point and a preset transparency threshold, including:

[0028] For each sampling point, the transparency value of the sampling point is compared with a preset transparency threshold to obtain the comparison result;

[0029] If the comparison result shows that the transparency value of the sampling point is not less than the preset transparency threshold, the sampling point is determined to be a valid sampling point.

[0030] In one embodiment, the step of determining the sampling step size includes:

[0031] The sampling step size reference value is determined based on the product of the font size of the text to be displayed and the preset particle density compensation coefficient.

[0032] Obtain the preset lower limit and upper limit of the step size. If the sampling step size reference value is less than the lower limit of the step size, determine the sampling step size as the lower limit of the step size.

[0033] If the sampling step size reference value is greater than the upper limit value, the sampling step size is determined to be the upper limit value.

[0034] If the sampling step size reference value is not less than the lower limit of the step size and not greater than the upper limit of the step size, the sampling step size is determined as the sampling step size reference value.

[0035] Secondly, this application also provides a text particle generating device, the device comprising:

[0036] The text rendering module is used to determine the font size of the text to be displayed based on the first size information of the display area, and to render the text to be displayed on the off-screen canvas according to the font size of the text to be displayed and the setting parameters; the off-screen canvas is created based on the font size of the text to be displayed and the first size information.

[0037] The canvas sparse sampling module is used to acquire pixel data of each pixel on the off-screen canvas and sample each pixel at intervals according to the sampling step size to obtain multiple sampling points; the pixel data includes transparency values; the sampling step size is determined according to the font size of the text to be displayed;

[0038] The effective sampling point determination module is used to determine the effective sampling points from each sampling point based on the comparison results between the transparency value of each sampling point and the preset transparency threshold.

[0039] The text particle generation module is used to convert the coordinates of valid sampling points in the off-screen canvas into target coordinates in the main canvas, and generate a set of text particles based on the target coordinates of each valid sampling point.

[0040] Thirdly, this application also provides a computer device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to perform the following steps:

[0041] The font size of the text to be displayed is determined based on the first size information of the display area. The text to be displayed is rendered on the off-screen canvas according to the font size and setting parameters. The off-screen canvas is created based on the font size and first size information of the text to be displayed.

[0042] The pixel data of each pixel on the off-screen canvas is obtained, and each pixel is sampled at intervals according to the sampling step size to obtain multiple sampling points; the pixel data includes the transparency value; the sampling step size is determined according to the font size of the text to be displayed;

[0043] Based on the comparison between the transparency value of each sampling point and the preset transparency threshold, the valid sampling points are determined from each sampling point;

[0044] The coordinates of the valid sampling points in the off-screen canvas are converted into target coordinates in the main canvas, and a set of text particles is generated based on the target coordinates of each valid sampling point.

[0045] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following steps:

[0046] The font size of the text to be displayed is determined based on the first size information of the display area. The text to be displayed is rendered on the off-screen canvas according to the font size and setting parameters. The off-screen canvas is created based on the font size and first size information of the text to be displayed.

[0047] The pixel data of each pixel on the off-screen canvas is obtained, and each pixel is sampled at intervals according to the sampling step size to obtain multiple sampling points; the pixel data includes the transparency value; the sampling step size is determined according to the font size of the text to be displayed;

[0048] Based on the comparison between the transparency value of each sampling point and the preset transparency threshold, the valid sampling points are determined from each sampling point;

[0049] The coordinates of the valid sampling points in the off-screen canvas are converted into target coordinates in the main canvas, and a set of text particles is generated based on the target coordinates of each valid sampling point.

[0050] Fifthly, this application also provides a computer program product comprising a computer program that, when executed by a processor, performs the following steps:

[0051] The font size of the text to be displayed is determined based on the first size information of the display area. The text to be displayed is rendered on the off-screen canvas according to the font size and setting parameters. The off-screen canvas is created based on the font size and first size information of the text to be displayed.

[0052] The pixel data of each pixel on the off-screen canvas is obtained, and each pixel is sampled at intervals according to the sampling step size to obtain multiple sampling points; the pixel data includes the transparency value; the sampling step size is determined according to the font size of the text to be displayed;

[0053] Based on the comparison between the transparency value of each sampling point and the preset transparency threshold, the valid sampling points are determined from each sampling point;

[0054] The coordinates of the valid sampling points in the off-screen canvas are converted into target coordinates in the main canvas, and a set of text particles is generated based on the target coordinates of each valid sampling point.

[0055] The aforementioned text particle generation method, apparatus, and device first determine the font size of the text to be displayed based on the first size information of the display area. Then, based on the font size and setting parameters, the text to be displayed is rendered on an off-screen canvas. The off-screen canvas is created based on the font size and the first size information of the text to be displayed. Next, pixel data of each pixel on the off-screen canvas is acquired, and each pixel is sampled at intervals according to a sampling step size to obtain multiple sampling points. The pixel data includes transparency values. The sampling step size is determined based on the font size of the text to be displayed. Then, based on the comparison between the transparency values ​​of each sampling point and a preset transparency threshold, valid sampling points are determined from each sampling point. Finally, the coordinates of the valid sampling points in the off-screen canvas are converted into target coordinates in the main canvas, and a set of text particles is generated based on the target coordinates of each valid sampling point. This application employs the aforementioned method, constructing an off-screen canvas as an invisible background rendering buffer to decouple the rendering and pixel sampling process of the text to be displayed from the final display of the main canvas. This allows the computational operations to be performed entirely in the background without affecting the user interface. Furthermore, the off-screen canvas is sparsely sampled at equal intervals using an adaptive sampling step size. Valid sampling points are selected based on the comparison between the transparency value of each sampling point and a preset transparency threshold, meaning only sampling points located within the text stroke area are retained. This eliminates the need to detect every pixel on the off-screen canvas, effectively reducing the computational resources consumed in judging blank background pixels and significantly improving the generation efficiency of text particles. Attached Figure Description

[0056] Figure 1Flowcharts of text particle generation methods provided in some embodiments of this application;

[0057] Figure 2 A flowchart for determining the font size of text to be displayed, provided for some embodiments of this application;

[0058] Figure 3 A flowchart for creating an off-screen canvas is provided for some embodiments of this application;

[0059] Figure 4 A flowchart for determining the size information of an off-screen canvas provided in some embodiments of this application;

[0060] Figure 5 A flowchart for determining a second width value of an off-screen canvas, provided for some embodiments of this application;

[0061] Figure 6 Flowcharts for rendering text to be displayed provided for some embodiments of this application;

[0062] Figure 7 A flowchart for determining valid sampling points provided in some embodiments of this application;

[0063] Figure 8 A flowchart for determining the sampling step size is provided for some embodiments of this application;

[0064] Figure 9 Structural block diagrams of text particle generation apparatus provided in some embodiments of this application;

[0065] Figure 10 This is an internal structural diagram of a computer device provided in some embodiments of this application. Detailed Implementation

[0066] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0067] The text particle generation method provided in this application embodiment can be applied to terminals, including but not limited to personal computers, laptops, and tablets. When the terminal executes the text particle generation method provided in this application embodiment, it first determines the font size of the text to be displayed based on the first size information of the display area. Then, according to the font size and setting parameters of the text to be displayed, it renders the text on an off-screen canvas. The off-screen canvas is created based on the font size of the text to be displayed and the first size information. Next, it acquires the pixel data of each pixel on the off-screen canvas and samples each pixel at intervals according to a sampling step size to obtain multiple sampling points. The pixel data includes transparency values. The sampling step size is determined based on the font size of the text to be displayed. Then, based on the comparison result between the transparency values ​​of each sampling point and a preset transparency threshold, it determines the valid sampling points from each sampling point. Finally, it converts the coordinates of the valid sampling points in the off-screen canvas into target coordinates in the main canvas and generates a set of text particles based on the target coordinates of each valid sampling point.

[0068] In this way, by constructing an off-screen canvas as an invisible background rendering buffer, the rendering and pixel sampling process of the text to be displayed is decoupled from the final display of the main canvas, so that the calculation operation is performed entirely in the background without affecting the user interface. On this basis, the off-screen canvas is sparsely sampled at equal intervals with an adaptive sampling step size, and the effective sampling points are selected based on the comparison results of the transparency value of each sampling point with the preset transparency threshold. That is, only the sampling points located in the text stroke area are retained, so there is no need to detect all pixels on the off-screen canvas one by one, thereby effectively reducing the computational resources consumed in judging blank background pixels and significantly improving the generation efficiency of text particles.

[0069] In one embodiment, such as Figure 1 As shown, the method is illustrated using the aforementioned terminal as an example. In this embodiment, the method includes the following steps:

[0070] Step 102: Determine the font size of the text to be displayed based on the first size information of the display area, and render the text to be displayed on the off-screen canvas according to the font size of the text to be displayed and the setting parameters.

[0071] The display area is the rectangular area actually visible on the terminal screen used to ultimately display particle effects; it's the visual space occupied by the main canvas in the webpage layout, and can also be called the main display area. A single display area can sequentially display multiple different texts. The primary size information of the display area includes its width and height values. Both the width and height values ​​are pixel values, meaning they are measured in pixels.

[0072] The text to be displayed is the text content entered by the user and intended to be rendered using particle effects. It can be a single character or a string consisting of two or more characters. The font size of the text to be displayed is the actual font size used when rendering the text off-screen. The settings parameters for the text to be displayed are the font attribute configurations used when rendering the text, including but not limited to font family (such as "Source Han Sans"), font weight (such as 900 bold), font style, etc. These parameters directly affect the rendered appearance and actual width of the text, and these parameters can be preset by the user.

[0073] An off-screen canvas is an invisible canvas buffer in memory used to render text to be displayed and for subsequent reading of pixel data; the user never sees this canvas. The off-screen canvas is created based on the font size and initial size information of the text to be displayed.

[0074] Optionally, the width and height of the display area can be obtained first, and the font size of the text to be displayed can be determined based on the width and height of the display area; then, the text to be displayed can be rendered on the off-screen canvas based on the font size of the text to be displayed and the font family, font weight and other parameters set by the user.

[0075] Step 104: Obtain pixel data of each pixel on the off-screen canvas, and sample each pixel at intervals according to the sampling step size to obtain multiple sampling points.

[0076] The pixel data includes transparency values. The sampling step size is the sampling interval (pixel value) when sampling off-screen canvas. The sampling step size is determined based on the font size of the text to be displayed.

[0077] Optionally, you can first call the off-screen canvas image reading interface to read the transparency data of all pixels and adaptively determine the sampling step size according to the size of the font to be displayed; then scan each pixel on the off-screen canvas at equal intervals according to the sampling step size, and read the corresponding transparency value at each grid intersection to obtain multiple sampling points.

[0078] Step 106: Based on the comparison results between the transparency value of each sampling point and the preset transparency threshold, determine the valid sampling points from each sampling point.

[0079] The transparency value of a sampling point is the alpha channel value of a pixel at a sampling point on the off-screen canvas, ranging from 0 to 255. A higher transparency value indicates that the text strokes covered by that pixel are more fully saturated and less transparent; for example, a transparency value of 255 represents a completely opaque area inside a stroke. A lower transparency value indicates that the pixel is closer to a blank background or a transparent area at the edge of a stroke; for example, 0 represents a completely transparent background area.

[0080] Optionally, the transparency value of each sampling point can be compared with a preset transparency threshold to obtain a comparison result. Sampling points with transparency values ​​not less than the preset transparency threshold in the comparison result are determined as valid sampling points.

[0081] Step 108: Convert the coordinates of the valid sampling points in the off-screen canvas into target coordinates in the main canvas, and generate a set of text particles based on the target coordinates of each valid sampling point.

[0082] Valid sampling points are those with an opacity value greater than or equal to a preset opacity threshold. These points are located within the valid stroke area of ​​the text to be displayed and are retained for particle generation. The main canvas is the actual Canvas element on the webpage, used for rendering the final particle effects. The main canvas occupies the display area, and its content is directly presented to the user. Based on the set of text particles, particle animation can be driven, rendering the dynamic effect of each particle moving to its target position on the main canvas. Ultimately, the complete particle outline of the text to be displayed is presented in the display area. This means that what the user ultimately sees on the terminal screen is a text shape composed of hundreds or thousands of independent particles, rather than traditional pixel-rendered text.

[0083] Optionally, the center offset can be calculated based on the display area size and the off-screen canvas size, and the coordinates of each valid sampling point in the off-screen canvas can be converted to the corresponding target coordinates in the main canvas; the target coordinates of all valid sampling points can be collected into a set of text particles for subsequent particle animation rendering.

[0084] The aforementioned text particle generation method decouples the rendering and pixel sampling process of the text to be displayed from the final display of the main canvas by constructing an off-screen canvas as an invisible background rendering buffer. This allows the computational operations to be performed entirely in the background without affecting the user interface. Based on this, the off-screen canvas is sparsely sampled at equal intervals with an adaptive sampling step size. Valid sampling points are selected based on the comparison between the transparency value of each sampling point and a preset transparency threshold. That is, only sampling points located within the text stroke area are retained. This eliminates the need to detect every pixel on the off-screen canvas, thereby effectively reducing the computational resources consumed in judging blank background pixels and significantly improving the efficiency of text particle generation.

[0085] In one embodiment, such as Figure 2 As shown, the font size of the text to be displayed is determined based on the first size information of the display area, including:

[0086] Step 202: Based on the first size information, determine the second size information of the safe drawing area.

[0087] The safe drawing area is determined based on the display area and is the effective drawing range excluding boundary interference. The second dimension information of the safe drawing area includes its width and height. Both the width and height values ​​of the safe drawing area are pixel values.

[0088] Optionally, the width of the safe drawing area can be determined using the following formula:

[0089] ;

[0090] In the formula, It is the width of the safe drawing area; It is the width of the display area.

[0091] The height of the safe drawing area can be determined using the following formula:

[0092] ;

[0093] In the formula, It is the height of the safe drawing area; It is the height of the display area.

[0094] Thus, when the width and height of the display area are both normal positive values, the safe drawing area is consistent with the display area; when the width and height of the display area are 0 or negative values, a lower limit of 1 pixel is used to ensure that the safe drawing area is always effective.

[0095] Step 204: Determine the font size of the text to be displayed based on the second size information.

[0096] Optionally, the font size of the text to be displayed can be determined using the following formula. :

[0097] ;

[0098] In the formula, It is a preset proportional coefficient; It is the initial value of the font size calculated based on the width of the display area; This is the preset minimum font size; This is the preset maximum font size. The physical meaning of this formula is that if the initial font size of the text to be displayed is within a certain range... If the font size is within the specified range, then the font size of the text to be displayed is the initial value of that font size; if the initial value of the font size of the text to be displayed is less than... Then the font size of the text to be displayed is... If the initial font size of the text to be displayed is greater than... Then the font size of the text to be displayed is... In one exemplary embodiment, , , .

[0099] In this embodiment, the second size information of the safe drawing area is first determined by the first size information of the display area, which can reduce the probability of canvas creation failure and font size calculation errors caused by abnormal display area size; then, the font size of the text to be displayed is determined based on the second size information, which can ensure that the font size of the text to be displayed can be adaptively adjusted with the change of the width of the display area, so that the same solution can obtain a suitable text rendering effect on screens of different sizes.

[0100] In one embodiment, such as Figure 3 As shown, the method also includes:

[0101] Step 302: In the preset temporary off-screen canvas, render the text to be displayed according to the font size and setting parameters to obtain the rendered text.

[0102] The preset temporary off-screen canvas is an invisible temporary canvas object used to measure text width. This temporary off-screen canvas can be discarded or reused after the text width measurement is completed; it is created and manipulated in memory. Rendered text is the actual text content rendered on the temporary off-screen canvas, based on the font size and settings of the text to be displayed. Rendered text is used to measure the actual pixel width of the text and is not used as the source of pixel data for the final particle generation.

[0103] Optionally, a temporary off-screen canvas can be created in memory, and the font size and font parameters of the text to be displayed can be set to be exactly the same as those of the actual text in the 2D drawing context of the canvas, so that the text to be displayed can be rendered on the canvas.

[0104] Step 304: Obtain the width value of the rendered text, and determine the size information of the off-screen canvas based on the width value of the rendered text, the font size of the text to be displayed, and the second size information.

[0105] Optionally, you can first call the text measurement interface of the temporary canvas to obtain the pixel width value of the rendered text; then, based on the pixel width value, the font size of the text to be displayed, and the second size information of the safe drawing area, determine the final width and height of the off-screen canvas.

[0106] Step 306: Create an off-screen canvas based on the size information of the off-screen canvas.

[0107] Optionally, based on the size information of the off-screen canvas obtained in step 304, a new off-screen canvas can be created in memory, its width and height attributes can be set to calculated values, and the relevant drawing context can be configured.

[0108] In this embodiment, the width of the rendered text is first measured using a preset temporary off-screen canvas. Then, based on the width of the rendered text, the font size of the text to be displayed, and the second size information of the safe drawing area, the size information of the off-screen canvas is obtained. This ensures that the off-screen canvas will not cause the text to be clipped or the stroke information to be lost due to its small size, nor will it waste canvas area due to its large estimated size. This allows for accurate control of the off-screen canvas area while ensuring the integrity of the sampling data, which in turn helps to reduce the number of sampling points during subsequent sparse sampling and improves the efficiency of the final text particle generation.

[0109] In one embodiment, such as Figure 4 As shown, the size information of the off-screen canvas includes its width and height values. Based on the width of the rendered text, the font size of the text to be displayed, and the second size information, the size information of the off-screen canvas is determined, including:

[0110] Step 402: Based on the product of the width value in the second size information and the preset reduction factor, determine the first width value of the off-screen canvas, and based on the font size of the text to be displayed and the width value of the rendered text, determine the second width value of the off-screen canvas.

[0111] The preset scaling factor is a proportional factor used to map the width of the safe drawing area to the upper limit of the width of the off-screen canvas. Its function is to control the maximum width ratio occupied by the off-screen canvas within the safe drawing area, ensuring that the off-screen canvas does not occupy the entire width of the safe drawing area, so as to reserve space for the left and right sides and other UI (User Interface) elements.

[0112] Optionally, the product of the width value in the second size information and the preset reduction factor can be directly determined as the first width value of the off-screen canvas. This width value represents the upper limit of the width that the off-screen canvas can occupy in the safe drawing area. That is, the width of the off-screen canvas must not exceed this width value to ensure that there are sufficient margins on the left and right sides of the off-screen canvas.

[0113] Additionally, a second width value for the off-screen canvas can be determined based on a weighted sum of the font size of the text to be displayed and the width value of the rendered text. This width value represents the minimum canvas width required to just fully accommodate the target text and its margins.

[0114] Step 404: Determine the minimum value between the first width value and the second width value as the width value of the off-screen canvas.

[0115] Understandably, determining the minimum of the first and second width values ​​as the width of the off-screen canvas allows the off-screen canvas to minimize its area while ensuring the integrity of the displayed text, thereby improving subsequent sampling efficiency.

[0116] Step 406: Determine the height of the off-screen canvas based on the product of the font size of the text to be displayed and the preset magnification factor.

[0117] The preset magnification factor is a proportional factor used to map the font size of the text to be displayed to the height of the off-screen canvas. Its function is to ensure that the off-screen canvas can fully accommodate the strokes of the text to be displayed in the vertical direction and to reserve a certain amount of space for the top and bottom edges of the text to be displayed, thereby reducing the possibility that the text to be displayed will be clipped by the boundary of the off-screen canvas.

[0118] Optionally, you can first calculate the product of the font size of the text to be displayed and the preset magnification factor, and then round up the product value to obtain the final off-screen canvas height value. This ensures that the off-screen canvas height value is an integer pixel, which is convenient for subsequent sampling.

[0119] For example, the height of the off-screen canvas can be determined using the following formula:

[0120] ;

[0121] In the formula, This is a preset magnification factor. For example, a preset magnification factor... The value can be 1.35.

[0122] In this embodiment, the solution consisting of steps 402 to 406 can ensure that the text to be displayed can be fully rendered while minimizing the area of ​​the off-screen canvas, thereby reducing the probability of wasting computing resources on a large number of blank pixels and improving the generation efficiency of text particles.

[0123] In one embodiment, such as Figure 5 As shown, based on the font size of the text to be displayed and the width value of the rendered text, the second width value of the off-screen canvas is determined, including:

[0124] Step 502: Determine the width reference value based on the product of the font size of the text to be displayed and a preset coefficient.

[0125] The preset coefficient is the width margin coefficient, which is used to add extra margin based on the actual measured width of the text.

[0126] Optionally, the width reference value can be obtained according to the following calculation formula. :

[0127] ;

[0128] In the formula, This is a preset coefficient. For example, the preset coefficient in this embodiment... Taking a value of 0.18 as an example, this means that the width of the text to be displayed is increased by 18% as a reserved space.

[0129] Step 504: Determine the second width value of the off-screen canvas based on the width reference value and the width value of the rendered text.

[0130] Optionally, the second width value of the off-screen canvas can be determined according to the following calculation formula. :

[0131] ;

[0132] In the formula, This is the width value for rendering the text. This formula calculates the minimum canvas width required to perfectly accommodate the text to be displayed and its margins.

[0133] For example, the second width value of the off-screen canvas can be determined based on the following calculation formula. :

[0134] ;

[0135] In the formula, The width value for the safe drawing area; This refers to the aforementioned preset reduction factor. For example, in this embodiment, the preset reduction factor... The value can be 0.82, meaning that the width of the off-screen canvas can not exceed 82% of the width of the safe drawing area.

[0136] In this embodiment, the second width value of the off-screen canvas is determined based on the sum of the width reference value and the width value of the rendered text. This can reduce the possibility of text clipping due to insufficient width of the off-screen canvas, and also reduce the possibility of canvas area waste due to overestimation of the width of the off-screen canvas. Thus, while ensuring the integrity of the pixel data of the text to be displayed, the efficiency of subsequent sampling is effectively guaranteed.

[0137] In one embodiment, such as Figure 6 As shown, based on the font size and settings of the text to be displayed, the text is rendered on an off-screen canvas, including:

[0138] Step 602: Determine the drawing anchor point of the text to be displayed on the off-screen canvas based on the size information of the off-screen canvas.

[0139] Among them, the drawing anchor point is the reference coordinate point on the off-screen canvas used to locate the position of the text to be displayed.

[0140] Optionally, the horizontal coordinate of the drawing anchor point can be set to half the width of the canvas off-screen, and the vertical coordinate of the drawing anchor point can be set to half the height of the canvas off-screen and the weighted sum of the font size of the text to be displayed.

[0141] For example, the x-coordinate of the drawing anchor point can be determined according to the following calculation formula. :

[0142] ;

[0143] The ordinate of the anchor point can be determined using the following formula. :

[0144] .

[0145] Step 604: Using the drawn anchor point as a reference, render the text to be displayed on the off-screen canvas according to the font size of the text to be displayed and the set parameters.

[0146] Optionally, on the off-screen canvas 2D drawing context, you can set the font size of the text to be displayed and user-specified settings (such as font weight 900 and font family monospace), and set the horizontal alignment. Alignment with vertical baseline And based on the coordinates of the drawn anchor points, the text to be displayed is rendered on the off-screen canvas.

[0147] In this embodiment, by setting the drawing anchor point at the geometric center of the off-screen canvas and combining it with center alignment, the text to be displayed is precisely rendered in the center of the off-screen canvas, so that the pixels of the text stroke area are evenly distributed in the off-screen canvas and the surrounding white space is symmetrical. On this basis, fine-tuning the vertical coordinate of the drawing anchor point can further correct the visual offset phenomenon caused by the measurement characteristics of Chinese fonts, so as to ensure that the text to be displayed achieves true visual centering in the off-screen canvas.

[0148] In one embodiment, such as Figure 7 As shown, based on the comparison results between the transparency value of each sampling point and the preset transparency threshold, valid sampling points are determined from each sampling point, including:

[0149] Step 702: For each sampling point, compare the transparency value of the sampling point with the preset transparency threshold to obtain the comparison result.

[0150] Understandably, the transparency value of a sampling point reflects the coverage of the corresponding pixel on the off-screen canvas. The transparency value of the area inside the stroke, i.e., the alpha value, is usually close to 255 (completely opaque), while the transparency value of the background area is usually close to 0 (completely transparent). The transparency value of the stroke edge after anti-aliasing is between 1 and 254. By setting an appropriate transparency threshold, such as 90, the main area of ​​the stroke can be effectively separated from the background area.

[0151] Step 704: If the comparison result shows that the transparency value of the sampling point is not less than the preset transparency threshold, the sampling point is determined to be a valid sampling point.

[0152] Optionally, if the comparison result shows that the transparency value of the sampling point is not less than the preset transparency threshold, the sampling point is determined as a valid sampling point and retained; if the comparison result shows that the transparency value of the sampling point is less than the preset transparency threshold, the sampling point is determined as an invalid sampling point and discarded directly.

[0153] In this embodiment, the effective sampling points are determined by comparing the transparency value of the sampling points with the preset transparency threshold. This ensures that the final retained effective sampling points are spatially distributed in a way that closely matches the actual outline of the text to be displayed, thereby ensuring that the subsequently generated particles can accurately outline the complete stroke structure of the text to be displayed.

[0154] In one embodiment, such as Figure 8 As shown, the steps for determining the sampling step size include:

[0155] Step 802: Determine the sampling step size reference value based on the product of the font size of the text to be displayed and the preset particle density compensation coefficient.

[0156] Optionally, the sampling step size reference value can be calculated according to the following formula. :

[0157] ;

[0158] In the formula, This is a preset font compression factor used to compress the font size of the text to be displayed to a range approximately equal to the specified step size. For example, The value can be 10.2. For example, for text with a font size range of 72 to 196 pixels, the result of dividing the font size by 10.2 is roughly between 7 and 19. It is the preset particle density compensation coefficient, which is an adjustable multiplier used to adjust the particle density. The standard value is 1.0. When it is greater than 1.0, the step size increases and the particle density decreases. When it is less than 1.0, the step size decreases and the particle density increases.

[0159] Step 804: Obtain the preset lower limit value and upper limit value of the step size. If the sampling step size reference value is less than the lower limit value of the step size, determine the sampling step size as the lower limit value of the step size.

[0160] The preset lower limit of the sampling step size is the minimum allowed value, used to reduce the probability of excessively dense particles and excessive performance overhead due to a too small step size. The preset upper limit of the sampling step size is the maximum allowed value, used to reduce the possibility of excessively sparse sampling points and broken text outlines due to a too large step size. For example, the lower limit of the step size can be 7 pixels, and the upper limit of the step size can be 15 pixels.

[0161] Step 806: If the sampling step size reference value is greater than the upper limit value of the step size, determine the sampling step size as the upper limit value of the step size.

[0162] Step 808: If the sampling step size reference value is not less than the lower limit of the step size and not greater than the upper limit of the step size, the sampling step size is determined as the sampling step size reference value.

[0163] In this embodiment, the above-mentioned step size adaptive adjustment mechanism can make the sampling step size adapt to the font size. That is, the larger the font size, the larger the sampling step size, but it cannot exceed the preset upper limit of the step size. The smaller the font size, the smaller the sampling step size, but it cannot be lower than the preset lower limit of the step size. This helps to achieve the goal of clearly restoring the outline of the text to be displayed with the fewest particles under various font sizes.

[0164] In one embodiment, sampling is performed by scanning the horizontal and vertical coordinates of pixels on the off-screen canvas at intervals according to a sampling step size, rather than scanning all pixels one by one. For example, this can be implemented using a double loop, with the outer loop scanning according to... Scanning in ascending order along the longitudinal direction, inner layers according to Scanning incrementally along the horizontal direction.

[0165] In one embodiment, sampling is performed by calling a preset image reading interface. It reads the pixel data object of the current text region from the off-screen canvas, that is, the pixel data object of the entire off-screen canvas area, and further retrieves the data from the returned data. Retrieve the data array from the object. This data array can be a one-dimensional pixel sequence linearly arranged in RGBA (red, green, blue transparency) order, with a total length of [value missing]. Each set of four consecutive values ​​corresponds to the red (R), green (G), blue (B), and alpha (transparency) information of the same pixel, with the alpha value ranging from 0 to 255. For example, the 0th to 3rd positions in the array correspond to the RGBA value of the pixel at coordinate (0,0), the 4th to 7th positions correspond to the RGBA value of the pixel at coordinate (1,0), and so on, stored in row-major order.

[0166] This embodiment uses the alpha channel to reflect the coverage of the target text stroke area and the background area. The alpha value of the internal area of ​​the stroke is usually close to 255 (completely opaque), the alpha value of the background area is close to 0 (completely transparent), and the alpha value of the stroke edge after anti-aliasing is between the two. By analyzing the magnitude of the alpha channel value, the text stroke area and the blank background area can be accurately distinguished. In addition, to improve the processing efficiency when frequently reading image data, the off-screen canvas context can be created using getContext("2d",{willReadFrequently:true}). Here, getContext("2d") refers to obtaining the 2D drawing context object of the canvas, which is used to perform drawing operations and pixel operations; {willReadFrequently:true} is an optional configuration object, in which the willReadFrequently property is used to prompt the browser that the pixel reading operation of this context will be very frequent, such as multiple calls. When `willReadFrequently:true` is set, the browser will prioritize using CPU-side memory storage mode (software rendering mode) to save the canvas's pixel data, instead of the default GPU memory storage mode (hardware acceleration mode). This means that subsequent calls to `getImageData` to read pixel data can retrieve the data directly from CPU memory, avoiding the overhead of GPU-to-CPU data copying and significantly improving processing efficiency when frequently reading image data.

[0167] In one embodiment, converting the coordinates of the valid sampling points in the off-screen canvas into target coordinates in the main canvas includes: taking the upper left corner of the main canvas as the origin, first calculating the center offset of the off-screen canvas relative to the main canvas; then mapping the coordinates of the valid sampling points to the target coordinates in the main canvas; finally, writing the target coordinates along with the corresponding particle characters, initial position, scaling factor, and other parameters into the particle set so that the subsequent animation module can move from the initial position to the above target coordinates and form the text outline.

[0168] For example, the first centering offset of the off-screen canvas relative to the main canvas along its length direction can be calculated using the following formula. :

[0169] ;

[0170] The second center offset of the off-screen canvas relative to the main canvas in the width direction is calculated using the following formula. :

[0171] .

[0172] Then take off-screen sampling points Convert to target coordinates in the main canvas ,in:

[0173] .

[0174] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0175] Based on the same inventive concept, this application also provides a text particle generation apparatus for implementing the text particle generation method described above. The solution provided by this apparatus is similar to the implementation described in the above method; therefore, the specific limitations in one or more text particle generation apparatus embodiments provided below can be found in the limitations of the text particle generation method described above, and will not be repeated here.

[0176] In one embodiment, such as Figure 9 As shown, a text particle generation device is provided, including: a text rendering module 902, a canvas sparse sampling module 904, an effective sampling point determination module 906, and a text particle generation module 908, wherein:

[0177] The text rendering module 902 is used to determine the font size of the text to be displayed based on the first size information of the display area, and to render the text to be displayed on the off-screen canvas according to the font size of the text to be displayed and the setting parameters; the off-screen canvas is created based on the font size of the text to be displayed and the first size information.

[0178] The canvas sparse sampling module 904 is used to acquire pixel data of each pixel on the off-screen canvas, and to sample each pixel at intervals according to the sampling step size to obtain multiple sampling points; the pixel data includes transparency values; the sampling step size is determined according to the font size of the text to be displayed;

[0179] The effective sampling point determination module 906 is used to determine the effective sampling points from each sampling point based on the comparison result between the transparency value of each sampling point and the preset transparency threshold.

[0180] The text particle generation module 908 is used to convert the coordinates of the valid sampling points in the off-screen canvas into the target coordinates in the main canvas, and generate a set of text particles based on the target coordinates of each valid sampling point.

[0181] In one embodiment, the text rendering module 902 is further configured to determine second size information of the safe drawing area based on the first size information; the safe drawing area is determined based on the display area; and the font size of the text to be displayed is determined based on the second size information.

[0182] In one embodiment, the device further includes an off-screen canvas creation module, which is used to render the text to be displayed in a preset temporary off-screen canvas according to the font size and setting parameters to obtain rendered text; obtain the width value of the rendered text, and determine the size information of the off-screen canvas based on the width value of the rendered text, the font size of the text to be displayed, and the second size information; and create an off-screen canvas according to the size information of the off-screen canvas.

[0183] In one embodiment, the off-screen canvas creation module includes a width value candidate submodule, a width value determination submodule, and a height value determination submodule. The width value candidate submodule is used to determine a first width value of the off-screen canvas based on the product of the width value in the second size information and a preset scaling factor, and to determine a second width value of the off-screen canvas based on the font size of the text to be displayed and the width value of the rendered text. The width value determination submodule is used to determine the minimum value between the first width value and the second width value as the width value of the off-screen canvas. The height value determination submodule is used to determine the height value of the off-screen canvas based on the product of the font size of the text to be displayed and a preset scaling factor.

[0184] In one embodiment, the width value candidate submodule includes a reference value determination unit and a width value candidate unit. The first reference value determination unit is used to determine a width reference value based on the product of the font size of the text to be displayed and a preset coefficient. The width value candidate unit is used to determine a second width value of the off-screen canvas based on the width reference value and the width value of the rendered text.

[0185] In one embodiment, the text rendering module 902 is further configured to determine the drawing anchor point of the text to be displayed in the off-screen canvas based on the size information of the off-screen canvas; and, based on the drawing anchor point, render the text to be displayed on the off-screen canvas according to the font size of the text to be displayed according to the set parameters.

[0186] In one embodiment, the valid sampling point determination module 906 is further configured to compare the transparency value of each sampling point with a preset transparency threshold to obtain a comparison result; if the comparison result shows that the transparency value of the sampling point is not less than the preset transparency threshold, the sampling point is determined to be a valid sampling point.

[0187] In one embodiment, the device further includes a sampling step size determination module, which is used to determine a sampling step size reference value based on the product of the font size of the text to be displayed and a preset particle density compensation coefficient; obtain a preset lower limit value and an upper limit value for the sampling step size; determine the sampling step size as the lower limit value when the sampling step size reference value is less than the lower limit value; determine the sampling step size as the upper limit value when the sampling step size reference value is greater than the upper limit value; and determine the sampling step size as the sampling step size reference value when the sampling step size reference value is not less than the lower limit value and not greater than the upper limit value.

[0188] Each module in the aforementioned text particle generation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0189] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 10 As shown, the computer device includes a processor, memory, communication interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When executed by the processor, the computer program implements a method for generating text particles. The display screen can be an LCD screen or an e-ink display. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the computer device's casing, or an external keyboard, touchpad, or mouse.

[0190] Those skilled in the art will understand that Figure 10The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0191] In one embodiment, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above-described method embodiments.

[0192] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps in the above method embodiments.

[0193] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0194] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0195] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0196] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0197] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A method for generating text particles, characterized in that, The method includes: The font size of the text to be displayed is determined based on the first size information of the display area. The text to be displayed is rendered on an off-screen canvas according to the font size of the text to be displayed and the setting parameters. The off-screen canvas is created based on the font size of the text to be displayed and the first size information. Pixel data of each pixel on the off-screen canvas is acquired, and each pixel is sampled at intervals according to a sampling step size to obtain multiple sampling points; the pixel data includes transparency values; the sampling step size is determined according to the font size of the text to be displayed; Based on the comparison results between the transparency value of each sampling point and the preset transparency threshold, valid sampling points are determined from each sampling point; The coordinates of the effective sampling points in the off-screen canvas are converted into target coordinates in the main canvas, and a set of text particles is generated based on the target coordinates of each effective sampling point.

2. The method according to claim 1, characterized in that, Determining the font size of the text to be displayed based on the first size information of the display area includes: Based on the first size information, a second size information of the safe drawing area is determined; the safe drawing area is determined based on the display area. Based on the second size information, the font size of the text to be displayed is determined.

3. The method according to claim 2, characterized in that, The method further includes: In a preset temporary off-screen canvas, the text to be displayed is rendered according to the font size of the text to be displayed and the setting parameters to obtain the rendered text; Obtain the width value of the rendered text, and determine the size information of the off-screen canvas based on the width value of the rendered text, the font size of the text to be displayed, and the second size information; The off-screen canvas is created based on its size information.

4. The method according to claim 3, characterized in that, The size information of the off-screen canvas includes the width and height values ​​of the off-screen canvas; determining the size information of the off-screen canvas based on the width value of the rendered text, the font size of the text to be displayed, and the second size information includes: Based on the product of the width value in the second size information and the preset reduction factor, the first width value of the off-screen canvas is determined, and based on the font size of the text to be displayed and the width value of the rendered text, the second width value of the off-screen canvas is determined. The minimum value between the first width value and the second width value is determined as the width value of the off-screen canvas; The height of the off-screen canvas is determined based on the product of the font size of the text to be displayed and a preset magnification factor.

5. The method according to claim 4, characterized in that, Determining the second width value of the off-screen canvas based on the font size of the text to be displayed and the width value of the rendered text includes: A width reference value is determined based on the product of the font size of the text to be displayed and a preset coefficient; Based on the width reference value and the width value of the rendered text, a second width value for the off-screen canvas is determined.

6. The method according to claim 1, characterized in that, The step of rendering the text to be displayed on an off-screen canvas according to the font size and setting parameters of the text to be displayed includes: Based on the size information of the off-screen canvas, determine the drawing anchor point of the text to be displayed in the off-screen canvas; Using the drawing anchor point as a reference, the text to be displayed is rendered on the off-screen canvas according to the font size of the text to be displayed and the setting parameters.

7. The method according to claim 1, characterized in that, The determination of valid sampling points from the sampling points based on the comparison results between the transparency values ​​of each sampling point and a preset transparency threshold includes: For each sampling point, the transparency value of the sampling point is compared with the preset transparency threshold to obtain a comparison result; If the comparison result shows that the transparency value of the sampling point is not less than the preset transparency threshold, the sampling point is determined to be the valid sampling point.

8. The method according to claim 1, characterized in that, The steps for determining the sampling step size include: The sampling step size reference value is determined based on the product of the font size of the text to be displayed and the preset particle density compensation coefficient. Obtain a preset lower limit value and an upper limit value for the step size. If the sampling step size reference value is less than the lower limit value for the step size, determine the sampling step size as the lower limit value for the step size. If the sampling step size reference value is greater than the step size upper limit value, the sampling step size is determined to be the step size upper limit value; If the sampling step size reference value is not less than the lower limit of the step size and not greater than the upper limit of the step size, the sampling step size is determined to be the sampling step size reference value.

9. A text particle generating device, characterized in that, The device includes: The text rendering module is used to determine the font size of the text to be displayed based on the first size information of the display area, and to render the text to be displayed on an off-screen canvas according to the font size of the text to be displayed and the setting parameters; the off-screen canvas is created based on the font size of the text to be displayed and the first size information. The canvas sparse sampling module is used to acquire pixel data of each pixel on the off-screen canvas, and to sample each pixel at intervals according to a sampling step size to obtain multiple sampling points; the pixel data includes transparency values; the sampling step size is determined according to the font size of the text to be displayed; The effective sampling point determination module is used to determine effective sampling points from the sampling points based on the comparison results between the transparency value of each sampling point and a preset transparency threshold. The text particle generation module is used to convert the coordinates of the effective sampling points in the off-screen canvas into target coordinates in the main canvas, and generate a set of text particles based on the target coordinates of each effective sampling point.

10. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 8.

Images