Search

CN-121236228-B - Path-based deformed text typesetting rendering method, device and equipment

CN121236228BCN 121236228 BCN121236228 BCN 121236228BCN-121236228-B

Abstract

The invention discloses a method, a device and equipment for typesetting and rendering deformed characters based on a path, which are used for receiving the character content input by a user and corresponding deformation strength parameters; the method comprises the steps of transversely typesetting text contents by adopting non-automatic folding lines, dynamically calculating the curvature radius of a target path according to deformation strength parameters by using Newton iteration method, mapping origin coordinates of characters of the text contents to the target path, calculating the rotation angle of each character, automatically generating multiple paths and distributing the text when the total width of the text exceeds the perimeter of the target path, and outputting a final graph through a cross-platform rendering engine to ensure the display consistency of each platform. The invention can solve the problems of inconvenient path adjustment, inconsistent cross-platform and incapability of processing ultra-long characters in the typesetting based on path characters in the prior art. By adopting the invention, a designer can preview the bending effect of the characters along the dynamic path in real time only by adjusting the intensity value, and is compatible with all devices and browsers, thereby greatly improving the design efficiency.

Inventors

  • ZHENG WENGANG
  • ZHOU XIAOLIN

Assignees

  • 北京艺源酷科技有限公司

Dates

Publication Date
20260512
Application Date
20250917

Claims (7)

  1. 1. The deformed text typesetting and rendering method based on the path is characterized by comprising the following steps of: S10, receiving text contents and corresponding deformation strength parameters input by a user, wherein the text contents are transversely typeset by adopting non-automatic folding lines; s20, dynamically calculating the curvature radius of the target path through a Newton iteration method according to the deformation strength parameter; S30, mapping the origin coordinates of the characters of the text content to a target path, and calculating the rotation angle of each character; S40, automatically generating a plurality of circles of paths and distributing characters when the total width of the characters exceeds the perimeter of the target path; s50, outputting a final graph through a cross-platform rendering engine, and ensuring display consistency of each platform; Wherein, the step S20 includes: according to the value range of the deformation strength parameter, taking an arc path as a deformation carrier, defining the radius R A = k x h of a reference circle A, wherein h is a character row, k is a constant and represents the multiple of the row; Based on the deformed target circle B, setting half of the circumference of the reference circle A to be equal to the arc length corresponding to the radian r on the circle B, and establishing an equation: wherein I represents an intensity parameter, and the value range is [0,100]; solving by Newton iteration method: calculating an approximation of r, wherein the derivative: Set an initial value r 0 = Corresponding to an intermediate state of i=50, termination condition ; Calculating the radius of the deformed target circle B A smooth mapping of intensity values and curvatures is achieved.
  2. 2. The method for path-based deformed text typesetting rendering according to claim 1, wherein the step S30 includes: calculating a path starting radian according to the total width W of the current line text and the target circle radius R B corresponding to the intensity parameter I: according to the horizontal distance dx of the character before deformation, calculating the accumulated arc length as sum (dx), and calculating the corresponding target radian: Calculating target coordinates according to the target radian and the target circle B radius R B : Setting the target radian As the rotation angle, the character base line is made coincident with the tangential direction of the path at the target coordinate point.
  3. 3. The method for path-based deformed text typesetting rendering according to claim 2, wherein the step S40 includes: When the total width of the characters At the time, the number of cycles is calculated Generating n+1 circular tracks, increasing the initial angle of each track by 2 pi to realize word surrounding arrangement, and taking n as a positive integer.
  4. 4. The method according to claim 1, wherein in the step S50, the cross-platform rendering engine is implemented based on Rust/Wasm architecture, bypasses the native SVG engine, and directly generates path data.
  5. 5. A path-based deformed text typesetting rendering apparatus, wherein a path-based deformed text typesetting rendering method as claimed in any one of claims 1 to 4 is used, the apparatus comprising: the receiving module is used for receiving the text content and the corresponding deformation strength parameter input by the user, wherein the text content is transversely typeset by adopting a non-automatic folding line; The path deformation parameter determining module is used for dynamically calculating the curvature radius of the target path through a Newton iteration method according to the deformation strength parameter, and concretely comprises the steps of taking an arc path as a deformation carrier according to the value range of the deformation strength parameter, defining a radius R A = k x h of a reference circle A, wherein h is a character row, k is a constant and represents the multiple of the row; Based on the deformed target circle B, setting half of the circumference of the reference circle A to be equal to the arc length corresponding to the radian r on the circle B, and establishing an equation: wherein I represents an intensity parameter, and the value range is [0,100]; solving by Newton iteration method: calculating an approximation of r, wherein the derivative: Set an initial value r 0 = Corresponding to an intermediate state of i=50, termination condition ; Calculating the radius of the deformed target circle B Smooth mapping of the intensity value and the curvature is realized; the character positioning and geometric transformation module is used for mapping the original point coordinates of the characters of the character content to a target path and calculating the rotation angle of each character; the automatic circulation processing ultralong character module is used for automatically generating a plurality of circles of paths and distributing characters when the total width of the characters exceeds the perimeter of the target path; and the rendering and canvas processing module is used for outputting the final graphics through a cross-platform rendering engine to ensure the display consistency of each platform.
  6. 6. An apparatus, comprising: And a memory communicatively coupled to the at least one processor; Wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of path-based morphed text layout rendering of any of claims 1 to 4.
  7. 7. A storage medium having stored therein instructions which, when executed on a terminal, enable the path-based deformed text typesetting rendering method of any one of claims 1-4.

Description

Path-based deformed text typesetting rendering method, device and equipment Technical Field The invention relates to the technical field of intersection of mobile Internet and computer graphic processing, in particular to a method, a device and equipment for typesetting and rendering deformed characters based on paths, which are suitable for annular LOGO design, dynamic subtitle generation and cross-platform UI component development, and particularly solve the problem of rendering difference of H5 pages in iOS/Android. Background The existing text typesetting technology based on the path mainly relies on a textPath mechanism in SVG (Scalable Vector Graphics) standard, and the core principle is to forcedly attach text characters to a predefined path track. Details of implementation of the prior art are described below: path definition layer: a base path is created through the < path > element of SVG, such as the circular path C shown in the figure, which is defined by the following parameters: The starting point coordinates (x 0, y 0), the arc parameters including radius r, rotation angle theta, large arc mark largeArc, direction mark sweep and end point coordinates (x 1, y 1), the corresponding SVG path instruction being M x y 0A rr theta 00X1 y1 (meaning that an arc is drawn from the start point to the end point). Text and path association layer: the text content is wrapped with < text > elements and bound to path C by < textPathxlink:href= "# pathC"/>. At this point, the SVG rendering engine performs the following operations: 1) Sequentially placing the base line starting point of each character at the starting point position of the path C according to the character sequence; 2) And calculating the rotation angle of each character according to the tangential direction of the path C, so that the character base line is consistent with the path tangential line. For example, the rotation angle of the character "text" is the tangent slope tan θ of the path at that point. Rendering execution layer: SVG rendering engines of different platforms, such as the Blink engine (Chrome), gecko engine (Firefox), webKit engine (Safari), calculate rendering coordinates from the path geometry data and text styles (fonts, font sizes, colors, etc.), character by character. Key limitations include: Once the shape of the path is defined, the path cannot be dynamically adjusted through parameters, and if the deformation degree of the characters (such as changing from a straight line to an arc) needs to be changed, the path parameters must be manually modified; The rendering effect is highly dependent on the implementation details of engine pair textPath, and different platforms may output different results due to the tangential line calculation accuracy and the character spacing processing logic difference. . However, the prior textPath technology based on SVG has the following defects: (1) Deformation strength can not be dynamically adjusted, and manual path calculation is relied on; The text deformation effect is uniquely determined by the path geometry. For example, if the straight path is required to be gradually curved into an arc, arc parameters (such as radius, start point and end point) corresponding to different curvatures need to be manually calculated, and smooth transition cannot be realized through a single parameter (such as "intensity value"). The designer or developer needs to repeatedly adjust the path control point by means of a professional tool (such as Adobe Illustrator), path data needs to be regenerated each time the parameters are changed, the operation cost is high, and real-time preview is difficult to realize. (2) The cross-platform rendering effect is inconsistent and the compatibility is poor; Different platforms have differences in the implementation of the SVG standard. For example, the difference in the calculation accuracy of the path tangent angle by the mobile terminal WebView (e.g., iOS WKWebView and Android Chrome WebView) may cause the rotation deviation of the characters to be 1-2 degrees, and the old browser (e.g., IE 11) does not support the text arrangement of the complex path, which may cause the text overlapping or cutting. The practical influence causes that the character spacing, the bending radian and the rotation angle of the same set of SVG codes displayed on different devices are possibly inconsistent, and a great deal of effort is required to be invested in compatibility debugging. (3) Circular arrangement incapable of automatically processing ultra-long characters When the total length of the text exceeds the path length (e.g. the path is a circle with a perimeter of 200px and the total width of the text is 300 px), the prior art may directly cut off the excess, or require a developer to manually copy the path and write loop logic. The position of each character needs to be accurately calculated through manual circulation, so that dislocation at joints is avoided, development di