Interface drawing method, electronic equipment and storage medium

Abstract

The embodiment of the invention provides an interface drawing method, electronic equipment and a storage medium, and relates to the technical field of terminal equipment. According to the method provided by the embodiment of the invention, the font file transmission time and overhead can be reduced, the drawing efficiency is improved, meanwhile, the image data of the drawn text is stored through the shared memory, secondary copying of the image data of the text by an image synthesis system is avoided, and memory occupation is reduced. The method comprises the steps that in response to an interface rendering event, a font file corresponding to a text drawing rule is obtained from a resource file obtaining position of an application program, a drawing module in the application program is called to draw the font file, and first image data corresponding to a to-be-drawn text is obtained; storing the first image data in a shared memory; obtaining first image data from the shared memory; and calling an image synthesis system to synthesize the first image data and the second image data to obtain a first image frame corresponding to the interface.

Description

A method for drawing an interface, an electronic device, and a storage medium. Technical Field

[0001] This application relates to the field of terminal device technology, and in particular to a method for drawing an interface, an electronic device, and a storage medium. Background Technology

[0002] With the increasing popularity and diversification of electronic devices, font selection faces increasingly diverse needs and application scenarios. Different electronic devices, such as mobile phones, tablets, and computers, may require different fonts to optimize readability and user experience.

[0003] Font files, such as Typefaces, are a crucial foundation for effective text rendering. Each Typeface represents a specific font, such as Typeface1 being Founder Shuti. Each Typeface includes the font and its corresponding glyph information, such as style and kerning. When drawing text, electronic devices use font files for rendering. Therefore, font files are fundamental to text rendering.

[0004] Currently, font files (Typeface) are embedded within applications on electronic devices. In scenarios where multiple applications overlay their interfaces, to conserve rendering resources, elements such as text and non-text elements are uniformly rendered within the device's Surfaceflinger. If text needs to be rendered in the Surfaceflinger, the font file must be transferred across processes from the application to the Surfaceflinger. This not only leads to inefficient transfer but also increases the memory footprint of the Surfaceflinger. Summary of the Invention

[0005] To address the aforementioned issues, embodiments of this application provide a method for drawing an interface, an electronic device, and a storage medium. When drawing text on an interface, it eliminates the need for the application to transfer a large amount of memory-intensive font file across processes to the image compositing system, thereby improving the efficiency of font drawing. Simultaneously, it avoids the image compositing system from performing a secondary copy of the image data of the already drawn text, thus reducing memory usage.

[0006] To achieve the above objectives, in a first aspect, this application provides a method for drawing an interface, comprising: responding to an interface rendering event, obtaining a font file corresponding to a text drawing rule from a resource file location of an application, wherein the text drawing rule is used to indicate the drawing style of text in the interface; calling a drawing module in the application to draw the font file to obtain first image data corresponding to the text to be drawn; storing the first image data in shared memory; wherein the shared memory is used to realize data exchange between different processes; obtaining the first image data from the shared memory; and calling an image compositing system to composite the first image data and the second image data to obtain a first image frame corresponding to the interface, wherein the second image data is other drawn image data in the interface besides text data.

[0007] The interface drawing method provided in this application allows the electronic device to directly obtain the font file required for text drawing rules from the application's resource file location. Furthermore, the font file can be drawn directly without transferring the memory-intensive font file across processes to the image compositing system for text drawing. This reduces the time and overhead of font file transfer, improving text drawing efficiency. Simultaneously, by using shared memory, the drawn first image data is stored in shared memory, avoiding secondary copying of the first image data by the image compositing system, reducing memory usage on the image compositing system, and improving the user experience.

[0008] In one feasible implementation, the drawing module in the application is invoked to draw the font file, obtaining the first image data corresponding to the text to be drawn. This includes: creating a drawing surface object corresponding to shared memory; and, based on the font file, invoking the drawing module in the application to draw on the drawing surface object to obtain the first image data corresponding to the text to be drawn. Using the above method, by creating a drawing surface object corresponding to shared memory, efficient drawing operations can be performed directly on the drawing surface object. The drawing surface object provides an efficient drawing interface, making the font file rendering process more efficient and flexible. Furthermore, drawing within the allocated shared memory space eliminates the need for frequent memory allocation or data copying, thereby improving the efficiency of text drawing.

[0009] In one feasible implementation, before retrieving the first image data from shared memory, the method further includes: obtaining a first identifier corresponding to the shared memory, wherein the first identifier is a pre-set identifier for the shared memory; controlling the application to send the first identifier to the image compositing system; and retrieving the first image data from the shared memory, including: controlling the image compositing system to retrieve the first image data from the shared memory based on the first identifier. By using the above method, by obtaining the first identifier of the shared memory, it is possible to clearly identify which memory area is specifically used for inter-process communication. This allows for efficient indication of the specific memory area used by the image compositing system, thereby enabling rapid identification and access to the required first image data from that specific memory area, reducing additional data lookup and processing time, and thus improving data access efficiency.

[0010] In one feasible implementation, controlling the image compositing system to retrieve first image data from shared memory based on a first identifier includes: mapping stored content in the shared memory to the memory space of the image compositing system based on the first identifier; wherein the stored content includes at least one first image data; and retrieving the first image data from the memory space of the image compositing system. Using this method, the image compositing system can be directly instructed to retrieve the first image data from shared memory based on a pre-set first identifier. This avoids multiple data copies, allowing direct access to the required data from shared memory and reducing memory usage.

[0011] In one feasible implementation, in response to an interface rendering event, the font file corresponding to the text drawing rule is retrieved from the application's resource file retrieval location. This includes: retrieving the text drawing rule from a text folder within the application in response to the interface rendering event; the text folder includes the text to be drawn and the text drawing rule; and retrieving the font file corresponding to the text drawing rule from the resource file retrieval location based on the text drawing rule. By using this method, the font file corresponding to the text drawing rule is retrieved from the resource file retrieval location. This allows the font file to be dynamically loaded as needed, reducing initial loading time and memory usage. Only the font required by the current interface is loaded, thereby improving the application's responsiveness and performance.

[0012] In one feasible implementation, based on a font file, the drawing module in the application is invoked to draw on a drawing surface object to obtain the first image data corresponding to the text to be drawn. This includes: responding to a first vertical synchronization signal generated by the electronic device, invoking the drawing module in the application to draw on a drawing surface object based on a font file to obtain the first image data corresponding to the text to be drawn. Using this method, drawing is quickly performed from the font file upon receiving the first vertical synchronization signal, thus improving the real-time performance and efficiency of text drawing and enhancing the user experience.

[0013] In one feasible implementation, before calling the drawing module in the application to draw the font file and obtain the first image data corresponding to the text to be drawn, the method further includes: obtaining the text to be drawn and the text drawing rules; determining the first region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file; wherein, the first region is the storage area occupied by the image data after the text to be drawn is rendered; and obtaining shared memory with the same size as the memory space of the first region based on the first region. By using the above method, the memory size required for the text to be drawn is determined according to the storage area occupied by the text to be drawn. This allows for the explicit allocation of memory space before text drawing. By knowing the size of the memory occupied by the text in advance, memory space can be arranged more effectively, ensuring that the required first image data has sufficient storage space. This pre-determined memory allocation not only improves the efficiency of the drawing process but also reduces unnecessary overhead.

[0014] In one feasible implementation, the first region corresponding to the text to be drawn is determined based on the text to be drawn, the text drawing rules, and the font file. This includes: determining the font width and font height of the text to be drawn based on the text to be drawn, the text drawing rules, and the font file; and determining the first region corresponding to the text to be drawn based on the font width and font height. Using this method, the memory size occupied by the text to be drawn can be determined based on the font width and font height. This allows for accurate calculation of the required font width and font height, thus rationally determining the memory allocation for the first region. This precise memory allocation not only optimizes memory usage and avoids space waste but also improves drawing efficiency, thereby enhancing the overall user experience.

[0015] In one feasible implementation, in response to a first vertical synchronization signal generated by the electronic device, a drawing module in the application is invoked to draw on a drawing surface object based on a font file to obtain first image data corresponding to the text to be drawn. This includes: in response to the first vertical synchronization signal generated by the electronic device, rendering the font resource on the drawing surface object based on the font file using the drawing module in the application to generate graphic data; and invoking the drawing module to draw the graphic data to obtain the first image data corresponding to the text to be drawn. Using this method, rendering can begin first when the first vertical synchronization signal is generated, obtaining graphic data, and then drawing to obtain the first image data. This reduces memory usage and computational complexity, ensures high quality of the drawn first image data, and also allows for faster response to user operations, improving the overall user experience.

[0016] In one feasible implementation, an image compositing system is invoked to combine the first image data and the second image data to obtain a first image frame corresponding to the interface. This includes: responding to a second vertical synchronization signal generated by the electronic device, invoking the image compositing system to combine the first image data and the second image data to obtain the first image frame. Using this method, the image compositing system can be invoked promptly to combine the first image data and the second image data when the second vertical synchronization signal is generated. This helps reduce tearing and stuttering, ensures the stability and consistency of the user interface, and thus improves rendering efficiency and user experience.

[0017] In one feasible implementation, before calling the image compositing system to composite the first image data and the second image data to obtain the first image frame, the method further includes: calling the image compositing system to obtain non-text data to be processed; wherein, the non-text data refers to data other than text data in the interface; and calling the image compositing system to draw the non-text data to obtain the second image data. By employing the above method, before compositing the first image data and the second image data, the non-text data in the interface (excluding text data) is drawn first. This ensures that the image compositing system only needs to composite the first image data and the second image data, without needing to simultaneously draw the non-text data. Simultaneously, it avoids errors or delays caused by missing or inconsistent data during the compositing process, thereby improving the overall stability and smoothness of the drawing and display.

[0018] In one feasible implementation, before invoking the image compositing system to composite the first image data and the second image data to obtain the first image frame, the method further includes: invoking an application to obtain non-text data to be processed; wherein, the non-text data is data other than text data in the interface; invoking the application to draw the non-text data to obtain the second image data; and controlling the application to send the second image to the image compositing system. By using the above method, before compositing the first image data and the second image data, the non-text data (excluding text data) in the interface is first drawn on the application and sent to the image compositing system. This ensures that the image compositing system only needs to composite the first image data and the second image data, avoiding errors or delays caused by missing or inconsistent data during the compositing process, thereby improving the overall stability and smoothness of drawing and display.

[0019] In one feasible implementation, the method further includes: sending the first image frame to display the interface corresponding to the first image frame. By using the above method, the synthesized first image frame is displayed in a timely manner, allowing users to quickly see interface updates and improving the real-time performance and responsiveness of the interaction.

[0020] In one feasible implementation, sending the first image frame to display the interface corresponding to the first image frame includes: in response to a third vertical synchronization signal generated by the electronic device, sending and displaying the first image frame to the electronic device's display. Using this method, the synthesized first image frame is sent to the display in a timely manner upon the generation of the third vertical synchronization signal, allowing the user to quickly see interface updates and improving the real-time performance and responsiveness of the interaction.

[0021] In one feasible implementation, the interface rendering event includes any one of the following: initial interface load, interface update, interface size change, user-triggered operation, screen refresh synchronization, and background drawing / caching. By using this approach to trigger interface rendering events based on multiple events, the system's flexibility, efficiency, and user experience can be effectively improved, making electronic devices more stable and efficient when handling various situations.

[0022] In one feasible implementation, shared memory is a target memory region in main memory or distributed memory. Using this approach, shared memory can be located within an electronic device or independently of it; its location is not restricted, and it can be managed and accessed through a unified interface. This makes data sharing and processing more efficient while simplifying development and maintenance.

[0023] Secondly, this application provides an image drawing apparatus that has the function of implementing the electronic device behavior in the interface drawing method of the first aspect described above. The function can be implemented by hardware or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above-described function.

[0024] Thirdly, this application provides an electronic device, including: a display screen, a memory, and one or more processors; the display screen, the memory, and the processors are coupled; wherein, the memory stores computer program code, the computer program code including computer instructions, and when the computer instructions are executed by the processor, the electronic device performs the interface drawing method provided in the first aspect above.

[0025] Fourthly, this application provides a computer-readable storage medium including computer instructions that, when executed on an electronic device, cause the electronic device to perform the interface drawing method provided in the first aspect above.

[0026] Fifthly, this application provides a computer program product that, when run on a computer, causes the computer to execute the interface drawing method provided in the first aspect above.

[0027] It is understood that the beneficial effects that the technical solutions provided in the second to fifth aspects described above can be achieved by referring to the beneficial effects of the first aspect and any feasible implementation thereof, which will not be repeated here. Attached Figure Description

[0028] Figure 1 is a schematic diagram of a font file provided in an embodiment of this application;

[0029] Figure 2 is a schematic diagram of an application displaying fonts on different electronic devices according to an embodiment of this application;

[0030] Figure 3 is a schematic diagram of an interface display provided in an embodiment of this application;

[0031] Figure 4 is a first flowchart illustrating the drawing and display of an interface according to an embodiment of this application;

[0032] Figure 5 is a schematic diagram of a process for drawing an interface according to an embodiment of this application;

[0033] Figure 6 is a schematic diagram of an application transferring a font file to an image synthesis system according to an embodiment of this application;

[0034] Figure 7 is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0035] Figure 8 is a schematic diagram of the layered architecture of the software system of the electronic device provided in this embodiment;

[0036] Figure 9 is a first flowchart illustrating a method for drawing an interface according to an embodiment of this application;

[0037] Figure 10 is a first framework schematic diagram of an interface drawing method provided in an embodiment of this application;

[0038] Figure 11 is a second flowchart illustrating the drawing and display of an interface according to an embodiment of this application;

[0039] Figure 12 is a second flowchart illustrating a method for drawing an interface according to an embodiment of this application;

[0040] Figure 13 is a second framework schematic diagram of an interface drawing method provided in an embodiment of this application;

[0041] Figure 14 is a third flowchart illustrating a method for drawing an interface according to an embodiment of this application;

[0042] Figure 15 is a third framework schematic diagram of an interface drawing method provided in an embodiment of this application;

[0043] Figure 16 is a fourth flowchart illustrating a method for drawing an interface according to an embodiment of this application;

[0044] Figure 17 is a schematic diagram of another process for drawing an interface according to an embodiment of this application;

[0045] Figure 18 is a structural block diagram of a chip system provided in an embodiment of this application. Detailed Implementation

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

[0047] In the following description, the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined with "first," "second," etc., may explicitly or implicitly include one or more of that feature. In the description of this application, unless otherwise stated, "a plurality of" means two or more.

[0048] Furthermore, in this application, directional terms such as "upper," "lower," "inner," and "outer" are defined relative to the indicated placement of the components in the accompanying drawings. It should be understood that these directional terms are relative concepts, used for relative description and clarification, and can change accordingly depending on the placement of the components in the accompanying drawings.

[0049] To facilitate understanding of the technical solutions of the embodiments of this application by those skilled in the art, the technical terms involved in the embodiments of this application will be explained below.

[0050] A file descriptor (FD) is an index created for efficient management of opened files, used to point to open files. A file descriptor is a simple non-negative integer used to identify each file opened by a process. In this embodiment, the file descriptor serves as a unique identifier, pointing to a specific shared memory region to ensure that different processes can accurately access and operate on the same shared memory.

[0051] Shared memory is a mechanism for achieving efficient inter-process communication (IPC), allowing multiple processes to access the same physical memory region. Through shared memory, different processes can directly read and write data in the same memory block without needing to copy data, thus greatly improving the speed of data exchange.

[0052] Font files, such as Typeface, are data files containing a specific font design. They include the font itself, as well as various styles and glyphs. Font files are fundamental to text rendering, used to display text on a screen or in print. When rendering text, electronic devices generate corresponding character shapes based on the specified selected font file, thus achieving correct text display.

[0053] Glyph information determines not only how characters appear on screen or in print, but also how they are arranged. Glyph information includes kerning, glyph matrix, character measurement, ascending parts of characters, and descending parts of characters.

[0054] Kerning is a technique used in typography and font design to adjust the horizontal spacing between specific pairs of characters to make their arrangement more aesthetically pleasing and visually balanced. Kerning is often used as an adaptive adjustment to avoid too much or too little white space between certain character combinations, especially in the case of large fonts or high-precision typesetting.

[0055] A glyph matrix (bounding box) is the smallest rectangular area surrounding a glyph (i.e., the shape of a character), used to describe the space occupied by that glyph in a two-dimensional plane. This matrix is ​​also called the glyph bounding box or glyph bounding box, and it is typically used to calculate the position, width, and height of characters during typography and rendering. The glyph matrix only considers the shape and size of the glyph itself, and does not take into account typographical factors such as character spacing.

[0056] Character metrics, distinct from character matrices, primarily describe how characters are arranged and occupy space during typesetting, determining attributes such as spacing between characters and line height.

[0057] The ascender of a character is the vertical distance from the baseline to the highest point in the character. The ascender is commonly used to measure the space a character occupies in the vertical direction.

[0058] The ascender of a character is the vertical distance from the baseline to the lowest point in the character. The descender is typically used to measure the space a character occupies in the vertical direction.

[0059] The baseline is a reference line for characters when they are typed. The bottom of all characters (excluding the descending part) is usually aligned with the baseline.

[0060] The Surface Flinger, an important component in the Android system, is responsible for managing and synthesizing all the graphical content displayed on the screen. It can synthesize the image content of multiple applications onto one screen and ensure smooth drawing and display.

[0061] Screen Refresh Synchronization generally refers to a mechanism that coordinates the refresh frequency of a display device with the drawing frequency of a rendering system to ensure smooth interface updates and avoid visual problems such as image tearing. One of the most common screen refresh synchronization techniques is vertical synchronization.

[0062] Vertical synchronization (V-Sync) is a technology that ensures the frame rate of graphics rendering is synchronized with the refresh frequency of a display. It is used to coordinate the relationship between the refresh rate of a display and the frame rate output by a graphics card. After enabling vertical synchronization, an electronic device will wait for the display to complete the refresh of the current frame before outputting the next frame of image, thus ensuring that each frame is displayed completely and avoiding screen tearing. The embodiments of the present application will be described below with reference to the accompanying drawings. With the popularization and diversification of electronic devices, the selection of fonts faces increasingly diverse requirements and application scenarios. To meet these requirements and scenarios, font files, as the basis for text drawing, have become increasingly important. Each Typeface represents a specific font, such as Typeface1 being the Founder Shu Ti, etc. Each Typeface includes the font and the corresponding glyph information, such as style, kerning, etc., and these glyph information affect the appearance and style of each character. In the actual text drawing process, an electronic device will draw and display text according to the data in the Typeface. For example, an electronic device will draw and display text according to the font in the Typeface, the shape and proportion between characters, the height, width, stroke thickness, and curve radian of characters, etc.

[0063] Figure 1 is a schematic diagram of a font file provided by an embodiment of the present application.

[0064] As shown in Figure 1, each Typeface represents a specific font. For example, Typeface1 represents "Founder Shu Ti", Typeface2 represents "Kai Ti", Typeface3 represents "Hei Ti", etc. Each Typeface not only defines the overall visual style of the font but also includes the corresponding glyph information, such as glyph, kerning, and other parameters.

[0065] Continuing with reference to FIG. 1, in Typeface1, the strokes of the "Founder Shuti" font are relatively soft, the lines are smooth and round, and the overall shape gives a relaxed and comfortable visual experience. There are fewer sharp edges at the edge of each glyph, but rather a more gentle transition. In Typeface2, the "KaiTi" font is more square, the spacing between characters is relatively uniform, and the outline of the glyph presents a sense of beauty with roundness within squareness. In Typeface3, the "HeiTi" font generally has thick strokes and the thickness is uniform without obvious changes, giving a feeling of stability and simplicity.

[0066] Therefore, the font file is the basis for text rendering and can provide users with different styles of font forms.

[0067] However, with the popularization and diversification of electronic devices, the fonts displayed by the same application not only have significant differences between different electronic devices (such as mobile phones, tablets, laptops, etc.), but even different models of the same type of electronic device (such as the first electronic device, the second electronic device, etc.) have their own characteristics. Therefore, the text displayed on these electronic devices must adapt to their hardware characteristics to ensure the best readability and user experience.

[0068] FIG. 2 is a schematic diagram of the fonts displayed by an application on different electronic devices provided by an embodiment of the present application.

[0069] With reference to FIG. 2, (a) in FIG. 2 is the font displayed by application C on mobile phone A, the font is "SongTi", and the font size is "Small Four". (b) in FIG. 2 is the font displayed by application C on mobile phone B, the font is "SongTi", and the font size is "Small Four". (c) in FIG. 2 is the font displayed by application C on the tablet, the font is "SongTi", and the font size is "Small Four".

[0070] It can be seen that although the fonts and font sizes in the same application are the same, the fonts rendered using the font file are indeed somewhat different. This is because of the reasons of the self-settings of different electronic devices 100, such as factors like display screen resolution and display technology, which will all affect the final visual effect. For example, the resolution of the display screen determines the pixel density, thus affecting the clarity of the font; different display technologies (such as LCD and OLED) have differences in color performance, contrast, and size, which may cause the same font to呈现出 different colors and depths on different devices.

[0071] The aforementioned differences in font settings may lead to variations in font clarity, color reproduction, and overall presentation, resulting in the same font and size not appearing entirely consistent across different electronic devices 100. To ensure consistent font display across different electronic devices 100, font files are typically embedded directly into the application. This reduces replacement issues caused by differences in font files across electronic devices 100, ensuring that the application displays fonts in the same way regardless of the user's electronic device 100, thus maintaining design consistency.

[0072] In other words, in order to ensure that its interface can be displayed in the same way on different electronic devices 100, the application usually draws the required interface independently.

[0073] However, in scenarios where multiple applications are displayed overlay, having each application draw its own interface independently can lead to some problems. Specifically, when part of one application's interface is obscured by another application, it will still be drawn even if the obscured part is unnecessary for the user, potentially resulting in unnecessary duplicate drawing.

[0074] Figure 3 is a schematic diagram of an interface display provided in an embodiment of this application.

[0075] Referring to Figure 3, for example, Figure 3(a) shows the application's display interface 01, and Figure 3(b) shows the floating chat interface 02 of the social application. Figure 3(c) shows the floating chat interface 02 superimposed on the display interface 01. It can be seen that the floating window 03 of the chat interface obscures a portion of the display interface 01. Therefore, the obscured area is actually an unnecessary redrawing. To avoid unnecessary redrawing, the image compositing system in the electronic device 100 can be used for unified drawing.

[0076] Figure 4 is a first flowchart illustrating the drawing and display of an interface according to an embodiment of this application.

[0077] Figure 5 is a schematic diagram of a process for drawing an interface according to an embodiment of this application.

[0078] When drawing on an image compositing system, the font file embedded in the application needs to be transferred to the image compositing system in order to draw the font in the interface.

[0079] As shown in Figures 4 and 5, taking frame 1 as an example, the electronic device 100 prepares to begin processing the drawing task, and the font required for the interface to be drawn is identified. Subsequently, the application transmits the font file corresponding to the font to the image compositing system via a cross-process method. After receiving and storing the font file, the image compositing system uses the Graphics Processing Unit (GPU) to draw and render the font file, obtaining the image data corresponding to the font. Further, the image compositing system composites the image data with other image data required in the interface. After compositing is completed, the electronic device 100 can start the display driver by calling the kernel layer to display the content corresponding to frame 1 on the screen (display). Frames 2 and 3 are similar to frame 1 in that they are also composited and displayed, and will not be described in detail here.

[0080] It is evident that if a unified drawing is desired within an image compositing system, the required font files need to be transferred from the application across processes to the image compositing system. Due to the large size of the font files, the image compositing system suffers from low efficiency and memory consumption issues when drawing text.

[0081] Figure 6 is a schematic diagram of an application transferring font files to an image synthesis system according to an embodiment of this application.

[0082] When drawing text, the image compositing system needs to process information related to different fonts. This means that each time a new font is drawn, the corresponding font file must be sent to the image compositing system. Since each font file occupies a large amount of memory, such as 1MB-50MB, it takes extra time to load, resulting in low transmission efficiency. This efficiency problem is even more prominent when processing multiple fonts.

[0083] For example, as shown in Figure 6, application A transmits font file 1 to the image compositing system in 115ms, application B transmits font file 2 to the image compositing system in 150ms, and application C transmits font file 3 to the image compositing system in 135ms.

[0084] The image compositing system also supports multiple applications drawing different font files simultaneously. As the number of applications increases, the number of font files that need to be loaded also increases significantly. This not only increases the burden of transmission and processing, but also causes the image compositing system to consume too much memory resources, further affecting the overall performance and resource management efficiency of the system.

[0085] For example, continuing with Figure 6, application A transmits font file 1 to the image compositing system, and font file 1 occupies 23MB of memory; application B transmits font file 2 to the image compositing system, and font file 2 occupies 40MB of memory; application C transmits font file 3 to the image compositing system, and font file 3 occupies 30MB of memory.

[0086] In summary, image synthesis systems suffer from low transmission efficiency and high memory consumption when drawing text.

[0087] To address the aforementioned issues, this application provides an interface drawing method that can improve the efficiency of font drawing while avoiding the problem of high memory consumption in image compositing systems.

[0088] The image display method provided in this embodiment can be applied to electronic device 100. In some embodiments, electronic device 100 may be a mobile phone, tablet computer, handheld computer, personal computer (PC), ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), augmented reality (AR) device, virtual reality (VR) device, artificial intelligence (AI) device, wearable device, etc. This application embodiment does not impose any special restrictions on the specific type of electronic device 100.

[0089] Figure 7 is a schematic diagram of the structure of an electronic device 100 provided in an embodiment of this application. The electronic device 100 is a mobile phone as an example.

[0090] As shown in Figure 7, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, antenna 1, antenna 2, a mobile communication module 150, a wireless communication module 160, a sensor module 180, a display screen 193, a subscriber identification module (SIM) card interface 194, and a camera 195, etc. The sensor module 180 may include a pressure sensor 180A, a fingerprint sensor 180B, an ambient light sensor 180C, a gyroscope sensor 180D, a temperature sensor 180E, etc.

[0091] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0092] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0093] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0094] In some embodiments, processor 110 may include one or more interfaces.

[0095] The external memory interface 120 can be used to connect to external non-volatile memory, thereby expanding the storage capacity of the electronic device 100. The external non-volatile memory communicates with the processor 110 through the external memory interface 120 to perform data storage functions. For example, music, video, and other files can be stored in the external non-volatile memory.

[0096] Internal memory 121 may include one or more random access memory (RAM) and one or more non-volatile memory (NVM).

[0097] The charging management module 140 is used to receive charging input from a power supply device (such as a charger, laptop power supply, etc.). The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 can receive charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 can receive wireless charging input via the wireless charging coil of the electronic device 100.

[0098] While charging the battery 142, the charging management module 140 can also supply power to the electronic device 100 through the power management module 141. Specifically, the battery 142 can be composed of multiple batteries connected in series. The power management module 141 is used to connect the battery 142, the charging management module 140, and the processor 110.

[0099] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, display screen 193, camera 195, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery voltage, current, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110.

[0100] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem, and baseband processor.

[0101] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization.

[0102] The mobile communication module 150 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, for use on the electronic device 100. The mobile communication module 150 can receive electromagnetic waves via the antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to the modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via the antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 can be housed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 can be housed in the same device.

[0103] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 560 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0104] In some embodiments, the sensor module 180 may include a pressure sensor 180A, a fingerprint sensor 180B, an ambient light sensor 180C, a gyroscope sensor 180D, a temperature sensor 180E, etc.

[0105] The pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, the pressure sensor 180A can be disposed on the display screen 193. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates with conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the pressure intensity based on the change in capacitance. When a touch operation is applied to the display screen 193, the electronic device 100 detects the intensity of the touch operation based on the pressure sensor 180A. The electronic device 100 can also calculate the touch position based on the detection signal from the pressure sensor 180A. In this embodiment, the pressure sensor 180A is used to detect user operations on a first control or a second control to acquire a second image and a third image.

[0106] The fingerprint sensor 180B is used to collect fingerprints. The electronic device 100 can utilize the characteristics of the collected fingerprints to achieve fingerprint unlocking, accessing application locks, fingerprint photography, fingerprint payment, etc.

[0107] The ambient light sensor 180C is used to sense the brightness of ambient light. The ambient light sensor 180C can also be used in conjunction with a proximity sensor to detect whether the electronic device 100 is in a pocket, in order to prevent accidental touches.

[0108] The gyroscope sensor 180D can be used to determine the motion attitude of the electronic device 100. In some embodiments, the angular velocity of the electronic device 100 about three axes (i.e., the x, y, and z axes) can be determined by the gyroscope sensor 180D. The gyroscope sensor 180D can be used for image stabilization.

[0109] Temperature sensor 180E is used to detect temperature. In some embodiments, electronic device 100 uses the temperature detected by temperature sensor 180E to execute a temperature handling strategy. For example, when the temperature reported by temperature sensor 180C exceeds a threshold, electronic device 100 performs thermal protection by reducing the performance of a processor located near temperature sensor 180E to reduce power consumption. In other embodiments, when the temperature is below another threshold, electronic device 100 heats battery 142 to prevent abnormal shutdown of electronic device 100 due to low temperature. In still other embodiments, when the temperature is below yet another threshold, electronic device 100 boosts the output voltage of battery 142 to prevent abnormal shutdown due to low temperature.

[0110] In some embodiments, the electronic device 100 may include one or N cameras 195, where N is a positive integer greater than 1. The type of camera 195 can be distinguished according to hardware configuration and physical location. In this embodiment, the camera can be used to capture images.

[0111] Electronic device 100 implements display functions through a GPU, a display screen 193, and an application processor. The GPU is a microprocessor for image editing, connected to the display screen 193 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0112] The electronic device 100 can perform its shooting function through an ISP, camera 195, video codec, GPU, display screen 193, and application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information. In this embodiment, the GPU is used to draw text images and other images.

[0113] The ISP (Image Signal Processor) is used to process data fed back from the camera 195. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, transforming it into an image visible to the naked eye. The ISP can also perform algorithmic optimization of image noise and brightness. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be integrated into the camera 195. The camera 195 is used to capture still images or videos.

[0114] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0115] The display screen 193 is used to display images, videos, etc. The display screen 193 includes a display panel. In some embodiments, the electronic device 100 may include one or N display screens 193, where N is a positive integer greater than 1. In this embodiment, the display screen 193 can be used to display pages required by the electronic device 100 (e.g., a completed display interface).

[0116] The SIM card interface 194 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 194 to make contact with and detach from the electronic device 100. The electronic device 100 can support one or more SIM card interfaces. The SIM card interface 194 can support Nano SIM cards, Micro SIM cards, and other SIM cards. Multiple cards can be inserted into the same SIM card interface 194 simultaneously. The SIM card interface 194 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to achieve functions such as making calls and data communication. One SIM card corresponds to one user number.

[0117] It is understood that the interface connection relationships between the modules illustrated in the embodiments of the present invention are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0118] Of course, it is understood that the above-described Figure 7 is merely an exemplary illustration of the form of electronic device 100. If electronic device 100 is a tablet computer, handheld computer, PC, PDA, wearable device (such as smartwatch, smart bracelet), or other device form, the structure of electronic device 100 may include fewer structures than shown in Figure 3, or more structures than shown in Figure 7, without limitation.

[0119] It is understandable that, generally speaking, the implementation of the functions of electronic device 100 requires not only hardware support but also software cooperation. The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application embodiment uses a layered architecture... Taking the system as an example, the software structure of electronic device 100 is illustrated.

[0120] Figure 8 is a schematic diagram of the layered architecture of the software system of the electronic device provided in this embodiment.

[0121] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.

[0122] The application layer can include a series of application packages.

[0123] As shown in Figure 8, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

[0124] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0125] As shown in Figure 8, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.

[0126] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0127] Content providers store and retrieve data, making that data accessible to applications. This data can include videos, images, audio, phone calls made and received, browsing history and bookmarks, phone books, and more.

[0128] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0129] The phone manager is used to provide communication functions for electronic device 100. For example, it manages call status (including connection and disconnection).

[0130] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0131] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of download completion or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting alert sounds, vibrating electronic devices, and flashing indicator lights.

[0132] The Android Runtime consists of core libraries and a virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.

[0133] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0134] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0135] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0136] The surface manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications. In this embodiment, the surface manager can also be referred to as an image compositing system, where the user draws images.

[0137] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0138] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0139] A 2D graphics engine is a graphics engine for 2D drawing.

[0140] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0141] The interface drawing method provided in the embodiments of this application will be further described below with reference to the accompanying drawings.

[0142] Figure 9 is a first flowchart illustrating a method for drawing an interface according to an embodiment of this application.

[0143] Figure 10 is a first framework schematic diagram of an interface drawing method provided in an embodiment of this application.

[0144] As shown in Figures 9 and 10, the interface drawing method provided in this embodiment includes the following steps:

[0145] In step S91, the electronic device responds to the interface rendering event and retrieves the font file corresponding to the text drawing rules from the resource file location of the application.

[0146] Optionally, UI rendering events include any one of the following: initial UI load, UI update, UI size change, user-triggered operation, screen refresh synchronization, and background drawing / caching.

[0147] In some implementations, necessary UI resources, such as images, fonts, and configuration files, are loaded upon initial application launch. These necessary UI resources refer to the various elements and data required to ensure correct rendering and proper functioning of the interface. These resources include not only visual components but may also involve logical and configuration aspects. UI updates are typically triggered by user actions, data changes, or system state changes. After a UI update is triggered, the redrawn portions are calculated, which may include necessary resources such as images, fonts, and configuration files. UI size changes typically refer to adjustments in the application's layout or content due to changes in external conditions. These adjustments may include necessary resources such as images, fonts, and configuration files. Common scenarios include device screen rotation, window resizing, changes in device resolution, or switching view modes (e.g., switching from tablet mode to desktop mode). In these scenarios, the application needs to adjust its interface. User actions on the interface, such as clicking buttons, scrolling pages, and dragging elements, will trigger updates or redraws of certain elements within the interface. The updated or redrawn content may include necessary resources such as images, fonts, and configuration files.

[0148] That is to say, the interface rendering event is usually triggered in the above several cases, and it is necessary to obtain text rules from the text files in the application for subsequent redrawing and re-rendering of the interface.

[0149] In an optional embodiment, step S91 includes: the electronic device responds to the interface rendering event, and obtains the text to be drawn and the text drawing rule from the location of the text file in the application; based on the text drawing rule, obtains the font file corresponding to the text drawing rule from the location of the resource file.

[0150] There can be multiple ways to obtain the text to be drawn and the text drawing rule from the location of the text file in the application. Hereinafter, only the text folder will be used as an example for illustration.

[0151] Among them, the text folder is a directory in the application used to store text information. For example, the text folder can include the text to be drawn, the text drawing rule, etc. Exemplarily, the electronic device can obtain the text to be drawn and the text drawing rule in the text folder.

[0152] The text to be drawn defines the content that actually needs to be displayed in the interface, and the text drawing rule is used to indicate the drawing style of the text in the interface. Among them, the text to be drawn refers to the actual text content that needs to be displayed on the interface. The text drawing rule is used to indicate the drawing method or drawing effect of the text to be drawn, and the text drawing rule can be set differently according to different scenarios and requirements.

[0153] There can be multiple ways to determine the text drawing rule. Hereinafter, several examples will be described.

[0154] In one example, the text drawing rule can be generated by interacting with the user. Each application can provide a setting interface for the user to select the text and glyph information such as the size and color of the text. Exemplarily, an application in the electronic device responds to the user's setting of the glyph information of the text in the setting interface, such as the font being "KaiTi", the font size being "小四", and the color being "black", etc.

[0155] In another example, the text drawing rule can be a rule pre-determined by the interface. Each application can support multiple themes, and each theme contains a set of predefined text styles for display. Exemplarily, for theme X of an application in the electronic device, the glyph information is that the font is "KaiTi", the font size is "小四", and the color is "black", etc., and for theme Y of another application, the glyph information is that the font is "黑体", the font size is "小三", and the color is "red", etc.

[0156] In another example, the text drawing rules can be implemented by combining user interaction and preset rules. Each application can provide a set of preset themes while allowing users to fine-tune within a certain range. Exemplarily, the theme X of an application in an electronic device is glyph information such as the font being "KaiTi", the font size being "小四" (Small Four), and the color being "black". The user can only adjust the font and font size. That is, through interaction with the application, the user can change the font of theme X from "KaiTi" to "SongTi" and the font size from "小三" (Small Three) to "小四" (Small Four).

[0157] It should be understood that the text to be drawn and the text drawing rules can also be stored in the same file acquisition location or independently in two file acquisition locations. For example, the text to be drawn file is stored in one file acquisition location and the text drawing rules are stored in another acquisition location folder, which specifically depends on the design and architecture of the application and is not specifically limited here.

[0158] There are also various ways for the electronic device to obtain the font file corresponding to the text drawing rules from the resource file acquisition location. Only the resource folder is used as an example for illustration below.

[0159] The resource folder is a directory in the application used to store various static resource files, which may include but are not limited to images, audio, video, configuration files, and font files, etc.

[0160] The font file is embedded as a static resource in the resource folder of the application to ensure the unified font consistency displayed by the application on different electronic devices. Thus, the electronic device can obtain the font resources from the resource folder in the application for subsequent text drawing.

[0161] Optionally, the font file is embedded as a static resource in the application, and the application loads these font files through Cascading Style Sheets (CSS) or other means for use when rendering text.

[0162] Exemplarily, in the application, the corresponding text to be drawn and the text drawing rules can be obtained through a database or an API interface. Further, the font file corresponding to the text content is obtained from the application.

[0163] Font files provide the visual characteristics of characters needed to draw text, such as shape, style, and size. A font file includes the font, at least one font style, and at least one glyph information. The font in the font file refers to the selected font family, such as SimSun or Times New Roman. Font styles include effects such as bold, italics, and underline. Glyph information refers to the shape of the specific characters within the font, determining how each character is displayed on the interface. In other words, glyph information defines the form of text drawing. Glyph information includes character outlines, kerning, bounding boxes, character metrics, ascenders, and descenders.

[0164] For example, suppose the drawing rules of an electronic device are "SimSun" font, "small four" font size, and "black" color. Based on this, the electronic device can obtain the corresponding font file with "SimSun" font, "small four" font size, and "black" color.

[0165] In step S92, the electronic device determines the first region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file.

[0166] Optionally, step S92 includes: the electronic device determining the font width and font height of the text to be drawn based on the text to be drawn, the text drawing rules, and the font file; and determining a first region corresponding to the text to be drawn based on the font width and font height. The first region is the storage area occupied by the image data of the rendered text.

[0167] The following example illustrates how font width and font height are determined. In one alternative implementation, the electronic device determines the font width corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file. The electronic device may first determine the character measure and glyph matrix of each character in the text to be drawn, and then determine the width of each character based on the character measure and glyph matrix of each character.

[0168] Because certain character combinations appear unbalanced with the default forward width, kerning is necessary. The purpose of kerning is to improve the visual appeal and overall aesthetics of the layout by fine-tuning the spacing between adjacent characters. Kerning is achieved by adjusting the spacing between adjacent characters using a positive or negative kerning value. For example, a negative kerning value reduces the spacing between characters, such as in "AV," where the characters "A" and "V" move closer together. A positive kerning value increases the spacing between characters, such as in "To," where the characters "T" and "o" are spaced further apart. After obtaining the width and corresponding kerning value for each character, the width and kerning value for each character are summed to obtain the total width of the text to be drawn.

[0169] For example, the font width of the text to be drawn can be determined by the following formula (1):

[0170]

[0171] Where n is the total number of characters and the character width is... i It is the actual width of each character. j Kerning value j It is the value for adjusting the distance between characters.

[0172] For example, suppose the text to be drawn is "CTA", and the text drawing rules are: the font family corresponding to the font is "Arial", and the font style is "Regular". Assume the character width of the character "C" is 50 pixels, the character width of the character "T" is 48 pixels, and the character width of the character "A" is 45 pixels. If there is no adjustment between each character in the font "CTA", the kerning value is 0, therefore, the total width of the text to be drawn "CTA" is 143 pixels. If there is adjustment between the characters in the text to be drawn "CTA", assuming the characters "A" and "T" are closer to each other, such as a -2 pixel kerning adjustment between "A" and "T", the total width of the font "CTA" is 141 pixels. In another optional implementation, the electronic device determines the font height corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file. The electronic device can first determine the character measurement and glyph matrix of each character in the text to be drawn. Then, based on the character measurement and glyph matrix of each character, it can determine the ascending part, descending part, and line spacing between adjacent lines in the vertical direction for each character. Furthermore, if the text to be drawn consists of only one line, the height of the single line of text to be drawn is determined based on the ascending and descending parts of the characters, and this height is used as the total height of the text to be drawn.

[0173] For example, the height of a single line of text to be drawn can be determined by the following formula (2):

[0174] The height of each line = the maximum ascending part of the character + the maximum descending part of the character; Formula (2)

[0175] If the text to be drawn consists of at least two lines, the height of a single line of text to be drawn is determined based on the ascending and descending parts of the characters. Furthermore, the total height of the text to be drawn is determined based on the line spacing, the height of a single line of text to be drawn, and the number of lines.

[0176] For example, the total height of a single line of text to be drawn can be determined by the following formula (3):

[0177] Total height = (height of each line × number of lines) + (line spacing × (number of lines - 1)); Formula (3)

[0178] For example, if the font of the text to be drawn is "CTA", the corresponding font family is "Arial", and the font style is "Regular". Assume the ascending part of the character "C" is 20 pixels and the descending part is 4 pixels; the ascending part of the character "T" is 18 pixels and the descending part is 6 pixels; the ascending part of the character "A" is 22 pixels and the descending part is 2 pixels. Further, determine that the largest ascending part of the characters, max(20 pixels, 18 pixels, 22 pixels), is 22 pixels, and the largest descending part of the characters, max(4 pixels, 6 pixels, 2 pixels), is 6 pixels. The total height of the text to be drawn is 28 pixels.

[0179] If the fonts of the text to be drawn are "CTA" and "ABC", the corresponding font family is "Arial", and the font style is "Regular". The fonts "CTA" and "ABC" are positioned on two lines with a line spacing of 4 pixels. Assume the ascending part of the character "C" is 20 pixels and the descending part is 4 pixels; the ascending part of the character "T" is 18 pixels and the descending part is 6 pixels; and the ascending part of the character "A" is 22 pixels and the descending part is 2 pixels. Further, determine that the maximum ascending part of the characters is max(20 pixels, 18 pixels, 22 pixels) = 22 pixels, and the maximum descending part is max(4 pixels, 6 pixels, 2 pixels) = 6 pixels. Therefore, the height of the font "CAT" is 28 pixels. Similarly, the height of the font "ABC" is 28 pixels. The total height of the text to be drawn is 60 pixels.

[0180] It should be understood that the above only illustrates how to obtain the font height and font width of the text to be drawn, and is not the only limitation.

[0181] The following example illustrates how the first region is determined.

[0182] Optionally, a display area suitable for displaying the text to be drawn can be determined based on the font width and font height. This display area can be called the first area.

[0183] For example, if the font width of the text to be drawn is 141 pixels and the font height is 28 pixels, then the display area of ​​the text to be drawn is 3984 pixels squared. It should be noted that the display area of ​​the text to be drawn may differ slightly from the actual calculated area; the following example of 3984 pixels squared is used for illustrative purposes.

[0184] The amount of information required by each pixel determines how many bytes each pixel occupies. Common color depths include 8-bit (256 colors), 16-bit (65536 colors), 24-bit (true color), and 32-bit (true color + alpha channel). Therefore, different amounts of information per pixel result in different byte sizes per pixel. For example, with an 8-bit color depth, each pixel occupies one byte; with a 16-bit color depth, each pixel occupies two bytes; with a 24-bit color depth, each pixel occupies three bytes; and with a 32-bit color depth, each pixel occupies four bytes. Furthermore, based on the pixel's color depth and the area occupied by the text to be drawn, the first region corresponding to the text to be drawn is determined.

[0185] In an alternative implementation, determining the first region corresponding to the text to be drawn based on the color depth of the pixel and the area occupied by the text to be drawn may include the following steps: the electronic device determines the number of bytes of the text to be drawn; and determines the first region based on the number of bytes of the text to be drawn.

[0186] For example, when the color depth of a pixel is 8 bits, each pixel occupies one byte. The area of ​​the text to be drawn is the square of 3984 pixels, and the text to be drawn is 3984 × 1 = 3984 bytes. Furthermore, if binary conversion units are used, the storage space required for the first area corresponding to the text to be drawn is 0.0037 MB; if decimal conversion units are used, the storage space required for the first area corresponding to the text to be drawn is 0.004 MB.

[0187] In step S93, the electronic device acquires shared memory of the same size as the memory space of the first region, based on the first region.

[0188] Shared memory is a mechanism that allows different processes to access the same physical memory region. This means that when data is stored in shared memory, this data does not need to be copied or transferred between processes; instead, all relevant processes can directly read and write to this shared memory space. In other words, shared memory is used to facilitate data exchange between different processes. For example, shared memory can support process access by application programs or process access by image compositing systems.

[0189] For example, if the memory size of the first region is 3984 bytes, the shared memory can support 3984 bytes of text to be drawn, that is, the size of the shared memory is 0.004MB or 0.0037MB.

[0190] It should be noted that the above calculations are based on the memory requirements of a single text file. When multiple applications are involved in drawing multiple text files, the method for determining the shared memory size is as described above and will not be repeated here.

[0191] The following example illustrates how shared memory can be implemented.

[0192] Since shared memory is a type of physical memory used to store data, and physical memory is a data storage device, it cannot be directly used for drawing. To perform drawing operations, it is usually necessary to create shared memory objects.

[0193] In one alternative implementation, the electronic device creates a drawing surface object corresponding to the shared memory.

[0194] There are several ways for an electronic device to create the drawing surface corresponding to the shared memory; the following example uses the SKSurface object.

[0195] The SKSurface object is an object in an open-source 2D graphics library widely used on various platforms, such as Android. In Android, the 2D graphics library is one of the foundations of graphics rendering, providing efficient and high-quality graphics processing capabilities. The SKSurface object in the 2D graphics library can be used with various drawing commands provided by the library.

[0196] It should be noted that shared memory, as a region of physical memory that allows different processes to share the same memory space, has a location that is not unique.

[0197] The following provides an example of how to set up a shared memory location.

[0198] In one alternative implementation, shared memory can be a target memory region in main memory or distributed memory. That is, shared memory can be configured within an electronic device for cross-process transfer with applications and image compositing systems within the same electronic device. Alternatively, it can be configured within an electronic device for cross-process transfer with applications and image compositing systems in another electronic device.

[0199] In real-world image rendering scenarios, to ensure consistency between background rendering on electronic devices and foreground application display, it is necessary to coordinate the image rendering, compositing, and composition processes.

[0200] The following example illustrates how to determine the drawing method of the interface.

[0201] In one alternative implementation, electronic devices are typically synchronized based on a vertical synchronization signal (Vsync signal), which mainly coordinates the drawing, rendering, and compositing processes of images to ensure smooth screen refresh and reduce stuttering.

[0202] As shown in Figure 11, the Vsync signal is a periodic signal. The Vsync signal period can be set according to the monitor's refresh rate. For example, when the monitor's refresh rate is 60Hz, it means the screen refreshes 60 times per second, with a period of 1 / 60th of a second, or 16.6 milliseconds. Therefore, the Vsync signal period can be 16.6 milliseconds. The electronic device generates a control signal every 16.6 milliseconds to trigger the Vsync signal period. The Vsync signal can be divided into software Vsync signals and hardware Vsync signals. Software Vsync signals include Vsync-APP and Vsync-SF, which are used to coordinate the rendering and drawing processes of the image compositing system in the application layer and system library.

[0203] Vsync-APP is the Vsync signal sent to the application (APP) to trigger the application's image drawing and rendering operations. Whenever a Vsync-APP signal is received, the application begins drawing and updating images, ensuring that new frames are ready for display in a timely manner. Vsync-SF is the Vsync signal sent to the image compositing system (Surface Flinger). Whenever Surface Flinger receives a Vsync-SF signal, it begins compositing and drawing image frames drawn by different applications to form the final content displayed on the screen. The hardware Vsync signal (Vsync-HW) is a crucial signal used to trigger the screen display refresh process. It comes directly from the display hardware and notifies the system that a new round of screen refresh operations is about to begin. The role of the Vsync-HW signal is to synchronize screen refresh with the system's image rendering and compositing process, ensuring that the latest image frames are displayed with each refresh, thereby avoiding problems such as tearing and latency.

[0204] In step S94, the electronic device responds to the first vertical synchronization signal generated by the electronic device, and calls the drawing module in the application to draw on the drawing surface object based on the font file, thereby obtaining the first image data corresponding to the text to be drawn.

[0205] The first vertical synchronization signal is the Vsync-APP signal.

[0206] In an optional implementation, step S94 includes: the electronic device receives a first vertical signal, calls the drawing module in the application to render the font file on the drawing surface object, and generates graphic data; further, calls the drawing module to draw the graphic data to obtain the first image data corresponding to the text to be drawn.

[0207] In step S95, the electronic device controls the image synthesis system to obtain the first image data from the shared memory based on the first identifier.

[0208] The image compositing system is a component in the operating system responsible for merging the graphical outputs of multiple applications into a single final display screen. Different operating systems and platforms have different implementations and names for the image compositing system; for example, in Android, the image compositing system might be called Surface Flinger.

[0209] The following explanation uses Surface Flinger as an example.

[0210] In an alternative implementation, step S95 may include: the electronic device mapping the stored content in the shared memory to the memory space in the image compositing system based on the first identifier; and the electronic device obtaining the first image data from the memory space in the image compositing system.

[0211] The first identifier is used to specify a particular shared memory region. The first identifier can be a name, identifier (ID), or other unique identifier of a different type, without specific limitations here.

[0212] For example, an electronic device can call an appropriate function to map shared memory into the address space of the current process, allowing the electronic device to directly read and write the stored content in the shared memory. The stored content includes at least one first image data. Each first image data can originate from text to be drawn in different interfaces of the same application, or from text to be drawn in drawing interfaces of different applications.

[0213] Each shared memory segment is assigned a unique first identifier, which can be used to access that shared memory segment. Especially in multi-threaded scenarios, different processes can use the first identifier to find and access the same shared memory segment, thereby achieving efficient data exchange.

[0214] It should be noted that the first identifier corresponding to the shared memory can be set at the same time as acquiring the shared memory, or it can be set at the same time as executing step S94. No specific limitation is made here.

[0215] It should be noted that, prior to step S95, the process may further include the electronic device controlling the application to obtain the first identifier, and the control application transmitting the first identifier to the image compositing system. For example, continuing with Figure 10, the electronic device calls the application's acquisition module to obtain the first identifier corresponding to the shared memory. Further, the electronic device controls the application to send the first identifier to the image compositing system.

[0216] In step S96, the electronic device calls the image synthesis system to draw the non-text data and obtain the second image data.

[0217] Non-text data can include background images required for the interface to be drawn, icons or buttons required for the interface to be drawn, such as application icons, pause button icons, etc., graphics and charts required for the interface to be drawn, photo or video frames required for the interface to be drawn, controls or elements required for the interface to be drawn, such as sliders, scroll bars, checkboxes, radio buttons, etc., animations or special effects required for the interface to be drawn, such as highlights, blur, shadows, etc., and content generated by the user in the interface to be drawn, such as images drawn by the user, photos or pictures uploaded by the user, etc.

[0218] For example, an electronic device calls an image compositing system to draw the required icons or buttons in the interface to be drawn, such as application icons, pause button icons, etc., to obtain second image data.

[0219] The second image data consists of other drawn image data in the interface besides text data.

[0220] Before rendering the non-text data, the process also includes: the electronic device calling the image synthesis system to obtain the non-text data to be processed.

[0221] In one alternative embodiment, non-text data can be obtained from the following manner.

[0222] Non-text data can be retrieved from local storage, such as from the memory of an electronic device or from a resource folder built into an application. Non-text data can also be retrieved from the network, such as by requesting non-text data from a remote server via Hypertext Transfer Protocol (HTTP) / Hypertext Transfer Protocol Secure (HTTPS) or from a cloud storage service.

[0223] It should be understood that the above examples illustrate two ways to obtain non-text data for ease of understanding. Other methods of obtaining data, such as user input, are also possible and are not specifically limited here.

[0224] In step S97, the electronic device responds to the second vertical synchronization signal generated by the electronic device and calls the image synthesis system to synthesize the first image data and the second image data to obtain the first image frame.

[0225] The second vertical synchronization signal can be the Vsync-SF signal.

[0226] Composites can be a simple superposition of first and second image data, or a more complex blending effect, such as transparency blending, masking, or fusion based on certain algorithms.

[0227] The following section continues to use Surface flinger as an example to illustrate the image drawing process.

[0228] Because Surface Flinger composites different image data (first image data and second image data) onto the final image on the screen, it needs to use a graphics API to interact with the graphics hardware to accomplish this task.

[0229] Surface Flinger requires interaction with graphics APIs in several ways; the following example uses OpenGL.

[0230] OpenGL provides the ability to interact with the GPU, enabling efficient image processing. OpenGL allows developers to leverage the GPU's parallel computing power to accelerate image compositing, rendering, and other graphics processing tasks.

[0231] In an optional embodiment, the electronic device responds to a second vertical synchronization signal generated by the electronic device by calling Surface flinger to synthesize the first image data and the second image data using OpenGL to obtain a first image frame.

[0232] It should be understood that electronic devices can also render and draw non-text data simultaneously, combining the first image data with the rendered and drawn non-text data to obtain the first image frame. For example, the electronic device calls an image compositing system to draw the first image data and the icons or buttons required in the interface to be drawn, such as application icons, pause button icons, etc., to obtain the first image frame.

[0233] In this embodiment, the electronic device can draw from font files obtained directly from the application's resource folder, eliminating the need to transfer memory-intensive font files across processes to the image compositing system for text drawing. This reduces the time and overhead of font file transfer, improves text drawing efficiency, reduces memory usage in the image compositing system, and enhances the user experience.

[0234] In one implementation, after obtaining the first image frame, the embodiments of this application may further include the following steps:

[0235] In step S98, the electronic device sends the first image frame to the display to show the interface corresponding to the first image frame.

[0236] In one optional embodiment, after acquiring the first image frame, the electronic device can control the image compositing system to send the first image frame to the display, thereby causing the display to show the interface corresponding to the first image frame to the user. Exemplarily, the electronic device sends and displays the first image frame to the electronic device display in response to a third vertical synchronization signal generated by the electronic device. The third vertical synchronization signal is a Vsync-HW signal.

[0237] Corresponding to the first embodiment of the interface drawing method described above, this application also provides a similar second embodiment. The description is as follows with reference to Figures 12 and 13. Figure 12 is a second flowchart illustrating an interface drawing method provided by an embodiment of this application. Figure 13 is a second framework diagram illustrating an interface drawing method provided by an embodiment of this application.

[0238] As shown in Figures 12 and 13, the interface drawing method provided in this embodiment includes the following steps:

[0239] In step S121, the electronic device responds to the interface rendering event and retrieves the font file corresponding to the text drawing rules from the resource file location of the application.

[0240] In step S122, the electronic device determines the first region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file.

[0241] In step S123, the electronic device acquires shared memory of the same size as the memory space of the first region, based on the first region.

[0242] In step S124, the electronic device, based on the font file, calls the drawing module in the application to draw on the drawing surface object corresponding to the shared memory, and obtains the first image data corresponding to the text to be drawn.

[0243] In step S125, the electronic device controls the image synthesis system to obtain the first image data from the shared memory based on the first identifier.

[0244] The specific details of steps S121-S125 can be found in steps S91-S95, and will not be repeated here.

[0245] In step S126, the electronic device calls the application to draw and render the non-text data to obtain the second image data.

[0246] In one alternative implementation, the electronic device can draw and render non-textual data by calling a graphics API (such as OpenGL) through an application to obtain second image data. This process utilizes the powerful parallel processing capabilities of the GPU, enabling efficient completion of image processing tasks.

[0247] The specific details mentioned above can be found in step S97 above, and will not be repeated here.

[0248] In step S127, the electronic device control application sends the second image data to the image synthesis system.

[0249] In step S128, the electronic device calls the image synthesis system to synthesize the first image data and the second image data to obtain the first image frame corresponding to the interface.

[0250] The specific details of step S128 can be found in step S97 above, and will not be repeated here.

[0251] In this embodiment, the electronic device can draw from font files obtained directly from the application's resource folder, eliminating the need to transfer memory-intensive font files across processes to the image compositing system for text drawing. This reduces the time and overhead of font file transfer, improves text drawing efficiency, reduces memory usage in the image compositing system, and enhances the user experience.

[0252] In one implementation, after obtaining the first image frame, the embodiments of this application may further include the following steps:

[0253] In step S129, the electronic device sends the first image frame to the display to show the interface corresponding to the first image frame.

[0254] The specific details of step S129 above can be found in step S98 above, and will not be repeated here.

[0255] Optionally, the rendering and drawing of non-textual data described above can be performed simultaneously with step S124, or as shown in the example above, after step S125. No specific limitation is made here.

[0256] Corresponding to the aforementioned embodiments of the interface drawing method, this application also provides another embodiment of the interface drawing method. The following description is in conjunction with Figures 14 and 15. Figure 14 is a third flowchart illustrating an interface drawing method provided by an embodiment of this application. Figure 15 is a third framework diagram illustrating an interface drawing method provided by an embodiment of this application.

[0257] As shown in Figures 14 and 15, the interface drawing method provided in this embodiment includes the following steps:

[0258] In step S141, the electronic device responds to the interface rendering event and retrieves the font file corresponding to the text drawing rules from the resource file location of the application.

[0259] The specific details of step S141 can be found in step S91 above, and will not be repeated here.

[0260] In step S142, the electronic device determines the second region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file.

[0261] In this embodiment of the application, the second region is the storage area occupied by the image data after the text to be drawn is rendered.

[0262] The specific details of step S142 can be found in step S92 above, and will not be repeated here.

[0263] In step S143, the electronic device acquires non-text data and, based on the non-text data, determines the third region corresponding to the non-text to be drawn.

[0264] In this embodiment, the third region is the storage area occupied by the image data after non-text rendering.

[0265] Optionally, the memory size occupied by the text to be drawn can be determined based on non-text data.

[0266] In an optional embodiment, the non-text data is image data, and step 143 includes: the electronic device determining the image size corresponding to the non-text to be drawn based on the non-text data; and the electronic device determining the memory size occupied by the non-text to be drawn based on the image size.

[0267] The following example demonstrates how to determine the size of the image corresponding to the non-text to be drawn.

[0268] Electronic devices can acquire the resolution and color depth of image data, and further, based on the resolution and color depth of the image data, determine the size of the image corresponding to the non-text to be drawn.

[0269] The size of the image corresponding to the non-text to be drawn can be determined by the following formula (4):

[0270]

[0271] For example, an 800×600 pixel, 24-bit color depth image would occupy approximately 800×600×3=1,440,000 bytes.

[0272] The following example demonstrates how much memory is needed to draw non-text text.

[0273] In everyday use, users typically choose the appropriate unit based on the size of the data. Megabytes (MB) are a commonly used unit for file size, storage capacity, or data transfer volume. When converting bytes to megabytes (MB), two different units are usually used.

[0274] In one alternative embodiment, binary conversion is used when converting bytes to megabytes (MB). In binary conversion, the base unit is 1024 bytes, and this conversion is based on powers of 2. For example, 1 KB (kilobyte) = 1024 bytes, 1 MB (megabyte) = 1024 × 1024 bytes = 1,048,576 bytes, and 1 GB (gigabyte) = 1024 MB = 1024 × 1024 × 1024 bytes.

[0275] For example, the memory size occupied by the non-text to be drawn can be determined by the following formula (5):

[0276] Memory size = Image size / 1,048,576 bytes (MB); Formula (5)

[0277] Continuing with the example above, the image size is 1,440,000 bytes. After binary conversion, the memory size occupied by the non-text to be drawn is 1.373 MB.

[0278] That is to say, the third region is 1.373MB.

[0279] In another alternative embodiment, decimal conversion is used when converting bytes to megabytes (MB). In decimal conversion, the base unit is 1000 bytes, and this conversion is based on powers of 10. For example, 1KB (kilobyte) = 1000 bytes, 1MB (megabyte) = 1000 × 1000 bytes = 1,000,000 bytes, and 1GB (gigabyte) = 1000MB = 1000 × 1000 × 1000 bytes.

[0280] For example, the memory size occupied by the non-text to be drawn can be determined by the following formula (6):

[0281] Memory size = Image size / 1,000,000 bytes (MB); Formula (6)

[0282] Continuing with the example above, the image size is 1,440,000 bytes. After decimal conversion, the memory size occupied by the non-text area to be drawn is 1.44 MB. That is to say, the third region is 1.44 MB.

[0283] In step S144, the electronic device determines the first region based on the third region and the second region.

[0284] In this embodiment, the first region is the storage area occupied by the image data after rendering the text to be drawn and the image data after rendering the non-text data.

[0285] For example, the first region can be determined by the following formula (7):

[0286] First region = Second region + Third region; Formula (7)

[0287] For example, if the memory size of the second region is 0.004MB, the memory size of the third region is 1.373MB, and the memory size of the first region is 1.3777MB.

[0288] In step S145, the electronic device acquires shared memory of the same size as the memory space of the first region, based on the first region.

[0289] In step S146, the electronic device, based on the font file, calls the drawing module in the application to draw on the drawing surface object corresponding to the shared memory, and obtains the first image data corresponding to the text to be drawn.

[0290] The specific details of steps S145-S146 above can be found in steps S94-S95 above, and will not be repeated here.

[0291] In step S147, the electronic device, based on non-text data, calls the drawing module in the application to draw on the drawing surface object corresponding to the shared memory, and obtains the second image data corresponding to the text to be drawn.

[0292] Step S147 above can be referred to as similar content in steps S94-S96 above, and will not be repeated here.

[0293] In step S148, the electronic device controls the image synthesis system to obtain first image data and second image data from shared memory based on the first identifier.

[0294] Step 148 above can be referred to as similar content in step S97 above, and will not be repeated here.

[0295] In step S149, the electronic device calls the image synthesis system to synthesize the first image data and the second image data to obtain the first image frame corresponding to the interface.

[0296] The specific details of step 149 above can be found in step S98 above, and will not be repeated here.

[0297] In this embodiment, storing the first image data corresponding to the text to be drawn and the second image data corresponding to the non-text to be drawn in the interface to be drawn in shared memory can reduce the time required to transmit the font file of the text to be drawn and improve efficiency. At the same time, it avoids the image compositing system from making a second copy of the first image data and the second image data, thereby reducing the memory usage of the image compositing system.

[0298] In one implementation, after obtaining the first image frame, the embodiments of this application may further include the following steps:

[0299] In step S150, the electronic device sends the first image frame to the display to show the interface corresponding to the first image frame.

[0300] The specific details of step S150 above can be found in step S98 above, and will not be repeated here.

[0301] Optionally, in the three embodiments illustrated above, the electronic device directly draws the font file embedded in the application to obtain the first image data, without needing to transmit the font file. Simultaneously, other non-text data in the interface to be drawn is drawn to obtain the second image data. The drawing location of the second image data is not specifically limited. An image compositing system is invoked, and based on the first and second image data, the first image frame corresponding to the interface to be drawn can be obtained. This ensures efficient text drawing, reduces the memory footprint of the image compositing system, and improves the user experience.

[0302] Corresponding to the first, second, and third embodiments of the interface drawing method described above, this application also provides a similar fourth embodiment. The description is as follows with reference to Figures 16 and 17. Figure 16 is a fourth flowchart illustrating an interface drawing method provided by an embodiment of this application. Figure 17 is another flowchart illustrating an interface drawing method provided by an embodiment of this application.

[0303] As shown in Figures 16 and 17, the interface drawing method provided in this embodiment includes the following steps:

[0304] In step S161, the electronic device responds to the interface rendering event and retrieves the font file corresponding to the text drawing rules from the application's resource folder.

[0305] Among them, the text drawing rules are used to indicate the drawing style of text in the interface.

[0306] In step S162, the electronic device calls the drawing module in the application to draw the font file and obtains the first image data corresponding to the text to be drawn.

[0307] In step S163, the electronic device stores the first image data in shared memory.

[0308] Shared memory is used to facilitate data exchange between different processes. During the drawing process, relevant drawing data is temporarily stored in shared memory, so it needs to be stored after drawing is completed.

[0309] In step S164, the electronic device obtains the first image data from the shared memory.

[0310] In step S165, the electronic device calls the image synthesis system to synthesize the first image data and the second image data to obtain the first image frame corresponding to the interface.

[0311] The second image data consists of other drawn image data in the interface besides text data.

[0312] In this embodiment, the above method further includes:

[0313] The electronic device calls the drawing module in the application to draw on the font file and obtains the first image data corresponding to the text to be drawn, including: creating a drawing surface object corresponding to shared memory; and drawing on the drawing surface object based on the font file to obtain the first image data corresponding to the text to be drawn.

[0314] Optionally, before obtaining the first image data from the shared memory, the method further includes: obtaining a first identifier corresponding to the shared memory, wherein the first identifier is a pre-set identifier for the shared memory; controlling the application to send the first identifier to the image compositing system; obtaining the first image data from the shared memory includes: controlling the image compositing system to obtain the first image data from the shared memory based on the first identifier.

[0315] Optionally, the electronic device controls the image synthesis system to obtain first image data from shared memory based on a first identifier, including: mapping the stored content in the shared memory to the memory space of the image synthesis system based on the first identifier; wherein the stored content includes at least one first image data; and obtaining the first image data from the memory space of the image synthesis system.

[0316] Optionally, before calling the drawing module in the application to draw the font file and obtain the first image data corresponding to the text to be drawn, the method further includes: obtaining the text to be drawn and the text drawing rules; determining the first region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file; wherein, the first region is the storage area occupied by the image data of the text to be drawn after rendering. Specifically, based on the text to be drawn, the text drawing rules, and the font file, the font width and font height corresponding to the text to be drawn are determined; based on the font width and font height, the first region corresponding to the text to be drawn is determined; and based on the first region, shared memory with the same memory space size as the first region is obtained.

[0317] Continuing with Figures 17 and 5, the electronic device can request shared memory based on the font file obtained directly from the application's resource folder, using the text to be drawn and the font file. Further, the font file is drawn to obtain first image data. Further, the electronic device controls the application to send the first identifier corresponding to the shared memory storing the first image data to the image compositing system. Further, the electronic device calls the image compositing system to draw the first image data and non-text data to obtain a first image frame.

[0318] In summary, electronic devices can draw from font files obtained directly from the application's resource folder, eliminating the need to transfer memory-intensive font files across processes to the image compositing system for text rendering. This reduces the time and overhead of font file transfer, improves text rendering efficiency, lowers the memory footprint of the image compositing system, and enhances the user experience.

[0319] It is understood that, in order to achieve the aforementioned functions, electronic devices include corresponding hardware structures and / or software modules for performing each function. Those skilled in the art should readily recognize that the image enhancement method steps described in conjunction with the embodiments disclosed in this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is implemented in hardware or by software-driven hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0320] This application embodiment also provides an interface drawing device, including:

[0321] The acquisition module is configured to: in response to an interface rendering event, acquire the font file corresponding to the text drawing rules from the application's resource folder. The text drawing rules are used to indicate the drawing style of the text in the interface.

[0322] The calling module is configured to: call the drawing module in the application to draw the font file and obtain the first image data corresponding to the text to be drawn;

[0323] The storage module is configured to store the first image data in shared memory; wherein the shared memory is used to enable data exchange between different processes.

[0324] The acquisition module is also configured to: acquire the first image data from shared memory;

[0325] The calling module is also configured to: call the image synthesis system to synthesize the first image data and the second image data to obtain the first image frame corresponding to the interface, wherein the second image data is the other drawn image data in the interface except for the text data.

[0326] This application provides an electronic device that may include a display screen (such as a touch screen or a non-touch screen), a memory, and one or more processors. The display screen, memory, and processors are coupled. The memory stores computer program code, which includes computer instructions. When the processor executes the computer instructions, the electronic device can perform various functions or steps performed by the electronic device in the above method embodiments. The structure of this electronic device can be referred to the structure of the electronic device shown in FIG7.

[0327] Figure 18 is a structural block diagram of a chip system provided in an embodiment of this application.

[0328] This application also provides a chip system 1800, as shown in FIG18. The chip system 1800 includes at least one processor 1801 and at least one interface circuit 1802. The processor 1801 and the interface circuit 1802 are interconnected via lines. For example, the interface circuit 1802 can be used to receive signals from other devices (e.g., the memory of an electronic device). As another example, the interface circuit 1802 can be used to send signals to other devices (e.g., the processor 1801 or the touchscreen of an electronic device). Exemplarily, the interface circuit 1802 can read instructions stored in the memory and send the instructions to the processor 1801. When the instructions are executed by the processor 1801, the electronic device can perform the steps in the above embodiments. Of course, the chip system may also include other discrete devices, which are not specifically limited in this application.

[0329] This application also provides a computer storage medium that includes computer instructions. When the computer instructions are executed on the electronic device, the electronic device performs various functions or steps performed by the electronic device in the above method embodiments.

[0330] This application also provides a computer program product that, when run on a computer, causes the computer to perform various functions or steps performed by the electronic device in the above method embodiments.

[0331] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0332] It is readily understood that, based on the several embodiments provided in this application, those skilled in the art can combine, split, or reorganize the embodiments of this application to obtain other embodiments, none of which exceed the protection scope of this application.

[0333] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another apparatus, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0334] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units; that is, it can be located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0335] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0336] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, in essence, 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. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks. It should be noted that those skilled in the art, after considering the specification and practicing the application disclosed herein, will readily conceive of other embodiments of this application. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary technical means in the art not disclosed in this application. The description and examples are to be considered exemplary only, and the true scope of this application is indicated by the claims.

[0337] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A method for drawing an interface, characterized in that, The display method includes: responding to an interface rendering event, obtaining a font file corresponding to a text drawing rule from a resource file location of the application, wherein the text drawing rule is used to indicate the drawing style of the text in the interface; calling a drawing module in the application to draw the font file to obtain first image data corresponding to the text to be drawn; storing the first image data in shared memory; wherein the shared memory is used to realize data exchange between different processes; obtaining the first image data from the shared memory; calling an image compositing system to composite the first image data and the second image data to obtain a first image frame corresponding to the interface, wherein the second image data is other drawn image data in the interface besides text data.

2. The method according to claim 1, characterized in that, The step of calling the drawing module in the application to draw the font file and obtain the first image data corresponding to the text to be drawn includes: creating a drawing surface object corresponding to the shared memory; and, based on the font file, calling the drawing module in the application to draw on the drawing surface object to obtain the first image data corresponding to the text to be drawn.

3. The method according to claim 2, characterized in that, Before retrieving the first image data from the shared memory, the method further includes: retrieving a first identifier corresponding to the shared memory, wherein the first identifier is a pre-set identifier for the shared memory; controlling the application to send the first identifier to the image compositing system; the step of retrieving the first image data from the shared memory includes: controlling the image compositing system to retrieve the first image data from the shared memory based on the first identifier.

4. The method according to claim 3, characterized in that, The method of controlling the image compositing system to obtain the first image data from the shared memory based on the first identifier includes: mapping the storage content in the shared memory to the memory space of the image compositing system based on the first identifier; wherein the storage content includes at least one piece of the first image data; and obtaining the first image data from the memory space of the image compositing system.

5. The method according to claim 4, characterized in that, The step of retrieving the font file corresponding to the text drawing rule from the resource file acquisition location of the application in response to the interface rendering event includes: retrieving the text drawing rule from the text folder in the application in response to the interface rendering event; the text folder includes the text to be drawn and the text drawing rule; and retrieving the font file corresponding to the text drawing rule from the resource file acquisition location based on the text drawing rule.

6. The method according to claim 2, wherein the step of calling the drawing module in the application to draw on the drawing surface object based on the font file to obtain the first image data corresponding to the text to be drawn includes: In response to the first vertical synchronization signal generated by the electronic device, the drawing module in the application is invoked to draw on the drawing surface object based on the font file, thereby obtaining the first image data corresponding to the text to be drawn.

7. The method according to claim 1, characterized in that, Before calling the drawing module in the application to draw the font file and obtain the first image data corresponding to the text to be drawn, the method further includes: obtaining the text to be drawn and the text drawing rules; determining the first region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules and the font file; wherein, the first region is the storage area occupied by the image data after the text to be drawn is rendered; and obtaining the shared memory with the same size as the memory space of the first region.

8. The method according to claim 7, characterized in that, The step of determining the first region corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file includes: determining the font width and font height corresponding to the text to be drawn based on the text to be drawn, the text drawing rules, and the font file; and determining the first region corresponding to the text to be drawn based on the font width and the font height.

9. The method according to claim 6, characterized in that, The step of responding to the first vertical synchronization signal generated by the electronic device, and based on the font file, calling the drawing module in the application to draw on the drawing surface object to obtain the first image data corresponding to the text to be drawn, includes: responding to the first vertical synchronization signal generated by the electronic device, and based on the font file, calling the drawing module in the application to render the font file on the drawing surface object to generate graphic data; and calling the drawing module to draw the graphic data to obtain the first image data corresponding to the text to be drawn.

10. The method according to any one of claims 1-9, characterized in that, The step of calling the image compositing system to synthesize the first image data and the second image data to obtain the first image frame corresponding to the interface includes: responding to the second vertical synchronization signal generated by the electronic device, calling the image compositing system to synthesize the first image data and the second image data to obtain the first image frame.

11. The method according to claim 10, characterized in that, Before calling the image compositing system to combine the first image data and the second image data to obtain the first image frame, the method further includes: calling the image compositing system to obtain non-text data to be processed; wherein, the non-text data is other data in the interface besides text data; and calling the image compositing system to draw the non-text data to obtain the second image data.

12. The method according to claim 10, characterized in that, Before invoking the image compositing system to combine the first image data and the second image data to obtain the first image frame, the method further includes: invoking the application to obtain non-text data to be processed; wherein, the non-text data is other data in the interface besides text data; invoking the application to draw the non-text data to obtain the second image data; and controlling the application to send the second image to the image compositing system.

13. The method according to any one of claims 1-12, characterized in that, Also includes: The first image frame is sent to the display to show the interface corresponding to the first image frame.

14. The method according to claim 13, characterized in that, Sending the first image frame to display the interface corresponding to the first image frame includes: in response to a third vertical synchronization signal generated by the electronic device, sending and displaying the first image frame to the display of the electronic device.

15. The method according to any one of claims 1-14, characterized in that, The interface rendering events include any one of the following: initial interface loading, interface update, interface size change, user-triggered operation, screen refresh synchronization, and background drawing / caching.

16. The method according to any one of claims 1-15, characterized in that, The shared memory is a target memory region in main memory or distributed memory.

17. An electronic device, characterized in that, include: The device includes a display screen, a memory, and one or more processors; the display screen, the memory, and the processors are coupled; wherein the memory stores computer program code, the computer program code including computer instructions, which, when executed by the processor, cause the electronic device to perform the interface drawing method as described in any one of claims 1-16.

18. A computer-readable storage medium, characterized in that, It includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the interface drawing method as described in any one of claims 1-16.

19. A computer program product, characterized in that, When the computer program product is run on a computer, it causes the computer to perform the interface drawing method as described in any one of claims 1-16.

Images