Rendering method and device of container component in interface, equipment and storage medium

Abstract

The invention provides a rendering method and device for a container component in an interface, equipment and a storage medium, and the method comprises the steps: determining layout information of the container component and view parameters of a screen in response to a rendering request for the container component containing a fillet; the container assembly is used for accommodating and managing interface sub-elements; based on the layout information and the view parameters, determining an interface area, located in a visible area of the screen, of the container assembly; a local buffer area matched with the interface area is applied in the off-screen buffer area; drawing a target container component located in the interface area in the local buffer area; performing fillet cutting treatment on the target container assembly in the local buffer area; and rendering the target container component subjected to the fillet cutting treatment in the local buffer area to a display buffer area of the screen. According to the embodiment, the accuracy of off-screen local rendering is improved, and the occupation of a memory is effectively reduced, so that the consumption of resources such as a CPU (Central Processing Unit) and a GPU (Graphics Processing Unit) is reduced, the off-screen rendering efficiency is improved, and the overall frame rate is improved.

Description

Technical Field

[0001] This invention belongs to the technical field of application rendering, and in particular relates to a rendering method, apparatus, device and storage medium for container components in an interface. Background Technology

[0002] In the UI (User Interface) of an app, there are multiple containers (especially rectangular containers), such as avatars, cards, icons, etc., which are usually cropped with rounded corners.

[0003] In some scenarios, when rendering containers in an app, offscreen rendering is used to render the containers and trim their rounded corners. The UI with rounded corners is then rendered to the screen's display buffer (Framebuffer) and displayed on the screen.

[0004] Off-screen rendering involves creating a new buffer outside the screen's frame buffer to perform rendering operations. This process consumes additional memory and time, resulting in lower efficiency and a lower overall frame rate of approximately 10 FPS (frames per second). This can easily cause stuttering and negatively impact the user experience. Summary of the Invention

[0005] In view of this, the present invention provides a rendering method, apparatus, device and storage medium for container components in an interface, so as to improve the efficiency of off-screen rendering and trimming rounded corners.

[0006] A first aspect of the present invention provides a method for rendering a container component in an interface, comprising: In response to a rendering request for a container component containing rounded corners, the layout information of the container component and the view parameters of the screen are determined; the container component is used to contain and manage interface sub-elements. Based on the layout information and the view parameters, the interface area of ​​the container component located in the visible area of ​​the screen is determined; Allocate a local buffer in the off-screen buffer that is adapted to the interface area; Draw the target container component located within the interface area in the local buffer; The target container component is rounded off within the local buffer. The target container component, after rounded corner clipping, is rendered from the local buffer to the display buffer of the screen.

[0007] A second aspect of the present invention provides a rendering apparatus for a container component in an interface, comprising: The display parameter determination module is used to determine the layout information of the container component and the view parameters of the screen in response to a rendering request for a container component containing rounded corners; the container component is used to contain and manage interface sub-elements. The interface area recognition module is used to determine the interface area of ​​the container component located in the visible area of ​​the screen based on the layout information and the view parameters. The local buffer allocation module is used to allocate a local buffer in the off-screen buffer that is adapted to the interface area; The container component drawing module is used to draw the target container component located within the interface area in the local buffer. A rounded corner trimming module is used to perform rounded corner trimming on the target container component in the local buffer. The display buffer rendering module is used to render the target container component, after rounded corner clipping, from the local buffer to the display buffer of the screen.

[0008] A third aspect of the present invention provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements a rendering method for container components in an interface as described in the first aspect above.

[0009] A fourth aspect of the present invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements a rendering method for container components in an interface as described in the first aspect above.

[0010] A fifth aspect of the present invention provides a computer program product that, when run on a computer, causes the computer to execute a rendering method for a container component in an interface as described in the first aspect above.

[0011] Compared with the prior art, the embodiments of the present invention have the following beneficial effects: In this embodiment, in response to a rendering request for a container component with rounded corners, the layout information of the container component and the view parameters of the screen are determined. The container component is used to contain and manage interface sub-elements. Based on the layout information and view parameters, the interface area of ​​the container component within the visible area of ​​the screen is determined. A local buffer adapted to the interface area is allocated in the off-screen buffer. The target container component located within the interface area is drawn in the local buffer. Rounded corner clipping is performed on the target container component in the local buffer. The rounded corner clipped target container component in the local buffer is rendered to the display buffer of the screen. In the off-screen rendering scenario, this embodiment allocates an off-screen buffer based on the visible local user interface of the container component and renders the visible local user interface of the container component. This improves the accuracy of off-screen local rendering, effectively reduces memory usage, thereby reducing the consumption of CPU, GPU and other resources, improving the efficiency of off-screen rendering, increasing the overall frame rate, improving the smoothness of the application, and enhancing the user's operating experience. Attached Figure Description

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

[0013] Figure 1 This is a schematic diagram of a rendering method for a container component in an interface provided by an embodiment of the present invention; Figure 2 This is a schematic diagram of an application framework provided by an embodiment of the present invention; Figure 3 This is a schematic diagram illustrating the relationship between a view group and a view according to an embodiment of the present invention; Figure 4 This is an example diagram of a control tree provided in an embodiment of the present invention; Figure 5 This is an example diagram of the user interface of an application provided in an embodiment of the present invention; Figure 6 This is a schematic diagram of a rendering device for a container component in an interface provided in an embodiment of the present invention; Figure 7 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0014] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of the present invention. However, those skilled in the art will understand that the present application may be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of the present application with unnecessary detail.

[0015] The technical solution of the present invention will be illustrated below through specific embodiments.

[0016] Reference Figure 1 The diagram illustrates a rendering method for a container component in an interface according to an embodiment of the present invention, which may specifically include the following steps: Step 101: In response to a rendering request for a container component containing rounded corners, determine the layout information of the container component and the view parameters of the screen.

[0017] This embodiment can be applied to mobile terminals (such as mobile phones and tablets), smart wearable devices (such as watches, bracelets, smart glasses, VR (Virtual Reality) glasses, etc.), smart stationery (such as dictionary pens, etc.), and other electronic devices, especially IoT (Internet of Things) devices.

[0018] These electronic devices support operating systems such as Android, iOS, Harmony, Linux, macOS, Windows, Ubuntu, and RTOS. Various applications can be installed on these operating systems, including dictionary apps, translation apps, cloud note-taking apps, games, social networking tools, shopping apps, and more.

[0019] like Figure 2 As shown, the application frameworks under these operating systems can be summarized as graphics rendering, UI components (such as Widget, Graphic, Animation, etc.) and applications. Among them, graphics rendering is the foundation of the entire application framework, and UI elements are generated and ultimately displayed through graphics rendering.

[0020] In practical applications, a suitable rendering framework can be selected as the graphics solution based on the application's needs, and the application's UI can be developed based on these rendering frameworks.

[0021] Typically, an application consists of multiple container components, which are used to hold and manage interface (i.e., UI) child elements.

[0022] Taking HaaS (Hardware as a Service) UI as an example of a rendering framework, the container component is developed based on the HaaS UI framework. HaaS UI is a progressive JS (JavaScript) application development framework for the AIoT (Artificial Intelligence of Things) field. It includes UI display framework, multiple applications and services, application hot update, package management and other capabilities. Moreover, it reduces the development difficulty of applications on embedded hardware with screens by leveraging the low threshold of the JS language and API standardization.

[0023] Among these features, multi-application capability means that developers can break down complex business logic into multiple independent applications. The framework manages the creation and exit of these applications, and when an application exits, the framework reclaims its memory resources. Application hot update capability refers to supporting independent upgrades of applications (without relying on OTA (Over-The-Air) upgrades) to achieve application version iteration (including shared object libraries). Package management capability refers to the ability to manage different applications, which can be expanded to include an application marketplace and enable online installation of third-party applications.

[0024] The HaaS UI framework uses Vue.js on the front end, implementing a subset of W3C standard tags and styles.

[0025] The HaaS UI framework provides framework support for containers of Native UI (such as input methods and System UI) and mini-programs (such as desktop and music), and is designed based on the atomic and modular design concept.

[0026] In terms of rendering layer design, HaaS UI has abstracted a set of Canvas APIs (Application Programming Interfaces) to form an abstract layer. The Canvas API abstract layer can support various types of rendering engines, such as Skia Engine, LittleVGL Engine, OpenGL ES Engine, etc., and can be connected to different rendering implementations on different platforms according to the actual scenario.

[0027] Based on the design concept of atomization and modular construction, the HaaS UI framework is designed as a basic framework and an extension framework. In order to build HaaS UI controls quickly, the design is based on View and ViewGroup to build and extend controls.

[0028] A UI contains a widget tree, which is the carrier for UI rendering, layout calculation, and event dispatch. It is a hierarchical tree structure built based on the component concept. The widget tree is a hierarchical structure formed by nested container widgets, atomic widgets, and custom widgets, with the root node (i.e., the root view) as the only starting point. Each node corresponds to a UI widget instance.

[0029] Non-leaf nodes are container components (responsible for layout and nesting) and can contain child nodes, while leaf nodes are atomic controls (the smallest rendering unit) and have no subordinate child nodes.

[0030] like Figure 3 As shown, a ViewGroup acts as a container component to organize and layout multiple Views or other ViewGroups. That is, a ViewGroup can be nested to include one or more Views, forming a parent-child relationship, providing layout parameters, and allowing for multi-level nesting to build complex user interfaces.

[0031] For example, the types of ViewGroup include LinearLayout, RelativeLayout, ConstraintLayout, FrameLayout, RecyclerView (list or grid layout), ScrollView, and so on.

[0032] In addition, the View is the base class of UI components, representing a rectangular area on the screen, responsible for drawing content and handling user interactions, such as displaying content (such as text, images, buttons, etc.), handling events (such as clicks, touches, keyboard input, etc.), and so on.

[0033] For example, the types of View include TextView, Button, ImageView, EditText, CheckBox, ProgressBar, and so on.

[0034] A view is a single UI element that typically does not contain other views. It can have properties set, such as size, color, text, and event listeners.

[0035] For example, in Figure 4In the control tree shown, starting from the root node RootView, the second layer includes ViewGroup, TextView, and ScrollView. The next layer of ViewGroup includes TextView and ImageView, and the next layer of ScrollView includes TextView.

[0036] When rendering the application's UI, you can iterate through each container component to be rendered in the application. When the UI of a container component is configured with rounded corners, the method in this embodiment can be applied for rendering.

[0037] For example, such as Figure 5 As shown, both chat bubbles used to carry the chat history in the user's conversation with the virtual digital human are configured as rounded corners.

[0038] Furthermore, in the control tree of the HaaS UI framework, the user interface of the container component is represented as a node (i.e., a ViewGroup) in the control tree. Therefore, starting from the root node of the control tree, the ViewGroups in each layer can be traversed to find the ViewGroups configured with rounded corners.

[0039] In practical applications, when refreshing the application's user interface, such as receiving a user's swipe operation (used to swipe the application's user interface), receiving a user's operation to set an avatar, receiving an operation to open a certain page, the properties of each container component in the application's user interface can be checked. If a container component is configured with rounded corner parameters (such as border-radius > 0) and meets the conditions for off-screen rendering (such as solid color, no background image, no shadow; in some cases, the conditions for off-screen rendering are empty), a rendering request can be triggered based on the rendering framework. At this time, in response to the rendering request for the container component containing rounded corners, the layout information of the container component (such as size, position, etc.) and the view parameters of the screen (such as the screen size (i.e., width, height, etc.)) can be determined.

[0040] Step 102: Based on the layout information and view parameters, determine the interface area of ​​the container component within the visible area of ​​the screen.

[0041] Generally, the screen of an electronic device has a visible area, which is the range that the user can see.

[0042] For the user interface of each control in the application, the positional relationship between the container component (i.e., the user interface) and the visible area of ​​the screen can be determined based on the layout information of the container component and the view parameters of the screen. This allows us to identify the portion of the visible area of ​​the screen where the container component (i.e., the user interface) is located, which is then denoted as the interface area.

[0043] In one embodiment of the present invention, step 102 may include the following steps: Step 1021: Calculate the first absolute coordinates of the view group on the screen in the control tree.

[0044] In the control tree of the HaaS UI framework, container components are represented as ViewGroups. Therefore, the information of each node in the control tree can be used to locate the coordinates of the corner point (such as the top left corner) of the user interface represented by the ViewGroup on the screen, which is used as the first absolute coordinates (absLeft, absTop).

[0045] In the specific implementation, in the control tree of the HaaS UI framework, starting from the node where the view group is located, the system traverses upwards layer by layer to the root node to obtain the first position offset (translate) of each parent node (also known as the parent container, usually other view groups) and the first scroll offset (scroll) of each parent node (also known as the parent container, usually other view groups).

[0046] The first position offset, translate, represents the offset of the parent node relative to its original position. It includes the first position offset translateX (positive to the right) on the X-axis (horizontal direction) and the first position offset translateY (positive downward) on the Y-axis (vertical direction).

[0047] The first scroll offset represents the offset when the parent node scrolls, which includes the first scroll offset scrollX on the X-axis (horizontal direction) (a positive number indicates that the content scrolls to the left) and the first scroll offset scrollY on the Y-axis (vertical direction) (a positive number indicates that the content scrolls upward).

[0048] By summing the first position offset and the first scroll offset, the first absolute coordinates of the user interface represented by the view group on the screen are obtained.

[0049] Specifically, the first position offset of the X-axis and the first scroll offset of the X-axis are accumulated to obtain the X coordinate absLeft in the first absolute coordinate.

[0050] The first position offset and the first scroll offset of the Y-axis are accumulated to obtain the Y coordinate absTop in the first absolute coordinate.

[0051] Step 1022: Construct the first target area according to the first absolute coordinates and layout information.

[0052] In the actual implementation, the layout information of the user interface represented by the ViewGroup can be queried from the control tree, including the width and height of the user interface represented by the ViewGroup.

[0053] The first target area is constructed using the first absolute coordinates and the layout information of the ViewGroup. The user interface represented by the ViewGroup is defined as Rect(absLeft, absTop, viewWidth, viewHeight), where (absLeft, absTop) are the first absolute coordinates, viewWidth is the width of the user interface, and viewHeight is the height of the user interface.

[0054] Step 1023: Take the intersection of the view parameters and the first target area to obtain the interface area.

[0055] In a specific implementation, the view parameter is used to represent the visible area of ​​the screen. The view parameter can be defined as Rect(0,0,screenWidth, screenHeight), where screenWidth is the width of the visible area and screenHeight is the height of the visible area.

[0056] Then, the intersection of the view parameters representing the visible area of ​​the screen and the first target area can be taken to obtain the interface area of ​​the container component in the visible area of ​​the screen. At this time, the interface area can be represented as visibleBounds=screenBounds∩viewgroupBounds, where visibleBounds is the interface area, screenBounds is the visible area of ​​the screen, and viewgroupBounds is the first target area.

[0057] If the intersection (i.e. the interface area) is empty, the user interface represented by the ViewGroup is not visible. In this case, the rendering of the user interface represented by the ViewGroup can be ignored.

[0058] If the intersection (i.e. the interface area) is not empty, the user interface represented by the ViewGroup is partially or fully visible. In this case, the user interface represented by the ViewGroup can be partially or fully rendered.

[0059] Step 103: Allocate a local buffer in the off-screen buffer that is adapted to the interface area.

[0060] Traditional methods for rendering rounded corners allocate an offscreen buffer with the same size as the user interface of the control (i.e., container). All the UI child elements in the container component are drawn in this offscreen buffer. The rounded corners are trimmed in this offscreen buffer, and this offscreen buffer is copied to the screen's framebuffer.

[0061] IoT devices are resource-constrained, with RAM (Read-Only Memory) ranging from a few MB to tens of MB, typically 4 MB to 8 MB. This requires the off-screen buffer to be less than or equal to 1 MB. For large containers such as ScrollView, if an off-screen buffer of the same size as the container component is requested, the requested off-screen buffer may reach several MB, easily exceeding the RAM limit of the IoT device. This results in lower performance of traditional rounded corner rendering solutions in IoT devices, with noticeable stuttering and frame drops, and increased power consumption.

[0062] In this embodiment, based on the interface area located in the visible area of ​​the screen identified by the user interface of the control, a local buffer adapted to the interface area is requested from the off-screen buffer, thereby reducing the requested off-screen buffer and improving the performance of rendering rounded corners. This is suitable for resource-constrained electronic devices such as IoT devices.

[0063] Furthermore, within the HaaS UI framework, the Canvas API (abstraction layer) can be called to request a local buffer from the off-screen buffer that is adapted to the interface area.

[0064] In one application method, within the HaaS UI framework, the type of rendering engine that the Canvas API (abstraction layer) interfaces with can be determined. In the off-screen buffer that is adapted to the type, a local buffer with the same size as the interface area can be applied for in real time, thereby improving the utilization rate of the off-screen buffer.

[0065] For example, if the rendering engine is Skia, a local buffer of the same size as the interface area can be requested from the off-screen buffer SkOffscreenSurface.

[0066] For example, if the rendering engine is an OpenGL engine, a local buffer with the same size as the interface area can be requested from the off-screen buffer FBO (FramebufferObject).

[0067] For example, if the rendering engine is LittleVGL, a local buffer with the same size as the interface area can be requested from the software buffer (off-screen buffer).

[0068] In another approach, the type of rendering engine can be determined, and multiple local buffers of commonly used sizes can be pre-allocated in an off-screen buffer that is compatible with the type.

[0069] For example, if the rendering engine is Skia, multiple local buffers of different sizes can be requested from the off-screen buffer SkOffscreenSurface.

[0070] For example, if the rendering engine is an OpenGL engine, multiple local buffers of different sizes can be requested from the off-screen buffer FBO (FramebufferObject).

[0071] For example, if the rendering engine is LittleVGL, multiple local buffers of different sizes can be requested from the software buffer (off-screen buffer) and managed and maintained as a cache pool.

[0072] For the current ViewGroup, multiple local buffers in the cache pool can be traversed, and the local buffer whose size is larger than the interface area and whose size is closest to the interface area can be allocated, thereby improving the response speed of allocating local buffers.

[0073] Furthermore, when the container component (user interface) leaves the visible area of ​​the screen, the corresponding local buffer is maintained and not released, reducing the frequency of allocating and releasing off-screen buffers, thereby reducing computational pressure.

[0074] Off-screen buffers are typically a memory region within a process's address space (such as GPU (graphics processing unit) memory, CPU (central processing unit) memory mapping area, or memory buffer), and they are part of the process's total memory.

[0075] In this embodiment, memory usage can be monitored to determine the memory's operating status.

[0076] When the running status meets the preset pressure conditions (such as physical memory usage reaching a certain threshold, triggering low memory killer or memory reclamation, GPU memory remaining amount being lower than a certain threshold, etc.), it indicates high memory pressure. Multiple local buffers in the cache pool are released in batches to achieve delayed release, alleviate overall memory pressure, and wait for the memory pressure to decrease before re-allocating multiple local buffers of commonly used sizes.

[0077] Step 104: Draw the target container component located within the interface area in the local buffer.

[0078] In the local buffer, the target container component (user interface) located within the visible interface area of ​​the screen can be drawn based on the rendering framework.

[0079] In one embodiment of the present invention, step 104 may include the following steps: Step 1041: Identify the target container component located within the interface area for each view.

[0080] In this embodiment, it is possible to traverse each View (user interface) contained in the ViewGroup, identify the container component of the View (user interface) located in the visible interface area of ​​the screen, and denot it as the target container component.

[0081] In one embodiment of the present invention, step 1041 may include the following steps: Step 10411: Calculate the second absolute coordinates of the view on the screen in the control tree.

[0082] In this embodiment, the information of each node in the control tree can be used to locate the coordinates of the corner point (such as the top left corner) of the user interface represented by the current view on the screen, as the second absolute coordinates (absLeft, absTop).

[0083] In the specific implementation, in the control tree, starting from the current view, we traverse upwards layer by layer to the root node, and obtain the second position offset (translate) of each parent node (also known as the parent container, usually another view group) and the second scroll offset of each parent node (also known as the parent container, usually another view group).

[0084] The second position offset, translate, represents the offset of the parent node relative to its original position. It includes the second position offset translateX (positive to the right) on the X-axis (horizontal direction) and the second position offset translateY (positive downward) on the Y-axis (vertical direction).

[0085] The second scroll offset represents the offset when the parent node scrolls. It includes the second scroll offset scrollX on the X-axis (horizontal direction) (a positive number indicates that the content scrolls to the left) and the second scroll offset scrollY on the Y-axis (vertical direction) (a positive number indicates that the content scrolls upwards).

[0086] By summing the second position offset and the second scroll offset, we obtain the second absolute coordinates of the user interface represented by the View on the screen.

[0087] Specifically, the second position offset of the X-axis and the second scroll offset of the X-axis are accumulated to obtain the X coordinate absLeft in the second absolute coordinate.

[0088] The second position offset and the second scroll offset of the Y-axis are accumulated to obtain the Y coordinate absTop in the second absolute coordinate.

[0089] Step 10412: Construct the second target region according to the second absolute coordinates and layout information.

[0090] In the specific implementation, the layout information of the user interface represented by the current view can be queried from the control tree, which includes the width and height of the user interface represented by the current view.

[0091] The second target area is constructed using the second absolute coordinates and the layout information of the current view. The user interface represented by the view is defined as Rect(absLeft, absTop, viewWidth, viewHeight), where (absLeft, absTop) are the second absolute coordinates, viewWidth is the width of the user interface, and viewHeight is the height of the user interface.

[0092] Step 10413: Find the intersection of the interface area and the second target area to obtain the target container component located within the interface area.

[0093] In the specific implementation, the intersection of the visible interface area on the screen and the second target area is taken to obtain the target container component located in the visible area of ​​the screen within the container component. At this time, the target container component can be represented as targetBounds=visibleBounds∩viewBounds, where targetBounds is the target container component, visibleBounds is the visible interface area on the screen, and viewBounds is the second target area.

[0094] If the intersection (i.e., the target container component) is empty, the user interface represented by the View is not visible. In this case, rendering of the user interface represented by the View can be ignored.

[0095] If the intersection (i.e., the target container component) is not empty, the user interface represented by the View is partially or fully visible. In this case, the user interface represented by the View can be partially or fully rendered.

[0096] Step 1042: Configure the rendering nodes in the HaaS UI framework for each target container component.

[0097] In this embodiment, the rendering node RenderNode in the HaaS UI framework can be configured for the target container component corresponding to each view based on the interface information in the target container component corresponding to each view.

[0098] In the specific implementation, it can be determined whether the target container component corresponding to the view is bound to the rendering node in the HaaS UI framework, so as to avoid the memory waste caused by repeatedly creating the rendering node, and at the same time ensure that the rendering node is initialized once for each target container component corresponding to the view.

[0099] If so, then it is the reused rendering node (RenderNode) of the target container component corresponding to the view.

[0100] If not, a RenderNode is created in the HaaS UI framework for the View to render the container component, thus binding the container component corresponding to the View to the RenderNode in the HaaS UI framework.

[0101] In the Haas UI framework, the RenderNode plays the following role: 1. Built-in off-screen buffer: Allocates a temporary canvas (memory block) to store the drawing results; 2. Built-in drawing instruction list: Stores subsequently recorded draw() operations (such as drawing text, bitmaps, and paths), instead of directly rendering pixels.

[0102] Unlike native Android, the RenderNode in the Haas UI framework is tailored for IoT devices, removing redundant hardware acceleration logic and prioritizing CPU rendering (most IoT devices do not have a dedicated GPU).

[0103] The rendering node includes at least one of the following methods for performing at least one of the following operations: 1. Methods for creating nodes (e.g., RenderNode node = new RenderNode()) The Create Node method represents the creation of a new rendering node in the HaaS UI framework.

[0104] 2. Start recording method (e.g., Canvas recordCanvas = node beginRecord(childWidth,childHeight)) The Start Recording method indicates that the drawing instruction recording mode in the rendering node is started. It creates a Canvas for recording instructions, instead of drawing directly to the screen. Here, childWidth is the width of the target container component, and childHeight is the height of the target container component.

[0105] 3. Drawing methods (e.g., child draw(recordCanvas)) The drawing method represents the instructions for drawing the target container component using a canvas.

[0106] Trigger the drawing logic of the target container component in the View, but do not directly output pixels to the screen. Instead, store the drawing operations of the target container component in the View (such as drawing text (drawText), drawing bitmap (drawBitmap), redrawing (drawRect), etc.) in the instruction list of the RenderNode as instructions.

[0107] In general, IoT devices have weak CPU computing power, and repeatedly executing the draw() method may cause lag. After recording the instructions, the drawing logic is no longer parsed, and the instructions can be executed directly.

[0108] 4. Methods to end recording (e.g., node endRecord()) The "End Recording" method indicates the end of the drawing instruction recording mode in the rendering node, locks the instruction list of the rendering node (RenderNode) so that it can no longer be modified, and completes the initialization of the off-screen buffer.

[0109] endRecord() checks the validity of instructions (such as avoiding empty instructions) and marks the instruction list as executable, preparing it for subsequent rendering.

[0110] 5. Methods for setting nodes (e.g., child setRenderNode(node)) The `setNode` method indicates that the rendered node is bound to the view.

[0111] When rendering the target container component in the View during screen refresh, parent view redraw, etc., instructions are directly read from the bound RenderNode and executed, without calling the draw() method again.

[0112] Step 1043: Create a canvas in the local buffer.

[0113] In the local buffer, a portion of memory can be allocated and initialized as a Canvas.

[0114] Step 1044: In the canvas, call the preset rendering engine to draw the target container component according to the relative position of the rendering node in the target container component.

[0115] In the local buffer, the Canvas matrix is ​​transformed to the relative position of the View, and the preset rendering engine (such as Skia engine, OpenGL engine, LittleVGL engine, etc.) is called to start drawing the target container components visible to the View according to the specification of the RenderNode.

[0116] This process is repeated for each view's visible target container component, thus forming the visible interface area of ​​the ViewGroup.

[0117] In the Haas UI framework, within the Canvas, the pre-defined rendering engine is called to execute the replay() method of the rendering node. Based on the pre-recorded instructions in the RenderNode, the target container component visible to the View is drawn at its relative position to form the visible interface area of ​​the ViewGroup.

[0118] In this embodiment, the visible portion of the user interface is rendered in the off-screen rendering scenario, which further improves the accuracy of off-screen partial rendering, thereby further reducing the consumption of CPU, GPU and other resources, improving the efficiency of off-screen rendering, helping to improve the overall frame rate, improve the smoothness of the application, and improve the user's operating experience.

[0119] Furthermore, this embodiment renders the view based on the RenderNode in the Haas UI framework, which is highly scalable and suitable for rendering combinations of different controls.

[0120] Step 105: Perform rounded corner trimming on the target container component in the local buffer.

[0121] Within the local buffer, rounded corner clipping (i.e., corner trimming) can be performed on the target container components visible to each View in the ViewGroup, thereby achieving rounded corner clipping of the visible interface area of ​​the ViewGroup.

[0122] Furthermore, the Canvas API can be called to perform rounded corner trimming on the visible interface area of ​​the ViewGroup and the target container components visible to each View from the abstract layer, achieving unified rounded corner trimming across rendering engines.

[0123] In practical implementation, clipping parameters can be set for some or all corner points of the target container component in the CSS (Cascading Style Sheets) integrated into the Haas UI framework according to the business requirements of the UI. The clipping parameters are the configuration information for clipping rounded corners.

[0124] For example, such as Figure 5 As shown, in the conversation between the user and the virtual digital human, the two bubbles (controls) used to carry the chat history are both set to have rounded corners at the top left, top right, and bottom right corners, while keeping the bottom left corner unchanged and not having its rounded corners cut.

[0125] Therefore, clipping parameters for some or all corner points of the target container component can be read from the CSS integrated into the Haas UI framework.

[0126] Use clipping parameters to configure separate path objects for some or all corner points in the canvas that carries the target container component.

[0127] The path object contains the clipping object (i.e., the target container component), clipping parameters, and other related information.

[0128] The term "independent" means that each corner point to be rounded is configured with a separate path object. The clipping parameters in the path objects of each corner point can be the same or different. This embodiment does not impose any restrictions on this.

[0129] For example, such as Figure 5 As shown, for the two chat bubbles (controls) used to carry chat history in the conversation between the user and the virtual digital human, a path object can be configured for each of the top left, top right, and bottom right corners, and the clipping parameters in each path object are the same.

[0130] Furthermore, in the Haas UI framework, the path object clipPath can be represented as clipPath.addRoundRect(visibleBounds, radiusX, radiusY).

[0131] The Haas UI framework optimizes the addRoundRect method for adding rounded corners by avoiding high-frequency floating-point operations (IoT devices have weak CPU computing power). It prioritizes using integer operations to approximate the rounded corner outline, reducing the computational overhead during drawing. visibleBounds is the target rectangular area to be clipped (i.e., the interface area), radiusX is the horizontal radius of the rounded corner, and radiusY is the vertical radius of the rounded corner. Both are clipping parameters that determine the size of the rounded corner's arc; the larger the value, the more rounded the corner.

[0132] Within the local buffer, the preset rendering engine is invoked to trim rounded corners of some or all corner points in the canvas containing the target container component according to the path object clipPath, thereby supporting rounded corner trimming of different corner points and providing strong scalability.

[0133] The clipping mode is usually intersection (Canvas::kIntersect_Op), which preserves the overlapping part of the original drawable area of ​​the canvas and the path area of ​​the clipPath object, and prohibits drawing of the area outside the clipPath object.

[0134] The clipping methods differ depending on the type of rendering engine. For example, for the Skia engine, SkPath's rounded rectangle clipping can be used; for the OpenGL engine, Stencil Buffer can be used to implement rounded corner masking; for the LittleVGL engine, software clipping algorithms can be used, and so on.

[0135] Step 106: Render the target container component, after rounded corner clipping, from the local buffer to the display buffer of the screen.

[0136] The rendering engine can paste the target container component (i.e., the data in the local buffer) after rounded corner clipping in the local buffer into the screen's display buffer (i.e., video memory) by copying bitmaps, etc. The screen refreshes the contents of the display buffer, thereby displaying the user interface of the container component on the screen.

[0137] In this embodiment, in response to a rendering request for a container component with rounded corners, the layout information of the container component and the view parameters of the screen are determined. The container component is used to contain and manage interface sub-elements. Based on the layout information and view parameters, the interface area of ​​the container component within the visible area of ​​the screen is determined. A local buffer adapted to the interface area is allocated in the off-screen buffer. The target container component located within the interface area is drawn in the local buffer. Rounded corner clipping is performed on the target container component in the local buffer. The rounded corner clipped target container component in the local buffer is rendered to the display buffer of the screen. In the off-screen rendering scenario, this embodiment allocates an off-screen buffer based on the visible local user interface of the container component and renders the visible local user interface of the container component. This improves the accuracy of off-screen local rendering, effectively reduces memory usage, thereby reducing the consumption of CPU, GPU and other resources, improving the efficiency of off-screen rendering, increasing the overall frame rate, improving the smoothness of the application, and enhancing the user's operating experience.

[0138] Tests have shown that applying the method in this embodiment for off-screen rendering can increase the overall frame rate to 30 FPS, and even reach 60 FPS in some areas, while reducing the memory usage of the off-screen buffer to about half that of the original solution.

[0139] It should be noted that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0140] Reference Figure 6 The diagram illustrates a rendering apparatus for a container component in an interface according to an embodiment of the present invention, which may specifically include the following modules: Display parameter determination module 601 is used to determine the layout information of the container component and the view parameters of the screen in response to a rendering request for a container component containing rounded corners; the container component is used to contain and manage interface sub-elements. The interface area recognition module 602 is used to determine the interface area of ​​the container component located in the visible area of ​​the screen based on the layout information and the view parameters. The local buffer allocation module 603 is used to allocate a local buffer adapted to the interface area in the off-screen buffer. The container component drawing module 604 is used to draw the target container component located in the interface area in the local buffer. A rounded corner trimming module 605 is used to perform rounded corner trimming on the target container component in the local buffer. The display buffer rendering module 606 is used to render the target container component, after rounded corner clipping, in the local buffer to the display buffer of the screen.

[0141] In one embodiment of the present invention, the view parameter is used to represent the visible area of ​​the screen; the container component is developed based on the HaaS UI framework, and in the control tree of the HaaS UI framework, the container component is represented as a view group; The interface region recognition module 602 includes: The first absolute coordinate calculation module is used to calculate the first absolute coordinates of the corner point of the view group on the screen in the control tree; The first target region construction module is used to construct a first target region according to the first absolute coordinates and the local information; The first intersection calculation module is used to calculate the intersection of the view parameters and the first target area to obtain the interface area.

[0142] In one embodiment of the present invention, the first absolute coordinate calculation module includes: The first offset traversal module is used to traverse the control tree from the view group upwards to the root node, and obtain the first position offset and the first scroll offset of each parent node. The first offset accumulation module is used to accumulate the first position offset and the first scroll offset to obtain the first absolute coordinates of the corner point of the view group on the screen.

[0143] In one embodiment of the present invention, the local buffer allocation module 603 includes: The engine type determination module is used to determine the type of rendering engine; A single-size application module is used to apply for a local buffer with the same size as the interface area in an off-screen buffer that is adapted to the type.

[0144] In another embodiment of the present invention, the local buffer allocation module 603 includes: The engine type determination module is used to determine the type of rendering engine; A multi-size request module is used to request local buffers of multiple sizes in an off-screen buffer adapted to the type; A local buffer allocation module is used to allocate a local buffer whose size is larger than the interface area and whose size is closest to the interface area.

[0145] In one embodiment of the present invention, the local buffer allocation module 603 further includes: A local buffer maintenance module is used to maintain the local buffer when the container component leaves the visible area of ​​the screen; The runtime status determination module is used to determine the runtime status of memory. The local buffer release module is used to release the local buffer when the operating state meets the preset pressure conditions.

[0146] In one embodiment of the present invention, the container component is developed based on the HaaS UI framework. In the control tree of the HaaS UI framework, the container component is represented as a view group, and the view group includes one or more views. The container component drawing module 604 includes: The target recognition module is used to identify target container components located within the interface area of ​​each of the views; The rendering node configuration module is used to configure the rendering nodes in the HaaS UI framework for each of the target container components. A canvas creation module is used to create a canvas in the local buffer. The target drawing module is used to call a preset rendering engine to draw the target container component in the canvas according to the relative position of the rendering node on the target container component.

[0147] In one embodiment of the present invention, the target recognition module includes: The second absolute coordinate calculation module is used to calculate the second absolute coordinates of the corner point of the view on the screen in the control tree; The second target region construction module is used to construct a second target region according to the second absolute coordinates and the layout information; The second intersection calculation module is used to calculate the intersection of the interface region and the second target region to obtain the target container component located within the interface region.

[0148] In one embodiment of the present invention, the second absolute coordinate calculation module includes: The second offset traversal module is used to traverse the control tree from the view upwards to the root node, and obtain the second position offset of each parent node and the second scroll offset of each parent node. The second offset accumulation module is used to accumulate the second position offset and the second scroll offset to obtain the second absolute coordinates of the corner point of the view on the screen.

[0149] In one embodiment of the present invention, the rendering node configuration module includes: The node binding judgment module is used to determine whether the target container component corresponding to the view is bound to a rendering node in the HaaSUI framework; if yes, the node reuse module is called; otherwise, the node creation module is called. A node reuse module is used to reuse the rendering node for the target container component corresponding to the view; The node creation module is used to create rendering nodes in the HaaS UI framework for rendering the target container component for the view; The rendering node is used to perform at least one of the following operations: Create a new rendering node in the HaaS UI framework; Start the drawing instruction recording mode in the rendering node and create a canvas for recording instructions; The canvas is used to record instructions for drawing the target container component; End the drawing instruction recording mode in the rendering node; Bind the rendering node to the view.

[0150] In one embodiment of the present invention, the target rendering module includes: The instruction execution module is used to call a preset rendering engine in the canvas to execute the replay method of the rendering node, and draw the target container component at the relative position of the target container component according to the instruction.

[0151] In one embodiment of the present invention, the rounded corner trimming module 605 includes: The clipping parameter reading module is used to read clipping parameters set for some or all corner points in the target container component from the Cascading Style Sheet integrated into the Haas UI framework. A path object configuration module is used to configure path objects for some or all corner points in the canvas that carries the target container component using the clipping parameters; The engine invocation module is used to invoke a preset rendering engine to trim rounded corners of some or all corner points in the canvas carrying the target container component according to the path object.

[0152] The present invention provides a rendering device for a container component in an interface. The application of the rendering device for a container component in an interface can implement the steps in the aforementioned rendering method embodiments for container components in interfaces.

[0153] It should be noted that the module division in the rendering device of the container components in the various interfaces provided in the above embodiments is illustrative and only represents one logical functional division. In actual implementation, there may be other division methods. In addition, the functional modules in the various embodiments of the present invention can be integrated into a processor, exist separately, or two or more modules can be integrated into one module. The integrated modules described above can be implemented in hardware or as software functional modules.

[0154] If the integrated module is implemented as a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the technical solution of the embodiments of the present invention can be embodied in the form of a computer program product, which is stored in a computer storage medium and includes several instructions to cause an electronic device or processor to execute all or part of the steps of the methods in the various embodiments of the present invention. The aforementioned computer 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.

[0155] Furthermore, the rendering device for the container component in the interface provided in the above embodiments and the rendering method for the container component in the interface belong to the same concept. For details of their specific implementation process, please refer to the method embodiments, which will not be repeated here.

[0156] Reference Figure 7 The diagram illustrates an electronic device according to an embodiment of the present invention. Figure 7As shown, the electronic device in this embodiment of the invention includes: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps in the rendering method embodiment of the container component in the above-described interface. Alternatively, when the processor executes the computer program, it implements the functions of each module in the rendering device embodiment of the container component in the above-described interface.

[0157] For example, the computer program may be divided into one or more modules, which are stored in the memory and executed by the processor to complete this application. The one or more modules may be a series of computer program instruction segments capable of performing a specific function, which can be used to describe the execution process of the computer program in the electronic device.

[0158] The electronic device may be an IoT device such as a dictionary pen. The electronic device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 7 This is merely one example of an electronic device and does not constitute a limitation on the electronic device. It may include more or fewer components than illustrated, or combine certain components, or different components. For example, the electronic device may also include input / output devices, network access devices, buses, etc.

[0159] The processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0160] The memory can be an internal storage unit of the electronic device, such as a hard drive or RAM. Alternatively, it can be an external storage device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) card, Flash Card, etc. Furthermore, the memory can include both internal and external storage units. The memory is used to store the computer program and other programs and data required by the electronic device. The memory can also be used to temporarily store data that has been output or will be output.

[0161] This invention also discloses an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements a rendering method for container components in an interface as described in the foregoing embodiments.

[0162] This invention also discloses a computer-readable storage medium storing a computer program that, when executed by a processor, implements the rendering method for container components in the interface as described in the foregoing embodiments.

[0163] This invention also discloses a computer program product that, when run on a computer, causes the computer to execute the rendering method of the container component in the interface described in the foregoing embodiments.

[0164] The embodiments described above are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included within the protection scope of this application.

Claims

1. A method for rendering a container component in an interface, characterized in that, include: In response to a rendering request for a container component containing rounded corners, determine the layout information of the container component and the view parameters of the screen; The container component is used to contain and manage interface sub-elements; Based on the layout information and the view parameters, the interface area of ​​the container component located in the visible area of ​​the screen is determined; Allocate a local buffer in the off-screen buffer that is adapted to the interface area; Draw the target container component located within the interface area in the local buffer; The target container component is rounded off within the local buffer. The target container component, after rounded corner clipping, is rendered from the local buffer to the display buffer of the screen.

2. The method according to claim 1, characterized in that, The view parameters are used to represent the visible area of ​​the screen; the container component is developed based on the HaaS UI framework, and in the control tree of the HaaS UI framework, the container component is represented as a view group. Determining the interface area of ​​the container component within the visible area of ​​the screen based on the layout information and the view parameters includes: Calculate the first absolute coordinates of the corner point of the view group on the screen in the control tree; Construct a first target region according to the first absolute coordinates and the layout information; The interface area is obtained by taking the intersection of the view parameters and the first target area.

3. The method according to claim 2, characterized in that, Calculating the first absolute coordinates of the corner points of the view group on the screen in the control tree includes: In the control tree, starting from the view group, traverse upwards layer by layer to the root node to obtain the first position offset and the first scroll offset of each parent node. By summing the first position offset and the first scroll offset, the first absolute coordinates of the corner point of the view group on the screen are obtained.

4. The method according to claim 1, characterized in that, The step of requesting a local buffer in the off-screen buffer that is adapted to the interface area includes: Determine the type of rendering engine; Allocate a local buffer with the same size as the interface area in the off-screen buffer that is compatible with the type.

5. The method according to claim 1, characterized in that, The step of requesting a local buffer in the off-screen buffer that is adapted to the interface area includes: Determine the type of rendering engine; Request local buffers of multiple sizes in an off-screen buffer adapted to the type described; Allocate a local buffer whose size is larger than the interface area and whose size is closest to the interface area.

6. The method according to claim 5, characterized in that, The step of allocating a local buffer in the off-screen buffer that is adapted to the interface area further includes: The local buffer is maintained when the container component leaves the visible area of ​​the screen; Determine the running status of memory; When the operating state meets the preset pressure conditions, the local buffer is released.

7. A rendering device for a container component in an interface, characterized in that, include: The display parameter determination module is used to determine the layout information of the container component and the view parameters of the screen in response to a rendering request for a container component containing rounded corners; the container component is used to contain and manage interface sub-elements. The interface area recognition module is used to determine the interface area of ​​the container component located in the visible area of ​​the screen based on the layout information and the view parameters. The local buffer allocation module is used to allocate a local buffer in the off-screen buffer that is adapted to the interface area; The container component drawing module is used to draw the target container component located within the interface area in the local buffer. A rounded corner trimming module is used to perform rounded corner trimming on the target container component in the local buffer. The display buffer rendering module is used to render the target container component, after rounded corner clipping, from the local buffer to the display buffer of the screen.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the rendering method for container components in the interface as described in any one of claims 1-6.

9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the rendering method for container components in the interface as described in any one of claims 1-6.

10. A computer program product, characterized in that, When the computer program product is run on a computer, the computer performs a rendering method for a container component in an interface as described in any one of claims 1-6.

Images