Method and device for character rotation of front-end component

Abstract

The invention discloses a character rotation method and device for a front-end component. The method comprises the steps that the position of a target cell is identified, and text content and style information are obtained; dynamically adjusting the text size according to the cell size and the rotation angle, and trying different font sizes by using a loop structure. And according to the width and font size of the target cell, carrying out line feed processing on the text exceeding the effective size of the target cell. And calculating the position of the text center in nine combined alignment modes according to the horizontal and vertical alignment modes of the target cells, the virtual rectangular space occupied by the text and the set rotation angle. And repeatedly executing the position determination step for multiple lines of texts until the positions of the centers of all the lines of texts are determined. And converting and filling the text by utilizing a canvas interface in combination with the rotation angle and the text center position. The problem of how to realize an accurate character rotation function in the spreadsheet front-end component and fully consider all factors influencing the character positions of the cells is solved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and device for rotating text using a front-end component. Background Art

[0002] In the development history of spreadsheet software, the diversity and flexibility of data display methods have always been the focus of users. With the continuous advancement of information technology and the continuous upgrading of user needs, spreadsheet software has evolved from a simple data recording tool to a comprehensive tool with complex data analysis, data visualization and highly customized display functions.

[0003] Traditional spreadsheet software, such as early Microsoft Excel, provides basic text formatting options, such as alignment, line break display, and text direction, but still has great limitations in cell text rotation. These software can usually only implement simple text rotation functions, and the rotation effect is often not accurate enough, which cannot meet the user's personalized needs for data display effects. In recent years, with the rapid development of front-end technology and the continuous changes in user needs, some new spreadsheet front-end components have begun to emerge. These components not only have the basic functions of traditional spreadsheet software, but also make bold innovations and attempts in data display methods. However, although these new components have made certain improvements in text rotation functions, there are still some problems. For example, when implementing text rotation, some components do not fully consider all factors that affect the position of cell text, resulting in inaccurate text position after rotation, and even conflict with cell borders or background colors, which seriously affects the readability and aesthetics of the data.

[0004] Therefore, how to implement accurate text rotation function in the front-end component of a spreadsheet and fully consider all factors that affect the position of text in a cell has become a technical problem that needs to be solved urgently. Summary of the invention

[0005] In an embodiment of the present application, a method for rotating text in a front-end component is provided to solve the problem of how to implement accurate text rotation in a spreadsheet front-end component and fully consider all factors affecting the position of cell text.

[0006] In a first aspect, an embodiment of the present application provides a method for rotating text in a front-end component, the method comprising: identifying the position of a target cell and obtaining text content and style information in 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 times is reached or a suitable font size is found; based on the width and font size of the target cell, wrapping the text that exceeds the effective size of the target cell, and obtaining the text content of each line and the total number of lines; calculating the position of the center of the text in nine combined alignments according to the horizontal and vertical alignment of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle; wherein the rotation angle is set to the text relative to the horizontal direction; for multiple lines of text, repeating the position determination step until the position of the center of all lines of text is determined; using the canvas interface, transforming and filling the text according to the rotation angle and the position of the text center, and when the target cell has a background color and a border, making the background color and border change synchronously with the text direction.

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

[0008] In a possible implementation, the text size is dynamically adjusted according to the size and rotation angle of the target cell, including: initializing a space variable and a font object; 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; 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 the space variable is determined based on the size and rotation angle of the target cell, and using a maximum 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 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 includes: using the current font size to calculate the text width; 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, iteratively executing the iteration steps until a preset number of times is reached or the value attribute in 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, the value attribute in the created font object is suitable, indicating 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 spatial variable value and the text width, calculating a new font size according to the adjustment ratio, and using the new font size to obtain an updated text width.

[0010] In a possible implementation, the text that exceeds the effective size of the target cell is wrapped according to the width and font size of the target cell, and the text content of each line and the total number of lines are obtained, including: initializing an empty array for storing each line of text after wrapping; initializing an empty character array for accumulating the text currently being processed; dividing the text to be processed into a word list, iteratively executing a traversal step to traverse each word in the word list, and traversing one word each time; the traversal step includes: according to the font size of the target cell, calculating the length of the string composed of the current word added to the currently accumulated character array, and judging whether it will exceed the effective size of the target cell; if it will not exceed, adding it to the character array; if it will exceed, wrapping; after the traversal is completed, checking whether there are any unprocessed characters in the character array; if so, adding them to the array as the last line; returning the array after 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 current accumulated character array is empty; if not empty, adding the content in the current accumulated character array as a line to the array, and clearing the current accumulated character array to obtain an empty character array; adding the current word to the cleared character array as the beginning of a new line.

[0012] In a possible implementation, the text center position is calculated in nine combined alignments according to the horizontal and vertical alignments of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, including: the first combined alignment is: horizontal right alignment and vertical bottom alignment; the text center position is calculated in the first combined alignment as follows: according to the formula Calculate the first horizontal offset; where, is the first horizontal offset, is the height of the virtual rectangular space occupied by the text, is the rotation angle of the text relative to the horizontal direction; according to the formula Calculate the second horizontal offset; where, is the second horizontal offset, is the width of the virtual rectangular space occupied by the text, is 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 horizontal offset and the second horizontal offset; according to the formula Calculate the first vertical offset; where, is the first vertical offset, is the height of the virtual rectangular space occupied by the text, is the rotation angle of the text relative to the horizontal direction; according to the formula Calculate the second vertical offset; where, is the second vertical offset, is the width of the virtual rectangular space occupied by the text, is 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 vertical offset and the second vertical offset; 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 combined alignment; the starting point coordinates are the vertex coordinates of the upper left corner of the target cell.

[0013] In a possible implementation, the second combined alignment is: horizontally aligned to the left and vertically aligned to the top. The calculation method for the position of the center of the text in the second combined alignment is: , ;in, is the third horizontal offset, is the third vertical offset; add the third horizontal offset and the third vertical offset to the starting point coordinates to obtain the position of the text center in the second combination alignment; the third combination alignment is: horizontal center alignment and vertical top alignment; the calculation method of the text center position in the third combination alignment is: , ;in, is the fourth horizontal offset, w is the width of the target cell, is the fourth vertical offset; add the fourth horizontal offset and the fourth vertical offset to the starting point coordinates to obtain the position of the text center in the third combination alignment; the fourth combination alignment is: horizontal right alignment and vertical top alignment; the calculation method of the text center position in the fourth combination alignment is: , ;in, is the fifth horizontal offset, is the fifth vertical offset; add the fifth horizontal offset and the fifth vertical offset to the starting point coordinates to obtain the position of the text center in the fourth combination alignment; the fifth combination alignment is: horizontal right alignment and vertical center alignment; the calculation method of the text center position in the fifth combination alignment is: , ;in, is the fifth horizontal offset, is the fifth vertical offset, is the height of the target cell; add the sixth horizontal offset and the sixth vertical offset to the starting point coordinates to obtain the position of the text center in the fifth combination alignment; the sixth combination alignment is: horizontal center alignment and vertical center alignment; the calculation method of the text center position in the sixth combination alignment is: , ;in, is the seventh horizontal offset, is 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 in the sixth combination alignment; the seventh combination alignment is: horizontal right alignment and vertical center alignment; the calculation method of the text center position in the seventh combination alignment is: , ;in, is the eighth horizontal offset, is 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 in the seventh combination alignment; the eighth combination alignment is: horizontal left alignment and vertical bottom alignment; the calculation method of the text center position in the eighth case is: , ;in, is the ninth horizontal offset, is 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 in the eighth combination alignment; the ninth combination alignment is: horizontal center alignment and vertical bottom alignment; the calculation method of the text center position in the ninth combination alignment is: , ;in, is the tenth horizontal offset, is the tenth vertical offset; add the tenth horizontal offset and the tenth vertical offset to the starting point coordinate to obtain the position of the text center for the ninth combined alignment.

[0014] In a possible implementation, for multiple lines of text, the position determination step is repeatedly performed until the positions of the centers of all lines of text are determined, including: 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 second line of text and each subsequent line of text, and calculating their horizontal offset increment relative to the first line of text; wherein the horizontal offset increment is the line spacing divided by the sine value of the rotation angle; adding 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 center of the current text; and calculating the center position of the current line of text based on the horizontal offset and vertical offset of the center of the current line of text.

[0015] In a second aspect, an embodiment of the present application provides a device for rotating text using a front-end component, the device comprising: an acquisition module for identifying the position of a target cell and acquiring text content and style information in the target cell; a conversion module for converting a 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 to ensure 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 times is reached or a suitable font size is found; and a line break processing module for processing text that exceeds the target cell according to the width and font size of the target cell. The text of the effective size of the cell is wrapped, and the text content of each line and the total number of lines are obtained; a calculation module is used to calculate the position of the center of the text in 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; wherein the rotation angle is set as the text relative to the horizontal direction; an execution module is used to repeat the position determination steps for multiple lines of text until the positions of the centers of all lines of text are determined; a transformation and filling module is used to transform and fill the text according to the rotation angle and the position of the text center using the interface of the canvas, and when the target cell has a background color and a border, the background color and the border are changed synchronously with the text direction.

[0016] One or more technical solutions provided in the embodiments of the present application have at least the following technical effects: The embodiment of the present application provides a method for rotating text by a front-end component, which provides a reliable data basis for subsequent text processing and drawing by identifying the position of the target cell and obtaining the text content and style information in the target cell. By converting the rotation angle into radians and calculating the trigonometric function value, the text size is dynamically adjusted in combination with the size of the target cell to ensure that the text can still fit the cell perfectly after rotation, avoid overflow or truncation, and enhance visual beauty. Using a loop structure, with a preset number of times as the upper limit, try different font sizes until the optimal font size that can meet both text clarity and cell size is found, thereby improving the efficiency and accuracy of text rendering. According to the width and font size of the target cell, the text that exceeds the effective size of the target cell is wrapped to ensure that the text content is clear and readable, while reducing the tediousness of manual adjustment by the user. According to 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 combined alignments. This processing method can ensure that the text still maintains the 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 accurate drawing of the entire text. Using the canvas interface, the text is transformed and filled according to the rotation angle and the position of the text center. This flexibility allows the text to be presented at any angle while maintaining a clear visual effect. When the target cell has a background color and a border, it can ensure that the background color and border change synchronously with the text direction, thereby maintaining the consistency and coordination of the overall visual effect. Through the above steps, the user experience in dealing with complex text layout and rotation can be significantly improved, the complexity and time cost of manual adjustment can be reduced, and work efficiency can be improved. The problem of how to implement accurate text rotation function in the spreadsheet front-end component and fully consider all factors that affect the position of cell text is solved. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments of the present application or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0018] Figure 1 A flowchart of a method for rotating text by a front-end component provided in an embodiment of the present application; Figure 2 A specific flow chart for dynamically adjusting the text size according to the size and rotation angle of the target cell provided in an embodiment of the present application; Figure 3A specific flow chart of using 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 an embodiment of the present application; Figure 4 A specific flow chart for performing line wrapping on text that exceeds the effective size of a target cell and obtaining the text content of each line and the total number of lines according to the width and font size of the target cell provided in an embodiment of the present application; Figure 5 A specific flow chart of the embodiment of the present application for repeatedly performing the position determination step for multiple lines of text until the positions of the centers of all lines of text are determined; Figure 6 A schematic diagram of the first combination alignment method provided in an embodiment of the present application; Figure 7 A schematic diagram of determining the position of the center of each line of text in a plurality of lines of text provided in an embodiment of the present application; Figure 8 A schematic diagram of a partial view of an electronic table provided in an embodiment of the present application; Fig. 9 A schematic diagram of rotating multiple lines of text for line wrapping provided in an embodiment of the present application; Fig.10 A schematic diagram of rotating a single line of text provided in an embodiment of the present application; Fig.11 A schematic diagram of a device for rotating text using a front-end component provided in an embodiment of the present application; Fig.12 A schematic diagram of a server for performing text rotation using a front-end component provided in an embodiment of the present application. DETAILED DESCRIPTION

[0019] The technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0020] The following describes some of the techniques involved in the embodiments of the present application to facilitate understanding, and they should be considered as merely exemplary. Therefore, it should be appreciated by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present application. Similarly, for the sake of clarity and conciseness, some descriptions of well-known functions and structures are omitted in the following description.

[0021] The present application embodiment provides a method for a front-end component to rotate text, such as Figure 1As shown, the method includes steps S101 to S108. Among them, Figure 1 This is only an execution order shown in the embodiment of the present application, and does not represent the only execution order of a method for rotating text by a front-end component. If the final result can be achieved, Figure 1 The steps shown may be performed in parallel or reversed.

[0022] It should be noted that, in actual applications, the above steps can be flexibly selected and adjusted according to the specific needs and preferences of the user, and not every step must be executed.

[0023] S101: Identify the location of a target cell, and obtain text content and style information in the target cell.

[0024] Specifically, the position of the target cell can be identified by the row number and column number. According to the position of the identified target cell, the text content and style information in the target cell can be obtained using the interface provided by the table control. In the development environment based on the SpreadJs table control, this function can be implemented through the public API. Pass the row number and column number of the target cell as parameters, and call the spread.getText(row,col) method to obtain the text content of the cell. Call the spread.getStyle(row,col) method to obtain the style information of the cell. This information is stored in the model (data structure) inside the table, and can be easily obtained through the public API (publicAPI) provided by the table control.

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

[0026] Specifically, the sign of the rotation angle needs to be clear. A positive angle indicates counterclockwise rotation, and a negative angle indicates clockwise rotation. The rotation angle value range of this application is set between -90 and 90 degrees. Since trigonometric functions are usually calculated in radians, it is necessary to convert the given angle into radians. Use the formula Converts the given angle to radians. is the given rotation angle in degrees, It is a constant in JavaScript (and many other programming languages) representing the value of pi, which is approximately equal to 3.141592653589793. For negative angles, in order to simplify subsequent calculations, you can first convert them to the corresponding positive angles, that is, take their absolute values, but be careful to retain the information about the direction of rotation. The trigonometric function values ​​corresponding to each radian include tangent, sine, and cosine values. Use JavaScript's built-in math functions Math.tan, Math.sin, and Math.cos to calculate the tangent, sine, and cosine values ​​corresponding to a given radian. These functions receive a radian value as a parameter and return the corresponding trigonometric function value.

[0027] The 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 a return value as the latest text. If the target cell does not use a formatting function, obtaining a current value of the target cell as the latest text.

[0028] Specifically, in SpreadJs, each cell can have an associated formatting function (cellformatter), which determines how the cell content is displayed. To determine whether the target cell uses a formatting function, you can check whether the cell has a set formatter property or get and apply the formatting function to determine whether there is a return value. If the target cell uses a formatting function, you need to execute this function to get the formatted text. Once it is determined that the target cell uses a formatting function and the function is executed, 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 formatting function, get the current value of the target cell as the latest text.

[0029] The application also includes: creating a canvas, the canvas is used to visually process the text in the target cell, and if the canvas has style information, calling the fill style attribute to clear the style information.

[0030] Specifically, before drawing text, in order to ensure the accuracy of drawing and avoid the interference of previously drawn content on the current drawing, the following preparations need to be made. First, a canvas object needs to be created. This canvas will serve as a platform for drawing text. Once the canvas is created, it may contain legacy style information from previous drawing, which will affect the drawing effect of the current text. In order to ensure that the drawn text is not affected by the previous drawing, it is necessary to clear these possible style information. This can be achieved by resetting the canvas's fill style (fillStyle), stroke style (strokeStyle), line width (lineWidth) and other properties. You can call the canvas.fillStyle method, i.e. the fill style property, to set the potentially contaminated area to a default theme color. This default theme color is a color that does not interfere with text drawing, usually white or the same color as the background color. By setting the fill style to this default color and filling the entire canvas area, you can ensure that any previously drawn content is overwritten, so that it will not affect the drawing of the current text. After executing the above steps, you can start drawing text on the current canvas.

[0031] S103: 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.

[0032] Figure 2 A specific flow chart for dynamically adjusting the text size according to the size and rotation angle of the target cell provided in the embodiment of the present application is as follows: Figure 2 As shown, it includes steps S201 to S204.

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

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

[0035] S203: 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.

[0036] Specifically, initialize the space variable space to 0. This variable will be used to represent the effective width of the target cell that can be used to display text. Initialize the font object minFont. This object contains a value attribute value, whose initial value is set to inappropriate (false). The value attribute will be used to mark whether the current font size is appropriate, that is, whether the text width is less than or equal to the space variable space.

[0037] S204: Calculate the value of the spatial variable, which is determined based on the size of the target cell and the rotation angle. Use a maximum 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.

[0038] Specifically, the size of the target cell is the width and height of the target cell. When the text is rotated, the space it occupies will also change accordingly. In particular, the rotation angle will affect the layout of the text in the cell and the displayable area. In order to ensure that the value of the space variable is always positive and can truly reflect the effective space in the target cell that can be used to display the text, it is necessary to use a maximum function, such as Math.max, to process it. This function is used to return the maximum value in a set of numbers. Through it, it can be ensured that the value of the space variable will not become negative due to calculation errors or negative input. Specifically, the value of the space variable can be calculated according to the following steps. According to the size of the target cell and the rotation angle of the text, the maximum width and height that the text may occupy in the cell are calculated, and this value is used as a candidate value of the space variable space. Use the maximum function Math.max to compare the candidate value of the space variable with a preset minimum positive value to ensure that the value of the space variable is always positive. The preset minimum positive value can be 1 or other values. If the calculated candidate value of the space variable is less than the minimum positive value, it is replaced by the minimum positive value.

[0039] S104: Using a loop structure to try different font sizes until a preset number of times is reached or a suitable font size is found.

[0040] Figure 3 The specific flow chart of using a loop structure to try different font sizes until a preset number of times is reached or a suitable font size is found is provided in the embodiment of the present application, such as Figure 3 As shown, it includes steps S301 to S304.

[0041] Specifically, a for loop can be used, with a preset number of 3 or other suitable preset times, or until the value attribute becomes true (suitable). This means that if a suitable font size is found, the loop will terminate early.

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

[0043] S302: Determine whether the value of the space variable of the target cell is smaller than the text width.

[0044] S303: If the value of the space variable of the target cell is smaller than the text width, iterative steps are performed iteratively until a preset number of times is reached or the value attribute in the created appropriate font object is appropriate.

[0045] The iteration steps include: calculating the adjustment ratio of the font size based on the ratio of the value of the space variable and the text width, calculating a new font size according to the adjustment ratio, and obtaining an updated text width using the new font size.

[0046] 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, indicating that there are 100 units of space available for displaying text, and the text width is 150, indicating that the text occupies 150 units of width at the current font size, then the adjustment ratio is 100 / 150, which is 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 above example, if the current font size is 20 points, then the new font size is 20 points multiplied by 0.67, which is approximately 13.4 points. After obtaining the new font size, you need to recalculate the width of the text. The updated text width will be used for comparison in the next iteration to determine whether further font size adjustment is needed.

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

[0048] S304: If the value of the space variable of the target cell is greater than or equal to the text width, the value attribute in the created font object is appropriate, indicating that a suitable font size has been found, and the loop structure is exited.

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

[0050] S105: According to the width and font size of the target cell, wrap the text that exceeds the effective size of the target cell, and obtain the text content of each line and the total number of lines.

[0051] Figure 4 The specific flow chart provided in the embodiment of the present application is to wrap the text that exceeds the effective size of the target cell according to the width and font size of the target cell, and obtain the text content of each line and the total number of lines, such as Figure 4 As shown, it includes steps S401 to S405.

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

[0053] Specifically, initialize an empty array lines. This array will be used to store each line of text after line wrapping. During the processing, every time a line of text is determined, whether it is a complete line or a line split due to line wrapping, it will be added to the lines array.

[0054] S402: Initialize an empty character array for accumulating the text currently being processed.

[0055] Specifically, this character array will be used to accumulate the text content currently being processed. In the process of traversing the word list, the words will be added to the character array one by one.

[0056] S403: Segment the text to be processed into a word list, iteratively perform a traversal step to traverse each word in the word list, and process one word each time.

[0057] The traversal steps include: according to 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 judging whether it will exceed the effective size of the target cell. If it will not exceed, adding it to the character array. If it will exceed, performing line wrapping.

[0058] It should be noted that the effective size of the target cell is the actual area that can be used to display text content, which is obtained by subtracting the border space reserved for the text content, i.e., the margin, from the size of the cell.

[0059] The line break process includes: checking whether the current accumulated character array is empty. If it is not empty, adding the content in the current accumulated character array as a line to the array, and clearing the current accumulated character array to obtain a cleared character array. Adding the current word to the cleared character array as the beginning of a new line.

[0060] Specifically, check whether the currently accumulated character array is empty. If it is empty, it means that no text has been accumulated yet, so there is no need to perform a line break operation. If the currently accumulated character array is not empty, it means that some text has been accumulated. At this time, add the content in the currently accumulated string to the lines array as a complete line of text. And clear the currently accumulated character array so that the next line of text can be accumulated. Add the word currently being processed to the cleared character array as the beginning of a new line. Continue to process subsequent words until the text is processed. The line break process ensures that whenever the text is accumulated to the point where no more content can be added without exceeding the preset width, the accumulated text can be correctly added to the result array as a line, and a new line is started for subsequent text accumulation. In this way, the final lines array will contain multiple lines of text segmented according to the width requirements. It should be noted that this line break process step is usually triggered by the condition of whether the valid size of the target cell is exceeded when traversing the word list and processing each word. If the current word cannot be added to the currently accumulated character array without exceeding the valid size of the target cell, a line break process will be performed.

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

[0062] Specifically, if the character array is not empty, that is, it still contains characters, then these characters should be regarded as a complete line of text. At this time, these characters need to be added as the last line to the array used to store all line feeds. It should be noted that the unprocessed characters can be the remaining part of the last word.

[0063] S405: Return the array after line break processing and the total number of lines to obtain the text content of each line and the total number of lines.

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

[0065] S106: Calculate the position of the center of the text in nine combined alignments according to the horizontal and vertical alignments of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, wherein the rotation angle is set as the text relative to the horizontal direction.

[0066] According to 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 combined alignments, including: the first combined alignment is: horizontally aligned to the right and vertically aligned to the bottom. Figure 6 This is a schematic diagram of the first combination alignment method provided in the embodiment of the present application. Figure 6 As shown, the calculation method for the position of the text center in the first combination alignment is: According to the formula Calculate the first horizontal offset. is the first horizontal offset, is the height of the virtual rectangular space occupied by the text, is the rotation angle of the text relative to the horizontal direction. According to the formula Calculate the second horizontal offset. is the second horizontal offset, is the width of the virtual rectangular space occupied by the text, is 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 horizontal offset and the second horizontal offset. The calculation method of the first total horizontal offset is: .in, is the first total horizontal offset, is the width of the target cell, is the first horizontal offset, is the second horizontal offset. According to the formula Calculate the first vertical offset. is the first vertical offset, is the height of the virtual rectangular space occupied by the text, is the rotation angle of the text relative to the horizontal direction. According to the formula Calculate the second vertical offset. is the second vertical offset, is the width of the virtual rectangular space occupied by the text, 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 vertical offset and the second vertical offset. The calculation method of the first total vertical offset is: in, is the first total vertical offset, is the height of the target cell, is the first horizontal offset, is the second horizontal offset.

[0067] 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 mode. The starting point coordinates are the vertex coordinates of the upper left corner of the target cell. It should be noted that the starting coordinates can be set to (0,0).

[0068] The second combination alignment is: horizontally aligned to the left, vertically aligned to the top. The calculation method for the position of the text center in the second combination alignment is: , .in, is the third horizontal offset, The third vertical offset is added to the starting point coordinates to obtain the position of the text center in the second combination alignment.

[0069] The third combination alignment is: horizontal center alignment, vertical top alignment. The calculation method for the position of the text center in the third combination alignment is: , .in, is the fourth horizontal offset, 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 in the third combination alignment.

[0070] The fourth combination alignment is: horizontally aligned to the right, vertically aligned to the top. The calculation method for the position of the text center in the fourth combination alignment is: , .in, is the fifth horizontal offset, The fifth vertical offset is added to the starting point coordinates to obtain the position of the text center in the fourth combination alignment.

[0071] The fifth combination alignment is: horizontal right alignment, vertical center alignment. The calculation method for the position of the text center in the fifth combination alignment is: , .in, is the fifth horizontal offset, 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 position of the text center in the fifth combination alignment.

[0072] The sixth combination alignment is: horizontal center alignment, vertical center alignment. The calculation method for the position of the text center in the sixth combination alignment is: , .in, is the seventh horizontal offset, The seventh vertical offset is added to the starting point coordinates to obtain the position of the text center for the sixth combination of alignments.

[0073] The seventh combination alignment is: horizontal right alignment, vertical center alignment. The calculation method for the position of the text center in the seventh combination alignment is: , .in, is the eighth horizontal offset, The eighth vertical offset is added to the starting point coordinates to obtain the position of the text center in the seventh combination alignment.

[0074] The eighth combination alignment is: horizontally aligned to the left, vertically aligned to the bottom. The calculation method for the position of the text center in the eighth combination alignment is: , .in, is the ninth horizontal offset, The ninth vertical offset is added to the ninth horizontal offset and the ninth vertical offset to obtain the position of the text center in the eighth combination alignment.

[0075] The ninth combination alignment is: horizontal center alignment, vertical bottom alignment. The calculation method for the position of the text center in the ninth combination alignment is: , .in, is the tenth horizontal offset, The tenth vertical offset is added to the starting point coordinates to obtain the position of the text center in the ninth combination alignment.

[0076] S107: For multiple lines of text, the position determination step is repeated until the positions of the centers of all lines of text are determined.

[0077] Figure 5 The specific flow chart of the embodiment of the present application for repeatedly performing the position determination step for multiple lines of text until the positions of the centers of all lines of text are determined is as follows: Figure 5 As shown, it includes steps S501 to S504.

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

[0079] S502: Calculate the horizontal offset increment of the second line of text and each subsequent line of text relative to the first line of text, wherein the horizontal offset increment is the line spacing divided by the sine value of the rotation angle.

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

[0081] 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 center point of the current text; S504: Calculate the center position of the current line of text according to the horizontal offset and the vertical offset of the center of the current line of text.

[0082] Figure 7 A schematic diagram of determining the position of the center of each line of text in a plurality of lines of text provided in an embodiment of the present application. Figure 7 As shown in the figure, there is a blue line passing through the center of the first line of text and the center of the second line of text. The blue line is the horizontal offset increment, which is calculated by dividing the line spacing by the sine of the rotation angle. The line spacing refers to the vertical distance between two lines of text, and the rotation angle is the rotation angle of the text relative to the horizontal direction. The vertical offset of the second line of text and subsequent lines of text does not need to be updated in this case. The black rectangle is a cell, which rotates synchronously with the rotation direction of the text.

[0083] Further, handling text margins is an important step to ensure that text has appropriate space when it is displayed in a cell or a specified area. When text margins are customizable, it means that the user can adjust the distance between the text and the border of the cell as needed. This customized text spacing is essential to improving the readability and aesthetics of the text. When it is necessary to handle such custom text margins and adjust the position of the text center, the following steps can be followed. 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 border of the cell. Using these margin values, the border area of ​​the text can be calculated. This border area is the area where the text can be displayed without being too close to the cell border. In the step of calculating the position of the text center in nine combined alignments, these customized text margins need to be considered to adjust the position coordinates of the text center point. Specifically, the horizontal and vertical offsets need to be corrected according to 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 customized left and right margins, that is, the margins in the horizontal direction, the width of these margins needs to be subtracted 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 center point of the text is usually half the height of the cell. However, due to the custom top and bottom margins, i.e. the vertical margins, the height of these margins needs 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. Apply the corrected horizontal and vertical offsets to the center point position coordinates of the text to ensure that the text is displayed with the correct position and spacing within the cell.

[0084] 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 the border are transformed synchronously with the text direction.

[0085] Specifically, you can call the canvas's translate, rotate, and fillText APIs to complete the drawing and transformation of text. First, based on the calculated position of the text center, the rotation angle, and the text content, use the translate method to translate the canvas coordinate system to the text center, and use the rotate method to rotate the canvas coordinate system according to the specified rotation angle. Finally, use the fillText method to fill the text in the rotated canvas coordinate system to complete the drawing of the rotated text. On this basis, if the target cell has a background color and a border, further processing is required so that the background color and border can also be transformed synchronously with the direction of the text. This means that before rotating the text, the background color and border should be drawn, and their direction and position also need to be adjusted accordingly according to the rotation angle to ensure that the background color and border maintain the same direction and appearance as the rotated text.

[0086] Furthermore, when the target cell and text need to be rotated to the same angle, the coordinate points of the border lines of the target cell cannot be simply calculated by the cell width and height in the unrotated state, 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 coordinate points of the four border lines of the top, bottom, left and right should be calculated, and the calculation method is as follows.

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

[0088] The calculation method of the coordinates of the end point of the top border is: x = coordinates of the starting point of the top border x + cell width, y = cell starting point y.

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

[0090] The coordinates of the end point of the bottom border are x = cell starting point x + cell width, and y = cell border starting point y + cell height.

[0091] Once you have determined the four vertices of the rotated bounding box, you can use the canvas fillRect method or other fill methods to fill the background color.

[0092] Figure 8 Schematic diagram of a partial view of an electronic table provided in an embodiment of the present application. 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 attributes represent the horizontal and vertical alignment of the cell content, respectively. For example, "hAlign=left" means horizontal left alignment, and "vAlign=top" means vertical top alignment. These attributes can help users adjust the layout of cell content to make it more beautiful and readable. The rotate attribute represents the rotation angle of the text content in the cell. For example, "rotate=30" means 30 degrees clockwise rotation, and "rotate=-30" means 30 degrees counterclockwise rotation. Through the rotation attribute, users can adjust the direction of the cell content to meet different display requirements.

[0093] Fig. 9 A schematic diagram of rotating multiple lines of text for line wrapping provided in an embodiment of the present application. Fig. 9 As shown in the figure, the text after line wrapping is displayed as multiple lines, each line is closely arranged together to form a neat and orderly text block. This display effect helps improve the user's reading experience and comprehension ability.

[0094] Fig.10 This is a schematic diagram of the rotation of a single line of text provided in an embodiment of the present application. Fig.10 As shown, when the text in the cell does not exceed the effective size of the target cell, it will be displayed in a single line.

[0095] The embodiment of the present application also provides a device 1100 for rotating text using a front-end component, such as Fig.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.

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

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

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

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

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

[0101] The calculation module 1106 is used to calculate the position of the center of the text in nine combined alignments according to the horizontal and vertical alignments of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, wherein the rotation angle is set as the text relative to the horizontal direction.

[0102] The execution module 1107 is used to repeatedly execute the position determination step for multiple lines of text until the positions of the centers of all lines of text are determined.

[0103] The transformation and filling module 1108 is used to utilize the canvas interface to transform and fill the text 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 the border are transformed synchronously with the text direction.

[0104] Some modules in the apparatus described in the present application can be described in the general context of computer executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, classes, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0105] The devices or modules described in the above application embodiments can be implemented by computer chips or entities, or by products with certain functions. For the convenience of description, the above devices are described in various modules according to their functions. When implementing the embodiments of the present application, the functions of each module can be implemented in the same or multiple software and / or hardware. Of course, the module that implements a certain function can also be implemented by combining multiple sub-modules or sub-units.

[0106] The methods, devices or modules described in this application can be implemented in the form of computer-readable program codes. The controller can be implemented in any appropriate manner. For example, the controller can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program codes (such as software or firmware) that can be executed by the (micro)processor, logic gates, switches, application-specific integrated circuits (English: Application Specific Integrated Circuit, referred to as: ASIC), 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 Silicone Labs C8051F320. The memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art also know that in addition to implementing the controller in the form of pure computer-readable program codes, the controller can be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers and embedded microcontrollers by logically programming the method steps. Therefore, this controller can be considered as a hardware component, and the devices included in it for implementing various functions can also be regarded as structures within the hardware component. Or even, the means for realizing various functions may be regarded as both a software module for realizing the method and a structure within a hardware component.

[0107] like Fig.12 As shown, an embodiment of the present application also provides a server for a front-end component to perform text rotation, 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 a method for performing text rotation by a front-end component described above in an embodiment of the present application.

[0108] An embodiment of the present application also provides a computer-readable storage medium, which stores executable instructions. When a computer executes the executable instructions, it can implement the method for rotating text by a front-end component described above in the embodiment of the present application.

[0109] It can be seen from the description of the above implementation methods that those skilled in the art can clearly understand that the present application can be implemented by means of software plus necessary hardware. Based on this understanding, the technical solution of the present application can be essentially or partly contributed to the prior art in the form of a software product, or it can be reflected in the implementation process of data migration. The computer software product can be stored in a storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a mobile terminal, a server, or a network device, etc.) to execute the method described in the embodiment of the present application.

[0110] The various embodiments in this specification are described in a progressive manner, and the same or similar parts between the various embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. All or part of this application can be used in many general or special computer system environments or configurations.

[0111] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit the present application. Although the present application has been described in detail with reference to the aforementioned embodiments, a person of ordinary skill in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some or all of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the present application.

Claims

1. A method for rotating text using a front-end component, characterized in that: include: Identify the location of the target cell and obtain the text content and style information in the target cell; Convert the rotation angle to radians and use built-in functions to get the trigonometric function value corresponding to each radian; 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; Use a loop structure to try different font sizes until a preset number of times is reached or a suitable font size is found; According to the width and font size of the target cell, wrap the text that exceeds the effective size of the target cell, and obtain the text content of each line and the total number of lines; The position of the text center is calculated in nine combined alignments according to the horizontal and vertical alignments of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle; the rotation angle is set as the text relative to the horizontal direction; For multiple lines of text, the position determination step is repeated until the positions of the centers of all lines of text are determined; Use the canvas interface to transform and fill the text 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.

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

3. The method for rotating text using a front-end component according to claim 1, characterized in that: The method of dynamically adjusting the text size according to the size and rotation angle of the target cell includes: Initialize space variables and font objects; 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; 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; Calculate the value of the spatial variable. The value of the spatial variable is determined based on the size of the target cell and the rotation angle. Use the maximum function to ensure that the value of the spatial variable is always positive to ensure that the drawn text does not exceed the size of the target cell.

4. The method for rotating text using a front-end component according to claim 3, characterized in that: The loop structure is used to try different font sizes until a preset number of times is reached or a suitable font size is found, including: Calculate text width using current font size; Determine whether the value of the space variable of the target cell is less than the text width; If the value of the space variable of the target cell is less than the text width, the iteration step is performed iteratively until the preset number of times is reached or the value attribute in the created appropriate font object is appropriate; If the value of the space variable of the target cell is greater than or equal to the text width, the value attribute in the created font object is appropriate, indicating that a suitable font size has been found, and the loop structure is exited; The iteration step includes: calculating the adjustment ratio of the font size based on the ratio of the value of the space variable and the text width, calculating a new font size according to the adjustment ratio, and obtaining an updated text width using the new font size.

5. The method for rotating text using a front-end component according to claim 1, characterized in that: The text that exceeds the effective size of the target cell is wrapped according to the width and font size of the target cell, and the text content of each line and the total number of lines are obtained, including: Initialize an empty array to store each line of text after line wrapping; Initialize an empty character array to accumulate the text currently being processed; The text to be processed is divided into a word list, and the traversal step is iterated to traverse each word in the word list, and each traversal processes one word; The traversal step includes: according to 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 judging whether it will exceed the effective size of the target cell; if it will not exceed, adding it to the character array; if it will exceed, performing line wrapping processing; After the traversal is finished, check if there are any unprocessed characters in the character array; if so, add them to the array as the last row; Returns an array after line wrapping and the total number of lines to obtain the text content of each line and the total number of lines.

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

7. The method for rotating characters by a front-end component according to claim 1, characterized in that: The text center position is calculated in nine combined alignment modes according to the horizontal and vertical alignment modes of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle, including: The first combination alignment is: horizontally aligned to the right and vertically aligned to the bottom; The calculation method for the position of the text center in the first combination alignment is: according to the formula Calculate the first horizontal offset; where, is the first horizontal offset, is the height of the virtual rectangular space occupied by the text, The rotation angle of the text relative to the horizontal direction; According to the formula Calculate the second horizontal offset; where, is the second horizontal offset, is the width of the virtual rectangular space occupied by the text, 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 horizontal offset and the second horizontal offset; According to the formula Calculate the first vertical offset; where, is the first vertical offset, is the height of the virtual rectangular space occupied by the text, The rotation angle of the text relative to the horizontal direction; According to the formula Calculate the second vertical offset; where, is the second vertical offset, is the width of the virtual rectangular space occupied by the text, 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 vertical offset and the second vertical offset; The coordinates of the starting point are added to the first total horizontal offset and the first total vertical offset to obtain the position of the center of the text in the first combined alignment mode; the coordinates of the starting point are the vertex coordinates of the upper left corner of the target cell.

8. The method for rotating characters by a front-end component according to claim 7, characterized in that: The second combination alignment is: horizontally aligned to the left, vertically aligned to the top; the calculation method for the position of the text center in the second combination alignment is: , ;in, is the third horizontal offset, is the third vertical offset; add the third horizontal offset and the third vertical offset to the starting point coordinate to obtain the position of the text center in the second combination alignment; The third combination alignment is: horizontal center alignment, vertical top alignment; the calculation method for the position of the text center in the third combination alignment is: , ;in, is the fourth horizontal offset, w is the width of the target cell, is the fourth vertical offset; the fourth horizontal offset and the fourth vertical offset are added to the starting point coordinates to obtain the position of the text center in the third combination alignment mode; The fourth combination alignment is: horizontally aligned to the right, vertically aligned to the top; the calculation method for the position of the text center in the fourth combination alignment is: , ;in, is the fifth horizontal offset, is the fifth vertical offset; the fifth horizontal offset and the fifth vertical offset are added to the starting point coordinates to obtain the position of the text center in the fourth combination alignment; The fifth combination alignment is: right alignment in horizontal direction and center alignment in vertical direction. The calculation method of the text center position in the fifth combination alignment is: , ;in, is the fifth horizontal offset, is the fifth vertical offset, is the height of the target cell; add the sixth horizontal offset and the sixth vertical offset to the starting point coordinates to obtain the position of the text center in the fifth combination alignment; The sixth combination alignment is: horizontal center alignment, vertical center alignment; the calculation method for the position of the text center in the sixth combination alignment is: , ;in, is the seventh horizontal offset, is the seventh vertical offset; the coordinates of the starting point are added to the seventh horizontal offset and the seventh vertical offset to obtain the position of the text center in the sixth combination alignment; The seventh combination alignment is: right alignment in horizontal direction and center alignment in vertical direction. The calculation method of the text center position in the seventh combination alignment is: , ;in, is the eighth horizontal offset, is the eighth vertical offset; the eighth horizontal offset and the eighth vertical offset are added to the starting point coordinates to obtain the position of the text center in the seventh combination alignment; The eighth combination alignment is: horizontally aligned to the left, vertically aligned to the bottom; in the eighth case, the calculation method for the position of the text center is: , ;in, is the ninth horizontal offset, is the ninth vertical offset; add the ninth horizontal offset and the ninth vertical offset to the starting point coordinate to obtain the position of the text center in the eighth combination alignment; The ninth combination alignment is: horizontal center alignment, vertical bottom alignment; the calculation method for the position of the text center in the ninth combination alignment is: , ;in, is the tenth horizontal offset, is the tenth vertical offset; add the tenth horizontal offset and the tenth vertical offset to the starting point coordinate to obtain the position of the text center for the ninth combined alignment.

9. The method for rotating text using a front-end component according to claim 1, characterized in that: The step of repeatedly performing the position determination step for multiple lines of text until the positions of the centers of all lines of text are determined includes: Starting from the first line of text, determine its combined alignment and calculate the position of the center of the first line of text; Calculate the horizontal offset increment of the second line of text and each subsequent line of text relative to the first line of text; the horizontal offset increment is the line spacing divided by the sine value 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 center point of the current text; The center position of the current line of text is calculated based on the horizontal offset and vertical offset of the center of the current line of text.

10. A device for rotating text using a front-end component, characterized in that: include: An acquisition module is used to identify the location of a target cell and obtain text content and style information in the target cell; The conversion module is used to convert the rotation angle into radians and use the built-in functions to obtain the trigonometric function value corresponding to each radian; The adjustment module 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; The try module is used to try different font sizes using a loop structure until a preset number of times is reached or a suitable font size is found; A line break processing module is used to perform line break processing on text that exceeds the effective size of the target cell according to the width and font size of the target cell, and obtain the text content of each line and the total number of lines; A calculation module, used to calculate the position of the center of the text in nine combined alignments according to the horizontal and vertical alignments of the target cell, the virtual rectangular space occupied by the text, and the set rotation angle; wherein the rotation angle is set as the text relative to the horizontal direction; An execution module, for repeatedly executing the position determination step for multiple lines of text until the positions of the centers of all lines of text are determined; The transformation and filling module is used to utilize the canvas interface to transform and fill text 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 the border are transformed synchronously with the text direction.

Images