A path-based variable font layout rendering method, device and equipment

Abstract

The application discloses a path-based deformation text layout rendering method, device and equipment, the method receives user input text content and corresponding deformation intensity parameters; the text content adopts non-automatic line breaking for horizontal layout; according to the deformation intensity parameters, the curvature radius of the target path is dynamically calculated through the Newton iteration method; the origin coordinates of the text content characters are mapped to the target path, and the rotation angle of each character is calculated; when the total width of the text exceeds the circumference of the target path, multiple circle paths are automatically generated and the text is distributed; the final graphics are output through a cross-platform rendering engine, ensuring the consistency of each platform display. The application can solve the problems of path adjustment inconvenience, cross-platform inconsistency and inability to handle super-long text in the prior art. With the application, designers only need to adjust the intensity value to realize real-time preview of the bending effect of the text along the dynamic path, and all devices and browsers are compatible, so that the design efficiency is greatly improved.

Description

Technical Field

[0001] This invention relates to the field of mobile internet and computer graphics processing, and more specifically to a path-based method, apparatus, and device for rendering deformable text layouts, applicable to circular logo design, dynamic subtitle generation, and cross-platform UI component development, particularly addressing the rendering differences of H5 pages on iOS and Android. Background Technology

[0002] Existing path-based text layout techniques primarily rely on the textPath mechanism in the SVG (Scalable Vector Graphics) standard. Its core principle is to force text characters to fit onto a predefined path. The following details the implementation of these existing techniques:

[0003] Path definition layer:

[0004] via SVG <path>The element creates the underlying path, such as the arc path C shown in the figure, which is defined by the following parameters:

[0005] Starting coordinates: (x0, y0); Arc parameters: radius r, rotation angle θ, largeArc flag, sweep flag, ending coordinates (x1, y1); Corresponding SVG path command: M x0 y0 A rrθ

[0006] 00x1 y1 (means drawing an arc from the starting point to the ending point).

[0007] Text and path association layer:

[0008] use <text>The element wraps the text content and binds the text to path C through <textPath xlink:href="#pathC" / >. At this time, the SVG rendering engine will perform the following operations:

[0009] 1) Place the baseline start point of each character at the start position of path C in character order;

[0010] 2) Calculate the rotation angle of each character according to the tangent direction of path C to make the character baseline consistent with the path tangent. For example, the rotation angle of the character "文” is the tangent slope tanθ of the path at this point.

[0011] Rendering execution layer:

[0012] SVG rendering engines on different platforms (such as Blink engine (Chrome), Gecko engine (Firefox), WebKit engine (Safari)) calculate the rendering coordinates character by character according to the path geometry data and text styles (font, font size, color, etc.). The key limitations include:

[0013] Once the path shape is defined, it cannot be dynamically adjusted through parameters. If you need to change the text deformation degree (such as from a straight line to an arc), you must manually modify the path parameters;

[0014] The rendering effect highly depends on the implementation details of the engine for textPath. Different platforms may result in different outputs for the same code due to differences in tangent calculation accuracy and character spacing processing logic.

[0015] However, the existing SVG-based textPath technology has the following defects:

[0016] (1) The deformation strength cannot be dynamically adjusted and depends on manual path calculation;

[0017] The text deformation effect is uniquely determined by the path geometry. For example, if you need to gradually bend a straight path into an arc, you need to manually calculate the arc parameters (such as radius, start point, end point) corresponding to different curvatures, and it is impossible to achieve a smooth transition through a single parameter (such as "intensity value").

[0018] Designers or developers need to use professional tools (such as Adobe Illustrator) to repeatedly adjust the path control points. Each time the parameters are changed, the path data needs to be regenerated, resulting in high operation costs and difficulty in achieving real-time preview.

[0019] (2) The cross-platform rendering effects are inconsistent and the compatibility is poor;

[0020] Different platforms have different implementations of SVG standards. For example: the calculation accuracy of path tangent angle is different between mobile WebView (such as iOS WKWebView and Android Chrome WebView), which may cause character rotation deviation of 1-2 degrees; old browsers (such as IE11) do not support complex path text arrangement, which may cause text overlap or truncation. The actual impact is that the same set of SVG code may not be consistent in presenting text spacing, curved radius, and rotation angle on different devices, and a lot of effort needs to be invested in compatibility debugging.

[0021] (3) Unable to automatically handle the circular arrangement of super-long text

[0022] When the total length of the text content exceeds the path length (such as a path with a circumference of 200px, and the total width of the text is 300px), the prior art will directly truncate the excess part, or the developer needs to manually copy the path and write a circular logic. Manual circular arrangement requires accurate calculation of the position of each character to avoid misalignment at the joint, which increases the difficulty of development and lacks universality.

[0023] (4) Animation implementation is limited, relying on CSS animation or SVG SMIL to implement text deformation animation along the path, but only simple interpolation can be performed on predefined paths (such as straight line to straight line, and circular arc to circular arc), and continuous curvature change driven by intensity parameters cannot be achieved. SUMMARY

[0024] Therefore, the present application provides a path-based deformed text layout rendering method, device and equipment, which can at least partially solve the problems of path adjustment inconvenience, cross-platform inconsistency, and inability to handle super-long text in prior art path-based text layout.

[0025] To achieve the above purpose, the present application adopts the following technical solutions:

[0026] In a first aspect, the present application provides a path-based deformed text layout rendering method, comprising the following steps:

[0027] S10, receiving user input text content and corresponding deformation intensity parameters; the text content is arranged horizontally using non-automatic line breaking;

[0028] S20, dynamically calculating the curvature radius of the target path according to the deformation intensity parameters by Newton iteration method;

[0029] S30, mapping the origin coordinates of the text content characters to the target path and calculating the rotation angle of each character;

[0030] S40, when the total width of the text exceeds the circumference of the target path, automatically generating a multi-turn path and assigning text;

[0031] S50 outputs the final graphics through a cross-platform rendering engine, ensuring consistent display across platforms.

[0032] Further, step S20 includes:

[0033] Based on the range of values ​​for the deformation strength parameters, the circular arc path is used as the deformation carrier; the radius R of the reference circle A is defined. A = k × h; h is the character row height; k is a constant representing a multiple of the row height;

[0034] Based on the deformed target circle B, and setting half the circumference of the reference circle A to be equal to the arc length corresponding to the radius r on circle B, the equation is established as follows:

[0035]

[0036] In the formula, I represents the strength parameter, and its value ranges from [0, 100].

[0037] Solve using Newton's iteration method:

[0038]

[0039] Calculate an approximate value for r, where the derivative is:

[0040]

[0041] Set initial value The intermediate state corresponding to I=50; termination condition |f(r) n )|<10 -6 ;

[0042] Calculate the radius of the target circle B after deformation. Achieve a smooth mapping between intensity values ​​and curvature.

[0043] Further, step S30 includes:

[0044] Based on the total width W of the current line of text and the radius R of the target circle corresponding to the intensity parameter I. B Calculate the starting radian of the path:

[0045]

[0046] Based on the horizontal spacing dx of the characters before deformation, calculate the cumulative arc length sum(dx), and then calculate the corresponding target radians:

[0047] θ=θ start +sum(dx) / R B

[0048] Based on the target radian and the radius R of the target circle B. B Calculate the target coordinates:

[0049] x′=R B ×sinθ,y′=-R B ×cosθ

[0050] The target radian θ is used as the rotation angle so that the character baseline is aligned with the tangent direction of the path at the target coordinate point.

[0051] Further, step S40 includes:

[0052] When the total width of the text W > 2πR B Calculate the number of loops. Generate n+1 circular tracks, with the starting angle of each track increasing by 2π, to achieve text wrapping arrangement; n is a positive integer.

[0053] Furthermore, in step S50, the cross-platform rendering engine is implemented based on the Rust / Wasm architecture, bypassing the native SVG engine and directly generating path data.

[0054] Secondly, embodiments of the present invention also provide a path-based deformable text layout rendering apparatus, characterized in that it uses a path-based deformable text layout rendering method as described in any one of the first aspects, the apparatus comprising:

[0055] The receiving module is used to receive the text content input by the user and the corresponding deformation strength parameters; the text content is laid out horizontally without automatic line wrapping.

[0056] The path deformation parameter determination module is used to dynamically calculate the radius of curvature of the target path based on the deformation strength parameter using Newton's iteration method.

[0057] The text positioning and geometric transformation module is used to map the origin coordinates of the characters in the text content to the target path and calculate the rotation angle of each character.

[0058] The automatic loop processing module for extremely long text is used to automatically generate multiple loop paths and assign text when the total width of the text exceeds the perimeter of the target path.

[0059] The rendering and canvas processing module is used to output the final graphics through a cross-platform rendering engine, ensuring consistent display across platforms.

[0060] Thirdly, embodiments of the present invention further provide an apparatus, comprising:

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

[0062] The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to perform the path-based deformable text rendering method according to any one of the first aspects.

[0063] Fourthly, embodiments of the present invention also provide a storage medium storing instructions that, when executed on a terminal, can implement the path-based deformable text layout rendering method as described in any of the first aspects.

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

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

[0066] 1. Parametric deformation control: By introducing strength parameters, users can dynamically change the path curvature (e.g., from a straight line to an arc) by adjusting the strength, without the need for manual path calculation;

[0067] 2. Unified rendering engine: Implements cross-platform rendering core algorithms using Rust / Wasm, bypassing browser differences and ensuring consistent display across platforms;

[0068] 3. Intelligent loop layout: Automatically generates multi-loop paths for extremely long text, seamlessly connecting them, suitable for circular logos or scrolling text;

[0069] 4. Smooth animation support: Achieve natural transition deformation animations through a mathematical model of intensity parameters and curvature.

[0070] With this invention, designers can simply adjust the intensity value to preview the bending effect of text along a dynamic path in real time, and it is compatible with all devices and browsers, greatly improving design efficiency. Attached Figure Description

[0071] 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.

[0072] Figure 1 A flowchart of a path-based deformable text layout rendering method provided in an embodiment of the present invention.

[0073] Figure 2 This is a rendering of the text, showing the effect of rendering according to normal text layout rules with automatic line wrapping.

[0074] Figure 3 These are rendering images showing the different rendering effects when the text is formatted according to normal text layout rules but without automatic line breaks.

[0075] Figure 4 A block diagram of a path-based deformable text layout rendering device provided in an embodiment of the present invention.

[0076] Figure 5 This is a device structure diagram for path-based deformable text rendering provided in an embodiment of the present invention. Detailed Implementation

[0077] 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.

[0078] Example 1:

[0079] This invention discloses a path-based deformable text rendering method. Through parameterized path deformation, cross-platform unified rendering, and intelligent looping layout, it can achieve efficient path-based deformable text rendering and layout. (Refer to...) Figure 1 As shown, the process includes the following steps S10 to S50:

[0080] S10. Receive the text content and corresponding deformation strength parameters input by the user; the text content is horizontally formatted using non-automatic line wrapping.

[0081] This invention introduces a deformation strength parameter I, for example, with a value range of (0-100), and achieves dynamic adjustment of path curvature through mathematical modeling. Step S10 receives the text content input by the user and generates initial coordinates (x0, y0), width w, height h, and other parameters for each character according to ordinary text typesetting rules. The only difference is that automatic line wrapping is disabled to ensure that each line of text is deformed as an independent whole.

[0082] For example, take the text "Band-Aid presentation text automatically wraps after one week --------" as an example, Figure 2 As shown, when rendered according to normal text layout rules, if the total width of the text exceeds the width of the text box, it will automatically wrap to the next line. Figure 3 As shown in section a, this is the rendering method without automatic line wrapping, which is also the rendering effect when the intensity parameter I = 0 is defined in this invention.

[0083] S20. Dynamically calculate the radius of curvature of the target path according to the deformation strength parameter by Newton's iterative method;

[0084] In step S20, control the degree of path bending according to the introduced deformation strength I (0 - 100):

[0085] When I = 0: The path is a straight line (an arc with an infinite equivalent radius), and the text is arranged according to the original coordinates.

[0086] When I = 100: The path is a fixed - radius circle A with a radius R A = k×h, where h is the line height of the character; k is a constant representing the multiple of the line height, for example, taking a value of 2.5; (when the font size is 30px, the line height is 36px, R A = 90px).

[0087] When 0 < I < 100: Calculate the radius of the target circle B through the following algorithm:

[0088] Mathematical modeling: Assume that half of the circumference of circle A is equal to the arc length corresponding to the radian r on circle B, and establish the equation:

[0089]

[0090] Solve by Newton's iterative method: Through the iterative formula

[0091]

[0092] Calculate the approximate value of r, where the derivative

[0093]

[0094] Set the initial value Corresponding to the intermediate state of I = 50; the termination condition is |f(r n )| < 10 -6 ;

[0095] Radius calculation: The radius of circle B Realize the smooth mapping between the strength value and the curvature.

[0096] S30. Map the origin coordinates of the text content characters to the target path and calculate the rotation angle of each character;

[0097] In this step, realize text positioning and geometric transformation:

[0098] (1) Starting - angle calculation:

[0099] According to the total width W of the current - line text, calculate the starting angle θ of the circular - arc track start Assuming the top of the circular track is 0 degrees (in radians -π / 2), and the midpoint of the arc is also 0 degrees, then the total radian length of the track must cover the arc length corresponding to the total width of the text. For the case where intensity I > 0, the track is an arc segment on circle B, with arc length L = W, and the corresponding central angle θ... total =L / R B Therefore, the starting angle is:

[0100]

[0101] (2) Coordinate transformation and rotation:

[0102] For each character's origin (x0, y0), calculate its target coordinates (x', y') on the deformed path. Assuming the horizontal spacing between characters before deformation is dx (the x-axis distance between the origins of adjacent characters), the cumulative arc length of the deformed character on the path is sum(dx), and the corresponding angle is:

[0103] θ=θ start +sum(dx) / R B .

[0104] The center coordinates are (0,0) (assuming the center of the orbit is located at the origin of the coordinate system), then the target coordinates are:

[0105] x'=R B ×sinθ,y'=-R B ×cosθ

[0106] Using the target radian θ as the rotation angle of the character (in radians), the baseline of the character is aligned with the tangent direction of the path at that point, achieving a natural fit effect.

[0107] As an alternative, the starting angle can be customized to any angle. The input starting angle θ_custom can be converted to radians θ_rad = θ_custom × π / 180 and adjusted to the range [0, 2π) to ensure consistency in calculation.

[0108] S40. When the total width of the text exceeds the perimeter of the target path, automatically generate multiple loop paths and assign text.

[0109] Step S40 can automatically process extremely long text in a loop, where the loop condition is when W > 2πR. B Calculate the number of loops. Generate n+1 circular tracks, each with an initial angle increasing by 2π, to achieve text wrapping. n is a positive integer. The remaining text is then automatically arranged to the starting position of the new tracks, avoiding truncation or misalignment and achieving seamless connection.

[0110] It can also achieve seamless looping. For example, when the total width of the text exceeds the circumference of the path, it automatically generates multiple tracks with no breaks between the beginning and end, which is suitable for scenarios such as circular logos and scrolling text, reducing the amount of manual adjustment work. In addition, when the text length exceeds the circumference of a single circle, it can be truncated and discarded as needed.

[0111] S50 outputs the final graphics through a cross-platform rendering engine, ensuring consistent display across platforms.

[0112] During rendering, different styles can be applied, such as fill, stroke, and shadow, to the deformed character paths. Underline / strikethrough coordinates change synchronously with character rotation. The cross-platform rendering engine is based on the Rust / Wasm architecture. Rust's high performance allows processing 1000 characters in just 25ms, supporting real-time preview. The Wasm version uses WebWorkers for parallel computation, avoiding blocking the front-end main thread. By creating a virtual canvas, the paths of each line are arranged by line height, the bounding box is calculated, and the edges are clipped to the effective area, with the edges extended to avoid truncation, ultimately generating an optimized SVG. Notably, the Rust / Wasm architecture bypasses the platform's native SVG engine, directly generating paths through mathematical calculations. Tests show that the character position deviation is less than 0.1px on Chrome, Safari, and iOS / Android platforms. It does not rely on platform support for SVG's textPath and can run stably in older browsers or customized rendering environments. Supported vector graphics output formats include at least one of: SVG, PDF, Android VectorDrawable, and iOS Asset Catalog.

[0113] The path-based deformable text rendering method provided by this invention allows for dynamic control of deformation intensity in practical use. Users can adjust the intensity parameter I to change the degree of text curvature in real time without manually modifying the path, resulting in a significant improvement in efficiency compared to existing technologies. Furthermore, the radian calculation based on Newton's iteration method ensures continuous change in path curvature, avoiding abrupt changes in traditional interpolation methods and achieving a smooth transition effect. Because the intensity parameter I and path curvature are strictly mapped through a mathematical model, the degree of path curvature will not change abruptly during animation, avoiding abrupt transitions caused by keyframe interpolation in existing technologies.

[0114] Furthermore, support for GIF, APNG, and WebP animation formats can be added, generating morphing text animations through frame-by-frame rendering, suitable for dynamic content on social media.

[0115] For example, in practical implementation, iOS Asset Catalog can be used to generate PDF vector resources suitable for iOS development and automatically adapt to different screen sizes; Android VectorDrawable can also be used to output vector graphic definitions in XML format, which is compatible with the Android Vector Drawable framework.

[0116] Reference Figure 3 As shown, taking "Demo text demo text -------------------------------------" as an example, if the font size is set to px and the line height to 24px, then its width will be 493px and its height will be 24px when rendered without line breaks. The radius of the base circle will be 24px * 2.5 = 60px.

[0117] Figure 3 The rendering effects are shown for intensity parameters 0 (no deformation), 25, 50, 75, and 100. Users can simply slide a slider (adjusting the intensity value from 1 to 100) to see the text smoothly transition from "no deformation" to "slightly arched" -> "obviously arched" -> "wraps around once" -> "wraps around twice." Data is shown in Table 1.

[0118] Table 1:

[0119]

[0120]

[0121] The path-based text rendering method provided in this invention is implemented in JavaScript / TypeScript: For compatibility with older browsers that do not support Wasm, the core algorithm can be rewritten in JavaScript, and computational performance can be optimized using Web Workers. Although the execution efficiency is slightly lower than Rust, cross-platform rendering consistency can still be achieved. For native mobile rendering (iOS / Android): Rust code interacts with Objective-C / Swift and Java / Kotlin via FFI (Foreign Function Interface), directly calling rendering functions in native mobile applications, avoiding reliance on the WebView rendering engine.

[0122] Example 2:

[0123] Based on the same inventive concept, embodiments of the present invention also provide a path-based deformable text layout rendering device, using the path-based deformable text layout rendering method as described in Embodiment 1, with reference to... Figure 4 As shown, the device includes:

[0124] The receiving module is used to receive the text content input by the user and the corresponding deformation strength parameters; the text content is laid out horizontally without automatic line wrapping.

[0125] The path deformation parameter determination module is used to dynamically calculate the radius of curvature of the target path based on the deformation strength parameter using Newton's iteration method.

[0126] The text positioning and geometric transformation module is used to map the origin coordinates of the characters in the text content to the target path and calculate the rotation angle of each character.

[0127] The automatic loop processing module for extremely long text is used to automatically generate multiple loop paths and assign text when the total width of the text exceeds the perimeter of the target path.

[0128] The rendering and canvas processing module is used to output the final graphics through a cross-platform rendering engine, ensuring consistent display across platforms.

[0129] 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. By defining intensity parameters and dynamically calculating path curvature using Newton's iteration method, the degree of text curvature can be smoothly adjusted. Path data is independently generated based on the Rust / Wasm architecture, bypassing platform differences and ensuring rendering consistency. When the total width of the text exceeds the path perimeter, multiple loop paths are automatically generated and seamlessly arranged. Finally, dynamic animation support is implemented, generating continuous deformation animation effects through the intensity parameters and curvature mapping model.

[0130] Example 3:

[0131] This invention provides another terminal device, comprising:

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

[0133] 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 path-based deformable text layout rendering method of Embodiment 1.

[0134] Reference Figure 5 As 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 path-based deformable text layout rendering method, which includes:

[0135] S10. Receive the text content and corresponding deformation strength parameters input by the user; the text content is horizontally formatted using non-automatic line wrapping.

[0136] S20. Based on the deformation strength parameters, dynamically calculate the radius of curvature of the target path using Newton's iteration method;

[0137] S30. Map the origin coordinates of the characters in the text content to the target path, and calculate the rotation angle of each character;

[0138] S40. When the total width of the text exceeds the perimeter of the target path, automatically generate multiple loop paths and assign text.

[0139] S50 outputs the final graphics through a cross-platform rendering engine, ensuring consistent display across platforms.

[0140] Example 4:

[0141] This invention also provides a storage medium storing instructions that, when executed on a terminal, can implement a path-based deformable text layout rendering method as described in Embodiment 1.

[0142] Computer-readable storage media can be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), registers, hard disks, optical fibers, portable...

[0143] Compact Disc Read-Only Memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof, or any other form of computer-readable storage medium known in the art. An exemplary storage medium is coupled to a processor, enabling the processor to read information from and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can reside in an Application-Specific Integrated Circuit (ASIC). In this embodiment, the computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0144] 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.

[0145] 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.< / text> < / path>

Claims

1. A path-based method for rendering deformable text layouts, characterized in that, Includes the following steps: S10. Receive the text content and corresponding deformation strength parameters input by the user; the text content is horizontally formatted using non-automatic line wrapping. S20. Based on the deformation strength parameters, dynamically calculate the radius of curvature of the target path using Newton's iteration method; S30. Map the origin coordinates of the characters in the text content to the target path, and calculate the rotation angle of each character; S40. When the total width of the text exceeds the perimeter of the target path, automatically generate multiple loop paths and assign text. S50 outputs final graphics through a cross-platform rendering engine, ensuring consistent display across platforms; Step S20 includes: Based on the range of values ​​for the deformation strength parameters, the circular arc path is used as the deformation carrier; the radius R of the reference circle A is defined. A =k×h; h is the character row height; k is a constant representing a multiple of the row height; Based on the deformed target circle B, and setting half the circumference of the reference circle A to be equal to the arc length corresponding to the radius r on circle B, the equation is established as follows: In the formula, I represents the strength parameter, and its value ranges from [0, 100]. Solve using Newton's iteration method: Calculate an approximate value for r, where the derivative is: Set initial value r0= This corresponds to the intermediate state where I=50; termination condition. ; Calculate the radius of the target circle B after deformation. This achieves a smooth mapping between intensity values ​​and curvature.

2. The path-based deformable text layout rendering method according to claim 1, characterized in that, Step S30 includes: Based on the total width W of the current line of text and the radius R of the target circle corresponding to the intensity parameter I. B Calculate the starting radian of the path: Based on the horizontal spacing dx of the characters before deformation, calculate the cumulative arc length sum(dx), and then calculate the corresponding target radians: Based on the target radian and the radius R of the target circle B. B Calculate the target coordinates: The target radian As a rotation angle, the character baseline is aligned with the tangent direction of the path at the target coordinate point.

3. The path-based deformable text layout rendering method according to claim 2, characterized in that, Step S40 includes: When the total width of the text Calculate the number of loops. Generate n+1 circular tracks, with the starting angle of each track increasing by 2π, to achieve text wrapping arrangement; n is a positive integer.

4. The path-based deformable text layout rendering method according to claim 1, characterized in that, In step S50, the cross-platform rendering engine is implemented based on the Rust / Wasm architecture, bypassing the native SVG engine and directly generating path data.

5. A path-based deformable text typesetting and rendering device, characterized in that, Using the path-based deformable text layout rendering method as described in any one of claims 1-4, the apparatus includes: The receiving module is used to receive the text content input by the user and the corresponding deformation strength parameters; the text content is laid out horizontally without automatic line wrapping. The path deformation parameter determination module is used to dynamically calculate the radius of curvature of the target path using Newton's iteration method based on the deformation strength parameter; specifically, it includes: using the circular arc path as the deformation carrier according to the value range of the deformation strength parameter; defining the radius R of the reference circle A. A =k×h; h is the character row height; k is a constant representing a multiple of the row height; Based on the deformed target circle B, and setting half the circumference of the reference circle A to be equal to the arc length corresponding to the radius r on circle B, the equation is established as follows: In the formula, I represents the strength parameter, and its value ranges from [0, 100]. Solve using Newton's iteration method: Calculate an approximate value for r, where the derivative is: Set initial value r0= This corresponds to the intermediate state where I=50; termination condition. ; Calculate the radius of the target circle B after deformation. This achieves a smooth mapping between intensity values ​​and curvature; The text positioning and geometric transformation module is used to map the origin coordinates of the characters in the text content to the target path and calculate the rotation angle of each character. The automatic loop processing module for extremely long text is used to automatically generate multiple loop paths and assign text when the total width of the text exceeds the perimeter of the target path. The rendering and canvas processing module is used to output the final graphics through a cross-platform rendering engine, ensuring consistent display across platforms.

6. A device, 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 path-based deformable text rendering method according to any one of claims 1-4.

7. A storage medium, characterized in that, The storage medium stores instructions that, when executed on a terminal, enable the path-based deformable text layout rendering method as described in any one of claims 1-4.

Images