A method and system for dynamic layout rendering of variable font based on parameterized shape

Abstract

The application discloses a kind of based on parameterization shape's deformation character dynamic typesetting rendering method and system, the method includes: according to the preset intensity parameter value range of character rendering, respectively generate corresponding Bezier curve discrete sampling dataset;The curve sampling data corresponding to each intensity parameter is converted into rgb color value, and is stored in texture carrier or using texture array according to line;Synchronous generation auxiliary array, store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value;The horizontal typesetting processing of to-be-rendered character is carried out, generates temporary image and records original width and height;According to the selected intensity parameter, obtain the corresponding maximum vertical coordinate value in auxiliary array, calculate target image height;Temporary picture, intensity parameter, original width, target image height and rgb color value are input into shader program, and are mapped to Bezier curve deformation space, generate final rendering image.The application can realize efficient, diversified character deformation rendering.

Description

Technical Field

[0001] This invention relates to the field of mobile Internet and computer graphics processing, and more specifically to a method and system for dynamic text layout and rendering based on parametric shapes. Background Technology

[0002] In the field of digital design, text is not only a carrier of information but also a crucial element of visual expression. Existing text transformation techniques mainly fall into two representative categories:

[0003] 1. Basic geometric transformation scheme:

[0004] In practical applications, text deformation and typography based on simple geometric transformations involves using basic geometric transformations such as translation, scaling, skewing, and rotation to deform a text layout image composed of multiple characters. In a translation transformation, the coordinates of all pixels within the text image become... Where dx and dy are the translation distances in the horizontal and vertical directions, respectively; during scaling transformation, the coordinates are transformed to... sx and sy are the horizontal and vertical scaling ratios; under the skew transformation, the x-coordinate becomes The y-coordinate becomes , and These are the oblique angles in the x and y directions; the rotation transformation is calculated using a rotation matrix, resulting in new coordinates. satisfy α is the rotation angle. After these transformations, the pixels are recombined to form the deformed text layout image.

[0005] The aforementioned Scheme 1 offers a limited range of text deformation styles, relying solely on simple geometric transformations for text layout. It depends on basic geometric operations such as translation, scaling, skewing, and rotation, resulting in conventional and basic text deformation effects. In modern design contexts, such as advertising and artistic creation, text needs to present unique, complex, and creative shapes. Such simple geometric transformations are insufficient to meet diverse visual demands and fail to imbue text with rich artistic expression.

[0006] 2. SVG path text scheme:

[0007] Text layout based on SVG pathText: When using the SVG pathText element for text layout, the path shape of the text arrangement is first defined using SVG path instructions (e.g., M for move to, L for straight line to, C for cubic Bézier curve to, etc.). Then, the pathText element is used to associate the text with the path, and relevant attributes are set to determine the starting offset of the text on the path, character spacing, etc. When performing transformation operations, the overall rotation and translation of the text group are achieved by modifying the rotate() and translate() function parameters in the transform property, but the shape and structure inside each character remain unchanged.

[0008] Solution 2 lacks fine-grained deformation capabilities. While SVGpathText-based text layout can achieve text layout along a path, the text as a whole can only move and rotate according to a preset path, and the shape and structure of individual characters cannot be personalized. This makes the visual effect of the text layout appear monotonous in complex design scenarios, making it difficult to highlight the uniqueness and design sense of the text, and failing to meet users' needs for fine-grained text deformation.

[0009] Furthermore, neither of the aforementioned existing technologies can quickly generate text deformation effects of varying intensities through simple parameter settings. In practical design work, designers often need to compare different degrees of text deformation effects to select the solution that best matches their design intent. However, with existing technologies, users need to manually adjust multiple complex parameters multiple times to adjust the degree of text deformation. This is not only cumbersome but also makes it difficult to precisely control the intensity of the deformation effect, increasing the user's operational costs and reducing design efficiency. Summary of the Invention

[0010] In view of this, the present invention provides a method and system for dynamic text layout rendering based on parametric shapes, which can solve the problems of single deformation styles, lack of fine control, and inefficient parameter adjustment in existing text layout technologies.

[0011] To achieve the above objectives, the present invention adopts the following technical solution:

[0012] In a first aspect, embodiments of the present invention provide a method for dynamic text layout and rendering based on parametric shapes.

[0013] S10. Generate corresponding discrete sampling datasets of Bézier curves according to the preset intensity parameter range of text rendering.

[0014] S20. Convert the curve sampling data corresponding to each intensity parameter into RGB color values ​​and store them in the texture carrier or use a texture array for storage; simultaneously generate an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value.

[0015] S30. Perform horizontal layout processing on the text to be rendered, generate a temporary image and record the original width and original height;

[0016] S40. Based on the intensity parameter selected by the user, obtain the corresponding maximum vertical coordinate value from the auxiliary array, and calculate the target image height based on the maximum vertical coordinate value and the original height; the target image width remains consistent with the original width.

[0017] S50. Input the temporary image, intensity parameter, original width, target image height, and RGB color value stored in the texture image or texture array corresponding to the intensity parameter into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image.

[0018] Further, step S10 includes:

[0019] Construct a second-order Bézier curve model and fix the control points. and Dynamic control x and y coordinates; The x-coordinate represents the horizontal starting position of the control curve's curvature; the y-coordinate is calculated based on the intensity parameter i being an integer value within the preset range [1, 100] as follows:

[0020]

[0021] In the formula, α represents the scaling factor of the tangent function result, which controls the maximum bending amplitude;

[0022] The curve parameter t is solved using the bisection method to generate the sampling characteristics of the Bézier curve.

[0023] Furthermore, the step of using the bisection method to solve for the curve parameter t and generate the Bézier curve sampling characteristics includes:

[0024] The search interval for t is determined to be [0,1];

[0025] Calculate the midpoint of the interval corresponding x-coordinate ;

[0026] Compare With the goal Adjust the size of the search range:

[0027] if Then in the left half of the interval Continue searching;

[0028] if Then in the right half of the interval Continue searching;

[0029] Repeat the above process until the accuracy requirements are met. .

[0030] Furthermore, when using a texture carrier for storage, step S20 includes:

[0031] Create a texture image with a fixed width of 512 pixels and a height of 100 pixels; each row contains 512 pixels, and the RGB color value of each pixel is used to store the curve sample value of the corresponding column;

[0032] For the pixel in the i-th row and j-th column, its r, g, and b components are calculated as follows:

[0033] Obtain the y-value at x=j / 512 on the curve under the current intensity i. Multiply the y-value by 0xffffff to obtain an integer value, value. Decompose this value into r, g, and b components through bitwise operations, i.e.:

[0034] r=(value&0xff0000)>>16

[0035] g=(value&0x00ff00)>>8

[0036] b = value & 0x0000ff;

[0037] And store it in the corresponding pixel of the texture image;

[0038] An array is generated synchronously, where each item is the maximum value in the corresponding row of data. This array is used to record the maximum vertical coordinate value in the curve sampling data corresponding to intensities of 0-100.

[0039] Further, step S40 includes:

[0040] Based on the intensity parameter i selected by the user, retrieve the maximum vertical coordinate value corresponding to the current intensity from the auxiliary array. Calculate the height of the target image:

[0041]

[0042] In the formula, β is the original height; β is the scaling factor.

[0043] target image width Maintain the original width same.

[0044] Further, step S50 includes:

[0045] The temporary image, intensity parameter i, original width, and target image height are used. The RGB color value stored in the texture image or texture array corresponding to the intensity parameter i is input into the shader program of the graphics processing unit.

[0046] In the fragment shader stage of the shader program, the image half-region to which the current pixel belongs is determined based on the horizontal coordinate of the current pixel, and the corresponding curve-sampled vertical coordinate value is retrieved from the texture image in combination with the intensity value.

[0047] Based on the retrieved vertical coordinate values, the original height parameter, and the current pixel position, the vertical coordinates of the corresponding pixels in the temporary image are calculated through coordinate mapping.

[0048] When the mapped coordinates are valid, the color of the temporary image pixels is sampled and output to the target image; otherwise, the current pixel is discarded.

[0049] Further, the image half-region to which the current pixel belongs is determined based on its horizontal coordinates, and the corresponding curve-sampled vertical coordinate value is retrieved from the texture image based on the intensity value; including:

[0050] Divide the target image into a left half and a right half along the horizontal central axis;

[0051] For pixels in the left half: horizontal coordinate colIndex = original coordinate value, direction factor xDirection = −1;

[0052] For pixels in the right half: horizontal coordinate colIndex = 2.0 − original coordinate value, direction factor xDirection = 1;

[0053] Based on the horizontal coordinate colIndex and the row index corresponding to the intensity parameter, the RGB color value is sampled from the texture image.

[0054] The formula value = r * 0xff0000 + g * 0x00ff00 + b *0x0000ff is used to convert the values ​​into corresponding integer values, which are then used as curve sampling values.

[0055] The sampled curve value is then multiplied by the scaling factor of the curve Y value calculated based on the aspect ratio of the original image and the direction factor to obtain the height offset.

[0056] Further, calculating the vertical coordinates of the corresponding pixels in the temporary image through coordinate mapping includes:

[0057] The formula for calculating the new vertical coordinate newY corresponding to the temporary image pixels is as follows:

[0058]

[0059] Where gl_Fragcoord.y is the y-coordinate of the current pixel in screen space, y=u_halfViewHeight-height; u_halfViewHeight is the view-related half-height parameter, and u_halfOriginHeight is half the height of the temporary image.

[0060] Secondly, embodiments of the present invention also provide a dynamic text layout and rendering system based on parametric shapes, using a dynamic text layout and rendering method based on parametric shapes as described in any of the first aspects. The system includes:

[0061] The pre-calculated curve sampling feature module is used to generate corresponding discrete sampling datasets of Bézier curves based on the preset intensity parameter range of text rendering.

[0062] The texture construction and auxiliary data storage module is used to convert the curve sampling data corresponding to each intensity parameter into RGB color values ​​and store them in the texture carrier row by row or use a texture array for storage; it also generates an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value.

[0063] The original text image generation module is used to perform horizontal layout processing on the text to be rendered, generate a temporary image, and record the original width and original height.

[0064] The target rendering size calculation module is used to obtain the corresponding maximum vertical coordinate value from the auxiliary array according to the intensity parameter selected by the user, and calculate the height of the target image according to the maximum vertical coordinate value and the original height; the width of the target image remains consistent with the original width.

[0065] The deformation rendering module is used to input the temporary image, intensity parameters, original width, target image height, and RGB color values ​​stored in the texture image or texture array corresponding to the intensity parameters into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image.

[0066] Thirdly, embodiments of the present invention further provide a device for dynamic text layout and rendering based on parametric shapes, comprising:

[0067] At least one processor; and a memory communicatively connected to said at least one processor;

[0068] The memory stores instructions executable by the at least one processor, which are executed by the at least one processor to enable the at least one processor to perform the method for dynamic text layout rendering based on parametric shapes as described in any of the first aspects.

[0069] The descriptions of the second and third aspects of this invention can be referred to the detailed description of the first aspect; and the beneficial effects described in the second and third aspects can be referred to the analysis of the beneficial effects of the first aspect, which will not be repeated here.

[0070] As can be seen from the above technical solution, compared with the prior art, the present invention has the following technical effects:

[0071] The core concept of this invention lies in defining the basic shape of text deformation using a parameterized Bézier curve model, and dynamically controlling the curvature of the curve through a single intensity parameter *i*. By pre-calculating discrete sampling data of the curve shape corresponding to different intensity values ​​and encoding and storing this data in GPU textures or texture arrays, rapid access to deformation data is achieved. During the rendering stage, the efficient parallel computing power of the GPU fragment shader is utilized to sample the corresponding curve data according to the current intensity parameter, and each pixel coordinate in the original text image is remapped in real time according to symmetric mapping rules, ultimately generating a deformed text image with smooth and complex curvature effects. This method only requires the user to adjust one intensity parameter to achieve diverse visual effects ranging from slight curvature to strong arches, overcoming the problems of limited deformation styles, cumbersome operation, and lack of fine control in existing technologies. Furthermore, pre-calculation and GPU acceleration ensure rendering efficiency.

[0072] This invention is applicable to controlling text deformation through predefined curve models and intensity parameters, and combining GPU shader technology to achieve efficient and diverse text deformation rendering. It can be widely used in scenarios that require complex text visual representation, such as advertising design, digital media creation, and dynamic user interface effects generation. Attached Figure Description

[0073] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0074] Figure 1 A flowchart of a dynamic text layout and rendering method based on parametric shapes provided in an embodiment of the present invention.

[0075] Figure 2A schematic diagram illustrating the mathematical analysis principle of Bézier curves provided in an embodiment of the present invention.

[0076] Figure 3 These are rendering images of dynamic text layout under different intensity parameters provided in this embodiment of the invention.

[0077] Figure 4 A block diagram of a dynamic text layout and rendering system based on parametric shapes, provided in an embodiment of the present invention.

[0078] Figure 5 This is a device structure diagram for dynamic text layout and rendering based on parametric shapes, provided in an embodiment of the present invention. Detailed Implementation

[0079] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0080] Example 1:

[0081] This invention discloses a method for dynamic text deformation and rendering based on parametric shapes. By pre-calculating curve sampling features, constructing texture mapping, and performing real-time deformation rendering based on shaders, it achieves dynamic text deformation and rendering based on shapes. (Refer to...) Figure 1 As shown, the process includes the following steps S10 to S50:

[0082] S10. Generate corresponding discrete sampling datasets of Bézier curves according to the preset intensity parameter range of text rendering.

[0083] In this step, for example, a second-order Bézier curve can be used to construct the shape basis of the text deformation, and the strength parameter can be used to control the shape change of the curve, thereby realizing the correlation between strength and the final generated shape.

[0084] The mathematical principle of the second-order Bézier curve is as follows:

[0085] The second-order Bézier curve has three control points. Defined, its parametric equation is:

[0086]

[0087] Decompose it into components of x and y coordinates:

[0088]

[0089] In a second-order Bézier curve, the parameter t is a variable ranging from 0 to 1, representing time or progress. It controls the position of points on the curve and determines the trajectory from the starting point to the ending point.

[0090] When t=0, That is, the starting point of the curve; when t=1, , that is, the endpoint of the curve;

[0091] When t is between (0,1), B(t) changes continuously along the curve from the starting point to the ending point.

[0092] The Bézier curve parameter settings in this invention are as follows:

[0093] In this invention, the three control points of the second-order Bézier curve are set as follows:

[0094] (Fixed starting point)

[0095] (Fixed endpoint)

[0096]

[0097] in, The control point's y-coordinate varies with the strength parameter i. α, for example, is 0.7, serving as a scaling factor for the tangent function result, controlling the maximum bending amplitude (e.g., the arch height at a strength of 100). x=0.3 controls the starting position of the curve's bending (at 30% in the horizontal direction), influencing the distribution of the deformation area.

[0098] From a mathematical perspective, the tangent function Math.tan... Within the interval, it is a monotonically increasing function; as the intensity parameter i increases from 1 to 100, The value gradually increases. The y-coordinate of the point also increases, which gradually intensifies the curvature of the Bézier curve. For example, when i=1, When the y-coordinate of a point is small, the Bézier curve is relatively gentle; when i=100, When the y-coordinate of a point reaches its maximum value, the Bézier curve becomes steeper. In this way, different intensity parameters correspond to different shapes of Bézier curves, thus determining the degree and style of text deformation, achieving precise control of intensity over the final generated shape. For example... Figure 2 As shown, the second-order Bézier curve has a fixed starting point A(0,0) and ending point C(1,0) forming a horizontal baseline. The x-axis of control point B is fixed at 0.3, while the y-axis changes dynamically through the tan function. This design ensures that the curve always starts from the origin and ends at (1,0), with the degree of bulge in the middle controlled by the intensity parameter i.

[0099] Figure 2 The upper part of the diagram shows the curve trajectory when i = 100, and the calculated angle EAB should be 17°. Figure 2 The lower half of the diagram shows the curve trajectory when i = 50, the calculated angle EAB should be 8.5°. The orange dashed line represents the curve trajectory, and the others are auxiliary lines. The curve generated when i = 100 is steeper than the curve generated when i = 50.

[0100] in, The x-coordinate represents the horizontal starting position of the control curve's curvature, for example, 0.3; the y-coordinate is calculated in the formula... This represents the scaling factor of the tangent function result, for example, 0.7; however, these parameters can also be adjusted according to different application scenarios and user needs. As an alternative, the control point parameters of the Bézier curve: In a second-order Bézier curve, the current... x is fixed at 0.3. The relationship between y and intensity i is as follows: ;

[0101] Here, 17 can also be understood as the included angle coefficient, specifically meaning: when the strength value is 100, let point E be... The y-coordinate value / 0.7, at this time Point (i.e., point (1, 0) in the coordinate system), origin (point (0, 0) in the coordinate system), point E (point (0, 3, ..., ...) in the coordinate system). The angle formed by .y / 0.7) is 17°. These parameters can be adjusted to meet different design needs. For example, to achieve a smoother text distortion effect, the angle can be reduced. The x-value makes the curve change more slowly in the initial stage; if a stronger deformation effect is desired, the coefficient in the strength-related formula can be increased, such as increasing 0.7 to 0.9, which will make the steepness of the curve change more obvious.

[0102] In practical calculations, to obtain a point on a Bézier curve, the problem to be solved is: given the x-coordinate of a point on the curve, find the corresponding t value. This is because we need to map the horizontal position (x-coordinate) to a point on the curve to determine the vertical position (y-coordinate) of the deformed text.

[0103] However, in the parametric equations of Bézier curves, x and y are both quadratic functions of t, and typically x and t are not in a one-to-one correspondence. Therefore, the value of t cannot be directly solved from the x-coordinate; numerical methods are required.

[0104] The bisection method is an efficient numerical solution method suitable for monotonic functions. In this invention, since our Bézier curve is monotonically increasing in the x-direction (from x=0 to x=1), the bisection method can be used to calculate the t-value. The specific steps are as follows:

[0105] The search interval for t is determined to be [0,1];

[0106] Calculate the midpoint of the interval corresponding x-coordinate ;

[0107] Compare With the goal Adjust the size of the search range:

[0108] if Then in the left half of the interval Continue searching;

[0109] if Then in the right half of the interval Continue searching;

[0110] Repeat the above process until the accuracy requirements are met. .

[0111] In the code implementation, the value of t is calculated using the following function:

[0112] / / ****** Sample code begins

[0113] / / Use the bisection method to calculate the t value corresponding to a given x-coordinate

[0114] const findTForX = (x_target, x1, x2, x3, epsilon = 1e-10) => {

[0115] let tMin = 0;

[0116] let tMax = 1;

[0117] / / Initialize temporary variables to store the value of t and the corresponding value of x.

[0118] let tCurrent;

[0119] let xCurrent;

[0120] / / Loop through the search until the accuracy requirement is met

[0121] while (true) {

[0122] tCurrent = (tMax + tMin) / 2;

[0123] / / Calculate the x-coordinate of the second-order Bézier curve at tCurrent

[0124] xCurrent = 2 * (1 - tCurrent) * tCurrent * x2 + tCurrent *tCurrent * x3;

[0125] if (Math.abs(xCurrent - x_target) <= epsilon) {

[0126] / / If the difference between the current x value and the target x value is less than a given threshold, then a suitable t value is considered to have been found.

[0127] break

[0128] }

[0129] if (xCurrent > x_target) {

[0130] / / If the current x value is greater than the target x value, then narrow the search range to the left.

[0131] tMax = tCurrent;

[0132] } else {

[0133] / / Otherwise, narrow the search to the right.

[0134] tMin = tCurrent;

[0135] }

[0136] }

[0137] return tCurrent;};

[0138] / / ****** End of example code.

[0139] Furthermore, in this invention, a third-order Bézier curve can be used instead of a second-order Bézier curve. When using a third-order Bézier curve, which has four control points, it can provide more complex curve shape variations compared to a second-order Bézier curve. For example, when more precise control over the curvature and shape of text deformation is required, a third-order Bézier curve can be achieved by adjusting additional control points. The calculation method of its control points and its association with intensity need to be adjusted accordingly. Assuming four control points p1, p2, p3, and p4 are used, p1 and p4 can still be fixed at the start and end positions (e.g., {x:0,y:0} and {x:1,y:0}), while the x and y coordinates of p2 and p3 can be dynamically adjusted according to the intensity parameter through a function to achieve curve variations under different intensities. In the fragment shader, the method for calculating the corresponding pixel position also needs to be modified according to the formula of the third-order Bézier curve. This disclosure will not elaborate on this in detail; the principle can be referred to the above analysis process of the second-order Bézier curve.

[0140] S20. Convert the curve sampling data corresponding to each intensity parameter into RGB color values ​​and store them in the texture carrier or use a texture array for storage; simultaneously generate an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value.

[0141] For example, the discrete sampled values ​​(y-coordinate) of the second-order Bézier curve in the x∈[0,1] interval are pre-calculated with intensity values ​​in the range of 1-100. The specific generation logic is as follows:

[0142] (1) Texture carrier creation: Generate an image with a width of 512px and a height of 100px as the texture storage carrier. Each row of the image contains 512 pixels, and the RGB color value of each pixel is used to store the curve sampling value of the corresponding column. For the pixel in the i-th row and j-th column, its r, g, and b components are calculated as follows: First, obtain the y value at x=j / 512 on the curve under the current intensity i, multiply the y value by 0xffffff to obtain an integer value value, and then decompose the value into r, g, and b components through bitwise operations, that is:

[0143] r=(value&0xff0000)>>16

[0144] g=(value&0x00ff00)>>8

[0145] b=value&0x0000ff

[0146] And store it in the corresponding pixel of the texture image;

[0147] In actual code execution, the browser's JavaScript and canvas2d environment can be used to directly convert the value into a hexadecimal color value and write it into the canvas. This image is passed as a 2D texture to the fragment shader. The data in the i-th row corresponds to the data used when the intensity is i. The 512 pixels in each row represent the y-value of each x when the generated Bézier curve is divided into 512 equal parts from x (0-1) under the current intensity, using RGB color values.

[0148] (2) Auxiliary array generation: At the same time, an array is generated, each item of the array is the maximum value in the corresponding row of data. This array is used to record the maximum y value corresponding to the intensity of 0-100, which will play a role in the subsequent calculation of the height of the final generated image.

[0149] In terms of code implementation, the calculations and texture image creation are accomplished using the following JavaScript code:

[0150] / / ****** Sample code begins

[0151] const canvas = document.createElement('canvas');

[0152] canvas.width = 512;

[0153] canvas.height = 100;

[0154] document.body.appendChild(canvas);

[0155] const ctx = canvas.getContext('2d');

[0156] / / Calculate the t-value using the bisection method

[0157] const findTForX = (x_target, x1, x2, x3, epsilon = 1e-10) => {

[0158] let tMin = 0;

[0159] let tMax = 1;

[0160] / / Initialize temporary variables to store the value of t and the corresponding value of x.

[0161] let tCurrent;

[0162] let xCurrent;

[0163] / / Loop through the search until the accuracy requirement is met

[0164] while (true) {

[0165] tCurrent = (tMax + tMin) / 2;

[0166] xCurrent = 2 * (1 - tCurrent) * tCurrent * x2 + tCurrent *tCurrent;

[0167] if (Math.abs(xCurrent - x_target) <= epsilon) {

[0168] / / If the difference between the current x value and the target x value is less than a given threshold, then a suitable t value is considered to have been found.

[0169] break

[0170] }

[0171] if (xCurrent > x_target) {

[0172] / / If the current x value is greater than the target x value, then narrow the search range to the left.

[0173] tMax = tCurrent;

[0174] } else {

[0175] / / Otherwise, narrow the search to the right.

[0176] tMin = tCurrent;

[0177] }

[0178] }

[0179] return tCurrent;

[0180] }

[0181] / / Calculate the y-coordinate

[0182] const calculateBezierY = (x_target, p1, p2, p3) => {

[0183] if (x_target === 0 || x_target === 1) return 0

[0184] const t = findTForX(x_target, p1.x, p2.x, p3.x);

[0185] const y = 2 * (1 - t) * t * p2.y;

[0186] return y;

[0187] }

[0188] / / Create a 512 * 100 value list and draw the corresponding colors onto the canvas.

[0189] const createList = () => {

[0190] const list = []

[0191] const p1 = { x: 0, y: 0};

[0192] const p2 = { x: 0.3, y: 0};

[0193] const p3 = { x: 1, y: 0};

[0194] for (let row = 1; row <= 100; row++) {

[0195] p2.y = Math.tan(17 * row / 100 / 180 * Math.PI) * 0.7

[0196] for (let i = 0; i < 512; i++) {

[0197] const x = 1 / 512 * i;

[0198] const y = calculateBezierY(x, p1, p2, p3);

[0199] list.push(Math.round(y * 0xffffff));

[0200] ctx.fillStyle = `#${Math.round(y * 0xffffff).toString(16).padStart(6, '0')}`

[0201] ctx.fillRect(i, 100 - row, 1, 1);

[0202] }

[0203] }

[0204] return list

[0205] }

[0206] / / Execute the code to create the list

[0207] const list = createList()

[0208] / / Get the maximum value of each row

[0209] const maxList = Array.from({ length: 100}).map((_, i) => {

[0210] const start = i * 512

[0211] const end = start + 512

[0212] const subList = list.slice(start, end)

[0213] return Math.max(...subList)

[0214] })

[0215] / / ****** End of example code.

[0216] In step S20, multiplying the y-value by the constant 0xffffff and decomposing it into RGB components is a preferred method for efficiently encoding and storing floating-point curve sampling data in a standard RGB texture. Alternatively, texture arrays can be used to directly store these RGB color values ​​and other feature data, without relying on the graphics texture. For example, in environments with strict graphics resource management or limited computing resources, directly using array storage can reduce the overhead of creating and managing graphics textures. In program implementation, the calculated curve sampling values ​​are directly stored in the array, and the fragment shader retrieves data from the array using a specific indexing method, rather than sampling from the texture image. Simultaneously, the data transmission and management methods need to be adjusted accordingly to ensure accurate acquisition and use of this data during the rendering process.

[0217] This step calculates the RGB color values ​​and synchronously stores the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value. When the text is actually deformed in subsequent steps, there is no need to calculate the curve temporarily. You can directly look up the pre-made texture image and the maximum height array (i.e., auxiliary numbers) in this step, which makes the rendering speed fast.

[0218] S30. Perform horizontal layout processing on the text to be rendered, generate a temporary image and record the original width and original height;

[0219] In this step, for the text that needs to be rendered, a temporary image is first generated according to the normal text layout method, and the width of the temporary image is obtained at the same time. and height information.

[0220] S40. Based on the intensity parameter selected by the user, obtain the corresponding maximum vertical coordinate value from the auxiliary array, and calculate the target image height based on the maximum vertical coordinate value and the original height; the target image width remains consistent with the original width.

[0221] This step involves calculating the size of the target image:

[0222] Based on the width of the temporary image ,high Given the set intensity value i, and combining it with a pre-generated list of maximum y-values ​​corresponding to different intensities, the maximum value at the current intensity is obtained. The width of the target image remains unchanged, i.e. ,high The calculation is performed according to the following formula:

[0223]

[0224] Where β is the scaling factor, and its value is, for example, 0.55;

[0225] The total increase in image height due to symmetrical bending was calculated, and the final height was determined. equal to the original height This includes the added height due to curvature. This calculation method ensures that the image height can be reasonably adjusted according to the maximum amplitude of the curve deformation under different intensities of text deformation, ensuring that the text is displayed completely while avoiding content truncation or wasted space due to improper height settings.

[0226] S50. Input the temporary image, intensity parameter, original width, target image height, and RGB color value stored in the texture image or texture array corresponding to the intensity parameter into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image.

[0227] In step S50, shader program generation and calculation are implemented: corresponding vertex shader programs pv and fragment shader programs pf are generated. Based on the selected deformation shape (mainly based on the previously calculated Bézier curve shape), the corresponding vertex shader program pv and fragment shader program pf are generated. The vertex shader only provides basic coordinate space transformation and parameter passing, and does not handle deformation calculations, preparing data for the fragment shader. The fragment shader performs dynamic bending deformation calculations, achieving pixel coordinate redirection through symmetric mapping rules.

[0228] This step defines the deformed shape of the text using Bézier curves and recalculates and renders the text pixels based on curve sampling features using a specific mathematical model in the fragment shader. This enriches the deformed styles of text layout.

[0229] / / ****** Vertex Shader Sample Code Begins

[0230] attribute vec2 a_position;

[0231] varying vec2 v_texCoord;

[0232] void main() {

[0233] gl_Position = vec4(a_position.xy, 0.0, 1.0);

[0234] v_texCoord = a_position * 0.5 + 0.5;

[0235] }

[0236] / / End of vertex shader example code

[0237] / / ****** Fragment Shader Sample Code Begins

[0238] precision mediump float;

[0239] uniform sampler2D texture0; / / Temporary image texture

[0240] uniform sampler2D texture1; / / Deformation intensity texture

[0241] varying vec2 v_texCoord;

[0242] uniform float u_halfOriginHeight;

[0243] uniform float u_halfViewHeight;

[0244] uniform float u_rowIndex; / / Row index corresponding to the current intensity

[0245] uniform float u_heightRatio; / / Scaling factor for the Y-value of the curve calculated based on the aspect ratio of the original image.

[0246] float getSampledValue(float x, float y) {

[0247] vec4 sampledValue = texture2D(texture1, vec2(x, y));

[0248] float r = sampledValue.r * float(0xff0000);

[0249] float g = sampledValue.g * float(0x00ff00);

[0250] float b = sampledValue.b * float(0x0000ff);

[0251] return (r + g + b) / float(0xffffff);

[0252] }

[0253] void main() {

[0254] float texCoordX = v_texCoord.x * 2.0;

[0255] The relationship between v_texCoord.x and colIndex is: [0 ~ 0.5] -> [0 ~ 1]; [0.5 ~ 1] -> [1 ~ 0].

[0256] float colIndex = texCoordX >= 1.0 ? 2.0 - texCoordX : texCoordX;

[0257] float xDirection = texCoordX < 1.0 ? -1.0 : 1.0; / / Left half is -1, right half is 1

[0258] float height = getSampledValue(colIndex, u_rowIndex) * u_heightRatio * xDirection;

[0259] float y = u_halfViewHeight - height;

[0260] float newY = (gl_FragCoord.y - y + u_halfOriginHeight) / (u_halfOriginHeight * 2.0);

[0261] if (newY < 0.0 || newY > 1.0) { discard;}

[0262] gl_FragColor = texture2D(texture0, vec2(v_texCoord.x, newY));

[0263] / / gl_FragColor = mix(texture2D(texture0, vec2(v_texCoord.x,newY)), vec4(1.0, 0.0, 0.0, 0.5), 0.5);

[0264] }

[0265] / / ****** End of fragment shader example code.

[0266] The fragment shader stage includes the following sub-steps:

[0267] 1) Determine the image half-region (left or right half-region) to which the current pixel belongs based on its horizontal coordinates, and retrieve the corresponding curve-sampled vertical coordinate value from the texture image based on the intensity value;

[0268] 2) Based on the retrieved vertical coordinate values, the original height parameter, and the current pixel position, calculate the vertical coordinates of the corresponding pixel in the temporary image through coordinate mapping;

[0269] 3) When the mapped coordinates are valid, sample the color of the temporary image pixels and output it to the target image; otherwise, discard the current pixel.

[0270] The core mathematical model of the fragment shader program is as follows:

[0271] In the fragment shader program pf, the text image is rendered by combining pre-generated textures. The specific mathematical calculation process is as follows:

[0272] First, the texture coordinates v_texCoord.x are processed to obtain texCoordX = v_texCoord.x * 2.0. Then, the region is determined based on the value of texCoordX (by dividing the horizontal central axis of the target image into the left and right halves).

[0273] When texCoordX ≥ 1.0, the horizontal coordinate colIndex = 2.0 - texCoordX and the direction factor xDirection = 1.0, indicating that the pixel is located on the right half of the texture;

[0274] When texCoordX < 1.0, the horizontal coordinate colIndex = texCoordX and the direction factor xDirection = -1.0, indicating that the pixel is located on the left half of the texture.

[0275] Next, the `getSampledValue` function retrieves the curve sampling value corresponding to the current `colIndex` and intensity parameter `i` from the texture image `texture1`. The `getSampledValue` function converts the RGB color value sampled from the texture into an integer value using the formula `value = r * 0xff0000 + g * 0x00ff00 + b * 0x0000ff;`. This integer value is the curve sampling value. It is then multiplied by the curve Y-value scaling factor `u_heightRatio` calculated based on the original image's aspect ratio and `xDirection` to obtain the height offset.

[0276] in, , 5.55 is the original text bitmap height (in pixels), 5.55 is the coefficient β, which balances the curve amplitude and text readability; 0xffffff: the maximum RGB value (hexadecimal number = 16777215), used to restore the normalized height value in the pre-calculated texture.

[0277] Then calculate the new y-coordinate newY (that is, the y-coordinate of the corresponding pixel in the original image). Its relationship with the parameters related to the current pixel is as follows:

[0278]

[0279] Where gl_Fragcoord.y is the y-coordinate of the current pixel in screen space, y = u_halfViewHeight - height, u_halfViewHeight is the view-related half-height parameter, and u_halfOriginHeight is half the height of the original image.

[0280] If newY < 0.0 or newY > 1.0, it means that the pixel is out of the valid range, so the pixel is discarded; otherwise, the pixel value at the corresponding coordinate vec2(v_texCoord.x,newY) is obtained from the temporary image texture texture0 as the final rendering value of the current pixel gl_FragColor = texture2D(texture0, vec2(v_texCoord.x, newY)).

[0281] In the Vertex Shader, vec2 is a basic data type in GLSL (OpenGL Shading Language), representing a vector containing two floating-point components.

[0282] Graphics drawing and acquisition: This involves combining the temporary image, the texture generated in step S20, the intensity parameters, and the width of the target image. ,high The code is passed into a pre-initialized WebGL program (WebGL is used on the web side and OpenGL is used on the server side; this example uses the web side). The WebGL drawing commands are called to draw the graphics. By utilizing the parallel computing capabilities of the graphics card, the program can efficiently perform precise deformation calculations on each pixel to achieve real-time rendering. After the drawing is completed, the final deformed text layout rendering graphics are obtained.

[0283] Reference Figure 3As shown, based on the text "Demonstration Effect," the rendering effects are displayed with intensity parameters of 0 (no deformation), 25, 50, 75, and 100. Users only need to slide a slider (adjusting the intensity value from 1 to 100) to see the text smoothly change from a "straight" state to "slightly arched" -> "obviously arched" -> "towering arch," just like in a demonstration. Figure 3 The changes in the words "demonstration effect demonstration text" are the same.

[0284] The parametric shape-based dynamic text rendering method provided by this invention can achieve a wider variety of text deformation styles than existing technologies through deformation methods based on Bézier curves and pre-calculated curve sampling features. For example, it is no longer limited to simple geometric transformations, but can generate deformed text effects with different curvature changes according to different intensities, meeting the needs of advertising design, art creation and other fields for diversified and creative text layout rendering; thus enriching the deformation styles.

[0285] Furthermore, users can quickly achieve transitions from slight to strong deformation by simply adjusting the intensity parameter (e.g., an integer ranging from 1 to 100). Compared to existing technologies that require complex manual adjustments or resets, this invention significantly reduces the mental burden on users and improves design efficiency. For example, when creating a dynamic text deformation advertising animation, designers can easily generate different stages of deformation effects by changing the intensity parameter, without having to repeatedly perform tedious transformation settings.

[0286] Furthermore, by pre-calculating the curve sampling features at each intensity level, it is unnecessary to repeatedly calculate the relevant parameters of the Bézier curve during multiple renderings. For example, when creating a complex graphical interface containing text with multiple intensities of deformation, each intensity switch only requires retrieving the corresponding data from the pre-calculated texture and array, rather than recalculating the curve, thus significantly reducing the amount of computation and improving rendering efficiency. This advantage is particularly evident in scenarios involving frequent switching of deformation intensity effects or animations generated by adjusting intensity as a parameter.

[0287] Example 2:

[0288] Based on the same inventive concept, this invention also provides a system for local image rendering on a mobile device, using the parametric shape-based deformable text dynamic layout rendering method as described in Embodiment 1, referring to... Figure 4 As shown, the system includes:

[0289] The pre-calculated curve sampling feature module is used to generate corresponding discrete sampling datasets of Bézier curves based on the preset intensity parameter range of text rendering.

[0290] The texture construction and auxiliary data storage module is used to convert the curve sampling data corresponding to each intensity parameter into RGB color values ​​and store them in the texture carrier row by row or use a texture array for storage; it also generates an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value.

[0291] The original text image generation module is used to perform horizontal layout processing on the text to be rendered, generate a temporary image, and record the original width and original height.

[0292] The target rendering size calculation module is used to obtain the corresponding maximum vertical coordinate value from the auxiliary array according to the intensity parameter selected by the user, and calculate the height of the target image according to the maximum vertical coordinate value and the original height; the width of the target image remains consistent with the original width.

[0293] The deformation rendering module is used to input the temporary image, intensity parameters, original width, target image height, and RGB color values ​​stored in the texture image or texture array corresponding to the intensity parameters into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image.

[0294] In its implementation, this invention organically combines various modules, making the entire text layout and rendering process smooth and easy to control. Specifically, the text deformation effect can be controlled through simple intensity parameters, and combined with a complete process from temporary image generation, target size calculation, shader program generation to final graphic drawing, it achieves convenient and efficient text layout and rendering.

[0295] Example 3:

[0296] This invention provides another mobile terminal device, comprising:

[0297] At least one processor; and a memory communicatively connected to said at least one processor;

[0298] The memory stores instructions that can be executed by the at least one processor, which are executed by the at least one processor to enable the at least one processor to execute the dynamic text layout rendering method based on parametric shape of Embodiment 1.

[0299] Reference Figure 5As shown, the device may include: a processor 51, a communication interface 52, a memory 53, and a communication bus 54, wherein the processor 51, the communication interface 52, and the memory 53 communicate with each other via the communication bus 54. The processor 51 can call logical instructions in the memory 53 to execute a dynamic text layout rendering method based on parametric shapes, the method including:

[0300] S10. Generate corresponding discrete sampling datasets of Bézier curves according to the preset intensity parameter range of text rendering.

[0301] S20. Convert the curve sampling data corresponding to each intensity parameter into RGB color values ​​and store them in the texture carrier or use a texture array for storage; simultaneously generate an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value.

[0302] S30. Perform horizontal layout processing on the text to be rendered, generate a temporary image and record the original width and original height;

[0303] S40. Based on the intensity parameter selected by the user, obtain the corresponding maximum vertical coordinate value from the auxiliary array, and calculate the target image height based on the maximum vertical coordinate value and the original height; the target image width remains consistent with the original width.

[0304] S50. Input the temporary image, intensity parameter, original width, target image height, and RGB color value stored in the texture image or texture array corresponding to the intensity parameter into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image.

[0305] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to the method section.

[0306] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for dynamic typesetting and rendering of deformable text based on parametric shapes, characterized in that, Includes the following steps: S10. Generate corresponding discrete sampling datasets of Bézier curves according to the preset intensity parameter range of text rendering. S20. Convert the curve sampling data corresponding to each intensity parameter into RGB color values, and store them in the texture carrier row by row or use a texture array for storage. Simultaneously generate an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value; S30. Perform horizontal layout processing on the text to be rendered, generate a temporary image and record the original width and original height; S40. Based on the intensity parameter selected by the user, obtain the corresponding maximum vertical coordinate value from the auxiliary array, and calculate the target image height based on the maximum vertical coordinate value and the original height; the target image width remains consistent with the original width. S50. Input the temporary image, intensity parameter, original width, target image height, and RGB color value stored in the texture image or texture array corresponding to the intensity parameter into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image. Step S50 includes: The temporary image, intensity parameter i, original width, and target image height are used. The RGB color value stored in the texture image or texture array corresponding to the intensity parameter i is input into the shader program of the graphics processing unit. In the fragment shader stage of the shader program, the image half-region to which the current pixel belongs is determined based on the horizontal coordinate of the current pixel, and the corresponding curve-sampled vertical coordinate value is retrieved from the texture image in combination with the intensity value. Based on the retrieved vertical coordinate values, the original height parameter, and the current pixel position, the vertical coordinates of the corresponding pixels in the temporary image are calculated through coordinate mapping. When the mapped coordinates are valid, the color of the temporary image pixels is sampled and output to the target image; otherwise, the current pixel is discarded.

2. The method for dynamic typesetting and rendering of deformable text based on parametric shape according to claim 1, characterized in that, Step S10 includes: (1) Constructing a second-order Bézier curve model: Fixed control points and Dynamic control x and y coordinates; The x-coordinate represents the horizontal starting position of the control curve's curvature; the y-coordinate is calculated based on the intensity parameter i being an integer value within the preset range [1, 100] as follows: In the formula, α represents the scaling factor of the tangent function result, which controls the maximum bending amplitude; (2) Solve for the parameter t of the second-order Bézier curve model using the bisection method to generate the sampling features of the Bézier curve; specifically including: The search interval for t is determined to be [0,1]; Calculate the midpoint of the interval corresponding x-coordinate ; Compare With the goal Adjust the size of the search range: if Then in the left half of the interval Continue searching; if Then in the right half of the interval Continue searching; Repeat the above process until the accuracy requirements are met. .

3. The method for dynamic typesetting and rendering of deformable text based on parametric shape according to claim 2, characterized in that, When using a texture carrier for storage, step S20 includes: Create a texture image with a fixed width of 512 pixels and a height of 100 pixels; each row contains 512 pixels, and the RGB color value of each pixel is used to store the curve sample value of the corresponding column; For the pixel in the i-th row and j-th column, its r, g, and b components are calculated as follows: Obtain the y-value at x=j / 512 on the curve under the current intensity i. Multiply the y-value by 0xffffff to obtain an integer value, value. Decompose this value into r, g, and b components through bitwise operations, i.e.: r=(value&0xff0000)>>16 g=(value&0x00ff00)>>8 b = value & 0x0000ff; And store it in the corresponding pixel of the texture image; An array is generated synchronously, where each item is the maximum value in the corresponding row of data. This array is used to record the maximum vertical coordinate value in the curve sampling data corresponding to intensities of 0-100.

4. The method for dynamic typesetting and rendering of deformable text based on parametric shape according to claim 2, characterized in that, Step S40 includes: Based on the intensity parameter i selected by the user, retrieve the maximum vertical coordinate value corresponding to the current intensity from the auxiliary array. Calculate the height of the target image: In the formula, β is the original height; β is the scaling factor. target image width Maintain the original width same.

5. The method for dynamic typesetting and rendering of deformable text based on parametric shape according to claim 1, characterized in that, The image half-region to which the current pixel belongs is determined based on its horizontal coordinates, and the corresponding curve-sampled vertical coordinate value is retrieved from the texture image based on the intensity value; including: Divide the target image into a left half and a right half along the horizontal central axis; For pixels in the left half: horizontal coordinate colIndex = original coordinate value, direction factor xDirection = -1; For pixels in the right half: horizontal coordinate colIndex = 2.0 - original coordinate value, direction factor xDirection = 1; Based on the horizontal coordinate colIndex and the row index corresponding to the intensity parameter, the RGB color value is sampled from the texture image. Through the formula value=r 0xff0000+g 0x00ff00+b 0x0000ff is converted to the corresponding integer value and used as the curve sampling value; The sampled curve value is then multiplied by the scaling factor of the curve Y value calculated based on the aspect ratio of the original image and the direction factor to obtain the height offset.

6. The method for dynamic typesetting and rendering of deformable text based on parametric shape according to claim 5, characterized in that, Calculating the vertical coordinates of the corresponding pixels in the temporary image through coordinate mapping includes: The formula for calculating the new vertical coordinate newY corresponding to the temporary image pixels is as follows: Where gl_Fragcoord.y is the y-coordinate of the current pixel in screen space, y = u_halfViewHeight - height, u_halfViewHeight is the view-related half-height parameter, and u_halfOriginHeight is half the height of the temporary image.

7. A dynamic text layout and rendering system based on parametric shapes, characterized in that, Using the dynamic text layout rendering method based on parametric shapes as described in any one of claims 1-6, the system includes: The pre-calculated curve sampling feature module is used to generate corresponding discrete sampling datasets of Bézier curves based on the preset intensity parameter range of text rendering. The texture construction and auxiliary data storage module is used to convert the curve sampling data corresponding to each intensity parameter into RGB color values ​​and store them in the texture carrier row by row or use a texture array for storage; it also generates an auxiliary array to store the maximum vertical coordinate value in the curve sampling data corresponding to each intensity value. The original text image generation module is used to perform horizontal layout processing on the text to be rendered, generate a temporary image, and record the original width and original height. The target rendering size calculation module is used to obtain the corresponding maximum vertical coordinate value from the auxiliary array according to the intensity parameter selected by the user, and calculate the height of the target image according to the maximum vertical coordinate value and the original height; the width of the target image remains consistent with the original width. The deformation rendering module is used to input the temporary image, intensity parameters, original width, target image height, and RGB color values ​​stored in the texture image or texture array corresponding to the intensity parameters into the shader program of the graphics processing unit; in the fragment shader stage of the shader program, the pixel coordinates are mapped to the Bézier curve deformation space based on the symmetric mapping rule to generate the final rendered image.

8. A device for dynamic typesetting and rendering of deformable text based on parametric shapes, characterized in that, include: At least one processor; and a memory communicatively connected to the at least one processor; The memory stores instructions that can be executed by the at least one processor, which are executed by the at least one processor to enable the at least one processor to perform the method for dynamic text layout rendering based on parametric shapes as described in any one of claims 1-6.

Images