Method and apparatus for text rotation in a front end component

Abstract

The application discloses a method and device for text rotation of a front-end component, comprising the following steps: identifying the position of a target cell, and obtaining text content and style information; dynamically adjusting the text size according to the cell size and the rotation angle, and using a loop structure to try different font sizes; according to the width of the target cell and the font size, processing the text line break of the text exceeding the effective size of the target cell; according to the horizontal and vertical alignment mode of the target cell, the virtual rectangular space occupied by the text and the set rotation angle, calculating the position of the text center in nine combined alignment modes; for multi-line text, repeatedly performing the position determination step until the positions of the text centers of all lines are determined; and using a canvas interface to transform and fill the text in combination with the rotation angle and the text center position. The application solves the problem of how to realize accurate text rotation in an electronic form front-end component and fully considers all factors influencing the position of cell text.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method and apparatus for rotating text in a front-end component. Background Technology

[0002] Throughout the development of spreadsheet software, the diversity and flexibility of data display methods have always been a key focus for users. With the continuous advancement of information technology and the constant upgrading of user needs, spreadsheet software has evolved from its initial simple data recording tools into comprehensive tools with complex data analysis, data visualization, and highly customizable display capabilities.

[0003] Traditional spreadsheet software, such as early versions of Microsoft Excel, while offering basic text formatting options like alignment, line breaks, and text direction, still has significant limitations in cell text rotation. These programs typically only offer simple text rotation, and the results are often imprecise, failing to meet users' personalized data display needs. In recent years, with the rapid development of front-end technology and constantly evolving user demands, new spreadsheet front-end components have emerged. These components not only possess the basic functions of traditional spreadsheet software but also make bold innovations and attempts in data display methods. However, despite these new components' improvements in text rotation, some problems still exist. For example, some components do not fully consider all factors affecting cell text position when implementing text rotation, resulting in inaccurate text positioning after rotation, or even conflicts with cell borders or background colors, severely impacting data readability and aesthetics.

[0004] Therefore, how to implement accurate text rotation in the front-end components of a spreadsheet, while fully considering all factors affecting the position of text in cells, has become a pressing technical problem that needs to be solved. Summary of the Invention

[0005] In this application embodiment, a method for rotating text in a front-end component is provided, which solves the problem of how to achieve accurate text rotation in a spreadsheet front-end component and fully consider all factors affecting the position of text in cells.

[0006] In a first aspect, embodiments of this application provide a method for rotating text in a front-end component. This method includes: identifying the position of a target cell and obtaining the text content and style information within the target cell; converting the rotation angle into radians and using a built-in function to obtain the trigonometric function value corresponding to each radian; dynamically adjusting the text size according to the size of the target cell and the rotation angle to ensure that the drawn text does not exceed the size of the target cell; using a loop structure to try different font sizes until a preset number of attempts is reached or a suitable font size is found; performing line breaks on text exceeding the effective size of the target cell based on the width of the target cell and the font size, and obtaining the text content of each line and the total number of lines; calculating the position of the text center based on the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, using nine different alignment combinations; wherein the rotation angle is set as the text relative to the horizontal direction; for multi-line text, repeatedly performing the position determination step until the position of the text center for all lines is determined; and using the canvas interface to perform transformation and filling operations on the text based on the rotation angle and the position of the text center, ensuring that the background color and border change synchronously with the text direction when the target cell has a background color and border.

[0007] One possible implementation also includes: determining whether the target cell uses a formatting function; if the target cell uses a formatting function, executing the function and obtaining the return value as the latest text; if the target cell does not use a formatting function, obtaining the current value of the target cell as the latest text.

[0008] In one possible implementation, dynamically adjusting the text size based on the target cell's size and rotation angle includes: initializing a space variable and a font object; the space variable represents the effective width of the target cell that can be used to display text, and its initial value is set to 0; the value attribute in the font object is used to mark whether the current font size is appropriate, and the initial value of the value attribute is set to inappropriate; calculating the value of the space variable, the value of which is determined based on the target cell's size and rotation angle, and using a maximum value function to ensure that the value of the space variable is always positive, so as to ensure that the drawn text does not exceed the size of the target cell.

[0009] In one possible implementation, the step of using a loop structure to try different font sizes until a preset number of attempts is reached or a suitable font size is found includes: calculating the text width using the current font size; determining whether the value of the spatial variable of the target cell is less than the text width; if the value of the spatial variable of the target cell is less than the text width, iterating through the iteration steps until a preset number of attempts is reached or the value attribute of the created suitable font object is suitable; if the value of the spatial variable of the target cell is greater than or equal to the text width, and the value attribute of the created font object is suitable, it indicates that a suitable font size has been found, and the loop structure is exited; the iteration steps include: calculating the font size adjustment ratio based on the ratio of the value of the spatial variable to the text width, calculating the new font size according to the adjustment ratio, and using the new font size to obtain the updated text width.

[0010] In one possible implementation, the step of performing line wrapping on text exceeding the effective size of the target cell based on the width and font size of the target cell, and obtaining the text content of each line and the total number of lines, includes: initializing an empty array to store each line of text after line wrapping; initializing an empty character array to accumulate the text currently being processed; splitting the text to be processed into a word list, and iteratively performing a traversal step to traverse each word in the word list, processing one word at a time; the traversal step includes: calculating the length of the string formed by adding the current word to the currently accumulated character array based on the font size of the target cell, and determining whether it exceeds the effective size of the target cell; if it does not exceed the target cell size, adding it to the character array; if it exceeds the target cell size, performing line wrapping; after traversal, checking whether there are any unprocessed characters in the character array; if so, adding them as the last line to the array; and returning the array after line wrapping and the total number of lines to obtain the text content of each line and the total number of lines.

[0011] In one possible implementation, the line break processing includes: checking whether the currently accumulated character array is empty; if it is not empty, adding the contents of the currently accumulated character array as a line to the array, and clearing the currently accumulated character array to obtain a cleared character array; adding the current word to the cleared character array as the start of a new line.

[0012] In one possible implementation, the text center position is calculated based on nine combined alignment methods according to the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle. These include: the first combined alignment method is: right-aligned horizontally and bottom-aligned vertically; the text center position is calculated using the formula... Calculate the first horizontal offset; where, This is the first horizontal offset. The height of the virtual rectangular space occupied by the text. Let be the rotation angle of the text relative to the horizontal direction; according to the formula... Calculate the second horizontal offset; where, This is the second horizontal offset. The width of the virtual rectangular space occupied by the text. The text is rotated relative to the horizontal direction by an angle; the first total horizontal offset is the width of the target cell minus the first and second horizontal offsets; according to the formula... Calculate the first vertical offset; where, This is the first vertical offset. The height of the virtual rectangular space occupied by the text. Let be the rotation angle of the text relative to the horizontal direction; according to the formula... Calculate the second vertical offset; where, This is the second vertical offset. The width of the virtual rectangular space occupied by the text. The text is rotated relative to the horizontal direction by an angle; the first total vertical offset is the height of the target cell minus the first and second vertical offsets; the starting point coordinates are added to the first total horizontal offset and the first total vertical offset to obtain the position of the text center in the first combination alignment method; where the starting point coordinates are the coordinates of the top left corner vertex of the target cell.

[0013] In one possible implementation, the second combined alignment method is: horizontal left alignment and vertical top alignment; the text center position is calculated as follows: , ;in, This is the third horizontal offset. The third vertical offset is used; the starting point coordinates are added to the third horizontal and third vertical offsets to obtain the text center position for the second combined alignment method; the third combined alignment method is: horizontally centered and vertically top-aligned; the text center position for the third combined alignment method is calculated as follows: , ;in, This is the fourth horizontal offset, where w is the width of the target cell. The fourth vertical offset is used; the starting point coordinates are added to the fourth horizontal and fourth vertical offsets to obtain the text center position for the third combined alignment method; the fourth combined alignment method is: right-aligned horizontally and top-aligned vertically; the text center position for the fourth combined alignment method is calculated as follows: , ;in, This is the fifth level offset. The fifth vertical offset is used; the starting point coordinates are added to the fifth horizontal and fifth vertical offsets to obtain the text center position for the fourth alignment combination; the fifth alignment combination is: right-aligned horizontally and center-aligned vertically; the text center position for the fifth alignment combination is calculated as follows: , ;in, This is the fifth level offset. This is the fifth vertical offset. The height of the target cell is given; the starting point coordinates are added to the sixth horizontal offset and the sixth vertical offset to obtain the text center position for the fifth alignment combination; the sixth alignment combination is: horizontally centered and vertically centered; the text center position for the sixth alignment combination is calculated as follows: , ;in, This is the seventh level offset. The seventh vertical offset is added to the starting point coordinates along with the seventh horizontal and vertical offsets to obtain the text center position for the sixth alignment combination. The seventh alignment combination is: right-aligned horizontally and center-aligned vertically. The text center position for the seventh alignment combination is calculated as follows: , ;in, This is the eighth level offset. This is the eighth vertical offset; add the eighth horizontal offset and the eighth vertical offset to the starting point coordinates to obtain the text center position for the seventh alignment combination; the eighth alignment combination is: horizontal left alignment and vertical bottom alignment; the text center position for the eighth case is calculated as follows: , ;in, This is the ninth level offset. This is the ninth vertical offset; add the ninth horizontal offset and the ninth vertical offset to the starting point coordinates to obtain the text center position for the eighth combined alignment method; the ninth combined alignment method is: horizontally centered and vertically bottom-aligned; the text center position for the ninth combined alignment method is calculated as follows: , ;in, This is the tenth level offset. The tenth vertical offset is added to the starting point coordinates to obtain the position of the text center when using the ninth combination alignment.

[0014] In one possible implementation, the step of repeatedly performing the position determination step for multi-line text until the positions of the centers of all lines of text are determined includes: starting from the first line of text, determining its combined alignment and calculating the position of the center of the first line of text; calculating the horizontal offset increment of each line of text from the second line onwards, relative to the first line of text; wherein the horizontal offset increment is the sine of the line spacing divided by the rotation angle; accumulating the calculated horizontal offset increment to the horizontal offset of the center point of the previous line of text to obtain the horizontal offset of the current text center; and calculating the center position of the current line of text based on the horizontal and vertical offsets of the current line of text center.

[0015] Secondly, embodiments of this application provide a device for rotating text in a front-end component. The device includes: an acquisition module for identifying the position of a target cell and acquiring the text content and style information within the target cell; a conversion module for converting the rotation angle into radians and using a built-in function to obtain the trigonometric function value corresponding to each radian; an adjustment module for dynamically adjusting the text size according to the size of the target cell and the rotation angle, ensuring that the drawn text does not exceed the size of the target cell; a trial module for using a loop structure to try different font sizes until a preset number of attempts is reached or a suitable font size is found; and a line break processing module for adjusting the text size beyond the target cell's width and font size. The system performs line breaks on the text within the effective size of the cell and retrieves the text content of each line and the total number of lines. A calculation module calculates the text center position using nine different alignment combinations based on the target cell's horizontal and vertical alignment, the virtual rectangular space occupied by the text, and the set rotation angle. The rotation angle is set relative to the horizontal direction. An execution module repeatedly performs the position determination steps for multiple lines of text until the position of the text center for all lines is determined. A transformation and fill module uses the canvas interface to transform and fill the text based on the rotation angle and the text center position. When the target cell has a background color and a border, the background color and border are changed synchronously with the text direction.

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

[0017] This application provides a method for text rotation in a front-end component. By identifying the position of the target cell and obtaining the text content and style information within the target cell, a reliable data foundation is provided for subsequent text processing and rendering. By converting the rotation angle to radians and calculating trigonometric function values, combined with the size of the target cell, the text size is dynamically adjusted to ensure that the text perfectly fits the cell after rotation, avoiding overflow or truncation and improving visual appeal. A loop structure is used to try different font sizes up to a preset number of times until the optimal font size that satisfies both text clarity and cell size is found, improving the efficiency and accuracy of text rendering. Based on the width and font size of the target cell, text exceeding the effective size of the target cell is wrapped to ensure clear readability and reduce the tediousness of manual adjustments by the user. The text center position is calculated using nine different alignment combinations based on the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle. This processing method ensures that the text maintains correct alignment and layout after rotation. For cells containing multiple lines of text, the position determination step is repeated to ensure that the center position of each line of text is accurately calculated, thereby achieving precise rendering of the entire text. By utilizing the canvas interface, text can be transformed and filled based on the rotation angle and the text center position. This flexibility allows text to be displayed at any angle while maintaining a clear visual effect. When the target cell has a background color and border, it ensures that the background color and border change synchronously with the text direction, thus maintaining overall visual consistency and harmony. Through these steps, the user experience when dealing with complex text layouts and rotations can be significantly improved, reducing the complexity and time cost of manual adjustments and increasing work efficiency. This solves the problem of how to implement precise text rotation functionality in a spreadsheet front-end component while fully considering all factors affecting the text position in cells. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments of this application or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 A flowchart illustrating a method for rotating text in a front-end component, as provided in this application embodiment;

[0020] Figure 2 A flowchart illustrating the dynamic adjustment of text size based on the size and rotation angle of the target cell, provided for embodiments of this application;

[0021] Figure 3 A flowchart illustrating the use of a loop structure to try different font sizes until a preset number of times is reached or a suitable font size is found, provided in this embodiment of the application.

[0022] Figure 4 The flowchart provided in this application embodiment describes how to perform line wrapping on text that exceeds the effective size of the target cell based on the width and font size of the target cell, and how to obtain the text content of each line and the total number of lines.

[0023] Figure 5 A flowchart provided for embodiments of this application shows how to repeatedly execute the position determination step for multi-line text until the center position of all lines of text is determined.

[0024] Figure 6 This is a schematic diagram illustrating the first combined alignment method provided in the embodiments of this application;

[0025] Figure 7 A schematic diagram illustrating the determination of the center position of each line of text in a multi-line text, provided for embodiments of this application;

[0026] Figure 8 A schematic diagram showing a partial view of a spreadsheet provided in an embodiment of this application;

[0027] Figure 9 This is a schematic diagram illustrating the rotation of multi-line text for line wrapping provided in an embodiment of this application.

[0028] Figure 10 A schematic diagram illustrating the rotation of a single line of text provided in an embodiment of this application;

[0029] Figure 11 A schematic diagram of a device for rotating text in a front-end component, provided in an embodiment of this application;

[0030] Figure 12 This is a schematic diagram of a server for rotating text in a front-end component, as provided in an embodiment of this application. Detailed Implementation

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

[0032] The following description of some technologies involved in the embodiments of this application is provided to aid understanding and should be considered merely exemplary. Therefore, those skilled in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this application. Similarly, for clarity and brevity, some descriptions of well-known functions and structures are omitted in the following description.

[0033] This application provides a method for rotating text in a front-end component, such as... Figure 1 As shown, the method includes steps S101 to S108. Wherein, Figure 1 This is merely one execution order shown in the embodiments of this application and does not represent the only execution order of a method for text rotation by a front-end component. The execution order may vary depending on whether the final result can be achieved. Figure 1 The steps shown can be performed in parallel or in reverse order.

[0034] It should be noted that in practical applications, the above steps can be flexibly selected and adjusted according to the user's specific needs and preferences, and not every step is necessary.

[0035] S101: Identifies the location of the target cell and retrieves the text content and style information within the target cell.

[0036] Specifically, the position of the target cell can be identified by its row and column numbers. Based on the identified target cell's position, the text content and style information of the target cell can be retrieved using the interface provided by the table control. In a development environment based on the SpreadJS table control, this functionality can be achieved through the public application programming interface (API). Passing the row and column numbers of the target cell as parameters, the `spread.getText(row,col)` method is called to retrieve the cell's text content. The `spread.getStyle(row,col)` method is called to retrieve the cell's style information. This information is stored in the table's internal model (data structure) and can be easily retrieved through the public application programming interface (API) provided by the table control.

[0037] S102: Convert the rotation angle to radians and use the built-in function to obtain the trigonometric function value corresponding to each radian.

[0038] Specifically, the sign of the rotation angle needs to be specified. A positive angle represents counterclockwise rotation, and a negative angle represents clockwise rotation. The rotation angle in this application is set between -90 and 90 degrees. Since trigonometric functions are usually calculated in radians, the given angle needs to be converted to radians. The formula is used... Convert a given angle to radians. For a given rotation angle in degrees, `π` is a constant in JavaScript (and many other programming languages) representing the value of pi (π), approximately equal to 3.141592653589793. For negative angles, to simplify subsequent calculations, they can be converted to their corresponding positive angles by taking their absolute values, but care must be taken to preserve the direction of rotation. The trigonometric function values ​​for each radian include tangent, sine, and cosine. JavaScript's built-in mathematical functions `Math.tan`, `Math.sin`, and `Math.cos` are used to calculate the tangent, sine, and cosine values ​​for a given radian. These functions take a radian value as an argument and return the corresponding trigonometric function values.

[0039] This application also includes: determining whether the target cell uses a formatting function. If the target cell uses a formatting function, executing the function and obtaining the return value as the latest text. If the target cell does not use a formatting function, obtaining the current value of the target cell as the latest text.

[0040] Specifically, in SpreadJS, each cell can have an associated formatter function that determines how the cell's content is displayed. To determine if a target cell uses a formatter function, you can check if the cell has a set formatter property, or you can get and apply the formatter function and check if it returns a value. If the target cell uses a formatter function, you need to execute that function to get the formatted text. Once you've determined that the target cell uses a formatter function and executed it, you need to get the formatted text. In SpreadJS, you can get the formatted text by calling `Spread.Sheets.ActiveSheet.getCell(row,col).formatter()`. If the target cell does not use a formatter function, you get the current value of the target cell as the latest text.

[0041] This application also includes: creating a canvas for visually processing the text in the target cell. If the canvas has style information, the fill style property is called to clear its style information.

[0042] Specifically, before drawing text, to ensure accuracy and avoid interference from previously drawn content, the following preparatory work is required. First, a canvas object needs to be created. This canvas will serve as the platform for drawing text. Once the canvas is created, it may contain legacy style information from previous drawings, which can affect the current text drawing. To ensure the drawn text is unaffected by previous drawings, this potentially existing style information needs to be cleared. This can be achieved by resetting the canvas's fill style, stroke style, and line width properties. The canvas.fillStyle method (fill style property) can be called to set a default theme color for potentially contaminated areas. This default theme color is a color that will not interfere with text drawing, typically white or the same color as the background. By setting the fill style to this default color and filling the entire canvas area, any previous drawing content can be overwritten, thus preventing it from affecting the current text drawing. After performing the above steps, you can begin drawing text on the current canvas.

[0043] S103: Dynamically adjust the text size based on the target cell's size and rotation angle to ensure that the drawn text does not exceed the target cell's size.

[0044] Figure 2 A flowchart illustrating the dynamic adjustment of text size based on the target cell's size and rotation angle, provided in this application embodiment, is shown below. Figure 2 As shown, it includes steps S201 to S204.

[0045] S201: Initialize space variables and font objects.

[0046] S202: The space variable is used to represent the effective width of the target cell that can be used to display text, and its initial value is set to 0.

[0047] S203: The value property in the font object is used to mark whether the current font size is appropriate. Set the initial value of the value property to inappropriate.

[0048] Specifically, the space variable `space` is initialized to 0. This variable will be used to represent the effective width of the target cell available for displaying text. The font object `minFont` is initialized, which contains a value property whose initial value is set to `false`. This value property will be used to indicate whether the current font size is appropriate, i.e., whether the text width is less than or equal to the space variable `space`.

[0049] S204: Calculate the value of the spatial variable, which is determined based on the size and rotation angle of the target cell. Use the maximum value function to ensure that the value of the spatial variable is always positive, so as to ensure that the drawn text does not exceed the size of the target cell.

[0050] Specifically, the target cell's dimensions are its width and height. When the text is rotated, the space it occupies changes accordingly. In particular, the rotation angle affects the text's layout and the visible area within the cell. To ensure the space variable's value is always positive and accurately reflects the effective space available for displaying text within the target cell, a maximum value function, such as `Math.max`, is used. This function returns the maximum value from a set of numbers, ensuring the space variable's value doesn't become negative due to calculation errors or negative input. Specifically, the space variable's value can be calculated as follows: Based on the target cell's dimensions and the text's rotation angle, calculate the maximum width and height the text can occupy within the cell, and use this value as a candidate value for the space variable. Use the `Math.max` function to compare the candidate value of the space variable with a preset minimum positive value to ensure the space variable's value is always positive. The preset minimum positive value can be 1 or any other value. If the calculated candidate value of the space variable is less than this minimum positive value, replace it with this minimum positive value.

[0051] S104: Use a loop structure to try different font sizes until a preset number of attempts is reached or a suitable font size is found.

[0052] Figure 3 The flowchart provided in this application embodiment illustrates the specific process of using a loop structure to try different font sizes until a preset number of attempts is reached or a suitable font size is found. Figure 3 As shown, it includes steps S301 to S304.

[0053] Specifically, you can use a for loop, setting a preset number of iterations to 3 or another suitable preset number, or until the value property becomes true (suitable). This means that if a suitable font size is found, the loop will terminate early.

[0054] S301: Calculate the text width using the current font size.

[0055] S302: Determine if the value of the spatial variable of the target cell is less than the text width.

[0056] S303: If the value of the spatial variable of the target cell is less than the text width, iterate through the iteration steps until the preset number of iterations is reached or the value attribute of the created suitable font object is suitable.

[0057] The iterative steps include: calculating the font size adjustment ratio based on the ratio of the spatial variable value to the text width, calculating the new font size based on the adjustment ratio, and using the new font size to obtain the updated text width.

[0058] Specifically, the adjustment ratio can be calculated by dividing the value of the space variable by the value of the text width. For example, if the space variable is 100, meaning there are 100 units of space available to display text, and the text width is 150, meaning the text occupies 150 units of width at the current font size, then the adjustment ratio is 100 / 150, or approximately 0.67. Once you have the adjustment ratio, you can use it to calculate the new font size. You can multiply the current font size by this adjustment ratio to get the new font size. Continuing with the example above, if the current font size is 20 points, then the new font size is 20 points multiplied by 0.67, or approximately 13.4 points. After obtaining the new font size, the text width needs to be recalculated. The updated text width will be used for comparison in the next iteration to determine if further font size adjustments are needed.

[0059] Specifically, within each iteration of the for loop, the value of the space variable `space` is first calculated. This value is determined based on the size and rotation angle of the target cell, and the `Math.max` function is used to ensure that the space variable `space` will not be less than 0. Next, the text width `textWidth` under the current font size is obtained. If the space variable `space` is less than the text width `textWidth`, it means the current font size is too large, and an iterative step is needed to update the values ​​of the current font size `fontSize` and the current text width `textWidth`.

[0060] S304: If the value of the spatial variable of the target cell is greater than or equal to the text width, and the value property of the font object created is appropriate, it means that a suitable font size has been found, and the loop structure is exited.

[0061] If the space variable is found to be greater than or equal to the text width (textWidth) during the loop, it means the current font size is appropriate or too small and will not exceed the target cell boundary. At this point, set the value attribute to true (appropriate) and exit the loop. When the loop ends, the current font size obtained is the font size adapted to the current text box size. This value can be used for subsequent text drawing operations to ensure that the drawn text does not exceed the cell boundary.

[0062] S105: Based on the width and font size of the target cell, perform line wrapping on text that exceeds the effective size of the target cell, and obtain the text content of each line and the total number of lines.

[0063] Figure 4 The flowchart provided in this application embodiment describes how to perform line wrapping on text exceeding the effective size of the target cell based on the width and font size of the target cell, and how to obtain the text content of each line and the total number of lines. Figure 4 As shown, it includes steps S401 to S405.

[0064] S401: Initialize an empty array to store each line of text after newline processing.

[0065] Specifically, initialize an empty array `lines`. This array will be used to store each line of text after line breaks. During processing, whenever a line of text is determined, whether it is a complete line or a line split by line breaks, it will be added to the `lines` array.

[0066] S402: Initialize an empty character array to accumulate the text currently being processed.

[0067] Specifically, this character array will be used to accumulate the text currently being processed. As the word list is traversed, words are added to the character array one by one.

[0068] S403: Divide the text to be processed into a list of words, and iteratively execute the traversal step to traverse each word in the word list, processing one word at a time.

[0069] The traversal steps include: based on the font size of the target cell, calculating the length of the string formed by adding the current word to the currently accumulated character array, and determining whether it exceeds the effective size of the target cell. If it does not exceed the target cell's font size, adding it to the character array. If it does exceed the target cell's font size, performing line breaks.

[0070] It should be noted that the effective size of the target cell is the actual area available for displaying the text content. This area is obtained by subtracting the margins (boundary space) reserved for the text content from the cell's size.

[0071] Line break handling includes: checking if the currently accumulated character array is empty. If not empty, adding the contents of the currently accumulated character array as a new line to the array, and clearing the currently accumulated character array to obtain an empty character array. The current word is then added to the empty character array as the start of the new line.

[0072] Specifically, the process checks if the currently accumulated character array is empty. If it is empty, it means no text has started accumulating yet, so no newline operation is needed. If the currently accumulated character array is not empty, it means some text has already accumulated. In this case, the content of the currently accumulated string is added as a complete line of text to the `lines` array. The currently accumulated character array is then cleared to begin accumulating the next line of text. The currently processed word is added to the cleared character array as the start of a new line. Processing of subsequent words continues until all text has been processed. Newline processing ensures that whenever text accumulates to the point where no more content can be added without exceeding the preset width, the accumulated text is correctly added as a line to the result array, and a new line begins for subsequent text accumulation. Thus, the final `lines` array will contain multiple lines of text split according to the width requirement. It's important to note that this newline processing step is typically triggered when iterating through the word list and processing each word, based on whether it exceeds the valid size of the target cell. If the current word cannot be added to the currently accumulated character array without exceeding the valid size of the target cell, a newline operation is performed.

[0073] S404: After the traversal is complete, check if there are any unprocessed characters in the character array. If so, add them to the array as the last row.

[0074] Specifically, if the character array is not empty (i.e., it still contains characters), then these characters should be treated as a complete line of text. In this case, these characters need to be added as the last line to the array used to store all the newline characters. It should be noted that the unprocessed characters can be the remainder of the last word.

[0075] S405: Returns an array of newline characters and the total number of lines to obtain the text content of each line and the total number of lines.

[0076] Specifically, the returned array contains each line of text obtained after line wrapping. Each element in the array represents a complete line of text, which was obtained by wrapping according to the effective size limit of the target cell. The total number of lines indicates how many lines the text was divided into. It is equal to the length of the array after line wrapping, that is, the number of elements in the array.

[0077] S106: Calculate the position of the text center based on nine possible alignment combinations, considering the target cell's horizontal and vertical alignment, the virtual rectangular space occupied by the text, and the set rotation angle. The rotation angle is set relative to the horizontal direction of the text.

[0078] Based on the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, the position of the text center is calculated in nine combinations of alignment methods, including: the first combination of alignment methods is: right alignment in the horizontal direction and bottom alignment in the vertical direction. Figure 6 This is a schematic diagram illustrating the first combined alignment method provided in the embodiments of this application. Figure 6 As shown, the text center position is calculated using the first combination alignment method as follows: according to the formula... Calculate the first horizontal offset. Wherein, This is the first horizontal offset. The height of the virtual rectangular space occupied by the text. This is the rotation angle of the text relative to the horizontal direction. According to the formula... Calculate the second horizontal offset. Wherein, This is the second horizontal offset. The width of the virtual rectangular space occupied by the text. This represents the rotation angle of the text relative to the horizontal direction. The first total horizontal offset is the width of the target cell minus the first and second horizontal offsets. The first total horizontal offset is calculated as follows: .in, This is the first total horizontal offset. The width of the target cell. This is the first horizontal offset. This is the second horizontal offset. According to the formula... Calculate the first vertical offset. Wherein, This is the first vertical offset. The height of the virtual rectangular space occupied by the text. This is the rotation angle of the text relative to the horizontal direction. According to the formula... Calculate the second vertical offset. Wherein, This is the second vertical offset. The width of the virtual rectangular space occupied by the text. This represents the rotation angle of the text relative to the horizontal direction. The first total vertical offset is the height of the target cell minus the first and second vertical offsets. The first total vertical offset is calculated as follows: in, This is the first total vertical offset. The height of the target cell. This is the first horizontal offset. This is the second horizontal offset.

[0079] Add the starting point coordinates to the first total horizontal offset and the first total vertical offset to obtain the text center position for the first combined alignment method. The starting point coordinates are the coordinates of the top-left corner of the target cell. It should be noted that the starting coordinates can be set to (0,0).

[0080] The second alignment method is: horizontal left alignment and vertical top alignment. The text center position is calculated using the following method for this second alignment method: , .in, This is the third horizontal offset. This is the third vertical offset. The starting point coordinates are added to the third horizontal and third vertical offsets to obtain the text center position for the second combined alignment method.

[0081] The third alignment method is: horizontally centered and vertically top-aligned. The text center position is calculated using the following method for this third alignment method: , .in, This is the fourth horizontal offset, where w is the width of the target cell. This is the fourth vertical offset. The starting point coordinates are added to the fourth horizontal and fourth vertical offsets to obtain the text center position for the third combined alignment method.

[0082] The fourth alignment method is: right-aligned horizontally and top-aligned vertically. The text center position is calculated using the following method for this fourth alignment method: , .in, This is the fifth level offset. This is the fifth vertical offset. Add the fifth horizontal offset and the fifth vertical offset to the starting point coordinates to obtain the text center position for the fourth combined alignment method.

[0083] The fifth alignment combination is: right-aligned horizontally and center-aligned vertically. The method for calculating the text center position in this fifth alignment combination is as follows: , .in, This is the fifth level offset. This is the fifth vertical offset. The height of the target cell. Add the sixth horizontal offset and the sixth vertical offset to the starting point coordinates to obtain the text center position for the fifth alignment combination.

[0084] The sixth alignment combination is: horizontally centered and vertically centered. The text center position is calculated using the following method for this sixth alignment combination: , .in, This is the seventh level offset. This is the seventh vertical offset. Add the seventh horizontal offset and the seventh vertical offset to the starting point coordinates to obtain the text center position for the sixth combined alignment method.

[0085] The seventh alignment combination is: right-aligned horizontally and center-aligned vertically. The text center position is calculated using the following method for this seventh alignment combination: , .in, This is the eighth level offset. This is the eighth vertical offset. Add the eighth horizontal offset and the eighth vertical offset to the starting point coordinates to obtain the text center position for the seventh combined alignment.

[0086] The eighth alignment combination is: horizontal left alignment and vertical bottom alignment. The text center position is calculated using the following method for this eighth alignment combination: , .in, This is the ninth level offset. This is the ninth vertical offset. The starting point coordinates are added to the ninth horizontal and ninth vertical offsets to obtain the text center position for the eighth combined alignment.

[0087] The ninth alignment combination is: horizontally centered and vertically bottom-aligned. The text center position is calculated using the following method for this ninth alignment combination: , .in, This is the tenth level offset. This is the tenth vertical offset. Add the tenth horizontal offset and the tenth vertical offset to the starting point coordinates to obtain the text center position for the ninth combined alignment method.

[0088] S107: For multi-line text, repeat the position determination step until the position of the center of all lines of text has been determined.

[0089] Figure 5 The flowchart provided in this application embodiment describes the process of repeatedly executing the position determination step for multi-line text until the center positions of all lines of text are determined, as follows: Figure 5 As shown, it includes steps S501 to S504.

[0090] S501: Starting from the first line of text, determine its alignment and calculate the position of the center of the first line of text.

[0091] S502: Calculate the horizontal offset increment of each line of text from the second line onwards relative to the first line. The horizontal offset increment is the line spacing divided by the sine of the rotation angle.

[0092] Specifically, line spacing is the vertical distance between two lines of text, and rotation angle is the rotation angle of the text relative to the horizontal direction.

[0093] S503: Add the calculated horizontal offset increment to the horizontal offset of the center point of the previous line of text to obtain the horizontal offset of the current text center.

[0094] S504: Calculate the center position of the current line of text based on the horizontal and vertical offsets of the current line's center.

[0095] Figure 7 This is a schematic diagram illustrating the determination of the center position of each line of text in a multi-line text, provided as an embodiment of this application. For example... Figure 7 As shown, a blue line passes through the center of the first and second lines of text. The blue line represents the horizontal offset increment, calculated by dividing the line spacing by the sine of the rotation angle. Line spacing refers to the vertical distance between two lines of text, while the rotation angle is the angle of rotation of the text relative to the horizontal direction. The vertical offset of the second line of text and subsequent lines does not need to be updated in this case. The black rectangle represents a cell that rotates synchronously with the text rotation direction.

[0096] Furthermore, handling text margins is a crucial step in ensuring that text has adequate space when displayed within a cell or designated area. When text margins are customizable, it means that users can adjust the distance between the text and the cell boundaries as needed. This custom text spacing is essential for improving the readability and aesthetics of the text. When you need to handle these custom text margins and adjust the position of the text center, you can follow these steps: Determine the horizontal and vertical margins of the text based on user settings or default configurations. These margins define the minimum distance between the text and the cell boundaries. Using these margin values, you can calculate the text's boundary area. This boundary area is the area where the text can be displayed without being too close to the cell boundaries. In the step of calculating the text center position using nine different alignment combinations, these custom text margins need to be considered to adjust the coordinates of the text center point. Specifically, the horizontal and vertical offsets need to be corrected based on the margin values. If the text is horizontally centered, the horizontal position of the text center point is usually half the cell width. However, due to the custom left and right margins, i.e., the horizontal margins, you need to subtract the width of these margins from the cell width before calculating the horizontal position of the center point. Therefore, the horizontal offset should be calculated based on the adjusted width. Similarly, if the text is vertically centered, the vertical position of the text center point is typically half the cell height. However, due to custom top and bottom margins (vertical margins), these margin heights need to be subtracted from the cell height before calculating the vertical position of the center point. Therefore, the vertical offset should also be calculated based on the adjusted height. Applying the corrected horizontal and vertical offsets to the text center point coordinates ensures that the text displays with the correct position and spacing within the cell.

[0097] S108: Using the canvas interface, the text is transformed and filled according to the rotation angle and the position of the text center. When the target cell has a background color and a border, the background color and border are changed synchronously with the text direction.

[0098] Specifically, the canvas's `translate`, `rotate`, and `fillText` API interfaces can be used to complete the text drawing and transformation operations. First, based on the calculated text center position, rotation angle, and text content, the `translate` method translates the canvas coordinate system to the text center, and the `rotate` method rotates the canvas coordinate system by the specified rotation angle. Finally, the `fillText` method fills the rotated canvas coordinate system with text, thus completing the drawing of the rotated text. Furthermore, if the target cell has a background color and border, further processing is required to ensure that the background color and border also change synchronously with the text direction. This means that before rotating the text, the background color and border should be drawn, and their direction and position should be adjusted accordingly based on the rotation angle to ensure that the background color and border maintain the same direction and appearance as the rotated text.

[0099] Furthermore, when rotating the target cell and text to the same angle, the coordinates of the target cell's border lines cannot be simply calculated using the cell's width and height in its unrotated state. This is because the rotated border lines are no longer horizontal or vertical, but will form a parallelogram or a more complex shape. When calculating the border position information, the starting and ending coordinates of the four border lines (top, bottom, left, and right) should be calculated as follows.

[0100] The starting point coordinates of the top border are calculated as follows: x = cell starting point x + cell height / tangent of rotation angle, y = cell starting point y.

[0101] The coordinates of the end point of the top border are calculated as follows: x = coordinates of the starting point of the top border x + cell width, y = cell starting point y.

[0102] The starting point coordinates of the bottom border are calculated as follows: x = cell starting point x, y = cell border starting point y + cell height.

[0103] The coordinates of the bottom border's ending point are: x = cell starting point x + cell width, y = cell border starting point y + cell height.

[0104] Once the four vertices of the rotated border are determined, the background color can be filled using the canvas's fillRect (fill rectangle) method or other fill methods.

[0105] Figure 8 This is a schematic diagram showing a partial view of a spreadsheet provided in an embodiment of this application. (See attached diagram.) Figure 8As shown, cells are marked with different colors such as red, yellow, green, and blue, which helps users distinguish different data areas or categories. The `hAlign` and `vAlign` properties represent the horizontal and vertical alignment of the cell content, respectively. For example, `hAlign=left` means left-aligned horizontally, and `vAlign=top` means top-aligned vertically. These properties help users adjust the layout of cell content to make it more aesthetically pleasing and readable. The `rotate` property represents the rotation angle of the text content in the cell. For example, `rotate=30` means a 30-degree clockwise rotation, and `rotate=-30` means a 30-degree counter-clockwise rotation. Using the rotation property, users can adjust the orientation of the cell content to meet different display needs.

[0106] Figure 9 This is a schematic diagram illustrating the rotation of multi-line text with line breaks provided in an embodiment of this application. For example... Figure 9 As shown, the text, after being processed with line breaks, appears as multiple lines, each line closely arranged to form a neat and orderly text block. This display effect helps improve the user's reading experience and comprehension.

[0107] Figure 10 This is a schematic diagram illustrating the rotation of a single line of text as provided in an embodiment of this application. Figure 10 As shown, text within a cell that does not exceed the target cell's effective size will be displayed as a single line.

[0108] This application embodiment also provides a device 1100 for rotating text in a front-end component, such as... Figure 11 As shown, the device includes: an acquisition module 1101, a conversion module 1102, an adjustment module 1103, an attempt module 1104, a line break processing module 1105, a calculation module 1106, an execution module 1107, and a transformation and filling module 1108.

[0109] The acquisition module 1101 is used to identify the location of the target cell and acquire the text content and style information in the target cell.

[0110] The conversion module 1102 is used to convert the rotation angle into radians and uses built-in functions to obtain the trigonometric function value corresponding to each radian.

[0111] The adjustment module 1103 is used to dynamically adjust the text size according to the size and rotation angle of the target cell to ensure that the drawn text does not exceed the size of the target cell.

[0112] The trial module 1104 is used to try different font sizes using a loop structure until a preset number of attempts is reached or a suitable font size is found.

[0113] The line break processing module 1105 is used to process text that exceeds the effective size of the target cell based on the width and font size of the target cell, and to obtain the text content of each line and the total number of lines.

[0114] The calculation module 1106 is used to calculate the position of the text center based on the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, using nine different alignment combinations. The rotation angle is set relative to the horizontal direction of the text.

[0115] The execution module 1107 is used to repeatedly execute the position determination step for multi-line text until the position of the center of all lines of text is determined.

[0116] The Transform and Fill module 1108 is used to transform and fill text based on the rotation angle and the position of the text center using the canvas interface. When the target cell has a background color and a border, the background color and border are transformed synchronously with the text direction.

[0117] Some modules in the apparatus described in this application can be described in the general context of computer-executable instructions that are executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, classes, etc., that perform a specific task or implement a specific abstract data type. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0118] The apparatus or module described in the above embodiments can be implemented by a computer chip or physical entity, or by a product with a certain function. For ease of description, the above apparatus is described by dividing it into various modules according to their functions. When implementing the embodiments of this application, the functions of each module can be implemented in one or more software and / or hardware. Of course, a module that implements a certain function can also be implemented by combining multiple sub-modules or sub-units.

[0119] The methods, apparatus, or modules described in this application can be implemented in a computer-readable program code manner. The controller can be implemented in any suitable manner, for example, as a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicon Labs C8051F320. A memory controller can also be implemented as part of the control logic of a memory. Those skilled in the art will also recognize that, in addition to implementing the controller in purely computer-readable program code manner, the same functionality can be achieved by logically programming the method steps to make the controller take the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers. Therefore, such a controller can be considered a hardware component, and the means included within it for implementing various functions can also be considered as structures within the hardware component. Alternatively, the device used to implement various functions can be viewed as either a software module that implements the method or a structure within a hardware component.

[0120] like Figure 12 As shown in the figure, this application embodiment also provides a server for front-end component to rotate text, including a memory 1201 and a processor 1202; the memory 1201 is used to store computer-executable instructions; the processor 1202 is used to execute computer-executable instructions to implement the method for front-end component to rotate text as described above in this application embodiment.

[0121] This application also provides a computer-readable storage medium storing executable instructions, which, when executed by a computer, enable the method for rotating text in a front-end component as described above in this application.

[0122] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary hardware. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product, or it can be embodied in the process of data migration. The computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, mobile terminal, server, or network device, etc.) to execute the methods described in the embodiments of this application.

[0123] The various embodiments described in this specification are presented in a progressive manner. Similar or identical parts between embodiments can be referred to interchangeably. Each embodiment focuses on its differences from other embodiments. All or part of this application can be used in numerous general-purpose or special-purpose computer system environments or configurations.

[0124] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit this application. 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 or all of the technical features therein. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of this application.

Claims

1. A method for rotating text in a front-end component, characterized in that, include: Identify the location of the target cell and retrieve the text content and style information within the target cell; Convert the rotation angle to radians and use built-in functions to obtain the trigonometric function values ​​corresponding to each radian. The text size is dynamically adjusted based on the size and rotation angle of the target cell to ensure that the drawn text does not exceed the size of the target cell. Use a loop to try different font sizes until a preset number of attempts is reached or a suitable font size is found. Based on the width and font size of the target cell, text that exceeds the effective size of the target cell is wrapped, and the text content of each line and the total number of lines are obtained. The text center position is calculated based on nine possible alignment combinations, including the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle. The rotation angle is set relative to the horizontal direction of the text. For multi-line text, repeat the position determination step until the center position of all lines of text has been determined. Using the canvas interface, the text is transformed and filled based on the rotation angle and the position of the text center. When the target cell has a background color and a border, the background color and border are changed synchronously with the text direction. The process of dynamically adjusting the text size based on the target cell's size and rotation angle includes: initializing a space variable and a font object; the space variable represents the effective width of the target cell that can be used to display text, and its initial value is set to 0; the value attribute in the font object is used to mark whether the current font size is appropriate; the value of the space variable is calculated, and the value of the space variable is determined based on the target cell's size and rotation angle. A maximum value function is used to ensure that the value of the space variable is always positive, so as to ensure that the drawn text does not exceed the size of the target cell; The process of trying different font sizes using a loop structure until a preset number of iterations is reached or a suitable font size is found includes: calculating the text width using the current font size; determining whether the value of the spatial variable of the target cell is less than the text width; if the value of the spatial variable of the target cell is less than the text width, iterating through the iteration steps until a preset number of iterations is reached or the value attribute of the created suitable font object is deemed suitable; if the value of the spatial variable of the target cell is greater than or equal to the text width, and the value attribute of the created font object is deemed suitable, indicating that a suitable font size has been found, and exiting the loop structure; the iteration steps include: calculating the font size adjustment ratio based on the ratio of the value of the spatial variable to the text width, calculating the new font size according to the adjustment ratio, and using the new font size to obtain the updated text width; The process of wrapping text exceeding the effective size of the target cell based on the width and font size, and obtaining the text content of each line and the total number of lines, includes: initializing an empty array to store each line of text after wrapping; initializing an empty character array to accumulate the text currently being processed; splitting the text to be processed into a word list, and iteratively performing a traversal step to traverse each word in the word list, processing one word at a time; the traversal step includes: calculating the length of the string formed by adding the current word to the currently accumulated character array based on the font size of the target cell, and determining whether it exceeds the effective size of the target cell; if it does not exceed the target cell size, adding it to the character array; if it exceeds the target cell size, performing a wrapping step; after the traversal is completed, checking whether there are any unprocessed characters in the character array; if so, adding them as the last line to the array; and returning the wrapped array and the total number of lines to obtain the text content of each line and the total number of lines. The line wrapping step is triggered when iterating through the word list and processing each word, based on whether it exceeds the valid size of the target cell. If the current word cannot be added to the currently accumulated character array without exceeding the valid size of the target cell, line wrapping will be performed. The valid size of the target cell is the actual area that can be used to display the text content, which is obtained by subtracting the boundary space reserved for the text content from the cell size. The text center position is calculated based on nine alignment combinations, including: the first alignment combination being right-aligned horizontally and bottom-aligned vertically; the text center position is calculated using the formula... Calculate the first horizontal offset; where, This is the first horizontal offset. The height of the virtual rectangular space occupied by the text. Let be the rotation angle of the text relative to the horizontal direction; according to the formula... Calculate the second horizontal offset; where, This is the second horizontal offset. The width of the virtual rectangular space occupied by the text. The text is rotated relative to the horizontal direction by an angle; the first total horizontal offset is the width of the target cell minus the first and second horizontal offsets; according to the formula... Calculate the first vertical offset; where, This is the first vertical offset. The height of the virtual rectangular space occupied by the text. Let be the rotation angle of the text relative to the horizontal direction; according to the formula... Calculate the second vertical offset; where, This is the second vertical offset. The width of the virtual rectangular space occupied by the text. The text is rotated relative to the horizontal direction by an angle; the first total vertical offset is the height of the target cell minus the first and second vertical offsets; the starting point coordinates are added to the first total horizontal offset and the first total vertical offset to obtain the position of the text center in the first combination alignment method; where the starting point coordinates are the coordinates of the top left corner vertex of the target cell.

2. The method for rotating text in a front-end component according to claim 1, characterized in that, Also includes: Determine if a formatting function is used in the target cell; If the target cell uses a formatting function, execute the function and retrieve the return value as the latest text; If the target cell does not use a formatting function, retrieve the current value of the target cell as the latest text.

3. The method for rotating text in a front-end component according to claim 2, characterized in that, The line break processing includes: Check if the currently accumulated character array is empty; If not empty, add the contents of the currently accumulated character array as a row to the array, and clear the currently accumulated character array to obtain the cleared character array; Add the current word to the cleared character array as the start of a new line.

4. The method for rotating text in a front-end component according to claim 3, characterized in that, The second alignment method is: left-aligned horizontally and top-aligned vertically; the text center position is calculated using the following method for this second alignment method: , ;in, This is the third horizontal offset. The third vertical offset is added to the starting point coordinates to obtain the position of the text center when using the second combination alignment method. The third alignment method is: horizontally centered and vertically top-aligned; the text center position is calculated using the following method: , ;in, This is the fourth horizontal offset, where w is the width of the target cell. The fourth vertical offset is added to the starting point coordinates to obtain the position of the text center when using the third combination alignment method. The fourth alignment method is: right-aligned horizontally and top-aligned vertically; the text center position is calculated using the following method for this fourth alignment method: , ;in, This is the fifth level offset. The fifth vertical offset is added to the starting point coordinates to obtain the position of the text center when using the fourth combination alignment method. The fifth alignment combination is: right-aligned horizontally and center-aligned vertically; the text center position is calculated using the following method for this fifth alignment combination: , ;in, This is the fifth level offset. This is the fifth vertical offset. The height of the target cell is given; the sixth horizontal offset and the sixth vertical offset are added to the starting point coordinates to obtain the position of the text center when using the fifth combination alignment method; The sixth alignment method is: horizontal center alignment and vertical center alignment; the text center position is calculated as follows for the sixth alignment method: , ;in, This is the seventh level offset. The seventh vertical offset; add the seventh horizontal offset and the seventh vertical offset to the starting point coordinates to obtain the position of the text center when using the sixth combination alignment method; The seventh alignment combination is: right-aligned horizontally and center-aligned vertically; the text center position is calculated using the following method for this seventh alignment combination: , ;in, This is the eighth level offset. The eighth vertical offset; add the eighth horizontal offset and the eighth vertical offset to the starting point coordinates to obtain the position of the text center when using the seventh combination alignment method; The eighth alignment method is: horizontal left alignment and vertical bottom alignment; the text center position is calculated as follows in the eighth case: , ;in, This is the ninth level offset. The ninth vertical offset; add the ninth horizontal offset and the ninth vertical offset to the starting point coordinates to obtain the position of the text center when using the eighth combined alignment method; The ninth alignment combination is: horizontally centered and vertically bottom-aligned; the text center position is calculated using the following method for this ninth alignment combination: , ;in, This is the tenth level offset. The tenth vertical offset is added to the starting point coordinates to obtain the position of the text center when using the ninth combination alignment.

5. The method for rotating text in a front-end component according to claim 1, characterized in that, For multi-line text, the position determination step is repeated until the center positions of all lines of text are determined, including: Starting from the first line of text, determine its alignment and calculate the center position of the first line of text; Calculate the horizontal offset increment of each line of text from the second line onwards relative to the first line of text; where the horizontal offset increment is the line spacing divided by the sine of the rotation angle; The calculated horizontal offset increment is added to the horizontal offset of the center point of the previous line of text to obtain the horizontal offset of the current text center. The center position of the current line of text is calculated based on the horizontal and vertical offsets of the current line's center.

6. A device for rotating text in a front-end component, characterized in that, include: The acquisition module is used to identify the location of the target cell and obtain the text content and style information in the target cell; The conversion module is used to convert rotation angles into radians and uses built-in functions to obtain the trigonometric function values ​​corresponding to each radian. The adjustment module is used to dynamically adjust the text size based on the size and rotation angle of the target cell, ensuring that the drawn text does not exceed the size of the target cell; The trial module is used to try different font sizes using a loop structure until a preset number of attempts is reached or a suitable font size is found. The line break processing module is used to process text that exceeds the effective size of the target cell based on the width and font size of the target cell, and to obtain the text content of each line and the total number of lines. The calculation module is used to calculate the position of the text center based on the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, in nine combinations of alignment methods; where the rotation angle is set as the text relative to the horizontal direction; The execution module is used to repeatedly execute the position determination step for multiple lines of text until the center position of all lines of text has been determined. The Transform and Fill module is used to transform and fill text based on the rotation angle and the position of the text center using the canvas interface. When the target cell has a background color and a border, the background color and border will change synchronously with the text direction. The process of dynamically adjusting the text size based on the target cell's size and rotation angle includes: initializing a space variable and a font object; the space variable represents the effective width of the target cell that can be used to display text, and its initial value is set to 0; the value attribute in the font object is used to mark whether the current font size is appropriate; the value of the space variable is calculated, and the value of the space variable is determined based on the target cell's size and rotation angle. A maximum value function is used to ensure that the value of the space variable is always positive, so as to ensure that the drawn text does not exceed the size of the target cell; The process of trying different font sizes using a loop structure until a preset number of iterations is reached or a suitable font size is found includes: calculating the text width using the current font size; determining whether the value of the spatial variable of the target cell is less than the text width; if the value of the spatial variable of the target cell is less than the text width, iterating through the iteration steps until a preset number of iterations is reached or the value attribute of the created suitable font object is deemed suitable; if the value of the spatial variable of the target cell is greater than or equal to the text width, and the value attribute of the created font object is deemed suitable, indicating that a suitable font size has been found, and exiting the loop structure; the iteration steps include: calculating the font size adjustment ratio based on the ratio of the value of the spatial variable to the text width, calculating the new font size according to the adjustment ratio, and using the new font size to obtain the updated text width; The process of wrapping text exceeding the effective size of the target cell based on the width and font size, and obtaining the text content of each line and the total number of lines, includes: initializing an empty array to store each line of text after wrapping; initializing an empty character array to accumulate the text currently being processed; splitting the text to be processed into a word list, and iteratively performing a traversal step to traverse each word in the word list, processing one word at a time; the traversal step includes: calculating the length of the string formed by adding the current word to the currently accumulated character array based on the font size of the target cell, and determining whether it exceeds the effective size of the target cell; if it does not exceed the target cell size, adding it to the character array; if it exceeds the target cell size, performing a wrapping step; after the traversal is completed, checking whether there are any unprocessed characters in the character array; if so, adding them as the last line to the array; and returning the wrapped array and the total number of lines to obtain the text content of each line and the total number of lines. The line wrapping step is triggered when iterating through the word list and processing each word, based on whether it exceeds the valid size of the target cell. If the current word cannot be added to the currently accumulated character array without exceeding the valid size of the target cell, line wrapping will be performed. The valid size of the target cell is the actual area that can be used to display the text content, which is obtained by subtracting the boundary space reserved for the text content from the cell size. The text center position is calculated based on nine alignment combinations, including: the first alignment combination being right-aligned horizontally and bottom-aligned vertically; the text center position is calculated using the formula... Calculate the first horizontal offset; where, This is the first horizontal offset. The height of the virtual rectangular space occupied by the text. Let be the rotation angle of the text relative to the horizontal direction; according to the formula... Calculate the second horizontal offset; where, This is the second horizontal offset. The width of the virtual rectangular space occupied by the text. The text is rotated relative to the horizontal direction by an angle; the first total horizontal offset is the width of the target cell minus the first and second horizontal offsets; according to the formula... Calculate the first vertical offset; where, This is the first vertical offset. The height of the virtual rectangular space occupied by the text. Let be the rotation angle of the text relative to the horizontal direction; according to the formula... Calculate the second vertical offset; where, This is the second vertical offset. The width of the virtual rectangular space occupied by the text. The text is rotated relative to the horizontal direction by an angle; the first total vertical offset is the height of the target cell minus the first and second vertical offsets; the starting point coordinates are added to the first total horizontal offset and the first total vertical offset to obtain the position of the text center in the first combination alignment method; where the starting point coordinates are the coordinates of the top left corner vertex of the target cell.

Images