Text rendering method and device, nonvolatile storage medium and computer equipment
By extracting and encoding the key feature points of the text, generating a rendering array and depicting the text shape on the canvas, the problem of low efficiency of dynamic text rendering in the existing technology is solved, and efficient text rendering and instant response are achieved.
Patent Information
- Application Number
- CN202510693755.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-27
- Publication Date
- 2025-09-23
AI Technical Summary
Existing technologies are inefficient in handling dynamic text updates, rendering of extremely long text, and adaptability to multiple devices and resolutions. Especially on mobile devices and in limited resource environments, optimizing memory and performance has become an urgent issue to be addressed.
By extracting the key feature points of the target text, encoding them based on their positions, generating a rendering array, and depicting the shape of the target text on the canvas for rendering, only the necessary pixel information that affects the visual effect is processed, avoiding complex texture mapping and path calculations.
It improves the efficiency of dynamic text processing and enables instant response to changes in text content without the need to repeatedly load or update large amounts of resources, thereby improving rendering speed and user experience.
Smart Images

Figure CN120688442A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a text rendering method, apparatus, non-volatile storage medium, and computer equipment. Background Art
[0002] With the rapid development of computer graphics and image processing technology, the demand for high-performance computing and visualization technologies in the field of text display is growing. Traditional text rendering methods mainly include bitmap fonts, vector fonts, and text textures. Although bitmap fonts are simple to implement and have fast rendering speeds, they are bulky and have limited flexibility. Vector fonts solve the problem of distortion-free scaling, but are computationally complex and memory-intensive for real-time rendering. While text textures reduce draw calls, they are inefficient for text updates and processing very long text, and their memory management is complex.
[0003] These traditional technologies have significant limitations in handling dynamic text updates (such as real-time chat and dynamic notifications), rendering very long text, and adapting to multiple devices and resolutions. Especially on mobile devices and in environments with limited resources, optimizing memory and performance has become a pressing issue. Furthermore, with the increasing demand for high-quality, high-performance text rendering in modern applications and games, developers are seeking more advanced and efficient methods to overcome the limitations of traditional technologies.
[0004] In summary, the current graphics display systems and text display methods have limitations in the real-time dynamic generation and optimization of graphics processing codes and text display codes, and need further improvement and optimization.
[0005] To address the above-mentioned problems, no effective solutions have been proposed so far. Summary of the Invention
[0006] Embodiments of the present invention provide a text rendering method, apparatus, non-volatile storage medium, and computer device to at least solve the technical problem of low efficiency of text rendering methods in the prior art.
[0007] According to one aspect of an embodiment of the present invention, a text rendering method is provided, comprising: extracting key feature points of a target text, wherein the key feature points are used to describe the shape of the target text; encoding the target text based on the positions of the key feature points to obtain a rendering array of the target text; and rendering the target text by depicting the shape of the target text on a canvas based on the rendering array.
[0008] Optionally, extracting key feature points of the target text includes: constructing a target area including the target text; dividing the target area into multiple sub-areas; determining the transparency of the target text in the multiple sub-areas respectively; and determining key feature points based on the transparency of the target text in the multiple sub-areas respectively.
[0009] Optionally, determining key feature points according to the transparency of the target text in a plurality of sub-regions includes: marking sub-regions with transparency lower than a predetermined threshold as key sub-regions; and determining key feature points according to the key sub-regions.
[0010] Optionally, based on the position of the key feature points, the target text is encoded to obtain a rendering array of the target text, including: determining the color value of the target text in the key sub-area; encoding the color value of the target text in the key sub-area into a color code; encoding the position of the key sub-area in the target area into a position code; and obtaining a rendering array of the target text based on the color code and the position code.
[0011] Optionally, based on the rendering array, the target text is rendered by depicting the shape of the target text on the canvas, including: establishing a canvas; dividing the canvas into multiple sub-canvases in the manner of dividing the target area into multiple sub-areas; displaying corresponding color values on the multiple sub-canvases according to the rendering array, depicting the shape of the target text on the canvas, and rendering the target text.
[0012] Optionally, according to the rendering array, corresponding color values are displayed on multiple sub-canvases respectively, the shape of the target text is depicted on the canvas, and the target text is rendered, including: decoding the rendering array to obtain position codes corresponding to each of the multiple sub-areas, and color codes corresponding to each of the multiple sub-areas; establishing a correspondence between the multiple sub-areas and the multiple sub-canvases according to the position codes corresponding to each of the multiple sub-areas; based on the correspondence, according to the color codes corresponding to each of the multiple sub-areas, corresponding color values are displayed on the multiple sub-canvases respectively, the shape of the target text is depicted on the canvas, and the target text is rendered.
[0013] According to another aspect of an embodiment of the present invention, a text rendering device is also provided, including: an extraction module for extracting key feature points of a target text, wherein the key feature points are used to describe the shape of the target text; an encoding module for encoding the target text based on the positions of the key feature points to obtain a rendering array of the target text; and a rendering module for rendering the target text by depicting the shape of the target text on a canvas based on the rendering array.
[0014] According to another aspect of an embodiment of the present invention, a non-volatile storage medium is provided. The non-volatile storage medium includes a stored program, wherein when the program is running, the device where the non-volatile storage medium is located is controlled to execute any one of the above-mentioned text rendering methods.
[0015] According to yet another aspect of an embodiment of the present invention, a computer device is provided. The computer device includes a processor, and the processor is configured to run a program. When the program is run, any one of the above-mentioned text rendering methods is executed.
[0016] According to yet another aspect of an embodiment of the present invention, a computer program product is provided, including a computer program. When the computer program is executed by a processor, any one of the above-mentioned text rendering methods is implemented.
[0017] In an embodiment of the present invention, key feature points of a target text are extracted, wherein the key feature points are used to describe the shape of the target text; based on the positions of the key feature points, the target text is encoded to obtain a rendering array of the target text; based on the rendering array, the target text is rendered by depicting the shape of the target text on a canvas, and only necessary pixel information that affects the visual effect of the text is processed, and a rendering array is generated, which can be parsed and executed by a shader more efficiently, avoiding the complex texture mapping and path calculation in traditional methods. By directly depicting the shape of the target text on the canvas, text rendering can respond to changes in text content instantly without repeatedly loading or updating a large amount of resources, thereby improving the efficiency of dynamic text processing and solving the technical problem of low efficiency of text rendering methods in the prior art. BRIEF DESCRIPTION OF THE DRAWINGS
[0018] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:
[0019] Figure 1 A hardware structure block diagram of a computer terminal for implementing a text rendering method is shown;
[0020] Figure 2 is a flowchart of a text rendering method provided according to an embodiment of the present invention;
[0021] Figure 3 4 is a structural block diagram of a text rendering device provided according to an optional embodiment of the present invention. DETAILED DESCRIPTION
[0022] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.
[0023] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0024] According to an embodiment of the present invention, a method embodiment of text rendering is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.
[0025] The method embodiment provided in the first embodiment of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Figure 1 FIG. 1 shows a hardware structure block diagram of a computer terminal for implementing a text rendering method. Figure 1 As shown, the computer terminal 10 may include one or more (illustrated as 102a, 102b, ..., 102n in the figure) processors (the processor may include but is not limited to a microprocessor MCU or a programmable logic device FPGA and other processing devices), a memory 104 for storing data. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the BUS bus), a network interface, a power supply and / or a camera. It will be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 1 More or fewer components than shown, or with Figure 1 Different configurations shown.
[0026] It should be noted that the one or more processors and / or other data processing circuits described above may generally be referred to herein as "data processing circuitry." The data processing circuitry may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuitry may be a single, independent processing module, or may be incorporated in whole or in part into any of the other components of the computer terminal 10. As described in the embodiments of the present application, the data processing circuitry serves as a processor control (e.g., selection of a variable resistor terminal path connected to an interface).
[0027] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the text rendering method in the embodiment of the present invention. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, implementing the text rendering method of the above-mentioned application. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely located relative to the processor, and these remote memories may be connected to the computer terminal 10 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0028] The display may be, for example, a touch screen liquid crystal display (LCD) that enables a user to interact with a user interface of the computer terminal 10 .
[0029] Figure 2 is a flowchart of a text rendering method according to an embodiment of the present invention. Figure 2 As shown, the method includes the following steps:
[0030] Step S202 : extracting key feature points of the target text, wherein the key feature points are used to describe the shape of the target text.
[0031] This step, performed by a computer system, will perform an in-depth analysis of the target text being rendered, identifying and extracting the core pixels that make up the text's shape, known as key feature points. Key feature points are typically selected based on factors such as character edges, stroke thickness, and visual saliency. These features can concisely depict the text's appearance without losing important information, reducing the number of pixels that require attention in subsequent processing and improving efficiency.
[0032] Step S204 : encoding the target text based on the positions of the key feature points to obtain a rendering array of the target text.
[0033] In this step, the position information of the key feature points extracted in the previous step can be converted into a special data format and stored, namely a render array. A render array is a numerical value or string that encodes the coordinates, brightness, and other information of the feature points, making it easy for shaders (such as GLSL) to directly read and process it.
[0034] Step S206 : Rendering the target text by drawing the shape of the target text on the canvas based on the rendering array.
[0035] Canvas is a graphics rendering technology widely used in web and game development. It allows developers to directly draw graphics and text through scripts, providing a high degree of customization and flexibility. In this step, the system uses the rendering array obtained from the previous step to reconstruct the shape of the target text on the canvas (Canvas), completing the actual rendering work. Specifically, the shader reads the information in the rendering array and reproduces the visual effect of the text on the canvas based on the position and color of key feature points. This avoids the steps of loading and parsing large atlases in traditional methods, significantly improving rendering efficiency.
[0036] Through the above steps, only the necessary pixel information that affects the visual effect of the text is processed and a rendering array is generated, which can be parsed and executed by the shader more efficiently, avoiding the complex texture mapping and path calculation in traditional methods. By directly depicting the shape of the target text on the canvas, the text rendering can respond instantly to changes in the text content without repeatedly loading or updating a large amount of resources, thereby improving the efficiency of dynamic text processing and solving the technical problem of low efficiency of text rendering methods in the existing technology.
[0037] As an optional embodiment, extracting key feature points of the target text can be achieved through the following steps: constructing a target area including the target text; dividing the target area into multiple sub-areas; determining the transparency of the target text in the multiple sub-areas respectively; and determining key feature points based on the transparency of the target text in the multiple sub-areas respectively.
[0038] Optionally, this embodiment details how to optimize the text rendering process by extracting key feature points, which is particularly suitable for application scenarios that require real-time updating and processing of large amounts of text, such as online game chat systems, real-time news push, and dynamic message streams on social media.
[0039] First, extract the key features of the target text. This can be done by analyzing the text data itself. The target area can be a virtual space created by the programming environment, used to load and analyze the image data of the target text entered by the user. For example, in front-end development, this might be an image layer created using the Canvas API, which will be used to draw the text and extract its pixel features. The size and shape of the target area should be sufficient to accommodate the entire text content, ensuring that all pixel information can be fully analyzed.
[0040] Secondly, in order to more efficiently analyze the pixel features of the text, the target area is divided into smaller sub-areas. The sub-area division method can be flexibly selected according to specific application requirements and performance goals, such as division by column, row, or fixed-size blocks. The purpose of partitioning is to break down the image information of the text into smaller, more manageable and easier to analyze data blocks, thereby improving the accuracy and efficiency of feature extraction. For example, when analyzing Chinese text, each Chinese character has a complex structure. Dividing the target area into smaller sub-areas helps capture the shape details of each Chinese character, thereby more accurately determining key feature points.
[0041] When analyzing text within each subregion, transparency (alpha value) measures the degree of opacity of each pixel and is crucial for understanding the shape and edges of the text. Within each subregion, by reading pixel data, the alpha value of each pixel can be determined, enabling edge detection of the text. In real-world applications, such as social media instant messaging systems, users may send text containing transparent elements, such as special characters or emoticons with transparent backgrounds.
[0042] As an optional embodiment, key feature points are determined based on the transparency of the target text in multiple sub-regions. This can be achieved by the following steps: marking sub-regions with transparency lower than a predetermined threshold as key sub-regions; and determining key feature points based on the key sub-regions.
[0043] Optionally, after determining the transparency of each sub-region, a certain transparency threshold can be set to filter out pixels with alpha values higher than the threshold. These pixels, especially those at edge positions or shape turning points, are determined as key feature points.
[0044] This approach allows us to identify the basic outline and important strokes of text, while ignoring internal pixels that have little impact on the shape. When determining key feature points, in addition to the alpha value, we can also consider the pixel's position, brightness, and contrast with adjacent pixels to ensure that the extracted feature points fully reflect the visual characteristics of the text.
[0045] Consider the dynamic chat interface of an online game, for example. In game development, chat boxes need to display conversations between players in real time. These conversations can contain complex and varied text, such as special characters, emoticons, and mixed languages. To efficiently render this dynamic text, a target region is first created to store and analyze the user-entered text as an image. This region is then divided into multiple subregions, each serving as an independent analysis unit. Within each subregion, the transparency of each pixel is analyzed, identifying those pixels above a set threshold as potential key feature points. Finally, based on the position and shape properties of these points, the key feature points that truly impact text rendering are determined. This key feature point data is then encoded and used to generate optimized shader code, enabling fast and accurate reproduction of all text details during the final display or rendering phase, without having to process all pixel information.
[0046] In summary, by constructing target analysis areas, sub-area division, transparency analysis, and key feature point determination, the computational complexity and resource consumption when rendering text can be effectively reduced, especially when processing complex or dynamic text. This method improves rendering efficiency, reduces latency, and enhances the end-user experience.
[0047] As an optional embodiment, the target text is encoded based on the position of the key feature points to obtain a rendering array of the target text. This can be achieved through the following steps: determining the color value of the target text in the key sub-area; encoding the color value of the target text in the key sub-area into a color code; encoding the position of the key sub-area in the target area into a position code; and obtaining a rendering array of the target text based on the color code and the position code.
[0048] Optionally, this embodiment illustrates how to encode the target text based on the position of key feature points. First, before converting the target text into a rendering array, it is necessary to accurately determine the color information of each key feature point. The color value refers to the color attribute of a pixel, which is usually represented by the brightness value of three channels: red (R), green (G), and blue (B), with the value of each channel ranging from 0 to 255. For each key sub-region, the color values of all pixels within it can be analyzed to determine the color attributes of the region. In practical applications, such as chat systems in online games, the analysis of color values helps to reproduce the details of various font colors and background colors in user chat messages, ensuring the accuracy and aesthetics of the final rendering effect. For each key sub-region, all pixels in the region are traversed and their RGB values are read. Then, a representative color value, i.e., the color value of the key feature point, is synthesized through a certain algorithm (such as taking the average, median, or most frequent color value).
[0049] Color encoding is the process of converting color values into a more compact numerical format for efficient storage and transmission in render arrays. Color encoding can be done by combining RGB values into an integer value, or by encoding using a more efficient color space such as HSV (hue, saturation, value) or YUV (brightness, chroma). In social media news feed updates, the use of color encoding helps reduce the amount of data transmitted and improves rendering speed. Specifically, the RGB value can be converted into a 32-bit integer. This can be achieved by shifting the R, G, and B values left by 16 bits, 8 bits, and 0 bits respectively, and then performing a bitwise OR operation.
[0050] Position encoding is used to indicate the specific location of key feature points in the target area. Position encoding can consist of the row and column numbers of the sub-area, or a more complex but more compact encoding scheme can be used, such as converting the row and column numbers into an integer value or encoding using a coordinate transformation matrix. In dynamic news applications, the use of position encoding ensures the position accuracy of text rendering and maintains good visual effects even on high-resolution screens. Specifically, the position information can be encoded as an integer by combining the row and column numbers of the sub-area. For example, if the key sub-area is located in the 3rd row and the 5th column, the position encoding can be to shift the row and column numbers left by 8 bits and 0 bits respectively, and then perform a bitwise OR operation to obtain an integer code, such as 0x00030005.
[0051] The render array is a compact data structure ultimately used by the shader for rendering, containing the color and position information of all key feature points. By combining color and position codes, an efficient render array can be constructed, helping the shader quickly locate and render each key feature point. Specifically, an array can be created, and for each key sub-region, the corresponding color and position codes are inserted into the array. The organization of the array can be optimized based on specific needs, such as sorting by position code order or using data structures such as hash tables for fast retrieval.
[0052] Taking the real-time chat feature of an online game as an example, the chat box in the game needs to render colored text sent by players, which may contain multiple colors and transparency. By determining the color value of the target text within the key sub-region and encoding it as a color code, we can ensure that the shader correctly renders every color detail of the text. Next, the position of the key sub-region is encoded, allowing the shader to quickly locate the exact position of each key feature point on the screen. Finally, combining color coding and position coding, a rendering array is constructed for efficient rendering of dynamic text, maintaining good performance even in scenarios with large amounts of text input or rapid updates.
[0053] In summary, by determining the color values, color encodings, and position encodings of key sub-regions and constructing rendering arrays, we can effectively optimize the text rendering process, making it particularly suitable for applications dealing with dynamic and complex text. This approach improves the user experience by reducing data volume and increasing rendering speed, while also reducing the load on the graphics processing unit (GPU), making it a key optimization strategy in modern graphics rendering technology.
[0054] As an optional embodiment, based on the rendering array, the target text is rendered by depicting the shape of the target text on the canvas, which can be achieved through the following steps: establishing a canvas; dividing the canvas into multiple sub-canvases in the manner of dividing the target area into multiple sub-areas; displaying corresponding color values on the multiple sub-canvases according to the rendering array, depicting the shape of the target text on the canvas, and rendering the target text.
[0055] As an optional embodiment, according to the rendering array, corresponding color values are displayed on multiple sub-canvases respectively, the shape of the target text is depicted on the canvas, and the target text is rendered. This can be achieved by the following steps: decoding the rendering array to obtain position codes corresponding to each of the multiple sub-areas, and color codes corresponding to each of the multiple sub-areas; establishing a correspondence between the multiple sub-areas and the multiple sub-canvases according to the position codes corresponding to each of the multiple sub-areas; based on the correspondence, according to the color codes corresponding to each of the multiple sub-areas, corresponding color values are displayed on the multiple sub-canvases respectively, the shape of the target text is depicted on the canvas, and the target text is rendered.
[0056] The canvas is a virtual space for drawing graphics and images, which provides flexible pixel-level operation capabilities. In JavaScript front-end development, the canvas is usually created by HTML5. <canvas>element. Optionally, when displaying the target text entered by the user on the interface, a canvas can be created first. The first step in creating a canvas is to determine its size to ensure that it can accommodate all the text content. For example, when processing the chat box of an online game, the size of the canvas should be consistent with the display area of the chat box to ensure the integrity and accuracy of text rendering. In front-end applications, the width and height of the canvas can usually be determined based on the expected display area of the target text. For example, if the chat box size is 300x50 pixels, the canvas will also be created with the same size.
[0057] The canvas can then be divided into corresponding sub-canvas areas based on the previously defined sub-area division of the target area. Each sub-canvas corresponds to a sub-area within the target area, facilitating pixel-accurate rendering of the text based on the color and position information stored in the render array. When processing updates to social media message streams, the sub-canvas division helps quickly locate and render specific text portions of each message unit, improving rendering efficiency. Specifically, the canvas can be divided based on simple positional operations, such as dividing the width or height into equal columns or rows. The coordinates and size of each sub-canvas are determined by the division of the target area into sub-areas, ensuring a one-to-one correspondence between the canvas sub-areas and the target area sub-areas.
[0058] The rendering array contains the position (position code) and color information (color code) of the key feature points of the target text. In this step, we traverse the rendering array, determine the position of each key feature point on the sub-canvas according to the position code, and then use the color code to draw pixels at the corresponding position. This method avoids indiscriminate drawing of the entire text area by rendering only the key feature points, significantly reducing calculation and resource consumption, especially in scenarios where dynamic and large amounts of text are processed. Specifically, for each element in the rendering array, the position code can be first parsed to determine the position of the key feature point corresponding to the element on the canvas. Next, the color code is parsed to obtain the color value of the point, and finally the pixel with the color value is drawn at the corresponding position of the corresponding sub-canvas. This method can effectively reduce unnecessary pixel drawing and improve rendering speed.
[0059] Finally, by drawing color pixels on the sub-canvas, the complete shape of the target text is gradually constructed. This method relies on the key feature point information extracted previously, and reconstructs the visual effect of the text by accurately drawing pixels at key positions. In dynamic news applications, news titles or content can be updated quickly, and a smooth display effect can be maintained even in scenarios with large amounts of text or frequent updates. Specifically, the pixel drawing on the canvas can be combined with the coordinates and color values of the key feature points to gradually construct the shape of the text. For each key feature point, its position on the canvas is determined, and then a pixel with the correct color value is drawn at that position. By traversing all key feature points, the complete shape of the target text is finally depicted on the entire canvas, achieving efficient rendering.
[0060] Take the real-time chat system of an online game as an example. The chat box in the game needs to render chat records from different players in real time. These records may contain multiple colors and font styles. When handling this requirement, we first create a canvas that matches the size of the chat box. Then, based on the sub-region division of the target text, the canvas is also divided into corresponding sub-canvases. Next, based on the position and color information in the rendering array, the corresponding pixel points are drawn on each sub-canvas, gradually reconstructing the text shape in each message. This method significantly reduces rendering latency by only drawing the key feature points of the text instead of the entire text area, improving the player's chat experience and maintaining good performance even in scenarios with large amounts of text input or rapid updates.
[0061] In summary, rendering target text on canvas using render arrays is a highly efficient, resource-efficient text rendering optimization method. By focusing on and rendering only the key features of the text, it avoids redundant rendering of the entire text area, improving rendering speed and reducing GPU overhead. It is a crucial technique for handling dynamic text in modern graphics rendering and front-end development.
[0062] It should be noted that for the aforementioned method embodiments, for simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should be aware that the present invention is not limited by the order of the actions described, because according to the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.
[0063] Through the description of the above embodiments, those skilled in the art can clearly understand that the text rendering method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform. Of course, it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in each embodiment of the present invention.
[0064] According to an embodiment of the present invention, a text rendering device for implementing the above text rendering method is also provided. Figure 3 is a structural block diagram of a text rendering device provided according to an embodiment of the present invention. Figure 3 As shown, the text rendering device includes: an extraction module 32, an encoding module 34 and a rendering module 36. The text rendering device is described below.
[0065] The extraction module 32 is used to extract key feature points of the target text, wherein the key feature points are used to describe the shape of the target text.
[0066] The encoding module 34 is connected to the extraction module 32 and is used to encode the target text based on the positions of the key feature points to obtain a rendering array of the target text.
[0067] The rendering module 36 is connected to the encoding module 34 and is configured to render the target text by drawing the shape of the target text on a canvas based on the rendering array.
[0068] It should be noted that the extraction module 32, encoding module 34, and rendering module 36 described above correspond to steps S202 to S206 in the embodiment. The examples and application scenarios implemented by these modules and corresponding steps are the same, but are not limited to the contents disclosed in the above embodiment. It should be noted that the above modules, as part of the apparatus, can be run in the computer terminal 10 provided in the embodiment.
[0069] An embodiment of the present invention may provide a computer device. Optionally, in this embodiment, the computer device may be located in at least one of a plurality of network devices in a computer network. The computer device includes a memory and a processor.
[0070] Among them, the memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the text rendering method and device in the embodiments of the present invention. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, that is, realizing the above-mentioned text rendering method. The memory may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include a memory remotely located relative to the processor, and these remote memories can be connected to the computer terminal via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0071] The processor can call the information and application stored in the memory through the transmission device to perform the following steps: extract the key feature points of the target text, where the key feature points are used to describe the shape of the target text; based on the position of the key feature points, encode the target text to obtain a rendering array of the target text; based on the rendering array, render the target text by depicting the shape of the target text on the canvas.
[0072] Optionally, the processor may also execute the program code of the following steps: extracting key feature points of the target text, including: constructing a target area including the target text; dividing the target area into multiple sub-areas; respectively determining the transparency of the target text in the multiple sub-areas; and determining key feature points based on the transparency of the target text in the multiple sub-areas.
[0073] Optionally, the processor may also execute program code for the following steps: determining key feature points based on the transparency of the target text in multiple sub-regions, including: marking sub-regions with transparency lower than a predetermined threshold as key sub-regions; and determining key feature points based on the key sub-regions.
[0074] Optionally, the above-mentioned processor can also execute the program code of the following steps: encoding the target text based on the position of the key feature points to obtain a rendering array of the target text, including: determining the color value of the target text in the key sub-area; encoding the color value of the target text in the key sub-area into a color code; encoding the position of the key sub-area in the target area into a position code; and obtaining a rendering array of the target text based on the color code and the position code.
[0075] Optionally, the processor may also execute the program code of the following steps: based on the rendering array, rendering the target text by drawing the shape of the target text on the canvas, including: establishing a canvas; dividing the canvas into multiple sub-canvases in the manner of dividing the target area into multiple sub-areas; displaying corresponding color values on the multiple sub-canvases according to the rendering array, drawing the shape of the target text on the canvas, and rendering the target text.
[0076] Optionally, the processor may also execute the program code of the following steps: displaying corresponding color values on a plurality of sub-canvases according to the rendering array, depicting the shape of the target text on the canvas, and rendering the target text, including: decoding the rendering array to obtain position codes corresponding to the plurality of sub-regions and color codes corresponding to the plurality of sub-regions; establishing a correspondence between the plurality of sub-regions and the plurality of sub-canvases according to the position codes corresponding to the plurality of sub-regions; based on the correspondence, displaying corresponding color values on the plurality of sub-canvases according to the color codes corresponding to the plurality of sub-regions, depicting the shape of the target text on the canvas, and rendering the target text.
[0077] An embodiment of the present invention provides a text rendering solution. By extracting key feature points of a target text, wherein the key feature points are used to describe the shape of the target text; based on the positions of the key feature points, the target text is encoded to obtain a rendering array of the target text; based on the rendering array, the target text is rendered by depicting the shape of the target text on a canvas, only processing the necessary pixel information that affects the visual effect of the text, and generating a rendering array, which can be parsed and executed by a shader more efficiently, avoiding the complex texture mapping and path calculation in traditional methods. By directly depicting the shape of the target text on the canvas, the text rendering can respond instantly to changes in the text content without repeatedly loading or updating a large amount of resources, thereby improving the efficiency of dynamic text processing and solving the technical problem of low efficiency of text rendering methods in the prior art.
[0078] A person skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing the hardware related to the terminal device through a program, and the program can be stored in a non-volatile storage medium, which may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.
[0079] The embodiment of the present invention further provides a non-volatile storage medium. Optionally, in this embodiment, the non-volatile storage medium can be used to store the program code executed by the text rendering method provided in the embodiment.
[0080] Optionally, in this embodiment, the non-volatile storage medium may be located in any computer terminal in a computer terminal group in a computer network, or in any mobile terminal in a mobile terminal group.
[0081] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: extracting key feature points of the target text, wherein the key feature points are used to describe the shape of the target text; encoding the target text based on the positions of the key feature points to obtain a rendering array of the target text; and rendering the target text by depicting the shape of the target text on a canvas based on the rendering array.
[0082] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: extracting key feature points of the target text, including: constructing a target area including the target text; dividing the target area into multiple sub-areas; respectively determining the transparency of the target text in the multiple sub-areas; and determining key feature points based on the transparency of the target text in the multiple sub-areas.
[0083] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: determining key feature points based on the transparency of the target text in multiple sub-areas respectively, including: marking sub-areas with transparency lower than a predetermined threshold as key sub-areas; and determining key feature points based on the key sub-areas.
[0084] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: encoding the target text based on the position of the key feature points to obtain a rendering array of the target text, including: determining the color value of the target text within the key sub-region; encoding the color value of the target text within the key sub-region into a color code; encoding the position of the key sub-region in the target region into a position code; and obtaining a rendering array of the target text based on the color code and the position code.
[0085] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: based on the rendering array, rendering the target text by depicting the shape of the target text on the canvas, including: establishing a canvas; dividing the canvas into multiple sub-canvases in a manner of dividing the target area into multiple sub-areas; displaying corresponding color values on the multiple sub-canvases according to the rendering array, depicting the shape of the target text on the canvas, and rendering the target text.
[0086] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for executing the following steps: displaying corresponding color values on multiple sub-canvases according to the rendering array, depicting the shape of the target text on the canvas, and rendering the target text, including: decoding the rendering array to obtain position codes corresponding to each of the multiple sub-regions and color codes corresponding to each of the multiple sub-regions; establishing a correspondence between the multiple sub-regions and the multiple sub-canvases according to the position codes corresponding to each of the multiple sub-regions; based on the correspondence, displaying corresponding color values on the multiple sub-canvases according to the color codes corresponding to each of the multiple sub-regions, depicting the shape of the target text on the canvas, and rendering the target text.
[0087] An embodiment of the present invention further provides a computer program product, including a computer program, which, when executed by a processor, implements the steps of the text rendering method in each embodiment of the present application.
[0088] The serial numbers of the above embodiments of the present invention are for description only and do not represent the advantages or disadvantages of the embodiments.
[0089] In the above embodiments of the present invention, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.
[0090] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only exemplary. For example, the division of the units can be a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.
[0091] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.
[0092] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.
[0093] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a non-volatile storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk, and other media that can store program code.
[0094] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as within the scope of protection of the present invention.< / canvas>
Claims
1. A text rendering method, characterized in that: include: Extracting key feature points of the target text, wherein the key feature points are used to describe the shape of the target text; Encoding the target text based on the positions of the key feature points to obtain a rendering array of the target text; The target text is rendered by drawing a shape of the target text on a canvas based on the rendering array.
2. The method according to claim 1, characterized in that The step of extracting key feature points of the target text includes: constructing a target area including the target text; Dividing the target area into a plurality of sub-areas; respectively determining the transparency of the target text in the plurality of sub-areas; The key feature points are determined according to the transparency of the target text in the multiple sub-areas respectively.
3. The method according to claim 2, characterized in that The determining of the key feature points according to the transparency of the target text in the plurality of sub-regions includes: marking sub-regions with transparency lower than a predetermined threshold as key sub-regions; The key feature points are determined according to the key sub-regions.
4. The method according to claim 3, characterized in that The encoding of the target text based on the positions of the key feature points to obtain a rendering array of the target text includes: Determine the color value of the target text in the key sub-region; Encoding the color value of the target text in the key sub-region into a color code; encoding the position of the key sub-region in the target region as a position code; A rendering array of the target text is obtained according to the color code and the position code.
5. The method according to claim 2, characterized in that The step of rendering the target text by depicting the shape of the target text on a canvas based on the rendering array includes: creating the canvas; Divide the canvas into a plurality of sub-canvases in a manner that the target area is divided into a plurality of sub-areas; According to the rendering array, corresponding color values are displayed on the multiple sub-canvases respectively, the shape of the target text is depicted on the canvas, and the target text is rendered.
6. The method according to claim 5, characterized in that Displaying corresponding color values on the plurality of sub-canvases respectively according to the rendering array, depicting the shape of the target text on the canvas, and rendering the target text includes: Decoding the rendering array to obtain position codes corresponding to each of the plurality of sub-regions and color codes corresponding to each of the plurality of sub-regions; Establishing a correspondence between the plurality of sub-regions and the plurality of sub-canvases according to the position codes corresponding to the plurality of sub-regions; Based on the corresponding relationship, corresponding color values are displayed on the multiple sub-canvases according to the color codes corresponding to the multiple sub-areas, the shape of the target text is depicted on the canvas, and the target text is rendered.
7. A text rendering device, characterized in that: include: An extraction module, configured to extract key feature points of a target text, wherein the key feature points are used to describe the shape of the target text; An encoding module, configured to encode the target text based on the positions of the key feature points to obtain a rendering array of the target text; A rendering module is configured to render the target text by depicting a shape of the target text on a canvas based on the rendering array.
8. A non-volatile storage medium, characterized in that: The non-volatile storage medium includes a stored program, wherein when the program is running, the device where the non-volatile storage medium is located is controlled to execute the text rendering method according to any one of claims 1 to 6.
9. A computer device, characterized in that: include: memory and processor, The memory stores a computer program; The processor is configured to execute a computer program stored in the memory, and when the computer program is run, the processor is enabled to execute the text rendering method according to any one of claims 1 to 6.
10. A computer program product comprising computer instructions, characterized in that The computer instructions are executed by a processor to execute the text rendering method according to any one of claims 1 to 6.