Lyric drawing method and device for vehicle cabin, storage medium and electronic device

Abstract

This invention provides a method, apparatus, storage medium, and electronic device for drawing lyrics in a vehicle cockpit. The method includes: responding to a lyrics loading request from a media source on a media display screen in the vehicle cockpit and acquiring the original lyrics data of the media source; constructing a lyrics data model of the original lyrics data using characters as units; initializing and configuring a set of control components for lyrics on a lyrics canvas of the media display screen; controlling the activation state of the control component set according to the lyrics loading state; calling a content drawing component in the control component set to configure a lyrics pen, and drawing lyrics on the lyrics canvas using the lyrics pen and the lyrics data model. This embodiment solves the technical problem of low efficiency in drawing lyrics in vehicle cockpits in the prior art, improving the smoothness of lyrics display, the responsiveness of interaction, and the user-friendliness of the user experience.

Description

Technical Field

[0001] This invention relates to the field of vehicle multimedia technology, and more specifically, to a method and apparatus for drawing lyrics in a vehicle cockpit, a storage medium, and an electronic device. Background Technology

[0002] In related technologies, the following problems are commonly found in the rendering of lyrics for vehicle smart cockpits: Significant performance bottlenecks: Traditional lyric rendering often uses full recalculation logic. Every time the playback progress is updated or the user swipes, the position information of all lyric lines needs to be recalculated, resulting in high CPU usage. This can easily lead to stuttering in long lyrics or high-frequency interaction scenarios (such as the driver swiping to switch lyrics in a smart cockpit). Insufficient adaptability: Existing solutions struggle to adapt to multiple device sizes (such as the central control screen and instrument panel screen in a smart cockpit) and multilingual environments, often resulting in problems such as disordered lyric line breaks and alignment methods that do not conform to language habits (such as the lack of support for right alignment in Arabic). Rigid style configuration: The colors, fonts, and animations of lyric lines are mostly fixed designs, failing to meet users' personalized needs or the visual specifications of different scenarios (such as switching between night mode and day mode in a smart cockpit). High component coupling: Functions such as lyric loading state management, interactive response, and content rendering are often integrated into a single module, resulting in poor code maintainability and difficulty in quickly adapting to the expansion needs of complex scenarios such as smart cockpits (such as linking with in-vehicle voice assistants to update lyrics). Therefore, there is an urgent need for a lyrics rendering solution that combines efficient computing, multi-scenario adaptability, flexible configuration, and loosely coupled architecture to solve the above-mentioned technical pain points.

[0003] No efficient and accurate solution has yet been found to address the aforementioned issues in the relevant technologies. Summary of the Invention

[0004] This invention provides a method and apparatus for drawing lyrics in a vehicle cockpit, as well as a storage medium and electronic device, to solve technical problems in related technologies.

[0005] According to an embodiment of the present invention, a method for drawing lyrics in a vehicle cockpit is provided, comprising: responding to a lyrics loading request from a media source on a media display screen in the vehicle cockpit, acquiring the original lyrics data of the media source; constructing a lyrics data model of the original lyrics data in units of characters; initializing and configuring a set of control components for lyrics on a lyrics canvas of the media display screen; controlling the activation state of the set of control components according to the lyrics loading state; calling a content drawing component in the set of control components to configure a lyrics pen, and drawing lyrics on the lyrics canvas using the lyrics pen and the lyrics data model.

[0006] Optionally, the set of control components for initializing and configuring lyrics on the lyrics canvas of the media display screen includes: during the initialization phase of the lyrics canvas on the media display screen, configuring a container component as the parent component at the bottom layer of the lyrics canvas; configuring a status information component on top of the container component; configuring a decoration component on top of the status information component; and configuring a content drawing component on top of the decoration component. The set of control components includes the container component, the status information component, the decoration component, and the content drawing component. The container component manages the lifecycle of other components and performs event dispatching. The status information component displays the loading status and error information of the lyrics. The decoration component performs human-computer interaction and progress indication. The content drawing component renders the display style of the lyrics.

[0007] Optionally, controlling the activation state of the control component set based on the lyrics loading status includes: controlling the container component to listen to the lyrics loading status of the status information component; if the lyrics loading status is loading or loading failed, activating the status information component and hiding the decoration component and the content drawing component; if the lyrics loading status is loading successfully, activating the decoration component and the content drawing component and hiding the status information component.

[0008] Optionally, constructing a lyrics data model for the original lyrics data by character includes: parsing the song ID, lyrics line text, and timestamps of the original lyrics data; for each lyrics line text, splitting it into individual characters, calculating the start timestamp and duration of each character, and constructing lyrics character instances; for each lyrics line text, constructing lyrics line instances using the corresponding lyrics line text's line index, line start time, text content, and lyrics character instance set; encapsulating all lyrics line text's lyrics line instances into a complete lyrics object and associating it with the song ID to obtain the lyrics data model for the original lyrics data, wherein the lyrics data model associates all lyrics line instances through line indexes, and each lyrics line instance is associated with lyrics character instances through character indexes.

[0009] Optionally, configuring the lyrics pen by calling the content drawing component in the control component set includes: reading the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters from the style configuration parameters, wherein the middle line is the line following the playback line, and the normal line is the other lines in the view area of ​​the lyrics canvas besides the middle line and the playback line; configuring the lyrics pen using the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters respectively, wherein the lyrics pen includes a normal line lyrics pen, a playback line lyrics pen, and a middle line lyrics pen.

[0010] Optionally, drawing lyrics on the lyrics canvas using the lyrics pen and the lyrics data model includes: calculating the line position of each lyric line in the lyrics canvas using a text layout control, and identifying the line state of each lyric line in the lyrics data model at the current time, wherein the line position includes the line height and the line start position, and the line state includes the middle line, the playback line, and the normal line; and drawing lyrics on the lyrics canvas by calling the lyrics pen according to the line position and the line state.

[0011] Optionally, based on the line position and the line state, a matching lyric pen is invoked to draw lyrics on the lyric canvas, including: for lyric lines whose line state is a normal line, the normal line lyric pen is invoked to draw lyrics at the corresponding line position on the lyric canvas; for lyric lines whose line state is a playback line, the playback line lyric pen is invoked to draw lyrics at the corresponding line position on the lyric canvas; and for lyric lines whose line state is a middle line, the middle line lyric pen is invoked to draw lyrics at the corresponding line position on the lyric canvas.

[0012] Optionally, drawing lyrics on the lyrics canvas using the lyrics pen includes: constructing a global positioning list for the lyrics canvas using the row positions of all lyrics lines in the lyrics canvas; updating the current playing line according to the playback time, and determining the index to be drawn based on the index of the current playing line or the median line; sliding the drawing area according to the row index of the current playing line so that the current playing line is centered in the drawing area; selecting a first set of elements before the index to be drawn in the global positioning list, and recalculating and selecting the row positions of local lyrics lines before the bottom of the drawing area as a second set of elements, wherein the size of the drawing area is smaller than the overall size of the lyrics canvas; constructing a local positioning list for the drawing area in the lyrics canvas using the first set of elements and the second set of elements; and drawing lyrics on the drawing area using the lyrics pen according to the local positioning list.

[0013] Optionally, according to the local positioning list, calling the lyrics pen to draw lyrics on the drawing area includes: determining the visible area of ​​the view component in the media display screen as the view area; extending the cache lines at the top and bottom of the view area to obtain the drawing area; cropping the range of the lyrics canvas to the drawing area; and traversing each element in the local positioning list, calling the corresponding lyrics pen to draw lyrics on the drawing area according to the row status of each element.

[0014] Optionally, before invoking the lyric pen to draw lyrics on the lyric canvas, the method further includes: reading individual lyric characters from the lyric data model, identifying the lyric language type of the individual lyric characters, identifying the canvas width and canvas height of the lyric canvas on the media display screen; configuring the horizontal and vertical alignment of the lyric lines according to the lyric language type, configuring the length of the lyric lines according to the canvas width, and configuring the visual center line of the visual area according to the canvas height.

[0015] According to another embodiment of the present invention, a lyric drawing device for a vehicle cockpit is provided, comprising: an acquisition module, configured to acquire original lyric data of the media source in response to a lyric loading request from a media source on a media display screen in the vehicle cockpit; a construction module, configured to construct a lyric data model of the original lyric data in units of characters; a configuration module, configured to initialize a set of control components for configuring lyrics on a lyric canvas of the media display screen; a control module, configured to control the activation state of the set of control components according to the lyric loading state; and a display module, configured to call a content drawing component in the set of control components to configure a lyric pen, and draw lyrics on the lyric canvas using the lyric pen and the lyric data model.

[0016] Optionally, the configuration module includes: a first configuration unit, configured as a parent component at the bottom layer of the lyrics canvas during the initialization phase of the lyrics canvas on the media display screen; a second configuration unit, configured as a status information component above the container component; a third configuration unit, configured as a decoration component above the status information component; and a fourth configuration unit, configured as a content drawing component above the decoration component. The control component set includes the container component, the status information component, the decoration component, and the content drawing component. The container component manages the lifecycle of other components and performs event dispatching. The status information component displays the loading status and error information of the lyrics. The decoration component performs human-computer interaction and progress indication. The content drawing component renders the display style of the lyrics.

[0017] Optionally, the control module includes: a listening unit, configured to control the container component to listen to the lyrics loading status of the status information component; and an activation unit, configured to activate the status information component and hide the decoration component and the content drawing component if the lyrics loading status is loading or loading failed; and to activate the decoration component and the content drawing component and hide the status information component if the lyrics loading status is loading successfully.

[0018] Optionally, the construction module includes: a parsing unit for parsing the song ID, lyric line text, and time tag of the original lyrics data; a first construction unit for splitting each lyric line text into individual characters, calculating the start timestamp and duration of each character, and constructing a lyric character instance; a second construction unit for constructing a lyric line instance for each lyric line text using the corresponding lyric line text's line index, line start time, text content, and lyric character instance set; and a third construction unit for encapsulating all lyric line text instances into a complete lyrics object and associating it with the song ID to obtain the lyrics data model of the original lyrics data, wherein the lyrics data model associates all lyric line instances through the line index, and each lyric line instance is associated with a lyric character instance through a single character index.

[0019] Optionally, the drawing module includes: a reading unit, used to read the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters from the style configuration parameters, wherein the middle line is the next line after the playback line, and the normal line is the other lines in the view area of ​​the lyrics canvas besides the middle line and the playback line; and a first configuration unit, used to configure lyrics pens using the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters respectively, wherein the lyrics pens include normal line lyrics pens, playback line lyrics pens, and middle line lyrics pens.

[0020] Optionally, the drawing module includes: a calculation unit, used to calculate the line position of each lyric line in the lyrics canvas using a text layout control, and to identify the line state of each lyric line in the lyrics data model at the current time, wherein the line position includes the line height and the line start position, and the line state includes the middle line, the playback line, and the normal line; and a drawing unit, used to call the lyrics pen to draw lyrics on the lyrics canvas according to the line position and the line state.

[0021] Optionally, the drawing unit includes: a first drawing subunit, used to draw lyrics on the corresponding line position of the lyrics canvas by calling the normal line lyrics pen for lyrics lines whose line state is a normal line; to draw lyrics on the corresponding line position of the lyrics canvas by calling the playback line lyrics pen for lyrics lines whose line state is a playback line; and to draw lyrics on the corresponding line position of the lyrics canvas by calling the middle line lyrics pen for lyrics lines whose line state is a middle line.

[0022] Optionally, the drawing unit includes: a first construction subunit, configured to construct a global positioning list of the lyrics canvas using the row positions of all lyrics lines in the lyrics canvas; a determination subunit, configured to update the current playing line according to the playback time, and determine the index to be drawn according to the index of the current playing line or the median line; a sliding subunit, configured to slide the drawing area according to the row index of the current playing line, so that the current playing line is displayed in the center of the drawing area; a selection subunit, configured to select a first set of elements before the index to be drawn in the global positioning list, and starting from the index to be drawn, recalculate and select the row positions of local lyrics lines before the bottom of the drawing area as a second set of elements, wherein the size of the drawing area is smaller than the overall size of the lyrics canvas; a second construction subunit, configured to construct a local positioning list of the drawing area in the lyrics canvas using the first set of elements and the second set of elements; and a second drawing subunit, configured to call the lyrics pen to draw lyrics on the drawing area according to the local positioning list.

[0023] Optionally, the second drawing subunit is further configured to: determine the visible area of ​​the view component in the media display screen as the view area; extend the cache lines at the top and bottom of the view area to obtain the drawing area; crop the range of the lyrics canvas to the drawing area, and traverse each element in the local positioning list, and call the corresponding lyrics pen to draw lyrics on the drawing area according to the row status of each element.

[0024] Optionally, the drawing module further includes: a recognition unit, configured to read individual lyrics from the lyrics data model, recognize the lyrics language type of the individual lyrics, and recognize the canvas width and canvas height of the lyrics canvas on the media display screen before the drawing unit calls the lyrics pen to draw lyrics on the lyrics canvas; and a second configuration unit, configured to configure the horizontal and vertical alignment of the lyrics lines according to the lyrics language type, configure the length of the lyrics lines according to the canvas width, and configure the visual center line of the visual area according to the canvas height.

[0025] According to another aspect of the embodiments of this application, a storage medium is also provided, the storage medium including a stored program that executes the above steps when the program is run.

[0026] According to another aspect of the embodiments of this application, an electronic device is also provided, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; wherein: the memory is used to store computer programs; and the processor is used to execute the steps in the above method by running the programs stored in the memory.

[0027] This application also provides a computer program product containing instructions that, when run on a computer, cause the computer to perform the steps in the above-described method.

[0028] The beneficial effects of this invention are: 1. By using layered components to achieve a refined separation of responsibilities, the lyrics function is divided into 4 layers of components, with the container component managing the state and event distribution uniformly. The visibility of child components is dynamically controlled by the loading state (e.g., only the drawing component is displayed after successful loading), and events are distributed in a targeted manner according to the event type (swipe / click). This solves the coupling problem of traditional single modules. While achieving separation of responsibilities, the components reduce invalid rendering and improve the utilization of system resources. 2. A dynamic style system and brush reuse strategy are adopted. Three independent style configurations are designed based on the lyric line status (normal / playing / middle). Flexible definition of gradient effect parameters (time, interpolator, estimator) is supported. Through the global brush reuse mechanism, memory jitter caused by frequent object creation during the drawing process is avoided, balancing style flexibility and rendering performance. 3. Employing a dual-list reuse and local incremental calculation model, an innovative dual-list reuse mechanism is designed, combining the ordinary positioning list and the list to be drawn. The calculation boundary is identified by "reComputeIndex," and incremental calculations are performed only on the changed parts. This optimizes the full positioning calculation into a local update, significantly reducing CPU load, especially suitable for long lyrics and high-frequency scrolling scenarios. Only the changed lines (content after the playback line / middle line) are recalculated, reusing the cached results of the remaining lines. The computational complexity is reduced from O(n) to O(k) (where k is the number of changed lines), improving computational efficiency by 400% in long lyrics scenarios. 4. Employing region clipping and intelligent refresh control technology, the rendering stage uses a region clipping strategy (rendering only the visible area and cache lines), combined with dynamic frame rate adjustment (low frame rate during playback, refresh on demand during scrolling), to achieve "0 redraw" scrolling (moving the canvas only through scrollY), minimizing rendering consumption while ensuring visual smoothness; 5. Based on a multi-dimensional adaptive rule system, it integrates adaptive logic from three dimensions: language characteristics (left / right writing), component size (width / height variation), and user interaction (selection position). For example, it automatically switches alignment based on language type, dynamically wraps lines based on component width, and adjusts the visual center of the playback line based on height, adapting to diverse scenarios without manual intervention. By combining adaptive rules with interaction states, it balances display integrity and visual focus, improving user experience scores by 25%. 6. Adopting a collaborative management mechanism for styles and brushes, horizontal / vertical alignment is decoupled from basic visual attributes (color, font size, etc.) into independent configuration items, allowing users to independently set alignment and style parameters. This satisfies standardized display requirements while flexibly adapting to personalized layout scenarios, reducing the customization threshold. Attached Figure Description

[0029] The accompanying drawings, which are included to provide a further understanding of the invention and form part of this application, illustrate exemplary embodiments of the invention and, together with their description, serve to explain the invention and do not constitute an undue limitation thereof. In the drawings: Figure 1 This is a hardware structure block diagram of a car according to an embodiment of the present invention; Figure 2 This is a flowchart of a method for drawing lyrics in a vehicle cabin according to an embodiment of the present invention; Figure 3 This is a schematic diagram of the layered component model in an embodiment of the present invention; Figure 4 This is a schematic diagram of double-list data reuse and local computation in an embodiment of the present invention; Figure 5 This is a schematic diagram of the view area in an embodiment of the present invention; Figure 6 This is a flowchart illustrating the update process of lyrics rendering in an embodiment of the present invention; Figure 7 This is an adaptive effect diagram of lyrics in an embodiment of the present invention; Figure 8 This is a structural block diagram of a lyric drawing device for a vehicle cabin according to an embodiment of the present invention. Detailed Implementation

[0030] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present application, and not all of them. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present application. It should be noted that, unless otherwise specified, the embodiments and features in the embodiments of the present application can be combined with each other.

[0031] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0032] Example 1 The method embodiment provided in Embodiment 1 of this application can be executed in an automobile, computer, controller, server, or similar processing device. Taking its operation in an automobile as an example, Figure 1 This is a hardware structure block diagram of a car according to an embodiment of the present invention. For example... Figure 1 As shown, a car may include one or more ( Figure 1 Only one is shown in the image. A processor 102 (which may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.) and a memory 104 for storing data are also shown. Optionally, the vehicle may further include a transmission device 106 for communication functions and an input / output device 108. Those skilled in the art will understand that... Figure 1 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned automobile. For example, the automobile may also include components that are more... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown.

[0033] The memory 104 can be used to store automotive programs, such as application software programs and modules, like the automotive program corresponding to a method for drawing lyrics in a vehicle cockpit according to an embodiment of the present invention. The processor 102 executes various functional applications and data processing by running the automotive program stored in the memory 104, thereby implementing the aforementioned method. The memory 104 may include high-speed random access memory and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the vehicle via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0034] The transmission device 106 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by a vehicle's communication provider. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 may be a Radio Frequency (RF) module used for wireless communication with the Internet.

[0035] This embodiment provides a method for drawing lyrics in a vehicle cockpit. Figure 2 This is a flowchart of a method for drawing lyrics in a vehicle cabin according to an embodiment of the present invention, such as... Figure 2 As shown, the process includes the following steps: Step S201: Respond to the lyrics loading request of the media source on the media display screen in the vehicle cockpit, and obtain the original lyrics data of the media source; Optional media sources include local media, online media, and mobile terminals (phones) connected to the vehicle's cockpit.

[0036] Step S202: Construct a lyrics data model of the original lyrics data using characters as units; The lyrics data model is a three-layer data model, consisting of single characters, lyric lines, and complete lyric packages.

[0037] Step S203: Initialize the set of control components for configuring lyrics on the lyrics canvas of the media display screen; Optionally, the control component set includes a container component, the state information component, the decoration component, and the content rendering component. The container component is used to manage the lifecycle of other components and perform event dispatch. The state information component is used to display the loading status and error information of the lyrics. The decoration component is used to perform human-computer interaction and progress indication. The content rendering component is used to render the display style of the lyrics.

[0038] Step S204: Control the activation state of the control component set according to the lyrics loading state; Step S205: Call the content drawing component in the control component set to configure the lyrics pen, and use the lyrics pen and the lyrics data model to draw lyrics on the lyrics canvas.

[0039] Through the above steps, in response to the lyrics loading request of the media source on the media display screen in the vehicle cockpit, the original lyrics data of the media source is obtained; a lyrics data model of the original lyrics data is constructed with characters as units; a set of control components for configuring lyrics is initialized and configured on the lyrics canvas of the media display screen; the activation state of the set of control components is controlled according to the lyrics loading state; the content drawing component in the set of control components is called to configure the lyrics pen, and the lyrics are drawn on the lyrics canvas using the lyrics pen and the lyrics data model. This supports accurate positioning and dynamic rendering and flexible drawing of lyrics line by line and character by character, solving the technical problem of low lyrics drawing efficiency in the vehicle cockpit in the prior art, and improving the smoothness of lyrics display, the responsiveness of interaction, and the friendliness of user experience.

[0040] In one embodiment of this example, the set of control components for initializing and configuring lyrics on the lyrics canvas of the media display screen includes: during the initialization phase of the lyrics canvas of the media display screen, configuring a container component as the parent component at the bottom layer of the lyrics canvas; configuring a status information component on top of the container component; configuring a decoration component on top of the status information component; and configuring a content drawing component on top of the decoration component. The set of control components includes the container component, the status information component, the decoration component, and the content drawing component. The container component manages the lifecycle of other components and performs event dispatching. The status information component displays the loading status and error information of the lyrics. The decoration component performs human-computer interaction and progress indication. The content drawing component renders the display style of the lyrics.

[0041] A four-layer component architecture (LyricStatusView, LyricDecoratorView, LyricView, and LyricContainerView) is used to achieve separation of responsibilities. The container component manages the lifecycle, size, position, state switching, and event dispatch of sub-components. It dynamically controls the visibility of sub-components based on the lyrics loading status (not loaded / loading / loading successfully / loading failed), thereby improving system maintainability and resource utilization efficiency.

[0042] Lyrics status information component: displays loading status and error messages; Lyrics decoration component: handles interaction and progress indicators; Lyrics content drawing component: responsible for text rendering and animation; Lyrics container component: coordinates the lifecycle of sub-components and event distribution. Figure 3This is a schematic diagram of the layered component model in an embodiment of the present invention. The container component (LyricContainerView) is the lowest parent component. During initialization, the lyrics status information component (LyricStatusView), the lyrics decoration component (LyricDecoratorView), and the lyrics content drawing component (LyricView) are created in sequence. The width, height, and position of the child components are synchronized through size constraints (the size of the child components is consistent with that of the container, and their positions are superimposed).

[0043] In one example, controlling the activation state of the control component set based on the lyrics loading status includes: controlling the container component to listen to the lyrics loading status of the status information component; if the lyrics loading status is loading or loading failed, activating the status information component and hiding the decoration component and the content drawing component; if the lyrics loading status is loading successfully, activating the decoration component and the content drawing component and hiding the status information component.

[0044] The container component maintains the lyrics loading status (not loaded / loading / loading successfully / loading failed): When loading / failed: display LyricStatusView (showing "loading" or error message), hide LyricView and LyricDecoratorView; when loading successfully: display LyricView, hide LyricStatusView; when the user triggers a touch event, temporarily display LyricDecoratorView (providing a progress cursor and click response), and automatically hide it after the touch ends.

[0045] When the user interacts with the lyrics canvas, the container component intercepts touch events and distributes them according to the event type: swipe events are first passed to LyricView for lyrics scrolling and positioning; click events are passed to LyricDecoratorView for parsing the click position and jumping to the lyrics progress; the event handling results are synchronized to the container component, triggering the state update of child components (such as showing / hiding decoration components).

[0046] In one example of this embodiment, constructing a lyrics data model for the original lyrics data by character includes: parsing the song ID, lyrics line text, and timestamps of the original lyrics data; for each lyrics line text, splitting it into individual characters, calculating the start timestamp and duration of each character, and constructing lyrics character instances; for each lyrics line text, constructing lyrics line instances using the corresponding lyrics line text's line index, line start time, text content, and lyrics character instance set; encapsulating all lyrics line text's lyrics line instances into a complete lyrics object and associating it with the song ID to obtain the lyrics data model for the original lyrics data, wherein the lyrics data model associates all lyrics line instances through line indexes, and each lyrics line instance is associated with lyrics character instances through character indexes.

[0047] In this example, a three-level data structure is defined, consisting of lyric words, lyric lines, and complete lyrics. The hierarchical relationship of "whole - line - word" is clearly defined. The precise positioning and dynamic rendering of lyrics line by line and word by word are supported by the time attributes of individual words (start timestamp, duration) and line index information. First, raw lyrics data (e.g., LRC format) is obtained from local files or the network. This data is parsed to obtain the song ID, the text of each line of lyrics, and timestamps. Each line of text is then broken down into individual words, and the start timestamp (line start time + cumulative duration of preceding words) and duration (total line duration / number of words) of each word are calculated. A LyricWord instance (lyric word instance) is then constructed. A LyricRow instance (lyric line instance) is created for each line of lyrics, containing the line index, line start time, text content, and a list of words (a LyricWord collection). All LyricRows are encapsulated into a complete lyrics object (Lyric), associated with the song ID, thus completing the data model construction. Lyrics are associated with all LyricRows through line indexes, and LyricRows are associated with LyricWords through word indexes, forming a hierarchical reference relationship of "Lyric→LyricRow→LyricWord". This allows for quick location of the target line via line index and precise matching of playback progress via word time attributes.

[0048] In one example, configuring the lyrics pen by calling the content drawing component in the control component set includes: reading the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters from the style configuration parameters, wherein the middle line is the line following the playback line, and the normal line is the other lines in the view area of ​​the lyrics canvas besides the middle line and the playback line; configuring the lyrics pen using the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters respectively, wherein the lyrics pen includes a normal line lyrics pen, a playback line lyrics pen, and a middle line lyrics pen.

[0049] This example loads system-preset or user-defined style configuration parameters. Examples of the parameter contents for various lyric style parameters are provided below: NormalRowConfig: Includes text color (e.g., gray), font size (e.g., 14sp), font type (e.g., default font), and line spacing (e.g., 8dp). PlayingRowConfig: Includes text color (e.g., white), font size (e.g., 15sp), font type (e.g., bold), and line spacing (e.g., 8dp). ViewCenterRowConfig: Includes text color (e.g., yellow), font size (e.g., 16sp), font type (e.g., highlighted font), and line spacing (e.g., 8dp).

[0050] Then, the brushes are created and bound: NormalRowPaint (normal line lyrics brush): bound to NormalRowConfig, setting static visual properties such as color, font size, and font; PlayingRowPaint (playing line lyrics brush): bound to PlayingRowConfig, setting exclusive visual properties for the playing line; ViewCenterRowPaint (center line lyrics brush): bound to ViewCenterRowConfig, setting the highlight visual property for the center line. The brushes are globally stored in the container component, allowing LyricView to directly access them during drawing, avoiding duplicate creation.

[0051] In one example, based on the line position and the line state, a matching lyric pen is invoked to draw lyrics on the lyric canvas, including: for lyric lines whose line state is a normal line, the normal line lyric pen is invoked to draw lyrics at the corresponding line position on the lyric canvas; for lyric lines whose line state is a playback line, the playback line lyric pen is invoked to draw lyrics at the corresponding line position on the lyric canvas; and for lyric lines whose line state is a middle line, the middle line lyric pen is invoked to draw lyrics at the corresponding line position on the lyric canvas.

[0052] In one embodiment of this example, drawing lyrics on the lyrics canvas using the lyrics pen and the lyrics data model includes: calculating the line position of each lyric line in the lyrics canvas using a text layout control, and identifying the line state of each lyric line in the lyrics data model at the current time, wherein the line position includes the line height and the line start position, and the line state includes the middle line, the playback line, and the normal line; and drawing lyrics on the lyrics canvas by calling the lyrics pen according to the line position and the line state.

[0053] In calculating the line position of each lyric line in the lyrics canvas using a text layout control, the row index (rowIndex) is calculated first: consistent with the LyricRow subscript; then, the Y-axis starting point (locationY) is calculated and drawn: based on the cumulative sum of line height and line spacing (e.g., the nth line's locationY = the total height of the previous n-1 lines); the text layout (lyricLayout) is calculated: generated based on StaticLayout (text layout control), containing information such as the text drawing area, line height, and width (depending on the pen style and component width). It is particularly important to emphasize that the adaptive width handling of the lyrics is achieved using StaticLayout. The associated lyric line (lyricRow) is the corresponding LyricRow instance, associated with the original lyric line data. StaticLayout is a class in the operating system used to handle multi-line text layout, particularly suitable for drawing multi-line text on a Canvas (lyric canvas). It can automatically wrap and align text within a specified width area, making it ideal for implementing automatic line wrapping of lyrics. Its construction is based on: the drawing tool, the lyrics line text (the line string of LyricRow), the lyrics line style configuration (such as text size, font, line spacing, etc. in NormalRowConfig), and the width limit of the lyrics container (the width of LyricContainerView). Through StaticLayout's measurement mechanism, the height of each line of text and the space required for the overall layout can be accurately calculated, thereby dynamically adjusting the starting position of the drawing to ensure that the lyrics are vertically aligned and consistently spaced. In addition, StaticLayout also supports different alignment settings such as left alignment, center alignment, or right alignment, further enhancing the diversity and flexibility of the lyrics display effect. This achieves a closed loop of "lyric line style configuration - lyrics line style drawing tool - StaticLayout - Canvas drawing".

[0054] Based on the lyric line status (normal line, playing line, and center line in view), three types of style configurations and corresponding brushes are defined. It supports flexible configuration of basic attributes (color, font size, line spacing, etc.) and extended attributes (gradient time, interpolator, etc.). By reusing brushes globally, memory jitter is reduced, and differentiated visual presentation of lyrics in different states is achieved. In one example, drawing lyrics on a lyrics canvas using the lyrics pen includes: constructing a global positioning list for the lyrics canvas using the row positions of all lyrics lines in the lyrics canvas; updating the current playing line based on the playback time, and determining the index to be drawn based on the index of the current playing line or the median line; sliding the drawing area according to the row index of the current playing line so that the current playing line is centered in the drawing area; selecting a first set of elements before the index to be drawn in the global positioning list, and recalculating and selecting the row positions of local lyrics lines before the bottom of the drawing area as a second set of elements, wherein the size of the drawing area is smaller than the overall size of the lyrics canvas; constructing a local positioning list for the drawing area in the lyrics canvas using the first set of elements and the second set of elements; and drawing lyrics on the drawing area using the lyrics pen based on the local positioning list.

[0055] The global location list (normalLocationLyricRowList) in this embodiment caches all LocationLyricRow instances as a global calculation result pool; its data construction pseudocode is as follows: / / Record the row height of the first i rows var totolHeight = 0 List <lyricrow>.mapIndexed { index, lyricRow -> / / Built based on brush, lyrics line text, lyrics line style configuration, and the width of the lyrics container, etc. lyricLayout:StaticLayout / / Accumulate and calculate total row height totolHeight += lyricLayout.height locationY = totalHeight / / Build LocationLyricRow LocationLyricRow(index,locationY,lyricLayout, lyricRow) }

[0056] In this embodiment, the local positioning list (drawingLocationLyricRowList) is as follows: First, determine reComputeIndex (take the minimum value between the playback row index and the median row index); reuse the elements in normalLocationLyricRowList before reComputeIndex (positioning information remains unchanged); starting from reComputeIndex, calculate the positioning information of subsequent rows based on the previous row's locationY and row height, until the bottom of the drawing area is covered; filter out the elements that fall within the drawing area to form a list to be drawn (local positioning list), which is directly used as the rendering data source. Figure 4 This is a schematic diagram of double-list data reuse and local calculation in an embodiment of the present invention. If PlayingRowIndex=51 and ViewCenterRowIndex=54, then reComputeIndex=51. The positioning information of the first 50 rows is reused, and only the content from row 51 onwards (item51~item60) is recalculated. The index of the currently playing lyrics row (PlayingRowIndex) is calculated based on the playback time and the start time of the lyrics row. The index of the lyrics row in the middle of the view (ViewCenterRowIndex) is calculated when the user touches the screen, based on the lyrics row index within the middle area of ​​the view. When the user stops touching the screen, it is automatically synchronized to PlayingRowIndex (ViewCenterRowIndex=PlayingRowIndex), and reComputeIndex = Math.min(PlayingRowIndex, ViewCenterRowIndex).

[0057] During the recalculation of the reComputeIndex to the i-th line of lyrics, if it is a regular lyrics line, the LocationLyricRow of the current index is retrieved from the list of regular lyrics lines (global location list). Only LocationLyricRow.locationY needs to be recalculated; other information can be reused. This maximizes the utilization of the calculation results from the list of regular lyrics lines.

[0058] The lyrics are drawn line by line on the canvas according to the positioning information. The canvas content within the view area is scrolled by adjusting View.scrollY. When the line of lyrics being played or the line of lyrics centered in the view changes, the positioning information is recalculated and the canvas content is redrawn locally to ensure display accuracy and visual continuity.

[0059] By storing rendering location information through LocationLyricRow, and combining a dual-list reuse mechanism (normal location list and list to be rendered) and a local incremental calculation strategy, redundant calculations are reduced, CPU load is lowered, and the foundation for efficient rendering is laid.

[0060] Optionally, according to the local positioning list, calling the lyrics pen to draw lyrics on the drawing area includes: determining the visible area of ​​the view component in the media display screen as the view area; extending the cache lines at the top and bottom of the view area to obtain the drawing area; cropping the range of the lyrics canvas to the drawing area; and traversing each element in the local positioning list, calling the corresponding lyrics pen to draw lyrics on the drawing area according to the row status of each element.

[0061] In the view area (ViewRect): the visible range of the component, Rect(0, scrollY, width, scrollY+height); in the drawing area (DrawRect): the view area ±1 row buffer (to avoid edge flickering when scrolling), Rect(0, scrollY-NormalRowConfig.height, width, scroll+height+NormalRowConfig.height); in the center area (ViewCenterRect): the range of the center of the view (used to locate the center row), (0, (scroll+height) / 2-NormalRowConfig.height, width, (scroll+height) / 2+NormalRowConfig.height). Figure 5 This is a schematic diagram of the view area in an embodiment of the present invention, including a canvas area, a drawing area, a view area, and a view center area where the view center line is located.

[0062] Clip the canvas to the DrawRect area, iterate through the list to be drawn, and call the corresponding pen according to the row status (normal / playing / center); locate the starting point of the row's Y axis using Canvas.translate(), and call StaticLayout.draw() to draw the text, ensuring that the text is displayed according to the configured alignment (left / right / center).

[0063] Figure 6 This is a flowchart of the lyrics drawing update process in this embodiment of the invention, including: initialization phase, step 1: style configuration loading and pen initialization; step 2: lyrics data request and parsing; step 3: calculate the normal lyrics positioning list, if the size changes (such as the user scaling the screen, inverting the screen, etc.), then execute step 8: adaptive redrawing for size changes; if the user operates, enter step 7: playback / slide triggered update mechanism, enter the dynamic drawing phase, step 4: display area parameter calculation; step 5: calculate the drawing area positioning list; step 6: canvas cropping and local drawing.

[0064] Calculate the playback line index based on the current playback time, synchronously update scrollY to center the playback line, and trigger incremental calculation and partial redraw of the list to be drawn; The pseudocode for calculating the index of the currently playing lyrics line based on the song's playback progress is as follows: playingRowIndex = Lyric.List <lyricrow>.lastOrNull() { it.timeStamp <this }?.index ?: 0 The pseudocode for calculating the scroll position (scrollY) is as follows: / / Get the position of the currently playing line on the canvas locationLyricRow: LocationLyricRow = normalLocationLyricRowList.get(playingRowIndex) / / Built based on brush, lyrics line text, lyrics line style configuration, and the width of the lyrics container, etc. playingRowLyricLayout: StaticLayout?=null / / Recalculate and update the StaticLayout for this row locationLyricRow.lyricLayout = playingRowLyricLayout / / Calculate the position of the center line of this row viewCenterY = locationLyricRow.locationY + locationLyricRow.lyricLayout.height / 2 / / Calculate scrollY scrollY = viewCenterY - widgetHeight / 2 When a user swipes, update the median row index, temporarily display the progress cursor of the LyricDecoratorView, and synchronize the median row index with the playback row index after the swipe ends, then hide the decorative component. If the size changes (such as screen rotation or full-screen / half-screen switching): trigger a full calculation, regenerate normalLocationLyricRowList (calculate the text layout based on the new width), and adjust the drawing area and positioning information according to the new size.

[0065] By implementing a closed-loop design of "global caching - local update - incremental rendering" through four stages: initial configuration, data preparation, dynamic rendering, and update adjustment, and combining technologies such as region clipping and intelligent refresh control, resource consumption is minimized while ensuring visual continuity.

[0066] In one implementation scenario, before calling the lyric drawing pen to draw lyrics on the lyric canvas, the method further includes: reading individual lyric characters from the lyric data model, identifying the lyric language type of the individual lyric characters, identifying the canvas width and canvas height of the lyric canvas on the media display screen; configuring the horizontal and vertical alignment of the lyric lines according to the lyric language type, configuring the length of the lyric lines according to the canvas width, and configuring the visual center line of the visual area according to the canvas height.

[0067] The StaticLayout alignment can be set according to the language of the lyrics (e.g., Arabic lyrics are right-aligned by default), and users can manually switch between horizontal alignment (left / right / center) and vertical alignment (top / center / bottom) via the interface; (its lyrics adapt to different languages).

[0068] Language type identification is performed by analyzing the character features or metadata of the lyrics text (such as language identifiers in the lyrics tags). For example, Arabic script contains Arabic letters (such as...). , , (e.g., Arabic numerals) can be identified by regular expression matching [\u0600-\u06FF] (the Unicode range for Arabic numerals); Chinese numerals include Chinese characters [\u4E00-\u9FFF], and English numerals are mainly Latin letters, which can be initially determined by the character range; if the lyrics carry language metadata (such as lang="ar"), it is more efficient to read the metadata directly.

[0069] Mapping default horizontal alignment: In one example, a default horizontal alignment rule is preset based on the identified language type. Arabic, Hebrew and other right-to-left (RTL) languages ​​→ right alignment by default (corresponding to Layout.Alignment.ALIGN_OPPOSITE); Languages ​​such as Chinese and English that are left-to-right (LTR) → default left alignment (corresponding to Layout.Alignment.ALIGN_NORMAL); All languages ​​support center alignment (Layout.Alignment.ALIGN_CENTER) as an optional default option.

[0070] When constructing a StaticLayout with alignment configuration, you can use StaticLayout.Builder (Android API 23+) to build an instance, pass in the alignment parameter, and then draw the lyrics to get the expected alignment style.

[0071] In the scenario of width adaptation: when the width of the component changes, StaticLayout automatically wraps lines according to the new width (for example, changing from a single line to multiple lines on a narrow screen) to keep the text fully displayed; StaticLayout is a class in Android for handling multi-line text layouts, especially suitable for drawing multi-line text on a Canvas. It can automatically wrap and align text within a specified-width area, and is very suitable for implementing automatic line wrapping of lyrics. Its construction is based on: a paintbrush, the text of the lyric line (the line string of LyricRow), the style configuration of the lyric line (such as the text size, font, line spacing, etc. in NormalRowConfig), and the width limit of the lyric container (the width of LyricContainerView). Through the measurement mechanism of StaticLayout, the height of each line of text and the space required for the overall layout can be accurately calculated, so as to dynamically adjust the starting position of drawing, ensuring that the lyrics are aligned vertically and have consistent spacing. In addition, StaticLayout also supports setting different alignment methods such as left alignment, center alignment, or right alignment, further enhancing the diversity and flexibility of the lyric display effect. Here, an associated closed loop of "lyric line style configuration - lyric line style paintbrush - StaticLayout - Canvas drawing" is implemented.

[0072] In the scenario of height adaptation: adjust the position of the playing row according to the relationship between the component height and the line height (for example, center display in a short component and maintain the visual center in a tall component). Taking the currently playing lyric line as the visual center, dynamically adjust the position according to the component height (widgetHeight), the height of the currently playing row (playingRowHeight), and the height of the next row (playingRowNextRowHeight): when widgetHeight < playingRowHeight + playingRowNextRowHeight, the currently playing row is centered; when playingRowHeight + playingRowNextRowHeight ≤ widgetHeight < playingRowHeight + 2×playingRowNextRowHeight, the currently playing row is centered and positioned upwards (aligned with the center line of the component at the bottom); in other cases, the currently playing row remains centered.

[0073] Figure 7 It is the adaptive effect diagram of the lyrics in the embodiments of the present invention, supporting language alignment adaptation (left / right / center alignment), width adaptation (dynamic line wrapping), height adaptation (adjusting the position of the playing row according to the component size), and providing a style configuration interface, allowing users to customize visual attributes and animation parameters to meet the needs of diverse scenarios.

[0074] Through the above implementation methods, the present invention achieves high efficiency in lyrics display, accurate interaction, and adaptability to various scenarios, and can be stably applied to lyrics-related scenarios on various terminal devices.

[0075] Overall, this embodiment provides a lyrics display and interaction system and implementation method, aiming to solve the problems of low rendering efficiency, slow interaction response, and poor style adaptability in existing lyrics display technologies, and to achieve efficient drawing, precise control, flexible interaction, and multi-scene adaptive display of lyrics. Through a layered component architecture, structured data modeling, dynamic style management, efficient positioning calculation, and optimized rendering process, a complete lyrics display and interaction solution is constructed. In the smart cockpit scenario: upon startup, the container component loads lyrics data, initializes the pen, and displays "Loading"; after loading, LyricView renders the lyrics based on a positioning reuse mechanism, with the playback line displayed in the center; when the user swipes, only the position of the changing lines is recalculated, and smooth scrolling is achieved through scrollY, with the decorative component displaying a progress cursor; after switching between full-screen and half-screen styles, when the position and size of the lyrics component change, the lyrics content is adjusted accordingly; when switching to night mode, the style configuration interface updates the pen color, completing the theme switch within 100ms; when displaying Arabic lyrics, it automatically switches to right alignment, with line wrapping adapted to the width of the central control screen.

[0076] Through the above solution, this embodiment achieves efficient rendering and flexible interaction of lyrics in scenarios such as smart cockpits. It can be widely applied to music playback software, video subtitle display, karaoke systems, and other scenarios, improving the smoothness of lyrics display, the responsiveness of interaction, and the user-friendliness of the user experience. Positioning reuse reduces CPU usage by over 30%, and the stuttering rate of long lyrics scrolling decreases by 80%; it is compatible with multiple screen sizes and languages ​​in smart cockpits, with an adaptive accuracy of 99%; it supports theme switching (such as night mode) and animation customization, with a configuration response time of <100ms; the layered architecture improves functional expansion efficiency by 50%, facilitating integration into complex scenarios such as in-vehicle voice systems.

[0077] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of the present invention.

[0078] Example 2 This embodiment also provides a lyric drawing device for a vehicle cockpit, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0079] Figure 8 This is a structural block diagram of a lyric drawing device for a vehicle cockpit according to an embodiment of the present invention, such as... Figure 8 As shown, the device includes: The acquisition module 81 is used to respond to the lyrics loading request of the media source of the media display screen in the vehicle cockpit and acquire the original lyrics data of the media source. Module 82 is used to construct a lyrics data model of the original lyrics data using characters as units; Configuration module 83 is used to initialize a set of control components for configuring lyrics on the lyrics canvas of the media display screen; Control module 84 is used to control the activation state of the control component set according to the lyrics loading state; Display module 85 is used to call the content drawing component in the control component set to configure the lyrics pen, and to draw lyrics on the lyrics canvas using the lyrics pen and the lyrics data model.

[0080] Optionally, the configuration module includes: a first configuration unit, configured as a parent component at the bottom layer of the lyrics canvas during the initialization phase of the lyrics canvas on the media display screen; a second configuration unit, configured as a status information component above the container component; a third configuration unit, configured as a decoration component above the status information component; and a fourth configuration unit, configured as a content drawing component above the decoration component. The control component set includes the container component, the status information component, the decoration component, and the content drawing component. The container component manages the lifecycle of other components and performs event dispatching. The status information component displays the loading status and error information of the lyrics. The decoration component performs human-computer interaction and progress indication. The content drawing component renders the display style of the lyrics.

[0081] Optionally, the control module includes: a listening unit, configured to control the container component to listen to the lyrics loading status of the status information component; and an activation unit, configured to activate the status information component and hide the decoration component and the content drawing component if the lyrics loading status is loading or loading failed; and to activate the decoration component and the content drawing component and hide the status information component if the lyrics loading status is loading successfully.

[0082] Optionally, the construction module includes: a parsing unit for parsing the song ID, lyric line text, and time tag of the original lyrics data; a first construction unit for splitting each lyric line text into individual characters, calculating the start timestamp and duration of each character, and constructing a lyric character instance; a second construction unit for constructing a lyric line instance for each lyric line text using the corresponding lyric line text's line index, line start time, text content, and lyric character instance set; and a third construction unit for encapsulating all lyric line text instances into a complete lyrics object and associating it with the song ID to obtain the lyrics data model of the original lyrics data, wherein the lyrics data model associates all lyric line instances through the line index, and each lyric line instance is associated with a lyric character instance through a single character index.

[0083] Optionally, the drawing module includes: a reading unit, used to read the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters from the style configuration parameters, wherein the middle line is the next line after the playback line, and the normal line is the other lines in the view area of ​​the lyrics canvas besides the middle line and the playback line; and a first configuration unit, used to configure lyrics pens using the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters respectively, wherein the lyrics pens include normal line lyrics pens, playback line lyrics pens, and middle line lyrics pens.

[0084] Optionally, the drawing module includes: a calculation unit, used to calculate the line position of each lyric line in the lyrics canvas using a text layout control, and to identify the line state of each lyric line in the lyrics data model at the current time, wherein the line position includes the line height and the line start position, and the line state includes the middle line, the playback line, and the normal line; and a drawing unit, used to call the lyrics pen to draw lyrics on the lyrics canvas according to the line position and the line state.

[0085] Optionally, the drawing unit includes: a first drawing subunit, used to draw lyrics on the corresponding line position of the lyrics canvas by calling the normal line lyrics pen for lyrics lines whose line state is a normal line; to draw lyrics on the corresponding line position of the lyrics canvas by calling the playback line lyrics pen for lyrics lines whose line state is a playback line; and to draw lyrics on the corresponding line position of the lyrics canvas by calling the middle line lyrics pen for lyrics lines whose line state is a middle line.

[0086] Optionally, the drawing unit includes: a first construction subunit, configured to construct a global positioning list of the lyrics canvas using the row positions of all lyrics lines in the lyrics canvas; a determination subunit, configured to update the current playing line according to the playback time, and determine the index to be drawn according to the index of the current playing line or the median line; a sliding subunit, configured to slide the drawing area according to the row index of the current playing line, so that the current playing line is displayed in the center of the drawing area; a selection subunit, configured to select a first set of elements before the index to be drawn in the global positioning list, and starting from the index to be drawn, recalculate and select the row positions of local lyrics lines before the bottom of the drawing area as a second set of elements, wherein the size of the drawing area is smaller than the overall size of the lyrics canvas; a second construction subunit, configured to construct a local positioning list of the drawing area in the lyrics canvas using the first set of elements and the second set of elements; and a second drawing subunit, configured to call the lyrics pen to draw lyrics on the drawing area according to the local positioning list.

[0087] Optionally, the second drawing subunit is further configured to: determine the visible area of ​​the view component in the media display screen as the view area; extend the cache lines at the top and bottom of the view area to obtain the drawing area; crop the range of the lyrics canvas to the drawing area, and traverse each element in the local positioning list, and call the corresponding lyrics pen to draw lyrics on the drawing area according to the row status of each element.

[0088] Optionally, the drawing module further includes: a recognition unit, configured to read individual lyrics from the lyrics data model, recognize the lyrics language type of the individual lyrics, and recognize the canvas width and canvas height of the lyrics canvas on the media display screen before the drawing unit calls the lyrics pen to draw lyrics on the lyrics canvas; and a second configuration unit, configured to configure the horizontal and vertical alignment of the lyrics lines according to the lyrics language type, configure the length of the lyrics lines according to the canvas width, and configure the visual center line of the visual area according to the canvas height.

[0089] It should be noted that the above modules can be implemented by software or hardware. For the latter, they can be implemented in the following ways, but are not limited to: all the above modules are located in the same processor; or, the above modules are located in different processors in any combination.

[0090] Example 3 Embodiments of the present invention also provide a storage medium storing a computer program, wherein the computer program is configured to execute the steps in any of the above method embodiments when running.

[0091] Optionally, in this embodiment, the storage medium may be configured to store a computer program for performing the following steps: S1, responding to the lyrics loading request of the media source on the media display screen in the vehicle cockpit, obtain the original lyrics data of the media source; S2, construct a lyrics data model of the original lyrics data using characters as units; S3, initialize the set of control components for configuring lyrics on the lyrics canvas of the media display screen; S4, control the activation state of the control component set according to the lyrics loading state; S5, the content drawing component in the control component set is called to configure the lyrics pen, and the lyrics are drawn on the lyrics canvas using the lyrics pen and the lyrics data model.

[0092] Optionally, in this embodiment, the storage medium may include, but is not limited to, various media capable of storing computer programs, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0093] Embodiments of the present invention also provide an electronic device including a memory and a processor, the memory storing a computer program and the processor being configured to run the computer program to perform the steps in any of the above method embodiments.

[0094] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor and the input / output device is connected to the processor.

[0095] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program: S1, responding to the lyrics loading request of the media source on the media display screen in the vehicle cockpit, obtain the original lyrics data of the media source; S2, construct a lyrics data model of the original lyrics data using characters as units; S3, initialize the set of control components for configuring lyrics on the lyrics canvas of the media display screen; S4, control the activation state of the control component set according to the lyrics loading state; S5, the content drawing component in the control component set is called to configure the lyrics pen, and the lyrics are drawn on the lyrics canvas using the lyrics pen and the lyrics data model.

[0096] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementations, and will not be repeated here.

[0097] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0098] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented using software plus a general-purpose hardware platform, or of course, using hardware. Based on this understanding, the above technical solutions, in essence or the parts that contribute to the related technology, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0099] It should be understood that the terminology used herein is for the purpose of describing particular exemplary embodiments only and is not intended to be limiting. Unless the context clearly indicates otherwise, the singular forms "a," "an," and "described" as used herein may also mean including the plural forms. The terms "comprising," "including," "containing," and "having" are inclusive and therefore indicate the presence of the stated features, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, elements, components, and / or combinations thereof. The method steps, processes, and operations described herein are not construed as requiring them to be performed in a specific order described or illustrated unless the order of performance is explicitly indicated. It should also be understood that additional or alternative steps may be used.

[0100] The above description is merely a specific embodiment of the present invention, enabling those skilled in the art to understand or implement the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the present invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.< / lyricrow> < / lyricrow>

Claims

1. A method for drawing lyrics in a vehicle cockpit, characterized in that, include: In response to a lyrics loading request from a media source on the vehicle's cockpit media display screen, the original lyrics data of the media source are obtained. A lyrics data model is constructed using characters as units to construct the original lyrics data; Initialize and configure the set of control components for the lyrics on the lyrics canvas of the media display screen; The activation state of the control component set is controlled according to the lyrics loading status; The content drawing component in the control component set is called to configure the lyrics pen, and the lyrics are drawn on the lyrics canvas using the lyrics pen and the lyrics data model.

2. The method according to claim 1, characterized in that, The set of control components for initializing and configuring lyrics on the lyrics canvas of the media display includes: During the initialization phase of the lyrics canvas on the media display, the container component at the bottom layer of the lyrics canvas is configured as the parent component. A status information component is configured on top of the container component; A decorative component is configured on top of the status information component; A content drawing component is configured on top of the decoration component. The control component set includes the container component, the status information component, the decoration component, and the content drawing component. The container component is used to manage the lifecycle of other components and perform event dispatch. The status information component is used to display the loading status and error information of the lyrics. The decoration component is used to perform human-computer interaction and progress indication. The content drawing component is used to render the display style of the lyrics.

3. The method according to claim 2, characterized in that, Controlling the activation state of the control component set based on the lyrics loading status includes: Control the container component to listen to the lyrics loading status of the status information component; If the lyrics loading status is loading or loading failed, activate the status information component and hide the decoration component and the content drawing component; if the lyrics loading status is loading successfully, activate the decoration component and the content drawing component and hide the status information component.

4. The method according to claim 1, characterized in that, The lyrics data model, constructed using characters as units, includes: Parse the song ID, lyric line text, and time tag of the original lyrics data; For each line of lyrics, break it down into individual characters, calculate the start timestamp and duration of each character, and construct a lyric character instance; For each line of lyrics text, a line of lyrics instance is constructed using the corresponding line index, line start time, text content, and set of lyric character instances. All lyric line instances are encapsulated into a complete lyric object and associated with the song ID to obtain the lyric data model of the original lyric data. The lyric data model associates all lyric line instances with a line index, and each lyric line instance is associated with a lyric character instance with a single character index.

5. The method according to claim 1, characterized in that, Configuring the lyrics pen by calling the content drawing component in the control component set includes: Read the normal line lyrics style parameters, playback line lyrics style parameters, and middle line lyrics style parameters from the style configuration parameters, wherein the middle line is the next line after the playback line, and the normal line is the other lines in the view area of ​​the lyrics canvas other than the middle line and the playback line; The lyrics drawing brush is configured using the normal line lyrics style parameters, the playback line lyrics style parameters, and the middle line lyrics style parameters, respectively. The lyrics drawing brush includes a normal line lyrics drawing brush, a playback line lyrics drawing brush, and a middle line lyrics drawing brush.

6. The method according to claim 5, characterized in that, Drawing lyrics on the lyrics canvas using the lyric drawing pen and the lyric data model includes: The text layout control is used to calculate the line position of each lyric line in the lyrics canvas and to identify the line state of each lyric line in the lyrics data model at the current time. The line position includes the line height and the line start position, and the line state includes the middle line, the playback line, and the normal line. Based on the row position and the row state, the lyric drawing pen is invoked to draw lyrics on the lyric canvas.

7. The method according to claim 6, characterized in that, Based on the line position and the line state, the matching lyric pen is invoked to draw lyrics on the lyric canvas, including: For lyrics lines whose line status is a normal line, the normal line lyrics pen is invoked to draw lyrics at the corresponding line position on the lyrics canvas. For lyrics lines whose line status is a playback line, the playback line lyrics pen is invoked to draw lyrics at the corresponding line position on the lyrics canvas. For lyrics lines whose line status is a middle line, the middle line lyrics pen is invoked to draw lyrics at the corresponding line position on the lyrics canvas.

8. The method according to claim 6, characterized in that, Using the lyric drawing pen to draw lyrics on the lyric canvas includes: A global positioning list for the lyrics canvas is constructed using the row positions of all lyrics lines in the lyrics canvas; Update the current playback line based on the playback time, and determine the index to be drawn based on the index of the current playback line or the median line; The drawing area is slid according to the row index of the current playing line so that the current playing line is displayed in the center of the drawing area; In the global positioning list, select the first set of elements before the index to be drawn, and starting from the index to be drawn, recalculate and select the line position of the local lyrics line before the bottom of the drawing area as the second set of elements, wherein the size of the drawing area is smaller than the overall size of the lyrics canvas; A local positioning list of the drawn area in the lyrics canvas is constructed using the first element set and the second element set; Based on the local positioning list, the lyrics drawing pen is invoked to draw lyrics on the drawing area.

9. The method according to claim 8, characterized in that, Based on the local positioning list, the lyrics drawing pen is invoked to draw lyrics on the drawing area, including: The visible area of ​​the view component in the media display screen is defined as the view area; The drawing area is obtained by extending the cache lines at the top and bottom of the view area, respectively. The range of the lyrics canvas is cropped into the drawing area, and each element in the local positioning list is traversed. Based on the row state of each element, the corresponding lyrics pen is called to draw lyrics on the drawing area.

10. The method according to claim 6, characterized in that, Before invoking the lyric drawing pen to draw lyrics on the lyric canvas, the method further includes: Read the individual lyrics from the lyrics data model, identify the lyrics language type of the individual lyrics, and identify the canvas width and canvas height of the lyrics canvas on the media display screen; Configure the horizontal and vertical alignment of the lyrics lines according to the lyrics language type, configure the length of the lyrics lines according to the canvas width, and configure the visual center line of the visual area according to the canvas height.

11. A lyric drawing device for a vehicle cockpit, characterized in that, include: The acquisition module is used to respond to the lyrics loading request of the media source on the media display screen in the vehicle cockpit and acquire the original lyrics data of the media source; The construction module is used to build a lyrics data model of the original lyrics data, using characters as units; A configuration module is used to initialize a set of control components for configuring lyrics on the lyrics canvas of the media display screen; A control module is used to control the activation state of the control component set according to the lyrics loading status; The drawing module is used to call the content drawing component in the control component set to configure the lyrics pen, and to draw lyrics on the lyrics canvas using the lyrics pen and the lyrics data model.

12. A storage medium, characterized in that, The storage medium stores a computer program, wherein the computer program is configured to execute the method described in any one of claims 1 to 10 when it is run.

13. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to run the computer program to perform the method as described in any one of claims 1 to 10.

Images