An arc-shaped text rendering method and system based on HTML5 canvas

Abstract

The application provides an arc-shaped text rendering method and system based on HTML5 Canvas, and relates to the technical field of electric digital data processing. The method comprises the following steps: performing all complex layout calculations in a virtual canvas created according to a preset magnification and independent of the size of a real canvas, accurately calculating the total arc length required for text to develop along an arc line according to text content and configuration, and determining the accurate position and posture of each character on the arc line, so as to generate an initial arc-shaped text image with high precision. A close virtual bounding box is dynamically calculated for the initial image. By comparing the size of the bounding box with the size of a virtual target display range, a global adaptive scaling ratio is obtained, the ratio is applied to the initial arc-shaped text, a final adjustment is performed in combination with the preset magnification, the arc-shaped text is accurately rendered onto the real canvas, and a final image is output. The complete and distortion-free rendering effect of text along an arc-shaped path is realized in a non-preset and diversified canvas scene.

Description

Technical Field

[0001] This application relates to the field of electronic digital data processing technology, and in particular to a method and system for rendering arc-shaped text based on HTML5 Canvas. Background Technology

[0002] In the field of web front-end development, using the HTML5 (Hyper Text Markup Language 5) Canvas API to draw dynamic graphics and text is a core technology. Especially in scenarios such as data visualization and online design tools, it is often necessary to lay text along specific curves such as arcs to optimize visual effects. The core requirement is to achieve the complete presentation of text along a preset arc path within canvas spaces of different sizes and proportions.

[0003] Currently, there is a technology for adapting curved text based on a preset template for canvas size. This technology pre-sets corresponding curved path parameters (including arc radius, starting angle, and text spacing coefficient) and font size calculation models for several common canvas sizes (such as 1080×1920 pixel portrait screen, 1920×1080 pixel landscape screen, etc.). When the current canvas size is detected to match the preset template, the parameters of the corresponding template are directly called to render the curved text, thereby achieving a complete presentation of curved text in several preset canvas scenarios.

[0004] However, this existing technology relies on predefined canvas size templates. When encountering non-preset canvas usage scenarios (such as irregularly shaped canvases with custom proportions or dynamic canvases that automatically adjust their size based on content), due to the lack of corresponding parameter template support, it either cannot effectively adapt to curved text, resulting in incomplete text rendering or chaotic layout, or it requires manual adjustment of curved path parameters and font size. This makes it difficult to guarantee the consistency of curved text rendering effects under different non-preset canvas scenarios and fails to meet the demand for adaptive and complete rendering of curved text under diverse canvas usage scenarios. Summary of the Invention

[0005] This application provides a method and system for rendering curved text based on HTML5 Canvas, which solves the problem that traditional technologies rely on preset canvas size templates, which are difficult to adapt effectively in non-preset, irregular or dynamic canvas scenarios, resulting in incomplete rendering of curved text, chaotic layout or inconsistent effects.

[0006] Firstly, this application provides a method for rendering curved text based on HTML5 Canvas, the method comprising:

[0007] Determine the real Canvas canvas and its corresponding target display area parameters; based on the real Canvas canvas and the target display area parameters, determine a virtual Canvas canvas with a preset magnification and its corresponding virtual target display area parameters; determine the text configuration parameters for the text to be rendered, which at least include the text content, target font type, target character spacing, target font color, and target radian information; when the radian in the target radian information is not 0, determine the independent character width of each character in the virtual Canvas canvas based on the text content and the preset virtual font size, and sum all the independent character widths and the virtual character spacing between characters to calculate the total virtual arc length required for the text to unfold along the arc. This virtual character spacing is combined with the preset magnification. The initial arc-shaped text is obtained by determining the spacing between the target text and the target text; determining the position and rotation angle of each character on the total virtual arc length, and performing virtual rendering on the virtual Canvas to obtain the initial arc-shaped text; determining the virtual bounding box of the initial arc-shaped text based on the position and rotation angle, scaling the virtual bounding box to match the virtual target display range parameters, and the scaling of the virtual bounding box is related to the scaling of the initial arc-shaped text; scaling and adjusting the initial arc-shaped text based on the preset magnification to obtain the standard arc-shaped text; optimizing the rendering of the standard arc-shaped text on the real Canvas according to the preset rendering attributes to obtain the final rendering result, and converting the final rendering result into image data for output to the client.

[0008] By employing the aforementioned technical solution, the width and total arc length of each character are precisely calculated in virtual space using standardized virtual font sizes, ensuring the stability and accuracy of layout calculations, unaffected by changes in the actual canvas size. Next, the core step involves generating a precise virtual bounding box for the virtually rendered curved text and matching it with the virtual target display area, dynamically calculating the global scaling ratio. This "layout first, scaling later" strategy fundamentally solves the limitations of existing technologies that rely on preset templates. It allows the curved text to adaptively adjust its size based on the dynamically calculated scaling ratio, regardless of changes in the size and proportion of the actual canvas. This ensures a complete, distortion-free, and consistent rendering effect of the text along the curved path in any non-preset, diverse canvas scenario.

[0009] In conjunction with some embodiments of the first aspect, in some embodiments, the step of determining the position and self-orientation rotation angle of each character on the total virtual arc length, and performing virtual rendering on the virtual Canvas to obtain initial arc-shaped text specifically includes: determining arc path parameters based on the total virtual arc length and the target arc information, the arc path parameters including the arc radius of the virtual arc used to locate all characters; for any target character in the text to be rendered, taking the corresponding center positioning angle on the virtual arc as the rendering position, the center positioning angle is calculated as follows: obtaining a preset starting angle; determining the virtual font size and virtual character spacing of all preceding characters before the target character, and the cumulative arc angle occupied on the virtual arc; determining half a character arc angle occupied on the virtual arc by half the independent character width of the target character itself; summing the starting angle, the cumulative arc angle, and the half character arc angle to obtain the center positioning angle, thereby determining the rendering position of the target character.

[0010] By employing the aforementioned technical solution, aligning each character with its geometric center to the center of its designated position on the arc, it is ensured that each character is precisely centered on its assigned arc segment. Ultimately, this guarantees that regardless of changes in text content, font, or font size, the distribution of characters on the arc remains uniform and symmetrical, resulting in a visually more balanced and professional high-quality arc-shaped text layout.

[0011] In conjunction with some embodiments of the first aspect, in some embodiments, the step of determining the position and self-orientation rotation angle of each character on the total virtual arc length, and performing virtual rendering on the virtual Canvas to obtain initial arc-shaped text specifically includes: determining the self-orientation rotation angle corresponding to the target character based on the center positioning angle and according to a preset character orientation mode, the character orientation mode including an upper arc orientation mode and a lower arc orientation mode; the upper arc orientation mode is a mode in which the vertical axis direction of the target character is away from the center of the virtual arc, and the self-orientation rotation angle in the upper arc orientation mode is the character baseline rotating along the external tangent direction of the virtual arc; the lower arc orientation mode is a mode in which the vertical axis direction of the target character is towards the center of the virtual arc, and the self-orientation rotation angle in the lower arc orientation mode is the character top rotating along the internal tangent direction of the virtual arc.

[0012] By employing the aforementioned technical solutions, two modes define two diametrically opposed yet intuitively design-compliant orientation rules for characters relative to the center of the circle. By calculating the rotation angle related to the tangent of the arc at the character's location, independent adjustment of each character's posture is achieved. This refined control over character posture makes the presentation of curved text richer and more flexible, easily achieving various common design effects such as text wrapping around the outside or inside of an arc. This significantly enhances the artistic expressiveness and applicability of the rendering method, enabling it to meet more advanced and creative visual design needs.

[0013] In some embodiments of the first aspect, after determining the virtual bounding box of the initial arc-shaped text by combining the position and the self-orientation rotation angle, the method further includes: comparing the geometric center of the virtual bounding box with the preset center of the virtual Canvas to obtain a global centering offset; and using Canvas transformation to perform a one-time global translation of the coordinate system of the entire virtual Canvas based on the global centering offset, so that the geometric center is aligned with the preset center.

[0014] By adopting the above technical solution, a one-time global centering calibration step is introduced. By calculating the "global centering offset" between the geometric center of the virtual bounding box and the preset center of the virtual canvas, and using Canvas transformation to perform a one-time translation of the entire coordinate system, the entire curved text assembly is cleverly aligned as a whole. Compared to the solution of performing complex offset compensation on the coordinates of each character during the layout stage, this approach is logically clearer and computationally more efficient. The direct benefit is that regardless of the curvature, length, or content of the curved text, the final rendered graphic always maintains perfect center alignment within the target display area, effectively avoiding visual deviation problems caused by the asymmetry of the curves, and ensuring the balance and professionalism of the final composition.

[0015] In conjunction with some embodiments of the first aspect, in some embodiments, the step of determining the virtual bounding box of the initial arc-shaped character by combining the position and the self-orientation rotation angle specifically includes: obtaining the font metric parameters of the target font type at the preset virtual font size, the font metric parameters including at least the width, rising part, and falling part of each character; for any target character, determining the coordinates of the four corner points of the initial rectangular boundary in the local coordinate system based on the font metric parameters; calculating the transformed coordinates of the corresponding four corner points in the virtual coordinate system through mathematical transformation according to the position on the virtual arc and the self-orientation rotation angle; summarizing all the transformed coordinate points of all characters to form a vertex set; calculating the minimum aligned bounding box that can completely enclose the vertex set, and using it as the virtual bounding box.

[0016] By employing the aforementioned technical solution, this bottom-up, precise calculation, compared to bounding box determination methods based on experience or estimation, can generate a virtual bounding box that closely matches the actual rendered outline and has no redundant space. This provides an extremely accurate dimensional basis for subsequent adaptive scaling steps, ensuring that the scaled curved text can maximize the use of the target display space and avoid problems such as text being too small due to an excessively large bounding box, or text being cropped due to an excessively small bounding box.

[0017] In conjunction with some embodiments of the first aspect, in some embodiments, before the step of performing virtual rendering on the virtual Canvas, the method further includes: setting a rendering cache to store the image data of the most recently generated initial arc-shaped text and the corresponding virtual bounding box; checking whether the current text configuration parameters are the same as the text configuration parameters used when generating the rendering cache; if they are the same, skipping the steps of virtual rendering and determining the virtual bounding box, and directly reading the image data of the initial arc-shaped text and the virtual bounding box from the rendering cache; if they are different, continuing to perform the steps of virtual rendering and determining the virtual bounding box, and updating the rendering cache with the new results after completion.

[0018] By adopting the above technical solution, a rendering caching mechanism is introduced before the virtual rendering step. This mechanism stores the most recently successfully generated initial arc-shaped text image data and its virtual bounding box, and associates it with the text configuration parameters on which it was generated. Each time rendering is requested, the system first checks whether the current configuration parameters match those in the cache. If they match, it means that there is no need to repeatedly perform a series of computationally intensive operations from character measurement and layout calculation to virtual rendering; the cached results can be reused directly. This design greatly optimizes system performance, especially in scenarios where users interact with the interface frequently (such as adjusting text content and color in real time). It effectively avoids unnecessary repetitive calculations, significantly reduces CPU load and response latency, thereby providing users with a smoother, more immediate operational feedback and rendering experience.

[0019] In conjunction with some embodiments of the first aspect, in some embodiments, the step of scaling the virtual bounding box to match the virtual target display range parameter specifically includes: calculating the width scaling ratio between the width of the virtual target display range parameter and the width of the virtual bounding box; calculating the height scaling ratio between the height of the virtual target display range parameter and the height of the virtual bounding box; comparing the width scaling ratio and the height scaling ratio, and selecting the smaller of the two as the final adaptive scaling ratio; applying the adaptive scaling ratio to the initial curved text to achieve proportional scaling so that the initial curved text can be fully contained within the virtual target display range while maintaining its original aspect ratio.

[0020] By employing the aforementioned technical solution, it is possible to place the curved text completely within the target display area while strictly maintaining its original, natural proportions determined by the font and curvature. This is crucial for ensuring the readability and aesthetic appeal of the text, ultimately enabling the curved text to be presented in its most harmonious and clear form within any size and proportion of the target display frame.

[0021] In a second aspect, this application provides an arc-shaped text rendering system, which includes: one or more processors and a memory; the memory is coupled to the one or more processors, and the memory is used to store computer program code, the computer program code including computer instructions, and the one or more processors call the computer instructions to cause the arc-shaped text rendering system to perform the method described in the first aspect and any possible implementation thereof.

[0022] Thirdly, this application provides a computer-readable storage medium including instructions that, when executed on an arc-shaped text rendering system, cause the arc-shaped text rendering system to perform the method described in the first aspect and any possible implementation thereof.

[0023] Fourthly, this application provides a computer program product that, when run on an arc-shaped text rendering system, causes the arc-shaped text rendering system to perform the method described in the first aspect and any possible implementation thereof.

[0024] One or more technical solutions provided in the embodiments of this application have at least the following technical effects or advantages:

[0025] 1. By adopting a two-stage rendering strategy that first performs high-precision layout and bounding box calculation in an independent virtual canvas, and then dynamically and adaptively scales according to the actual target range, it effectively solves the technical problem that existing technologies cannot handle non-standard, irregular, and dynamic canvases due to reliance on preset size templates, resulting in incomplete text rendering or chaotic layout. Thus, it achieves a universal adaptive rendering effect that can automatically calculate the best scaling parameters in canvas scenes of any size and proportion, ensuring that curved text is presented completely, clearly, and consistently.

[0026] 2. By incorporating the arc angle of half the width of each character into the positioning calculation, the geometric center of each character is precisely aligned to its predetermined position on the virtual arc. This effectively solves the technical problems of uneven character spacing and asymmetrical visual distribution caused by simply arranging characters sequentially along the arc in existing arc-shaped text layout methods. As a result, regardless of changes in text content or font, all characters can be evenly and symmetrically distributed on the arc, thus significantly improving the balance and professional aesthetics of the arc-shaped text layout.

[0027] 3. By employing a processing mechanism that associates the rendering results (including the initial arc-shaped text image and virtual bounding box) with the text configuration parameters that generated the results and performs caching and reuse, the technical problem of repeatedly performing high-consumption calculations such as character measurement and layout rendering when users interact frequently or render the same content repeatedly, resulting in system response delays and low performance, is effectively solved. This achieves the technical effect of avoiding repeated calculations by directly reading the cache when the text configuration parameters remain unchanged, thereby significantly reducing system resource consumption and significantly improving rendering efficiency and user operation smoothness. Attached Figure Description

[0028] Figure 1 This is a flowchart illustrating the method for rendering curved text based on HTML5 Canvas in an embodiment of this application.

[0029] Figure 2 This is a scene diagram of the arc text rendering method based on HTML5 Canvas in the embodiments of this application;

[0030] Figure 3 This is a schematic diagram of the physical device structure of an arc-shaped text rendering system in an embodiment of this application. Detailed Implementation

[0031] The terminology used in the following embodiments of this application is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include the plural expressions as well, unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in this application refers to and includes any or all possible combinations of one or more of the listed items.

[0032] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as implying or suggesting relative importance or implicitly indicating the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature, and in the description of the embodiments of this application, unless otherwise stated, "multiple" means two or more.

[0033] For ease of understanding, the method provided in this implementation is described in process below. Please refer to [link / reference]. Figure 1 This is a flowchart illustrating the method for rendering curved text based on HTML5 Canvas in this application embodiment.

[0034] S101. Determine the virtual Canvas with a preset magnification and the corresponding virtual target display range parameters based on the real Canvas and the target display range parameters;

[0035] The "real Canvas" refers to the HTML5 Canvas element instance used to ultimately display graphics and text in a real-world application scenario. It has actual physical dimensions, determining the size and resolution of the final content. The "target display area parameter" represents the parameters of the area on the real Canvas where the curved text is expected to be displayed, such as the width, height, and position of the area. The "preset scaling factor" is a pre-defined ratio used to control the degree to which the virtual Canvas is enlarged or reduced relative to the real Canvas. The virtual Canvas is a logical canvas created based on the real Canvas according to the preset scaling factor. It has a higher resolution for more precise layout calculations and rendering operations. The "virtual target display area parameter" corresponds to the virtual Canvas and represents the parameters of the area on the virtual Canvas where the curved text is expected to be displayed. It has a certain proportional relationship with the target display area parameter on the real Canvas and is determined by the preset scaling factor.

[0036] When an arc-shaped text rendering system begins operation, it first needs to define the actual canvas for the final displayed content and the target area for displaying the arc-shaped text. For example, in an online poster design tool, the user creates a poster canvas of a specific size as the actual canvas and sets an area for placing the arc-shaped text. The size and position of this area constitute the target display area parameters. Next, the system creates a virtual canvas based on a pre-set magnification (let's say 2). This means the virtual canvas size is the actual canvas size multiplied by the preset magnification. For instance, if the actual canvas is 300px wide and 200px high, with a preset magnification of 2, the virtual canvas will be 600px wide and 400px high. The virtual canvas has a higher resolution, allowing for more accurate text layout calculations and reducing blur and distortion. Simultaneously, the target display area parameters are adjusted according to the preset magnification to determine the virtual target display area parameters, ensuring that subsequent operations in the virtual environment correspond to the final display effect on the actual canvas.

[0037] S102. Determine the text configuration parameters of the text to be rendered. The text configuration parameters shall include at least the text content, target font type, target character spacing, target font color, and target curvature information.

[0038] Among them, the text to be rendered represents the text information that needs to be presented in an arc shape on the Canvas; the text content refers to the specific character combination of these characters, such as "Welcome to our website"; the target font type is used to specify the font used for the text, such as "SimSun" or "Arial"; the target character spacing represents the expected spacing between adjacent characters; the target font color refers to the final color of the text; and the target curvature information is used to represent the degree of curvature and related parameters of the arc along which the text is drawn, such as the radius, starting angle, and ending angle of the arc.

[0039] When the system is ready to render curved text, these text configuration parameters need to be determined. In a data visualization project, to add curved label text to the edge of a circular chart, the specific content of this text needs to be clearly defined, such as the name corresponding to the chart data, "Product A Sales Volume," etc. A suitable font also needs to be selected; for a clean and modern style, "Microsoft YaHei" might be chosen. Appropriate text spacing should be set according to the overall chart layout and aesthetic requirements to avoid the text being too crowded or sparse. To highlight key points, the text color corresponding to important data might be set to a striking color, such as green. Based on the shape of the chart's circle, the curvature information of the text along the arc should be determined; for example, the arc radius is related to the chart radius, and the starting and ending angles are determined based on the text's position on the chart.

[0040] Optionally, a dedicated text configuration area can be provided on the user interface. Users can input or select text content, font type, text spacing, font color (selectable via a color picker), and related radian information (such as radius, start angle, and end angle). The system then uses the user's input and selections as text configuration parameters. For example, in an online graphic design software, there might be a dedicated text attribute settings panel. Users can input text in a text box, select a font from a drop-down menu, set text spacing and radian parameters in the input box, and select the font color using a color picker. Alternatively, if the text content comes from a data interface, the system retrieves the text content from the interface, along with associated font, color, and other configuration information. Target text spacing and target radian information are determined based on pre-defined template rules or algorithms. For example, in an e-commerce data visualization system, product names are retrieved from a database as text content. Different font and color configurations correspond to different product categories, and text spacing and radian information are calculated according to the default rules of the chart type.

[0041] S103. When the radian in the target radian information is not 0, determine the independent character width of each character in the virtual Canvas based on the text content and the preset virtual font size, and sum up all the independent character widths and the virtual text spacing between characters to calculate the total virtual arc length required for the text to unfold along the arc. The virtual text spacing is obtained by combining the preset multiplier and the target text spacing.

[0042] Among them, a non-zero radian value in the target radian information indicates that the text needs to be arranged according to a certain arc shape, rather than a horizontal or vertical straight line arrangement; the text content is the specific character combination of the text to be rendered; the preset virtual font size is the font size pre-set in the virtual Canvas environment, used to determine the size of the characters; the independent character width represents the horizontal width occupied by each character on the virtual Canvas; the virtual text spacing refers to the distance between characters in the virtual Canvas to make the text arrangement more beautiful and reasonable, and it is determined by the preset magnification and the target text spacing; the total virtual arc length represents the total length occupied by all characters and their spacing after unfolding along the arc.

[0043] When the system obtains target radian information indicating that the text needs to be arranged along an arc, the system determines the independent character width of each character based on the preset virtual font size and using font measurement methods or tools. This can be determined when the radian is 0, because the length of a straight line and the length of a curve are the same. Character widths differ across fonts and sizes; for example, the widths of the "O" and "i" in the Arial font at 16px are significantly different. Next, the virtual text spacing is calculated. Assuming a preset multiplier of 2 and a target text spacing of 5px, the virtual text spacing is 5 × 2 = 10px. Then, the independent character width of each character is successively added to the virtual text spacing between characters to obtain the total virtual arc length required for the text to unfold along the arc. If the menu text is "Home", "Products", and "About Us", and the individual character widths of "Home", "Page", "Products", "About", "Us", and "About Us" are 10px, 8px, 12px, 10px, 8px, 6px, 8px, and 8px respectively, with a virtual text spacing of 10px between characters, then the total virtual arc length is (10+10+8+10+12+10+10+6+10+8+10+8)px = 112px. This total virtual arc length is an important basis for subsequently determining the position of the characters on the arc.

[0044] S104. Determine the position and rotation angle of each character on the total virtual arc length, and perform virtual rendering on the virtual Canvas to obtain the initial arc-shaped text.

[0045] The total virtual arc length is the total length occupied by all characters and their spacing after unfolding along the arc, calculated in the previous step. The position of each character on the total virtual arc length represents the specific location of the character on the arc path, usually measured by angle or distance. The self-attitude rotation angle is used to represent the angle of rotation of the character around its own center point or a reference point to achieve the fit between the character and the arc. The initial arc text refers to the text graphic that has been initially generated by virtual rendering, in which the characters are arranged on the arc according to the calculated position and attitude rotation angle.

[0046] After obtaining the total virtual arc length, the system needs to determine the specific position and posture of each character on the arc. When the arc-shaped text rendering system performs this step, it operates based on the already obtained total virtual arc length and target radian information. For example, in a scenario of creating a circular chart annotation, arc-shaped text descriptions need to be added to the chart's edges. First, the virtual arc radius in the arc path parameters is determined based on the total virtual arc length and target radian information. Assuming the total virtual arc length is 80px and the central angle of the arc in the target radian information is 180 degrees (i.e., π radians), the arc length formula is used... (l is the arc length, r is the radius, (in radians), the radius can be derived from this. The virtual arc can be drawn using this radius as its radius and any point on the virtual canvas as its center. Next, for each target character in the text to be rendered, its center positioning angle is calculated. First, a preset starting angle is obtained, for example, set to 0 degrees. Then, the cumulative radian angle occupied by the virtual font size and virtual text spacing of all preceding characters on the virtual arc is calculated. If there are two preceding characters, the first character's virtual font size occupies 10 degrees and its virtual text spacing occupies 5 degrees, and the second character's virtual font size occupies 12 degrees and its virtual text spacing occupies 5 degrees, then the cumulative radian angle is (10+5+12+5=32) degrees. Then, the half-character radian angle occupied by half the width of the target character itself on the virtual arc is determined. Assuming the target character's width corresponds to a radian angle of 14 degrees on the arc, then the half-character radian angle is 7 degrees. Finally, the starting angle, cumulative radian angle, and half-character radian angle are added together: 0 + 32 + 7 = 39 degrees. This 39 degrees is the center positioning angle of the target character. The system will render the target character on the corresponding position on the virtual arc based on this angle, thereby ensuring that the character is evenly and accurately distributed on the arc.

[0047] It should be noted that when more flexible layouts are needed, such as centering the curved text within the virtual target display area, the starting angle can be calculated. Assuming the midpoint of the curved text is to be directly above the center of the virtual target display area, the central angle corresponding to the total virtual arc length of the curved text is known to be... The center coordinates of the virtual arc are (x0, y0), and the center coordinates of the virtual target display area are (xc, yc). First, calculate the angle corresponding to the midpoint of the arc-shaped text. Then, based on information such as the total number of characters, the starting angle can be deduced. The specific steps are as follows: Determine the angle corresponding to the midpoint of the curved text. For example, to make the midpoint directly above the center, then =90°. Calculate the central angle corresponding to the total virtual arc length. It is calculated based on the number of characters, the independent character width of each character, and the spacing between virtual characters. The value of . Calculate the starting angle. This ensures that the curved text is centered within the virtual target display area, and the starting angle is calculated using this geometric relationship.

[0048] Optionally, the system creates an object containing parameters such as the total virtual arc length and target radian information, and writes a dedicated function to process this object. Inside the function, the virtual arc radius is calculated according to the arc length formula. For the calculation of the center positioning angle, variables are set to store the starting angle, cumulative radian angle, and half-character radian angle. The preceding character list is traversed, and the radian angle of each preceding character and its spacing is calculated and accumulated into the cumulative radian angle variable. The half-character radian angle is calculated based on the target character width and radius. Finally, the three angles are added together to obtain the center positioning angle.

[0049] After determining the center positioning angle of the target character and before performing virtual rendering on the virtual Canvas, it is necessary to adjust the character's posture so that the arc-shaped text both conforms to the arc shape and has good readability. In actual operation, the arc-shaped text rendering system first obtains two key inputs: one is the determined center positioning angle of the target character, and the other is the character orientation mode preset by the user or the system (upward arc orientation mode or downward arc orientation mode). Then, it calculates its own posture rotation angle in two steps. The first step is to determine the tangent direction of the virtual arc at the character position based on the center positioning angle: Since the tangent direction of the virtual arc is perpendicular to the radius direction at that point (the radius points to the center, and the angle between the tangent and the radius is 90°), the system first calculates the direction angle of the radius at that position based on the center positioning angle (if the center positioning angle is θ, then the radius direction angle is θ, i.e., rotating counterclockwise by θ angle from the horizontal to the right towards the center). Then, through the relationship "tangent direction angle = radius direction angle ± 90°", the direction angle of the external or internal tangent is determined—where the choice of "±" needs to be combined with the drawing direction of the virtual arc (such as clockwise or counterclockwise) to ensure that the calculated tangent direction is consistent with the arc direction (for example, if the virtual arc is drawn counterclockwise, the external tangent direction angle is usually the radius direction angle + 90°). The second step is to convert the tangent direction angle into its own posture rotation angle according to the character orientation mode:

[0050] If the orientation is upward arc, the rule is "the vertical axis of the character is away from the center of the circle, and the character baseline rotates along the direction of the external tangent." In this case, the system will use the direction angle of the external tangent of the virtual arc as the target direction angle of the character baseline, and then combine it with the default posture of the character (in the default state, the character baseline is horizontal to the right, and the rotation angle is 0°) to calculate the difference in rotation angle. For example, if the direction angle of the external tangent is 120° (that is, rotate 120° counterclockwise from horizontal to the right), then the character's own posture rotation angle is 120°. After rotation, the character baseline will be completely aligned with the external tangent. At the same time, because the external tangent is located outside the virtual arc, the vertical axis of the character (the line perpendicular to the baseline) will naturally be away from the center of the circle, which meets the requirements of the upward arc orientation mode.

[0051] If the orientation is downward arc, the rule is "the character's vertical axis faces the center of the circle, and the top of the character rotates along the direction of the inscribed line." In this case, the system first uses the direction angle of the virtual arc's inscribed line as the target direction angle for the top of the character. Then, it calculates the rotation angle based on the character's default posture (in the default state, the top of the character is vertically upward, with an angle of 90° to the horizontal rightward direction). Assuming the inscribed line direction angle is 210°, the top of the character needs to rotate from the default 90° to 210°, a difference of 120° (210° - 90°). This difference is the character's own posture rotation angle. After rotation, the top of the character is perfectly aligned with the inscribed line, and because the inscribed line is located inside the virtual arc, the character's vertical axis naturally faces the center of the circle, meeting the requirements of the downward arc orientation mode.

[0052] Through the above process, the rotation angle of each target character can be accurately adapted to its position and preset orientation on the virtual arc, avoiding problems such as characters being "reversed" or "inappropriate tilt angle" that affect reading, laying the foundation for the subsequent virtual rendering of visually coordinated initial arc-shaped text.

[0053] In some embodiments, after determining the position of each character on the total virtual arc length and its own orientation rotation angle, but before performing virtual rendering on the virtual Canvas, to improve the system's rendering efficiency and avoid repeatedly performing virtual rendering and virtual bounding box determination operations under the same text configuration parameters, the system first sets up a rendering cache area. This area is specifically used to store the image data of the most recently generated initial arc-shaped text and its corresponding virtual bounding box. Then, the system checks the configuration parameters of the text to be rendered, such as the text content to be rendered being "Hello", the target font type being "Arial", the target text spacing being 2, the target font color being black, and the arc length in the target arc information being 180 degrees, etc., comparing these current text configuration parameters one by one with the text configuration parameters used when generating the rendering cache. If all parameters are the same, it means that the content to be rendered is the same as the previously cached content. To save computing resources and time, the system skips the virtual rendering and virtual bounding box determination steps and directly reads the previously stored initial arc-shaped text image data and virtual bounding box from the rendering cache. This allows for quick acquisition of the required content, and subsequent scaling and other operations can then be performed. If any of the current text configuration parameters differs from those used when generating the cache—for example, the text content changes to "Hi," the target font type changes to "Times New Roman," or the radius in the target radius information changes to 90 degrees—the system will continue with the virtual rendering and virtual bounding box determination steps. After completing the virtual rendering to obtain the initial curved text image data and determining the corresponding virtual bounding box, the system updates these new results to the rendering cache, overwriting the previously stored content, so that it can be directly used the next time the same text configuration parameters are encountered. This mechanism can greatly improve the system's processing speed while ensuring the accuracy of the rendering results, especially in scenarios where the same or similar text content is frequently rendered.

[0054] S105. Determine the virtual bounding box of the initial arc-shaped text by combining the position and the self-position rotation angle, and scale the virtual bounding box so that the corresponding virtual bounding box matches the virtual target display range parameter. The scaling of the virtual bounding box is related to the scaling of the initial arc-shaped text.

[0055] Specifically, the font measurement parameters of the target font type at the preset virtual font size can be obtained first. These parameters include at least the width, rise, and fall of each character. For any target character, the coordinates of the four corner points of the initial rectangular boundary in the local coordinate system are determined based on these font measurement parameters. Then, based on the position on the virtual arc and its own rotation angle, the transformed coordinates of the four corner points in the virtual coordinate system are calculated through mathematical transformation. All transformed coordinate points of all characters are summarized to form a vertex set. The minimum aligned bounding box that can completely enclose this vertex set is calculated and used as the virtual bounding box. "Width of each character" refers to the actual width occupied by a single character in the horizontal direction (excluding character spacing). "Rise" refers to the maximum height of the part above the character baseline (e.g., the distance from the top of the uppercase letter "A" to the baseline). "Fall" refers to the maximum depth of the part below the character baseline (e.g., the distance from the bottom of the lowercase letter "g" to the baseline). These three factors together determine the spatial occupancy range of the character. The local coordinate system is an independent coordinate system established for a single character. It typically uses the character's geometric center or baseline midpoint as the origin, with the x-axis horizontal (positive to the right) and the y-axis vertical (positive upwards). It defines the character's own boundary position. The initial rectangular boundary is the smallest rectangle in the local coordinate system that completely encloses the single character. Its four corner coordinates are calculated using font metric parameters, reflecting the character's original spatial extent in a state without rotation or translation.

[0056] After determining the position and rotation angle of each character on the virtual Canvas, this step is performed to accurately obtain the spatial occupancy of the entire curved text. During the rendering of curved text, since each character is arranged along an arc and has its own rotation angle, the size of a single character alone cannot accurately determine the boundary of the entire curved text. Therefore, this step is necessary to calculate a virtual bounding box that can completely surround all characters, so that subsequent scaling and other processing can be performed to ensure that the curved text correctly fits the virtual target display area.

[0057] First, obtain the font measurement parameters of the target font type at the preset virtual font size. This step needs to be implemented using the relevant Canvas API because different font types and sizes will cause differences in parameters such as character width, rise and fall. For example, when the target font type is Arial and the virtual font size is 20 pixels, it is necessary to measure the actual width of each character (such as 'a', 'b', '1', etc.), as well as the rise and fall heights of the characters in that font. These parameters are the basis for subsequent calculations of character boundaries and directly affect the accuracy of the bounding box.

[0058] Next, for any target character, the coordinates of the four corner points of its initial rectangular boundary in the local coordinate system are determined based on the acquired font metric parameters. In the local coordinate system, the origin (0, 0) is typically the intersection of the character's baseline and its left edge. Therefore, the coordinates of the four corner points of the initial rectangular boundary can be determined based on the font metric parameters. For example, assuming a character has a width of w, an ascent height, and a descent height, the coordinates of the four corner points can be determined as follows: top left corner (0, -ascent), because the ascent is above the baseline, its y-coordinate is negative; top right corner (w, -ascent); bottom right corner (w, descent), because the descent is below the baseline, its y-coordinate is positive; bottom left corner (0, descent). This determines the boundary range of a single character in its own coordinate system. Then, based on the character's position on the virtual arc and its own orientation rotation angle, the transformed coordinates of the corresponding four corner points in the virtual coordinate system are calculated through mathematical transformations. This process involves coordinate rotation and translation transformations. First, the corner coordinates in the local coordinate system need to be rotated around the character's rotation center (usually the character's positioning point on the arc). The rotation angle is the character's own posture rotation angle. The rotation formula is: for a point (x, y), the coordinates (x', y') after rotating by an angle θ are x' = xcosθ - ysinθ, y' = xsinθ + ycosθ. After rotation, the rotated coordinates need to be translated to the character's actual position in the virtual coordinate system, that is, added to the character's coordinates (cx, cy) on the virtual arc to obtain the final transformed coordinates. For example, if the rotation center coordinates of a character are (100, 100), its own posture rotation angle is 30 degrees, and the coordinates of a corner point in its local coordinate system are (5, -10), first calculate the rotated coordinates using the rotation formula, and then add (100, 100) to obtain the transformed coordinates of the corner point in the virtual canvas coordinate system.

[0059] Next, all the transformed coordinates of all characters are aggregated to form a vertex set. This step involves collecting the coordinates of all four transformed corner points of each character to form a set containing all points. For example, if there are three characters, each with four corner coordinates, then the vertex set will contain 12 coordinate points.

[0060] Finally, calculate the minimum aligned bounding box that completely encloses the vertex set and use it as the virtual bounding box. The minimum aligned bounding box requires that each side be parallel to the x-axis and y-axis of the virtual coordinate system, respectively. Therefore, we need to find the minimum x-coordinate (minX), maximum x-coordinate (maxX), minimum y-coordinate (minY), and maximum y-coordinate (maxY) in the vertex set. Then, the rectangle with (minX, minY) as the bottom left corner and (maxX, maxY) as the top right corner is the minimum aligned bounding box, which is the virtual bounding box of the entire curved text. For example, if the minimum x-coordinate in the vertex set is 50 and the maximum is 200, and the minimum y-coordinate is 30 and the maximum is 150, then the virtual bounding box is a rectangle from (50, 30) to (200, 150).

[0061] Optionally, firstly, use the Canvas's measureText() method to obtain the width of each character, and combine this with the rising and falling parts of the font to determine the coordinates of the four corner points of each character in the local coordinate system. Then, based on the position and rotation angle of the character on the virtual arc, use matrix transformation to first construct a rotation matrix to rotate the local coordinates, and then use a translation matrix to translate the rotated coordinates to the corresponding positions in the virtual coordinate system to obtain the transformed coordinates. Finally, iterate through all the transformed coordinates to find the maximum and minimum values ​​of x and y, thereby determining the virtual bounding box.

[0062] After determining the virtual bounding box, the initial curved text is scaled and adjusted to fit the virtual target display area. During the rendering of the curved text, the size of the initial curved text's virtual bounding box may not match the preset virtual target display area. This could result in the bounding box being too large, exceeding the target area and causing incomplete text display, or the bounding box being too small, leaving too much blank space within the target area and affecting the display effect. Therefore, this step is necessary to calculate an appropriate scaling ratio and scale the initial curved text proportionally to ensure it fits completely and appropriately within the virtual target display area.

[0063] First, calculate the width scaling ratio between the width of the virtual target display area parameter and the width of the virtual bounding box. The width of the virtual target display area parameter is the maximum available horizontal length for displaying curved text, set by the user or system, while the width of the virtual bounding box is the actual horizontal length occupied by the entire curved text, calculated earlier. The formula for calculating the width scaling ratio is: Width scaling ratio = Width of virtual target display area parameter ÷ Width of virtual bounding box. Next, calculate the height scaling ratio between the height of the virtual target display area parameter and the height of the virtual bounding box using a similar method. Then, compare the width scaling ratio and the height scaling ratio, and select the smaller value as the final adaptive scaling ratio. This is because if a larger scaling ratio is selected, one direction (width or height) may exceed the virtual target display area, thus preventing the curved text from being fully displayed. Finally, apply the adaptive scaling ratio to the initial curved text to achieve proportional scaling so that the initial curved text is fully contained within the virtual target display area while maintaining its original aspect ratio. When applying scaling, the position coordinates of each character in the initial curved text and the size of the virtual bounding box need to be adjusted according to the scaling ratio. Alternatively, the position coordinates of each character in the initial curved text can be bound to the relative position of the virtual bounding box from the beginning. This means that the character position is determined based on the virtual bounding box. When the scaling ratio is applied to the virtual bounding box, the characters will scale and move synchronously with the bounding box, always maintaining their predetermined position relative to the bounding box. This ensures that the entire curved text is scaled proportionally, maintaining the original aspect ratio while being fully contained within the virtual target display area, avoiding misalignment of the relative positions of the characters and the bounding box.

[0064] S106. Based on the preset scaling factor, the initial arc-shaped text is scaled and adjusted to obtain the standard arc-shaped text;

[0065] Among them, "standard curved text" refers to curved text whose size matches the real Canvas after being scaled by a preset ratio; "scaling adjustment" refers to the transformation operation of shrinking (or enlarging) the initial curved text according to the reciprocal of the preset ratio, so that the text size is adapted to the real Canvas.

[0066] Since the virtual canvas is created based on a preset scaling factor (e.g., enlarging the virtual canvas size by N times for anti-aliasing or improved detail), the initial curved text size is also enlarged by N times accordingly. Directly using this text would result in it appearing too large or too small on the real canvas. Therefore, it is necessary to adjust the scaling to restore the initial curved text size to match the real canvas.

[0067] Since the initial curved text is rendered on a virtual Canvas, all its coordinates and dimensions are based on the virtual canvas's coordinate system. Therefore, these parameters need to be scaled by the reciprocal of a preset ratio. During scaling, the text's proportions must remain unchanged to avoid stretching or compression distortion. The scaling operation applies not only to the text's position coordinates but also to all size-related parameters such as size and spacing. These parameters can be bound to the virtual canvas's positional relationship; that is, the initial curved text's position coordinates, size, spacing, and other size-related parameters on the virtual Canvas are associated with the virtual Canvas's coordinate system. Furthermore, the scaling adjustment must be applied to the entire initial curved text to ensure that the text's relative position, curvature, rotation angle, and other spatial relationships remain consistent, with only the size changing proportionally. The resulting standard curved text, after scaling, has its size and position perfectly adapted to the real Canvas's coordinate system.

[0068] After defining the virtual bounding box and scaling the initial curved text, before rendering the content from the virtual Canvas onto the real Canvas, it's necessary to address any potential positional offset of the curved text within the virtual Canvas. This ensures that the scaled curved text is accurately centered within the virtual Canvas, providing a correct positional basis for subsequent rendering to the real Canvas and final display to the user.

[0069] During the rendering of curved text, although the scaled virtual bounding box can be fully contained within the virtual target display area, its geometric center often does not automatically coincide with the preset center of the virtual Canvas due to differences in scaling ratios and the influence of the initial rendering position. For example, if the preset center coordinates of the virtual Canvas are (500, 300), while the geometric center coordinates of the scaled virtual bounding box are (480, 310), the curved text will shift to the upper left. If no adjustment is made, the final displayed curved text will deviate from the center of the canvas, affecting the visual effect. Therefore, this step is necessary to calculate the offset and perform a global translation to achieve center alignment of the curved text.

[0070] First, calculate the global centering offset between the geometric center of the virtual bounding box and the preset center of the virtual Canvas. The geometric center coordinates of the virtual bounding box are calculated as follows: Geometric center x-coordinate = (left edge x-coordinate + right edge x-coordinate) ÷ 2, Geometric center y-coordinate = (bottom edge y-coordinate + top edge y-coordinate) ÷ 2. The preset center coordinates of the virtual Canvas are typically (virtual Canvas width ÷ 2, virtual Canvas height ÷ 2). The global centering offset is calculated as follows: Offset x = preset center x-coordinate - geometric center x-coordinate, Offset y = preset center y-coordinate - geometric center y-coordinate.

[0071] Then, based on the global center offset, a Canvas transformation is used to perform a one-time global translation of the entire virtual Canvas coordinate system to align the geometric center with the preset center. The Canvas translation transformation is implemented using the `translate()` method, which accepts two parameters: the translation distance in the x-direction and the translation distance in the y-direction. During the translation, the global center offset is passed as a parameter to the `translate()` method, causing the entire coordinate system to move the corresponding distance along the x and y axes. All content drawn on this coordinate system (including curved text) will also move accordingly, thus aligning the geometric center of the virtual bounding box with the preset center of the virtual Canvas.

[0072] It should be noted that when calculating the geometric center of the virtual bounding box, it is necessary to ensure that the scaled bounding box coordinates are used, because the scaling operation will change the position and size of the bounding box, and using the coordinates before scaling will lead to incorrect offset calculations. In addition, when the preset center of the virtual Canvas is not the exact center of the canvas (such as when the user has defined a center position), the calculation should be based on the coordinates set by the user.

[0073] S107. Optimize the rendering of the standard curved text on the real Canvas according to the preset rendering attributes to obtain the final rendering result, and convert the final rendering result into image data and output it to the client.

[0074] Among them, "real canvas" refers to the actual canvas element used to display the text, and its size is the same as the area that the user will ultimately see; "standard curved text" refers to curved text that has been scaled down to be suitable for display on a real canvas; "preset rendering attributes" refers to parameters that are set in advance to make the text look better, such as the text border color, border thickness, shadow (shadow color, blur level, offset distance), transparency, etc.; "optimized rendering" refers to the process of processing the standard curved text according to these preset attributes to make it look more beautiful.

[0075] After obtaining the standard curved text, the goal is to present the processed curved text to the user in an aesthetically pleasing manner and transmit the image data. After determining the rendering environment of the real canvas, the display effect of the standard curved text is optimized according to preset rendering attributes. For example, if a border is included in the preset attributes, the border color and thickness are set first, and then the border is added to the text; if a shadow is included, the shadow color, blur level, and offset distance are set to give the text a three-dimensional feel; if transparency needs adjustment, the transparency parameters are set. When setting these attributes, the order is important; for example, fill the text with color first, then add the border, so that the border is clearly displayed at the edge of the text. During rendering optimization, it is also necessary to ensure that the text is correctly positioned on the real canvas and consistent with the expected position. If the position is incorrect, the canvas coordinates may need to be adjusted to move the text. After rendering is complete, the final curved text image is displayed on the real canvas. If a request to convert an image to an image is received from the client, the image is converted into image data. A common method is to use the canvas's toDataURL() method, which converts the content on the canvas into a Base64 encoded string and supports various image formats, such as PNG and JPEG. After receiving this image data, the client can display it through image elements, or save and print the image.

[0076] In this embodiment, a virtual Canvas is used for high-magnification rendering, and the precise layout of the arc-shaped text is achieved by accurately calculating the character position, rotation angle, and bounding box. At the same time, the text display quality is improved by combining preset scaling and optimized rendering attributes. Therefore, while ensuring the accuracy and visual effect of arc-shaped text rendering, it can flexibly adapt to different display range requirements. This effectively solves the problems of blurring, distortion, layout misalignment, and poor adaptability that are prone to occur in traditional arc-shaped text rendering. Thus, it achieves efficient, accurate, and high-quality rendering of arc-shaped text on HTML5 Canvas, meeting the needs of arc-shaped text display in diverse scenarios.

[0077] The following provides supplementary information regarding the scenario described in this embodiment. Please refer to [link / reference]. Figure 2 This is a schematic diagram of a scenario for rendering arc-shaped text based on HTML5Canvas in an embodiment of this application.

[0078] Figure 2 (a) in the text represents the initial state and input parameters of the rendering method. It includes three core elements:

[0079] Real Canvas: This is the canvas with physical dimensions (W×H) that is ultimately presented to the user.

[0080] Target display area diagram: This is a logical rectangular area (w×h) defined within the actual canvas, which specifies the space into which the curved text must be fully adapted and rendered.

[0081] Text configuration parameters: These are a series of user- or system-defined input values ​​that determine the visual style of the curved text, as shown in the figure. They include the text content ("curve text"), text style (such as the font "Arial", letter spacing), and the curve angle that defines the curvature of the text.

[0082] from Figure 2 The process from (a) to (b) involves the virtualization and high-precision rendering of the rendering environment. The system performs the following operations: First, the system obtains the dimensions (w and h) of the "target display area map" in (a). Then, based on an internally set "preset magnification N" (a value greater than 1 used for supersampling anti-aliasing), these two dimensions are magnified. Finally, a new, user-invisible "virtual Canvas" is created in memory, whose dimensions (W×N×H×N) and internal "virtual target display area map" (w×N×h×N) are both N times the corresponding real dimensions. This step shifts all calculations to a higher-resolution coordinate system, laying the foundation for subsequent precise layout.

[0083] Figure 2 (b) in the diagram represents a high-precision virtual rendering environment that is ready. This is an off-screen canvas of size (W×N×H×N) with a defined rendering target area of ​​size (w×N×h×N). At this point, the canvas is empty, but it is ready to receive high-precision drawing instructions based on the "text configuration parameters" in (a).

[0084] from Figure 2 The process from (b) to (c) is the core of virtual rendering and layout calculation, as shown by the arrow, namely "virtual rendering within the virtual target display area". The specific steps are as follows: The system uses a preset, relatively large virtual font size and, within the virtual canvas environment of (b), performs complex geometric calculations based on the text content ("curve text") and parameters such as curve angles in (a). It precisely measures the width of each character, calculates the total arc length required for the entire text to unfold along the curve, and determines the precise position of each character on the arc and its own rotational posture. Subsequently, the system applies these calculation results to draw high-precision "initial curved text" character by character on the virtual canvas.

[0085] Figure 2 (c) in the diagram represents the intermediate result after virtual rendering is complete. At this point, a clear and precisely laid-out arc-shaped text image has been generated on the virtual Canvas.

[0086] from Figure 2 The process from (c) to (d) is adaptive scaling and final mapping, as shown by the arrow, i.e., "mapping to the actual Canvas". This process includes two key actions:

[0087] Calculating the scaling ratio: The system calculates the virtual bounding box of the actual rendered curved text in (c) and compares the size of this bounding box with the size of the "virtual target display area map" in (b). Through this comparison, the system derives a unique adaptive scaling ratio to ensure that the text can fit perfectly within the target display frame while maintaining its original aspect ratio.

[0088] Drawing onto the real canvas: The system will take the high-precision arc text image in (c), apply the adaptive scaling ratio calculated in the previous step and the reciprocal of the preset magnification to make the final size adjustment, and then draw it into the "target display range map" of the real Canvas in (a). Figure 2 (d) in the text represents the final rendering result. The curved text "curve text" has been rendered precisely within the preset target display area on the real Canvas in a high-quality, lossless, and fully adaptive manner, according to its original configuration, completing the entire rendering process.

[0089] In this embodiment, a two-stage rendering strategy is adopted, which first performs high-precision layout and bounding box calculation in an independent virtual canvas, and then dynamically and adaptively scales the target area according to the actual target area. Therefore, it can dynamically and accurately calculate the global optimal scaling parameters for any target display area of ​​any size and proportion. This effectively solves the technical problem that the prior art cannot cope with non-standard, irregular and dynamic canvases due to the reliance on preset size templates, resulting in incomplete text rendering or chaotic layout.

[0090] The arc-shaped text rendering system in the embodiments of this invention is described below from the perspective of hardware processing. Please refer to [link / reference needed]. Figure 3 This is a schematic diagram of the physical device structure of an arc-shaped text rendering system in an embodiment of this application.

[0091] It should be noted that, Figure 3 The structure of the arc-shaped text rendering system shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.

[0092] like Figure 3As shown, the arc-shaped text rendering system includes a Central Processing Unit (CPU) 301, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 302 or programs loaded from storage portion 308 into Random Access Memory (RAM) 303, such as performing the methods described in the above embodiments. The RAM 303 also stores various programs and data required for system operation. The CPU 301, ROM 302, and RAM 303 are interconnected via a bus 304. An Input / Output (I / O) interface 305 is also connected to the bus 304.

[0093] The following components are connected to I / O interface 305: input section 306 including audio input devices, push-button switches, etc.; output section 307 including a liquid crystal display (LCD) and audio output devices, indicator lights, etc.; storage section 308 including a hard disk, etc.; and communication section 309 including a network interface card such as a LAN (Local Area Network) card, modem, etc. Communication section 309 performs communication processing via a network such as the Internet. Drive 310 is also connected to I / O interface 305 as needed. Removable media 311, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 310 as needed so that computer programs read from them can be installed into storage section 308 as needed.

[0094] In particular, according to embodiments of the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of the present invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing computer programs for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 309, and / or installed from removable medium 311. When the computer program is executed by central processing unit (CPU) 301, it performs the various functions defined in the present invention.

[0095] It should be noted that specific examples of computer-readable storage media may include, but are not limited to: 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), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this invention, a 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.

[0096] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. Each block in a flowchart or block diagram may represent a module, program segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those shown in the drawings.

[0097] Specifically, the arc-shaped text rendering system of this embodiment includes a processor and a memory. The memory stores a computer program. When the computer program is executed by the processor, it implements the arc-shaped text rendering method based on HTML5 Canvas provided in the above embodiment.

[0098] In another aspect, the present invention also provides a computer-readable storage medium, which may be included in the arc-shaped text rendering system described in the above embodiments; or it may exist independently and not assembled into the arc-shaped text rendering system. The storage medium carries one or more computer programs that, when executed by a processor of the arc-shaped text rendering system, cause the arc-shaped text rendering system to implement the HTML5 Canvas-based arc-shaped text rendering method provided in the above embodiments.

[0099] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

[0100] As used in the above embodiments, depending on the context, the term "when..." can be interpreted as meaning "if...", "after...", "in response to determining...", or "in response to detecting...". Similarly, depending on the context, the phrase "when determining..." or "if (the stated condition or event) is interpreted as meaning "if determining...", "in response to determining...", "when (the stated condition or event) is detected", or "in response to detecting (the stated condition or event)".

[0101] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This program can be stored in a computer-readable storage medium, and when executed, it can include the processes described in the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A method for rendering arc-shaped text based on HTML5 Canvas, characterized in that, The method includes: Determine the actual Canvas and the corresponding target display area parameters; Based on the real Canvas and the target display range parameters, a virtual Canvas with a preset magnification and the corresponding virtual target display range parameters are determined; Determine the text configuration parameters of the text to be rendered, wherein the text configuration parameters include at least the text content, target font type, target character spacing, target font color, and target radian information; When the radian in the target radian information is not 0, the independent character width of each character in the virtual Canvas is determined according to the text content and the preset virtual font size. All independent character widths and the virtual text spacing between characters are added together to calculate the total virtual arc length required for the text to unfold along the arc. The virtual text spacing is obtained by combining the preset multiplier and the target text spacing. Determine the position and rotation angle of each character on the total virtual arc length, and perform virtual rendering on the virtual Canvas to obtain the initial arc-shaped text. The virtual bounding box of the initial arc-shaped text is determined by combining the position and the self-position rotation angle. The virtual bounding box is scaled so that the corresponding virtual bounding box matches the virtual target display range parameter. The scaling of the virtual bounding box is related to the scaling of the initial arc-shaped text. The initial arc-shaped text is scaled and adjusted based on the preset magnification to obtain standard arc-shaped text; The standard curved text is optimized and rendered on the real Canvas according to preset rendering attributes to obtain the final rendering result, and the final rendering result is converted into image data and output to the client.

2. The method according to claim 1, characterized in that, The steps of determining the position and rotation angle of each character on the total virtual arc length, and performing virtual rendering on the virtual Canvas to obtain the initial arc-shaped text include: Based on the total virtual arc length and the target radian information, arc path parameters are determined, including the arc radius of the virtual arc used to locate all characters; For any target character in the text to be rendered, the center positioning angle corresponding to the virtual arc is used as the rendering position. The center positioning angle is calculated as follows: Obtain the preset starting angle; Determine the virtual font size and virtual character spacing of all preceding characters before the target character, and the cumulative radian angle occupied on the virtual arc; Determine the half-character radian angle occupied on the virtual arc, which is half the width of the target character itself. The starting angle, the cumulative radian angle, and the half-character radian angle are summed to obtain the center positioning angle, which is used to determine the rendering position of the target character.

3. The method according to claim 2, characterized in that, The steps of determining the position and rotation angle of each character on the total virtual arc length, and performing virtual rendering on the virtual Canvas to obtain the initial arc-shaped text include: Based on the center positioning angle and according to the preset character orientation mode, the self-position rotation angle corresponding to the target character is determined. The character orientation mode includes the upper arc orientation mode and the lower arc orientation mode. The upper arc orientation mode is a mode in which the vertical axis direction of the target character is away from the center of the virtual arc, and the self-attitude rotation angle in the upper arc orientation mode is the character baseline rotating along the external tangent direction of the virtual arc. The downward arc orientation mode is a mode in which the vertical axis of the target character is oriented toward the center of the virtual arc, and the self-position rotation angle in the downward arc orientation mode is the rotation of the top of the character along the inward tangent of the virtual arc.

4. The method according to claim 1, characterized in that, After the step of determining the virtual bounding box of the initial arc-shaped text by combining the position and the self-orientation rotation angle, the method further includes: The geometric center of the virtual bounding box is compared with the preset center of the virtual Canvas to obtain the global center offset. Based on the global center offset, the coordinate system of the entire virtual Canvas is translated globally in one go using Canvas transformation, so that the geometric center is aligned with the preset center.

5. The method according to claim 1, characterized in that, The step of determining the virtual bounding box of the initial arc-shaped text by combining the position and the self-position rotation angle specifically includes: Obtain the font measurement parameters of the target font type under the preset virtual font size, wherein the font measurement parameters include at least the width, rising part, and falling part of each character; For any target character, the coordinates of the four corner points of the initial rectangular boundary in the local coordinate system are determined based on the font metric parameters; Based on the position on the virtual arc and its own rotation angle, the transformed coordinates of the four corner points in the virtual coordinate system are calculated through mathematical transformation. Summarize the coordinates of all transformed points of all characters to form a vertex set; Calculate the smallest aligned bounding box that can completely enclose the set of vertices, and use it as the virtual bounding box.

6. The method according to claim 1, characterized in that, Before the step of performing virtual rendering on the virtual Canvas, the method further includes: Set up a rendering cache to store the image data of the most recently generated initial arc-shaped text and the corresponding virtual bounding box; Check whether the current text configuration parameters are the same as the text configuration parameters used when generating the rendering cache; If they are the same, skip the steps of virtual rendering and determining the virtual bounding box, and directly read the image data of the initial arc-shaped text and the virtual bounding box from the rendering cache; If they are different, continue with the steps of virtual rendering and determining the virtual bounding box, and update the rendering cache with the new result upon completion.

7. The method according to claim 1, characterized in that, The step of scaling the virtual bounding box to match the virtual target display range parameter specifically includes: Calculate the width scaling ratio between the width of the virtual target display range parameter and the width of the virtual bounding box; calculate the height scaling ratio between the height of the virtual target display range parameter and the height of the virtual bounding box; Compare the width scaling ratio and the height scaling ratio, and select the smaller of the two as the final adaptive scaling ratio; The adaptive scaling ratio is applied to the initial curved text to achieve proportional scaling so that the initial curved text can be fully contained within the display area of ​​the virtual target while maintaining its original aspect ratio.

8. A curved text rendering system, characterized in that, The arc-shaped text rendering system includes: one or more processors and a memory; the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code including computer instructions, and the one or more processors call the computer instructions to cause the arc-shaped text rendering system to perform the method as described in any one of claims 1-7.

9. A computer-readable storage medium comprising instructions, characterized in that, When the instruction is executed on the arc-shaped text rendering system, the arc-shaped text rendering system performs the method as described in any one of claims 1-7.

10. A computer program product, characterized in that, The computer program product includes a computer program that, when run on an arc-shaped text rendering system, causes the arc-shaped text rendering system to perform the method as described in any one of claims 1-7.

Images