Element cutting method and device based on irregular path layout

Abstract

The invention provides an irregular path layout-based element cutting method and device, and the method is used for setting an inner boundary for an irregular path, so that when the geometrical relationship between the irregular path and other elements is calculated, the path does not need to be traversed, and the calculation process of the geometrical relationship is simplified. Meanwhile, when the cutting elements enter the stack, the geometrical relationship between the cutting elements and the current cutting effect state is determined through the inner boundary and the outer boundary, the efficiency is improved, and meanwhile the accuracy of the inner boundary and the outer boundary of the current cutting effect state is improved. Before drawing, whether the drawing process can be optimized or not is pre-judged according to the boundaries of the drawing elements and the inner and outer boundaries of the final cutting effect state, if the drawing process can be optimized, the subsequent cutting process does not need to be carried out, and if the drawing process cannot be optimized, when the cutting elements are traversed, an Atlas threshold value is properly enlarged to enable a larger cutting path to be stored in Altas, and the cutting process is completed. In this way, time consumed by software mask texture uploading in the cutting process is shortened, and therefore the rendering performance is improved.

Description

Technical Field

[0001] This application relates to the field of image processing technology, and in particular to a method and apparatus for cropping elements based on irregular path layouts. Background Technology

[0002] Electronic device displays often use layouts that include irregular paths (especially irregular convex paths), such as rounded corner layouts. Examples include the cards displayed on the desktop (also known as desktop applications), which in Android are also called the launcher. Other examples include the notification cards displayed in the notification center and the quick settings cards displayed in the control center.

[0003] The current pruning process for irregular convex path layouts can easily lead to degraded rendering performance and issues such as stuttering. Summary of the Invention

[0004] In view of this, this application provides an element clipping method and apparatus based on irregular path layout to solve at least some of the above-mentioned problems, and the disclosed technical solution is as follows:

[0005] Firstly, this application provides an element clipping method based on an irregular path layout, comprising: adding a first clipping element corresponding to a first-layer layout to a clipping element stack, and updating the current clipping effect state to the first clipping effect state based on the boundary of the first clipping element, wherein the current clipping effect state is the current clipping effect of the clipping element currently added in the clipping element stack; adding a second clipping element corresponding to a second-layer layout to the clipping element stack, wherein the first-layer layout is located outside the second-layer layout, and at least one of the first-layer layout and the second-layer layout includes an irregular path; updating the first clipping effect state to the first-layer layout based on the inner and outer boundaries of the second clipping element and the inner and outer boundaries of the first clipping effect state. The second clipping effect state is the current clipping effect after adding clipping elements from the first and second layer layouts. It includes the inner boundary of the irregular path, which is the outer boundary of the irregular path, indented by a preset value. The drawing process of the drawing element is performed based on the information of the drawing element. The drawing process of the drawing element can be optimized based on the drawing boundary of the drawing element and the boundary of the second clipping effect state. If it can be optimized, the drawing process ends directly after completion. If it cannot be optimized, the clipping path with a pixel count less than the texture atlas threshold is stored in the texture atlas, and the texture atlas is uploaded to the GPU, so that the GPU performs the corresponding clipping operation on the drawing element according to the clipping path in the texture atlas.

[0006] In this way, after setting the inner boundary for clipping elements containing irregular paths, the geometric relationship between the clipping element and other elements (such as drawing elements, clipping effect states, etc.) can be calculated using the inner and outer boundaries, eliminating the need to traverse the path and thus reducing the time spent determining the geometric relationship between the clipping element and other elements. Furthermore, before drawing, the drawing process can be pre-judged based on the boundaries of the drawing elements and the inner and outer boundaries of the final clipping effect state to determine if it can be optimized. If it can be optimized, the subsequent clipping process is unnecessary, reducing the time spent uploading software mask textures generated during the clipping process, thus shortening the overall drawing time. Moreover, if the drawing process is determined not to be optimizable based on the geometric relationship between the drawing element and the final clipping effect state, during the clipping process, if it is again determined that the drawing element and the final clipping effect state intersect but do not contain each other, then it is necessary to traverse the clipping elements in the clipping element stack to determine the geometric relationship between each clipping element and the drawing element, thereby achieving precise clipping of the drawing element.

[0007] In one possible implementation of the first aspect, updating the first cropping effect state to the second cropping effect state based on the inner and outer boundaries of the second cropping element and the inner and outer boundaries of the first cropping effect state includes: comparing the relationship between the inner and outer boundaries of the second cropping element and the inner and outer boundaries of the first cropping effect state; if the outer boundary of the second cropping element is contained within the inner boundary of the first cropping effect state, determining that the second cropping element is contained within the first cropping effect state, updating the boundary of the first cropping effect state based on the boundary of the second cropping element, and updating the cropping state of the first cropping effect state based on the cropping states of all effective cropping elements; if the outer boundary of the second cropping element intersects with the inner boundary of the first cropping effect state, determining that the intersection of the second cropping element and the first cropping effect state is not contained, updating the inner boundary of the first cropping effect state to the intersection of the inner boundary of the second cropping element and the inner boundary of the first cropping effect state, updating the outer boundary to the intersection of the outer boundary of the second cropping element and the outer boundary of the first cropping effect state, and updating the cropping state of the first cropping effect state based on the cropping states of all effective cropping elements. As can be seen, after setting the inner boundary of the clipping element containing irregular paths, the geometric relationship between the clipping element and the current clipping effect state can be determined directly by using the inner and outer boundaries. This improves the efficiency of determining the geometric relationship between the two. Moreover, the updated clipping effect state has an inner boundary, which lays the foundation for the next step of calculating the geometric relationship between the clipping effect state and other elements by using the inner and outer boundaries.

[0008] In another possible implementation of the first aspect, determining whether the drawing process of the drawing element can be optimized based on the drawing boundary of the drawing element and the boundary of the second clipping effect state includes: determining the relationship between the drawing boundary of the drawing element and the inner and outer boundaries of the second clipping effect state; if the drawing boundary of the drawing element is contained within the inner boundary of the second clipping effect state, it is determined that the drawing element is contained within the second clipping effect state, and the drawing process of the drawing element can be optimized; if the drawing boundary of the drawing element intersects with the inner boundary of the second clipping effect state, and the clipping state of the second clipping effect state is an attribute state that cannot be optimized, then it is determined that the drawing process of the drawing element cannot be optimized. In this way, by initially determining whether the drawing process can be optimized through the inner and outer boundaries of both (the drawing element and the current clipping effect state), the efficiency of the determination is improved.

[0009] In another possible implementation of the first aspect, after determining that the drawing process of the drawing element cannot be optimized, the method further includes: determining that the geometric relationship between the drawing element and the second clipping effect state is intersecting but not inclusive based on the drawing boundary of the drawing element and the inner and outer boundaries of the second clipping effect state; traversing the clipping elements in the clipping element stack and determining the geometric relationship between each clipping element and the drawing element; for any clipping element that has an intersecting but not inclusive relationship with the drawing element, storing the clipping path with a pixel count less than or equal to the texture atlas threshold in the texture atlas, and uploading the texture atlas to the GPU, so that the GPU performs the corresponding clipping operation on the drawing element according to the clipping path in the texture atlas. It can be seen that if the drawing process is determined to be unoptimizable based on the geometric relationship between the drawing element and the final clipping effect state, and if it is again determined that the drawing element and the final clipping effect state are intersecting but not inclusive during the clipping process, it is necessary to traverse the clipping elements in the clipping element stack to determine the geometric relationship between each clipping element and the drawing element, thereby achieving precise clipping of the drawing element.

[0010] In another possible implementation of the first aspect, the method further includes: for clipping paths with a pixel count greater than the texture atlas threshold, using a software mask to clip the drawing elements according to the clipping path, and uploading the texture of the software mask to the GPU, so that the GPU can complete the corresponding drawing according to the software mask.

[0011] In another possible implementation of the first aspect, the clipping elements in the clipping element stack are traversed, and the geometric relationship between each clipping element and the drawing element is determined. This includes: reading clipping elements according to the reading order of the clipping element stack; determining whether the read clipping element is valid; if the read clipping element is valid, determining the geometric relationship between the read clipping element and the drawing element; if the read clipping element is invalid, determining whether all clipping elements in the clipping element stack have been traversed; if not, returning to the step of reading clipping elements according to the reading order of the clipping element stack; if all clipping elements have been traversed, uploading the texture of the software mask to the GPU, so that the GPU can complete the corresponding drawing based on the software mask. In this way, invalid clipping elements are excluded first when traversing the clipping elements, reducing the time spent on determining the geometric relationship between invalid clipping elements and the drawing element, and improving rendering performance.

[0012] In another possible implementation of the first aspect, determining the geometric relationship between the clipping element and the drawing element includes: comparing the relationship between the inner and outer boundaries of the clipping element and the drawing boundary of the drawing element; if the drawing boundary of the drawing element is contained within the inner boundary of the clipping element, the drawing element is determined to be contained within the clipping element; if the drawing boundary of the drawing element intersects with the inner boundary of the clipping element, the path of the clipping element is traversed and compared with the drawing boundary of the drawing element; if all segments on the path of the clipping element are located within the drawing boundary, the drawing element is determined to be contained within the clipping element; if the first part of the path of the clipping element is located within the drawing boundary and the second part is located outside the drawing boundary, the drawing element and the clipping element intersect but are not contained. It can be seen that when the relationship between the drawing element and the clipping element is determined to be intersecting but not contained by using the inner and outer boundaries, traversing the path of the clipping element to obtain an accurate clipping path improves the accuracy of the clipping path.

[0013] In another possible implementation of the first aspect, determining whether the read cropping element is valid includes: obtaining the first index value of the read cropping element; comparing the size relationship between the first index value and the second index value of the effective first cropping element stored in the second cropping effect state; if the first index value is less than the second index value, determining that the read cropping element is invalid; if the first index value is greater than the second index value, determining that the read cropping element is valid.

[0014] In another possible implementation of the first aspect, the inner boundary of the irregular path is obtained by indenting the outer boundary of the irregular path by one pixel, where the outer boundary is the bounding rectangle of the irregular path. This avoids clipping failure when drawing the background containing the irregular path layout due to a large difference between the inner boundary and the irregular path.

[0015] In another possible implementation of the first aspect, the texture atlas threshold can be set to 1024*1024. It is evident that appropriately increasing the atlas threshold allows for the storage of larger clipping path textures in the atlas. Furthermore, the clipping paths in the atlas are uploaded to the GPU, where the GPU performs the corresponding clipping operation based on these paths. This reduces the use of software masking, i.e., reduces the time consumed by uploading software mask textures, thereby improving rendering performance and loading speed, and reducing frame drops.

[0016] Secondly, this application also provides an electronic device, which includes: one or more processors, a memory, and a touch screen; the memory is used to store program code; the processor is used to run the program code, enabling the electronic device to implement the element clipping method based on irregular path layout as described in any of the first aspects.

[0017] Thirdly, this application also provides a computer-readable storage medium having instructions stored thereon that, when executed on an electronic device, cause the electronic device to perform an element trimming method based on an irregular path layout as described in any of the first aspects.

[0018] Fourthly, this application also provides a computer program product having instructions stored thereon, which, when the computer program product is run on an electronic device, cause the electronic device to implement the element clipping method based on irregular path layout as described in any of the first aspects. Attached Figure Description

[0019] Figure 1 This is a schematic diagram illustrating a usage scenario of an irregular path layout provided in an embodiment of this application;

[0020] Figure 2 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0021] Figure 3 This is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application;

[0022] Figure 4 This is a schematic diagram of a drawing scene with an irregular path layout provided in an embodiment of this application;

[0023] Figure 5 This is a schematic diagram of the drawing process including an irregular path layout provided in an embodiment of this application;

[0024] Figure 6 This is a schematic diagram of the element clipping process based on irregular path layout provided in the embodiments of this application. Detailed Implementation

[0025] The terms "first," "second," and "third," etc., used in this application specification, claims, and drawings are used to distinguish different objects, not to limit a specific order.

[0026] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0027] Please see Figure 1 This diagram illustrates a scenario where rounded corner curves are used in electronic devices.

[0028] like Figure 1 As shown in (1), the scenario in which the desktop interface 10 of the electronic device adopts a rounded curve layout can include desktop cards, desktop folders, etc. For example, the desktop cards in this example can include desktop card 11 for displaying time and weather components, and desktop card 13 for displaying schedules. Desktop folder 12 can hold multiple desktop icons.

[0029] In some scenarios, swiping down from the top of the desktop interface will take you to the notification center or control center. For example, swiping down from the top left of the desktop interface will take you to the notification center, and swiping down from the top right of the desktop interface will take you to the control center. Both the notification cards in the notification center and the toggle cards in the control center use a rounded corner layout, i.e., rounded quadrilaterals.

[0030] like Figure 1 As shown in (2), the scenario in which the notification center interface 20 of the electronic device adopts a rounded curve layout may include notification cards. For example, notification card 21 is used to display notification information of application APP1, and notification card 22 is used to display notification information of application APP2. Figure 1 The notification cards shown in (2) are all rounded quadrilaterals.

[0031] like Figure 1 As shown in (3), the scenario in which the control center interface 30 of the electronic device adopts a rounded curve layout may include a quick switch card 31, an adjustment switch card 32, and an APP quick control card 33. In this example, the quick switch card 31 includes multiple switch type settings, which can be called quick switches. The adjustment switch card 32 in this example is a volume control switch. Figure 1As shown in (3), the adjustment switch card may also include a screen brightness adjustment switch. In this example, the APP quick control card 33 is a quick control card for a music APP, which includes quick control controls such as pause / resume playback, previous track, and next track. The quick switch card, adjustment switch card, and APP quick control card are all rounded quadrilaterals.

[0032] During the research of this application, the inventors discovered that the current rounded corner layout uses G2 rounded corner curves. G2 rounded corner curves are curves with continuous curvature, resulting in a smooth and fluid visual effect without abrupt interruptions. Specifically, G2 rounded corner curves are implemented using Bézier curves, which are custom curves, thus belonging to irregular paths. Calculating the geometric relationship between rounded corner curves on irregular paths and other clipping or drawing elements requires determining the closure and concavity / convexity of the irregular path and traversing each point on the path for calculation. This process is time-consuming and prone to errors, further contributing to the time-consuming clipping process related to the rounded corner layout. Furthermore, during the clipping process, software masking is used to clip other elements based on the rounded corner layout. The texture of this software mask is uploaded to the GPU, severely degrading rendering performance and causing lag in the loading of interfaces including those with rounded corner layouts.

[0033] To address at least some of the aforementioned problems, this application provides a rounded curve layout clipping method. This method sets the inner boundary of the rounded curve, simplifying the geometric relationship calculation process when performing calculations with other elements (such as clipping elements, drawing elements, etc.). It eliminates the need to traverse the rounded curve path to determine geometric relationships, thus shortening the time required for geometric relationship determination and improving the accuracy of the determined relationships. Furthermore, this method can optimize the clipping process at multiple stages by determining the geometric relationships between the current element and other elements. For example, before entering the clipping process, the geometric relationship between the drawing element and the boundary of the clipping effect state (SaveRecord) is determined. If the drawing element is not clipped by SaveRecord, it does not need to enter the subsequent clipping process. Similarly, when a clipping element is pushed onto the stack (i.e., adding a new clipping element to the clipping element stack), the geometric relationship between the newly added clipping element and other elements in the stack can be accurately determined, thus accurately determining whether SaveRecord actually contains the drawing element, shortening the time required to update SaveRecord in this case. For example, if it is determined that the internal layout is contained within a rounded curve layout, which may cause the rounded curve clipping element to fail, then the subsequent clipping process only needs to traverse the internal layout and does not need to traverse the outer rounded curve layout, thus shortening the clipping process time. It is evident that this method can reduce the time spent determining the geometric relationship between the drawn element and other elements in multiple stages, improve calculation accuracy, and thus shorten the clipping process for different situations.

[0034] Moreover, this method expands the Atlas threshold for specific scenarios (such as background image cropping within rounded curve layouts), uses Atlas caching for textures that cannot be optimized through geometric relationships, reduces the use of software masking, thereby reducing mask texture uploads and improving rendering performance for scenarios related to rounded curve layouts with irregular paths.

[0035] The rounded corner curve layout trimming method provided in this application can be applied to electronic devices. In some embodiments, the electronic device may be a mobile phone (e.g., Figure 1 The devices described herein include tablets, desktops, laptops, ultra-mobile personal computers (UMPCs), handheld computers, netbooks, personal digital assistants (PDAs), wearable electronic devices, smartwatches, etc. This application does not impose any special limitations on the specific forms of the aforementioned smart home devices, servers, and electronic devices. In this embodiment, the structure of the electronic device can be as shown... Figure 2 As shown.

[0036] like Figure 2 As shown, the electronic device may include a processor, external memory interface, internal memory, universal serial bus (USB) interface, charging management module, power management module, battery, antenna 1, antenna 2, mobile communication module, wireless communication module, audio module, speaker, receiver, microphone, headphone jack, sensor module, buttons, motor, indicator, camera, display screen, and subscriber identification module (SIM) card interface, etc. The sensor module may include pressure sensors, gyroscope sensors, barometric pressure sensors, magnetic sensors, accelerometers, distance sensors, proximity sensors, fingerprint sensors, temperature sensors, touch sensors, ambient light sensors, bone conduction sensors, etc.

[0037] It is understood that the structure illustrated in this embodiment does not constitute a specific limitation on the electronic device. In other embodiments, the electronic device may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0038] A processor may include one or more processing units. Processors may include application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs), etc. Different processing units may be independent devices or integrated into one or more processors. The processor may also include memory for storing instructions and data.

[0039] Electronic devices connect a display screen and an application processor via a microprocessor. A GPU is used for graphics rendering. A processor may include one or more GPUs, which execute program instructions to generate or modify display information.

[0040] The display screen is used to display images, videos, etc. In some embodiments, the electronic device may include one or N display screens, where N is a positive integer greater than 1.

[0041] An electronic device's display screen can show a series of graphical user interfaces (GUIs), which constitute the main screen of the electronic device. Generally, the size of an electronic device's display screen is fixed, and only a limited number of controls can be displayed on that screen. A control is a GUI element; it is a software component contained within an application, controlling all the data processed by the application and the interactive operations related to that data. Users can interact with controls through direct manipulation, thereby reading or editing information related to the application. Generally, controls can include visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

[0042] Internal memory can be used to store executable program code, which includes instructions. The processor executes various functional applications and data processing of the electronic device by running the instructions stored in the internal memory. For example, in this embodiment, the processor implements the rounded corner curve layout trimming method provided in this embodiment by executing instructions stored in the internal memory.

[0043] An external storage interface (ESI) can be used to connect external memory cards, such as Micro SD cards, to expand the storage capacity of terminal devices. The external memory card communicates with the processor through the ESI to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0044] In addition, a smart operating system runs on top of the aforementioned components. Applications can be installed and run on this smart operating system.

[0045] The operating system of an electronic device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses the layered architecture Android system as an example to illustrate the software structure of an electronic device.

[0046] Figure 3 A schematic diagram of the structure of a terminal device provided in an embodiment of this application is shown.

[0047] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system may include: an application layer, an application framework layer, a libraries and services layer, and a kernel layer, where the kernel layer may be called the driver layer.

[0048] like Figure 3 As shown, the application layer can include a series of application packages, which may include a desktop (which can be called a desktop launcher; the Android system's desktop UI can be collectively referred to as the Launcher), camera, gallery, video, music, SMS, systemUI, navigation, Bluetooth, etc. For example, systemUI may include system-level control elements, such as the notification center and control center.

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

[0050] like Figure 3 As shown, the application framework layer may include a window manager, content provider, resource manager, view system, notification manager, etc.

[0051] The window manager is responsible for managing the display and layout of windows. For example, in the Android system, the window manager is WindowManagerService (WMS), which is responsible for handling operations such as creating, deleting, showing, hiding, moving, and resizing application windows.

[0052] Content providers are used to store and retrieve data, making that data accessible to applications. This data can include video, images, audio, and more.

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

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

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

[0056] The Libs & Services layer may include multiple library modules and service modules. For example, in this embodiment, the Libs & Services layer may include HWUI (hardware user interface), Skia, SurfaceFlinger, rendering engine, and media library, etc.

[0057] HWUI is used to handle UI rendering operations for applications. HWUI can utilize GPU hardware to draw the interface, improving drawing efficiency and smoothness, while also supporting some advanced features such as view stacking, animation, and custom drawing.

[0058] SKIA is the core graphics library of HWUI, providing basic drawing functions, including graphics, text, bitmaps, etc. SKIA supports hardware-accelerated rendering, which can make full use of the GPU for concurrent computing and speed up the rendering of the UI interface.

[0059] SurfaceFlinger is a service process in the Android system that starts with the Android system and is mainly used for screen rendering and layer compositing.

[0060] Rendering engines are used to implement 2D and 3D graphics rendering. For example, rendering engines can be OpenGL (Open Graphics Library), Vulkan, or OpenCL (Open Computing Language). OpenGL, for instance, provides the ability to interact directly with graphics hardware, fully utilizing the GPU's performance.

[0061] Media Libraries support playback and recording of various common audio and video formats, as well as still image files. Media Libraries support multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0062] The kernel layer is the layer between hardware and software. It drives the hardware, enabling it to function. The kernel layer can contain drivers for displays, cameras, GPUs, audio, and more.

[0063] In this embodiment of the application, the hardware layer may include CPU, GPU, etc.

[0064] The following example illustrates the software and hardware workflow of electronic devices in the scenario of displaying a notification card with rounded corners in the notification center.

[0065] When the touch sensor of an electronic device receives a touch operation that enters the notification center (e.g., swiping down on the left side of the status bar, which is located at the top of the electronic device's display area and displays the device's current status, such as cellular network signal quality, wireless network signal quality, and real-time time), it reports this to the processor. The processor responds to the touch operation and displays the notification center interface (e.g., ...). Figure 1 (See the schematic diagram shown in (2)). At this time, the window manager of the application framework layer is called to create the notification center window. The window manager passes the drawing request to SystemUI, SystemUI renders it through HWUI, and the generated graphics are stored in the cache. SurfaceFlinger combines the graphics in the graphics cache of different windows and sends the combined graphics to the display screen for display.

[0066] In HWUI, the rendering thread invokes the drawing functions provided by SKIA during the rendering process. The rendering thread's rendering instructions are passed to the rendering engine, which then transmits these instructions to the GPU via the GPU driver for execution, ultimately producing the final result. Figure 1 The interface of the notification center shown in (2) includes the rounded curve layout trimming process provided in the embodiments of this application.

[0067] The following example, which includes a rounded corner layout, will illustrate the process of drawing a rounded corner layout.

[0068] like Figure 4 As shown in (1), this is a schematic diagram of an example of a layout including rounded corner curves provided in an embodiment of this application. The example is a G2 rounded corner card, that is, the card uses G2 rounded corner curves. In this example, the layout characteristic used by the G2 rounded corner curves is that the G2 rounded corner curves contain other textures, that is, all drawing operations are located inside the G2 rounded corner curves (except for the background drawing operations of the G2 rounded corner card).

[0069] like Figure 4 As shown in (1), the G2 rounded corner card includes, from the outside in, a first layer layout 101, a second layer layout 102, and a drawing element 103. In this example, the first layer layout 101 is a G2 rounded corner curve, the second layer layout 102 is a rectangle, and the drawing element 103 is an image. Moreover, the second layer layout is contained within the first layer layout, and the drawing element 103 is contained within the second layer layout.

[0070] like Figure 4 As shown in (2), this is a schematic diagram of another example of a rounded curve layout provided in an embodiment of this application. This example includes two-layer layouts, namely G2 rounded curve layout 201 and rectangular layout 202, and drawing element 203. Rectangular layout 202 and G2 rounded curve layout 201 are in an intersecting but not inclusive geometric relationship.

[0071] Please see Figure 5 This illustrates the embodiments provided in this application. Figure 4 The simplified drawing process corresponding to the example shown in (1). Figure 5 As shown, the drawing process may include the following steps:

[0072] S101, Add the first layer of layout.

[0073] The layout adds cards in an order from the outside in. Figure 4 In the example shown in (1), the outermost layout, i.e. the first layout, is the G2 rounded curve layout.

[0074] S102, add the first-level layout clipping element to the clipping element stack.

[0075] This step involves adding elements from the first-level layout to the clipping element stack. The clipping stack stores parameters of clipping elements that directly affect the drawn elements in the card. For example, parameters in the stack may include the operation corresponding to the current element (such as clipping method), shape (such as path, rounded rectangle, rectangle, etc.), outer boundary (outer rectangle), inner boundary (inner rectangle), clipping state (i.e., clipstate), and the index value of the first clipping element that takes effect.

[0076] For example, the clipstate state may include kEmpty (indicating that the clipping range is empty), kWideOpen (no clipping is required), kDeviceRect (may involve clipping a simple rectangle), kDeviceRRect (may involve clipping a simple rounded rectangle), kComplex, etc., where "kComplex" indicates that there is a complex clipping shape or a shader.

[0077] In addition, each time a new clipping element is added to the clipping element stack, the clipping effect state (SaveRecord) can be updated based on the geometric relationship between the added clipping element and the clipping effect state (SaveRecord). The clipping effect state (SaveRecord) is the current clipping effect of the clipping elements already added to the clipping element stack.

[0078] In one exemplary embodiment, the information in SaveRecord may include: inner boundary, outer boundary, clipping state (i.e., the state of the aforementioned clipstate, operation type (such as clipping method), and clipping element index range (the index value of the clipping element in the clipping element stack corresponding to the clipping effect state), etc. Here, SaveRecord stores the inner and outer boundaries corresponding to the intersecting shape (or clipping shape), rather than clipping path information. For example, the inner boundary is the inscribed rectangle of the current clipping shape, and the outer boundary is the circumscribed rectangle of the current clipping shape.

[0079] For example, before adding the first clipping element to the clipping element stack, the clipping effect state (SaveRecord) is empty. At this time, the inner and outer boundaries of SaveRecord are the screen boundaries, and the clipstate of SaveRecord is "kWideOpen". After adding the first clipping element, the clipping effect state (SaveRecord) is updated with the information related to the first clipping element. For example, in Figure 4 In the scenario shown in (1), after adding the outermost G2 rounded curve clipping element to the stack, the inner and outer boundaries of SaveRecord are the inner and outer boundaries of the G2 rounded curve. For example, Figure 4In the drawing scene shown in (2), after adding the second layer of layout to the stack, the quadrilateral 204 shown by the dashed line is the final clipping shape. At this time, the inner and outer boundaries of SaveRecord are the inner and outer boundaries of the clipping shape.

[0080] In an exemplary embodiment, the geometric relationship between the inner and outer boundaries of the newly added clipping element and the inner and outer boundaries of SaveRecord can be determined.

[0081] Normally, when calculating the geometric relationship between a clipping element and a SaveRecord, the intersection or containment of the two elements' boundaries can be determined by checking their inner and outer boundaries. However, curves with irregular paths (such as G2 rounded curves) do not have inner boundaries, making it impossible to calculate the geometric relationship between the G2 rounded curve and the SaveRecord using this method. It requires determining the closure and concavity / convexity of the irregular path and traversing the geometric relationships between the irregular path and the SaveRecord to finally obtain the geometric relationship between the G2 rounded curve and the SaveRecord. This process is computationally intensive and time-consuming.

[0082] To improve computational efficiency, embodiments of this application set an inner boundary for the layout of irregular paths. For example, for a G2 rounded curve, its outer boundary (i.e., the outer rectangle of the G2 rounded curve layout) is indented by a small value (e.g., one pixel value) as the inner boundary. In this way, the geometric relationship between the inner and outer boundaries of the G2 rounded curve and the inner and outer boundaries of SaveRecord or other elements can be determined.

[0083] For example, if the outer boundary of the clipping element is contained within the inner boundary of the SaveRecord, it indicates that the clipping element is contained inside the SaveRecord. In this case, the SaveRecord is updated with the relevant information of the clipping element (e.g., the inner and outer boundaries of the SaveRecord are updated to the inner and outer boundaries of the clipping element, and the clipping state of the SaveRecord is affected by the clipping state of all active clipping elements).

[0084] For example, if the outer boundary of the clipping element intersects with the inner boundary of the SaveRecord, then the relationship between the two is determined to be intersecting but not inclusive. In this case, the inner boundary of the SaveRecord is updated to the intersection of the inner boundaries of the two elements, and the outer boundary is updated to the intersection of the outer boundaries of the two elements. The clipping state is affected by the clipping state of all active clipping elements.

[0085] In this implementation, after setting the inner boundary of the irregular path, the geometric relationship between the irregular path and SaveRecord or other elements can be calculated by using the inner and outer boundaries, thereby reducing the time spent determining the geometric relationship between SaveRecord and other elements (such as clipping elements or drawing elements).

[0086] S103, add a second layer layout.

[0087] After adding the outermost layout, continue adding the inner layouts in order from the outside in. Figure 4 In the example shown in (1), a second layer layout 102 is added.

[0088] S104, add a second-level layout clipping element to the clipping element stack.

[0089] The parameters of the clipping elements generated by the second-level layout are added to the clipping element stack. The parameters of the clipping elements in the stack can include operations, shapes, outer boundaries, inner boundaries, clipping state properties, etc.

[0090] In this embodiment, when adding a clipping element corresponding to the second-layer layout to the clipping element stack, the geometric relationship between the second-layer layout and the current clipping effect state (SaveRecord) is determined, and then the clipping effect state is updated according to the geometric relationship. The process of determining the geometric relationship between the clipping element and the previous clipping effect state is described in S102 and will not be repeated here.

[0091] S105, Generate drawing instructions based on the drawing elements, which are used to complete the drawing of drawing element 103.

[0092] exist Figure 4 In the card example shown in (1), the application generates drawing instructions to complete the drawing task of drawing element 103.

[0093] This step involves the application setting up drawing instructions. After pre-optimization, it determines whether the clip element affecting the drawing element is empty. If the clip is not empty, it generates the corresponding operation instructions and passes the clip to SKIA to further generate SKIA drawing instructions.

[0094] S106 generates SKIA drawing instructions.

[0095] S107, invoke the trimming process to perform the trimming operation.

[0096] against Figure 4The card example shown in (1) theoretically does not require clipping of the drawn elements. However, this step will be taken if the geometric relationship between the G2 rounded curve layout and other elements is incorrectly calculated by traversing the path due to the irregular path.

[0097] against Figure 4 In the example drawing scenario shown in (2), the rectangular layout 202 and the G2 rounded curve layout 201 are intersecting but not inclusive. Therefore, it is necessary to cut the drawing element 203 according to the path where the rectangular layout 202 and the G2 rounded curve intersect.

[0098] After determining the element to be clipped based on the geometric relationship (excluding intersections) between the clipping effect state (SaveRecord) and the drawn element, clipping can be achieved using software masking. For example, for the portion of the drawn element that needs to be clipped, the CPU draws a corresponding mask layer. The masked portion is invisible, while the uncovered portion is visible, thus achieving the clipping effect. Further, the software mask texture generated by the CPU is uploaded to the GPU, which then performs the corresponding drawing based on the software mask. Ultimately, this ensures that the clipped drawn element matches the clipping effect state. For example, as shown... Figure 4 In the drawing scene shown in (2), the drawing element 203 (i.e., the image) needs to be cropped to the shape of the quadrilateral 204 shown by the dotted line in the figure.

[0099] The element clipping method based on rounded curve layout provided in this application is mainly aimed at... Figure 5 The clipping process in the code is optimized to reduce the generation of software masks. The optimization approach involves accurately calculating clipping elements that may directly affect the drawn elements. In the rounded card scenario, the G2 rounded curve layout is usually the outermost layout affecting element drawing. By accurately calculating the geometric relationships between the drawn elements in the rounded card and other layouts, if other inner layouts are contained within the drawn elements, the outermost G2 rounded curve layout is invalid, meaning there's no need to traverse the G2 rounded curve layout. In other words, traversing the G2 rounded curve layout is avoided as much as possible. Even if the G2 rounded curve layout is traversed, the number of software mask textures uploaded to the GPU is minimized. Instead, the path textures that need to be clipped are uploaded to the GPU, allowing the GPU to perform the clipping operation based on the clipping path.

[0100] The following will combine Figure 6 This section details a method for element clipping based on rounded corner curve layouts. Figure 5 The process of determining whether the currently drawn element can be optimized has been added before S106, as well as... Figure 5 Optimize S107 in the example, such as Figure 6 As shown, the method may include the following steps:

[0101] S201 generates drawing instructions based on the drawing elements.

[0102] This step and Figure 5 The same applies to S105 in this paper, so it will not be repeated here.

[0103] S202, determine whether the current drawing element can be optimized based on the boundary of the drawn element and the boundary of the current clipping effect state (SaveRecord); if it can be optimized, the process ends; if it cannot be optimized, continue to execute the subsequent clipping process, i.e., S203.

[0104] In some embodiments, before entering the clipping process, it is first determined whether the drawing process of the drawing element can be optimized. Specifically, the geometric relationship between the drawing element's boundary (or drawing boundary) and the inner and outer boundaries of SaveRecord can be calculated to see if they intersect but do not contain each other. The clipping state in SaveRecord is then used to determine whether the drawing element can be optimized. If they intersect but do not contain each other, and the clipping state is "kcomplex", it indicates that it cannot be optimized. If the boundary of the drawing element is contained within SaveRecord, it is determined that the drawing process of that drawing element can be optimized. Alternatively, it can be optimized in the following situations: for example, SaveRecord is empty, so clipping is not required; the outer boundaries of the drawing element and SaveRecord do not intersect, meaning the drawing element does not need to be displayed and does not need to be clipped; the clipping elements are all simple rectangles, in which case the clipping elements can also be optimized if they meet certain requirements. There are many situations that can be optimized, which will not be listed here. In an exemplary embodiment, the ability to optimize the current drawing element can be determined using "SurfaceDrawContext::attemptQuadOptimization". If "QuadOptimization::kCropped" is returned, it indicates that the drawing process of the element cannot be optimized. Returning other values ​​indicates that the drawing process can be optimized and does not require subsequent clipping. For example, "QuadOptimization::kClipApplied" indicates that the drawing process of the element can be optimized. If it is determined in S202 that the current drawing process can be optimized, subsequent clipping is unnecessary, significantly reducing the time spent on clipping and reducing the time consumed by software mask texture uploads, ultimately improving rendering performance.

[0105] S203, determine whether the current clipping effect state and the drawing element are intersecting but not inclusive; if so, execute S204; otherwise, end the current drawing process.

[0106] This step determines the geometric relationship between the inner and outer boundaries of the current clipping effect and the inner and outer boundaries of the drawing element. If they are intersecting but not inclusive, the clipping elements in the clipping element stack need to be traversed to determine the geometric relationship between each clipping element and the drawing element, thus achieving precise clipping of the drawing element. If the drawing element is contained in SaveRecord, meaning they are inclusive, it indicates that the drawing element does not need to be clipped, and the current drawing process ends.

[0107] S204, read the next clipping element in the clipping element stack in sequence.

[0108] The next clipping element here refers to reading the relevant information of a clipping element according to the reading rules of the clipping element stack (i.e., first-in, last-out), that is, reading the relevant information of the corresponding clipping element in the order of the layout from the inside to the outside.

[0109] For example, Figure 4 In the example shown in (1), the first clipping element read is the information related to the clipping element corresponding to the second layer layout 102. The second clipping element read is the information related to the clipping element corresponding to the first layer layout 101.

[0110] S205, determine if the next clipping element is invalid; if invalid, continue to S209; if valid, continue to S206.

[0111] In a scenario, such as Figure 4 As shown in (1), the second layer layout 102 is contained in the first layer layout 101, which may cause the first layer layout 101 to fail (i.e., the clipping element of the G2 rounded curve is invalid). That is, the drawing element must be contained in the first layer layout, and it is only necessary to determine the geometric relationship between the second layer layout and the drawing element.

[0112] In an exemplary embodiment, information about the clipping element is read from the clipping element stack, the index value of the clipping element is obtained, and compared with the index value of the first effective element saved in SaveRecord. If the index value of the clipping element is less than the index value of the first effective element saved in SaveRecord, the clipping element is determined to be invalid; otherwise, the clipping element is determined to be valid.

[0113] S206, determine the geometric relationship between the next clipping element and the current drawing element; if the next clipping element and the drawing element are in an inclusive relationship, continue to execute S207; if the next clipping element and the drawing element are intersecting but not inclusive, execute S209.

[0114] If the read clipping element is valid, the geometric relationship between the clipping element and the current drawing element is further determined. This can be initially determined by comparing the inner and outer boundaries of both the clipping element and the drawing element. If the inner boundary of the drawing element intersects with the outer boundary of the read clipping element, the geometric relationship between the segments formed by the control points on the clipping element path and the drawing boundary of the drawing element is further compared by traversing the clipping element path. If all segments on the clipping element path are outside the drawing element, the drawing element is determined to be contained within the clipping element. If some segments of the clipping element path are inside the drawing boundary of the drawing element, and some segments are outside the drawing boundary of the drawing element, the clipping element intersects with the drawing element but is not contained within it.

[0115] S207, can the clipping path be cached through a texture atlas? If yes, proceed to S209; otherwise, proceed to S208.

[0116] The clipping path refers to the path element in the clipping stack that affects the drawing element. In the function, it refers to all valid stack elements traversed except for elements processed by the preceding operations before the clipping process (such as rectangles, ordinary rounded rectangles, convex polygons, etc.). For example, in the scenario of this embodiment, the clipping path is the G2 rounded curve.

[0117] If the clipping element and the drawing element are contained within each other (i.e., the drawing element is contained within the clipping path), then it is determined whether the path in the clipping effect state can be cached in the texture atlas (Atlas). The texture atlas has a threshold; if the number of pixels corresponding to the clipping path is less than or equal to the threshold, the clipping path can be cached in Atlas. If the number of pixels corresponding to the clipping path is greater than the threshold, the clipping path cannot be cached in Atlas.

[0118] S208 uses software masking to clip the drawn elements according to the clipping path.

[0119] For the parts of the drawn elements that need to be clipped, the CPU draws a corresponding mask layer. The parts covered by the mask are invisible, while the parts not covered by the mask are visible, thus achieving the clipping effect. The texture of the software mask needs to be uploaded to the GPU, which then performs the corresponding drawing work based on the software mask. The process of the CPU uploading a large number of mask textures to the GPU is time-consuming and may lead to rendering performance degradation and frame drops.

[0120] Therefore, in order to avoid the process of uploading a large number of mask textures, in some embodiments of this application, the threshold of Atlas is appropriately expanded so that larger clipping paths can also be cached in Atlas. In this way, the GPU directly completes the corresponding clipping operation based on the clipping path in Atlas, without the CPU needing to clip the clipping elements through software masking. This avoids the process of uploading a large number of mask textures, reduces the time spent uploading a large number of textures, and thus improves rendering performance.

[0121] S209, determine whether all clipping elements in the clipping element stack have been traversed; if so, execute S210; otherwise, return to execute S204.

[0122] If all clipping elements in the clipping element stack have been traversed, the mask texture generated by the CPU is uploaded to the GPU. If there are still untraversed clipping elements in the stack, the next clipping element is read and the subsequent processing flow is executed.

[0123] S210 uploads the texture of the software mask to the GPU.

[0124] The processes described in S203 to S210 above are the cutting processes provided in the embodiments of this application, namely... Figure 5 The process shown in S107 is as follows.

[0125] The element clipping method based on rounded curve layout provided in this embodiment sets an inner boundary for the rounded curve. This simplifies the calculation process by eliminating the need to traverse the rounded curve path when calculating the geometric relationship between the rounded curve and other elements (such as drawing elements or other clipping elements). For example, it improves the situation where the G2 rounded curve layout contains drawing elements but enters the subsequent clipping process due to incorrect geometric relationship calculations. Furthermore, when clipping elements are pushed onto the stack, the calculation process of the geometric relationship between the clipping element and the current clipping effect state is simplified, while simultaneously improving the accuracy of the inner and outer boundaries of the current clipping effect state.

[0126] Furthermore, before entering the clipping process, the inner and outer boundaries of the drawn element and the inner and outer boundaries of the current clipping effect state are used to determine whether the drawing process of the drawn element can be optimized. That is, if the drawn element is contained inside the current clipping effect state, the drawing process can be optimized, and there is no need to execute the subsequent clipping process, which greatly shortens the drawing process time and greatly improves the rendering efficiency and loading speed of layouts containing rounded curves.

[0127] Furthermore, if the drawn element intersects with but does not contain the current clipping effect state, it cannot be optimized. In this case, the corresponding clipping process is executed. During the clipping process, the clipping elements in the stack are traversed and the geometric relationship between each clipping element and the drawn element is determined. If the clipping element corresponding to an inner layout is contained in an outer layout, it may cause the clipping element corresponding to the outer layout to become invalid. That is, it is only necessary to traverse the clipping elements of each layout in the outer layout and determine the geometric relationship between each inner layout and the drawn element. This reduces the number of clipping elements traversed, thereby shortening the time of the clipping process, further shortening the time of the entire rendering process, and improving rendering performance and loading speed.

[0128] Finally, by increasing the Atlas threshold, larger clipping path textures can be stored in the Atlas for caching. The clipping paths in the Atlas are then uploaded to the GPU, which performs the corresponding clipping operation based on these paths. This reduces the use of software masking, thus reducing the time spent uploading software mask textures, thereby improving rendering performance and loading speed, and reducing frame drops.

[0129] The above embodiments all use the G2 rounded curve layout as an example for illustration. The element clipping method based on irregular path layout provided in this embodiment is also applicable to the clipping process of other irregular convex path layouts. Its optimization process is the same as the clipping optimization process of the rounded curve layout: first, set an inner boundary for the layout containing irregular paths (indent the outer boundary of the layout inward by a small value). In this way, when adding clipping elements containing irregular convex paths, the geometric relationship between the clipping element and SaveRecord can be calculated by boundary calculation, without having to traverse the path of the clipping element to determine the geometric relationship, which greatly improves the calculation efficiency. Moreover, before the drawing process of the drawing element, it is first determined whether the drawing process can be optimized based on the boundary between SaveRecord and the drawing element. If it can be optimized, the subsequent clipping process does not need to be executed, shortening the drawing process time and reducing a large amount of software mask texture uploading, thus improving rendering performance. Finally, when it was determined that a clipping process had to be performed, the Atlas threshold was increased so that larger clipping paths could be stored in Atlas, avoiding the process of uploading a large number of software mask textures, reducing the time spent on the large number of texture uploads, and improving rendering performance.

[0130] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this embodiment, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments. The aforementioned storage medium includes various media capable of storing program code, such as flash memory, portable hard disk, read-only memory, random access memory, magnetic disk, or optical disk.

[0131] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. An element clipping method based on an irregular path layout, characterized by, The method comprises the following steps: adding a first clipping element corresponding to a first layer layout to a clipping element stack, and updating a current clipping effect state to a first clipping effect state based on a boundary of the first clipping element, wherein the current clipping effect state is a current clipping effect of a clipping element currently added in the clipping element stack; adding a second clipping element corresponding to a second layer layout to the clipping element stack, wherein the first layer layout is located outside the second layer layout, and at least one of the first layer layout and the second layer layout comprises an irregular path; updating the first clipping effect state to a second clipping effect state based on inner and outer boundaries of the second clipping element and inner and outer boundaries of the first clipping effect state, wherein the second clipping effect state is a current clipping effect corresponding to the clipping elements of the first layer layout and the second layer layout, and an inner boundary of the irregular path is obtained by inwardly indenting a preset value from an outer boundary of the irregular path; performing a drawing process of a drawing element according to information of the drawing element; judging whether a drawing process of the drawing element can be optimized according to a drawing boundary of the drawing element and a boundary of the second clipping effect state; if the drawing process can be optimized, completing the drawing process and directly ending; if the drawing process cannot be optimized, storing a clipping path with a pixel number less than a threshold of a texture atlas in the texture atlas, and uploading the texture atlas to a GPU, so that the GPU performs a corresponding clipping operation on the drawing element according to the clipping path in the texture atlas.

2. The method of claim 1, wherein, The updating of the first clipping effect state to the second clipping effect state based on the inner and outer boundaries of the second clipping element and the inner and outer boundaries of the first clipping effect state comprises the following steps: comparing a relationship between the inner and outer boundaries of the second clipping element and the inner and outer boundaries of the first clipping effect state; if the outer boundary of the second clipping element is contained in the inner boundary of the first clipping effect state, it is determined that the second clipping element is contained in the first clipping effect state, the boundary of the first clipping effect state is updated based on the boundary of the second clipping element, and the clipping state of the first clipping effect state is updated based on the clipping states of all effective clipping elements; if the outer boundary of the second clipping element intersects with the inner boundary of the first clipping effect state, it is determined that the second clipping element intersects with the first clipping effect state without containing, the inner boundary of the first clipping effect state is updated to an intersection of the second clipping element and the inner boundary of the first clipping effect state, the outer boundary is updated to an intersection of the second clipping element and the outer boundary of the first clipping effect state, and the clipping state of the first clipping effect state is updated based on the clipping states of all effective clipping elements.

3. The method of claim 1, wherein, The judging of whether the drawing process of the drawing element can be optimized according to the drawing boundary of the drawing element and the boundary of the second clipping effect state comprises the following steps: determining a relationship between the drawing boundary of the drawing element and the inner and outer boundaries of the second clipping effect state; if the drawing boundary of the drawing element is contained in the inside of the inside boundary of the second clip effect state, it is determined that the drawing element is contained in the inside of the second clip effect state, and it is determined that the drawing process of the drawing element can be optimized; if the drawing boundary of the drawing element intersects with the inside boundary of the second clip effect state, and the clip state of the second clip effect state is a non-optimizable attribute state, it is determined that the drawing process of the drawing element cannot be optimized.

4. The method according to any one of claims 1-3, after it is determined that the drawing process of the drawing element cannot be optimized, the method further comprises: determining, according to the drawing boundary of the drawing element and the inside boundary and the outside boundary of the second clip effect state, that the geometric relationship between the drawing element and the second clip effect state is intersecting and not containing, then traversing the clip elements in the clip element stack and determining the geometric relationship between each of the clip elements and the drawing element; for any clip element having an intersecting and not containing relationship with the drawing element, storing the clip path having a pixel number less than or equal to a texture atlas threshold in a texture atlas, and uploading the texture atlas to a GPU, so that the GPU performs corresponding clipping operation on the drawing element according to the clip path in the texture atlas.

5. The method of claim 4, wherein, The method further comprises: for the clip path having a pixel number greater than the texture atlas threshold, performing clipping on the drawing element according to the clip path in a software mask manner, and uploading the texture of the software mask to the GPU, so that the GPU completes corresponding drawing according to the software mask.

6. The method according to claim 4 or 5, characterized in that, The traversing the clip elements in the clip element stack and determining the geometric relationship between each of the clip elements and the drawing element comprises: reading the clip elements according to the reading order of the clip element stack; determining whether the read clip element is valid, if the read clip element is valid, determining the geometric relationship between the read clip element and the drawing element, if the read clip element is invalid, determining whether the clip elements in the clip element stack are traversed completely; if not, returning to perform the step of reading the clip elements according to the reading order of the clip element stack; if yes, uploading the texture of the software mask to the GPU, so that the GPU completes corresponding drawing according to the software mask.

7. The method of claim 6, wherein, The determining the geometric relationship between the read clip element and the drawing element comprises: comparing the relationship between the inside boundary and the outside boundary of the clip element and the drawing boundary of the drawing element, if the drawing boundary of the drawing element is contained in the inside of the inside boundary of the clip element, it is determined that the drawing element is contained in the inside of the clip element; if the drawing boundary of the drawing element intersects with the inside boundary of the clip element, traversing the path of the clip element and comparing with the drawing boundary of the drawing element; if all the segments on the path of the clip element are located in the inside of the drawing boundary, it is determined that the drawing element is contained in the inside of the clip element; If a first part of the path of the clipping element is inside the drawing boundary and a second part of the path of the clipping element is outside the drawing boundary, it is determined that the drawing element does not intersect the clipping element.

8. The method according to claim 6 or 7, characterized in that, The judging whether the read clipping element is valid comprises: obtaining a first index value of the read clipping element; comparing a size relation between the first index value and a second index value of a first clipping element saved in the second clipping effect state; if the first index value is smaller than the second index value, it is determined that the read clipping element is invalid; if the first index value is greater than the second index value, it is determined that the read clipping element is valid.

9. The method according to any one of claims 1 to 8, characterized in that, The inner boundary of the irregular path is obtained by inwardly indenting a pixel value from an outer boundary of the irregular path, and the outer boundary of the irregular path is a circumscribed rectangle of the irregular path.

10. An electronic device, comprising: The electronic device comprises one or more processors, a memory and a touch screen; the memory is used to store program code; the processor is used to run the program code, so that the electronic device implements the element clipping method based on the irregular path layout according to any one of claims 1 to 9.

11. A computer readable storage medium characterized by, An instruction is stored thereon, and when the instruction is run on an electronic device, the electronic device executes the element clipping method based on the irregular path layout according to any one of claims 1 to 9.

12. A computer program product, characterised in that, An instruction is stored thereon, and when the computer program product is run on an electronic device, the electronic device implements the element clipping method based on the irregular path layout according to any one of claims 1 to 9.

Images