A method of drawing a smooth fillet and related apparatus

Abstract

The application provides a method for drawing a smooth round corner and a related device. The method is applied to an electronic device with a rendering display function. The electronic device stores a first radius, a first parameter and a second parameter required for drawing a smooth round corner. The first parameter is used to indicate the convex degree of the smooth round corner, and the second parameter is used to indicate the smooth degree of the smooth round corner. The electronic device can draw a smooth round corner of an interface element according to the first radius, the first parameter and the second parameter, and display the interface element with the smooth round corner on a display screen. Exemplarily, a plurality of smooth round corners correspond to a set of parameters, or one interface element corresponds to a set of parameters. When drawing a plurality of smooth round corners corresponding to one / interface element / interface element, the first radius, the first parameter and the second parameter in the set of parameters are required, so that the implementation complexity is reduced.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a method and related apparatus for drawing smooth rounded corners. Background Technology

[0002] As electronic devices become increasingly sophisticated, the content displayed on their screens, such as mobile phones and tablets, is becoming more abundant and diverse. Examples include displaying application or file icons, application interfaces in windows, detailed information in cards, and notifications in pop-ups. To provide a better visual experience for users, these display formats are typically smoothed with rounded corners. For instance, when an electronic device displays an icon, the four vertices of a rectangular icon can be rounded to create a smooth-rounded rectangular icon.

[0003] Generally, electronic devices can use third-order Bézier curves to smooth rounded corners. However, drawing a smooth rounded corner using a third-order Bézier curve requires at least four coordinate points. Understandably, when there are many smooth rounded corners to be drawn, the number of coordinate points required will also increase, thereby increasing the complexity of the drawing and the computational load on the electronic device. Summary of the Invention

[0004] The embodiments of this application provide a method and related apparatus for drawing smooth rounded corners, which can reduce the complexity of drawing smooth rounded corners and reduce the computational load of electronic devices.

[0005] In a first aspect, this application provides a method for drawing smooth rounded corners, applied to electronic devices, the method comprising:

[0006] Obtain the first rounded corner parameter corresponding to the first interface element. The first rounded corner parameter includes a first radius, a first parameter, and a second parameter. The first parameter indicates the degree of protrusion of the smooth rounded corner of the first interface element, and the second parameter indicates the degree of smoothness of the smooth rounded corner of the first interface element.

[0007] Draw the first smooth rounded corner of the first interface element according to the first rounded corner parameter;

[0008] Display the first interface element, including the first smooth rounded corner.

[0009] It is understandable that smooth rounded corners are a rounded corner processing method, and compared with ordinary rounded corners, the transition from straight lines to rounded corners is smoother. In the embodiments of this application, when drawing the first smooth rounded corner corresponding to the first interface element, it is only necessary to obtain the first rounded corner parameter once. By using parameters indicating the degree of protrusion and smoothness of the smooth rounded corner and the rounded corner radius to draw the smooth rounded corner, the number of times data is read / obtained can be reduced, thereby reducing the complexity of drawing smooth rounded corners and reducing the computational load of electronic devices.

[0010] In conjunction with the first aspect, in one possible implementation of the first aspect, the second interface element and the first interface element belong to the same class, and the method further includes:

[0011] Draw the first smooth rounded corner of the second interface element according to the first rounded corner parameter;

[0012] Displays a second interface element that includes the first smooth rounded corner.

[0013] It can be seen that when the electronic device draws the smooth rounded corners corresponding to the second interface element, since the second interface element and the first interface element belong to the same category, that is, the graphics of the second interface element and the graphics of the first interface element belong to the same category, such as having the same outline, the electronic device can directly draw the first smooth rounded corners of the second interface element based on the first rounded corner parameters corresponding to the first interface element, without needing to read the data again, thus further reducing the amount of calculation.

[0014] In conjunction with the first aspect, in one possible implementation of the first aspect, drawing the first smooth rounded corner of the first interface element according to the first rounded corner parameter includes:

[0015] The starting point, ending point, and control point of the Bézier curve are determined based on the first radius, the first parameter, and the second parameter.

[0016] The Bézier curve is drawn based on the starting point, the ending point, and the control point;

[0017] The first smooth rounded corner of the first interface element is drawn based on the Bézier curve.

[0018] As can be seen, smooth rounded corners can be obtained more easily using Bézier curves. Determining a Bézier curve requires a start point, an end point, and control points. Based on the first radius, the first parameter, and the second parameter provided in this application, the start point, the end point, and control points can be determined, thus making it easier to draw Bézier curves.

[0019] In conjunction with the first aspect, in one possible implementation of the first aspect, the Bézier curve includes a first segment of a third-order Bézier curve and a second segment of a third-order Bézier curve.

[0020] In this application, in order to make the transition from straight line to rounded corner smoother, the three-order Bézier curves at both ends are spliced ​​together to obtain a smooth rounded corner.

[0021] In conjunction with the first aspect, in one possible implementation of the first aspect, determining the start point, end point, and control point of the Bézier curve based on the first radius, the first parameter, and the second parameter includes:

[0022] The first point is determined based on the first radius, wherein the first point is the starting point of the first segment of the third-order Bézier curve;

[0023] The second point is determined based on the first radius and the first parameter, wherein the second point is the first control point of the first segment of the third-order Bézier curve;

[0024] The third point is determined based on the first radius and the second parameter, wherein the third point is the second control point of the first segment of the third-order Bézier curve;

[0025] The fourth point is determined based on the third point, wherein the fourth point is the termination point of the first segment of the third-order Bézier curve.

[0026] As can be seen, determining a third-order Bézier curve requires a starting point, a first control point, a second control point, and an ending point. Electronic devices can pre-store a first radius, a first parameter, and a second parameter, construct a starting point using the first radius, and then obtain other points based on a starting point, the first parameter, and the second parameter, thus simplifying the point selection design of the Bézier curve.

[0027] In conjunction with the first aspect, in one possible implementation of the first aspect, determining the start point, end point, and control point of the Bézier curve based on the first radius, the first parameter, and the second parameter includes:

[0028] The starting point of the second Bézier curve segment is determined based on the fourth point mentioned above;

[0029] The first control point of the second segment of the third-order Bézier curve is determined based on the fourth point and the first parameter.

[0030] The second control point of the second segment of the third-order Bézier curve is determined based on the fourth point and the second parameter.

[0031] The termination point of the second segment of the third-order Bézier curve is determined based on the first radius.

[0032] As can be seen, this application can connect the two ends of the Bézier curves to form a smooth rounded corner. Therefore, the end point of the first Bézier curve is the starting point of the second Bézier curve. Based on the starting point, the first parameter, and the second parameter, other points of the second Bézier curve can be determined, which simplifies the point selection design of the Bézier curve.

[0033] In conjunction with the first aspect, in one possible implementation of the first aspect, after drawing the first smooth rounded corner of the first interface element according to the first rounded corner parameter, and before displaying the first interface element including the first smooth rounded corner, the method further includes:

[0034] Adjust the first smooth rounded corner of the first interface element according to the first parameter and the second parameter, so that the tangent of the first smooth rounded corner is parallel to the tangent of the hardware smooth rounded corner of the electronic device.

[0035] As can be seen, this application achieves a rounded corner using two Bézier curves, and the software rounded corner can be finely adjusted according to the rounded corner of the hardware screen.

[0036] In conjunction with the first aspect, in one possible implementation of the first aspect, the first smooth rounded corner includes smooth rounded corners corresponding to multiple vertices of the interface element.

[0037] In conjunction with the first aspect, in one possible implementation of the first aspect, drawing the first smooth rounded corner of the first interface element according to the first rounded corner parameter includes:

[0038] Draw a smooth rounded corner corresponding to one of the plurality of vertices based on the first radius, the first parameter, and the second parameter;

[0039] The smooth rounded corners corresponding to the remaining vertices among the plurality of vertices are drawn using a mirror mapping method based on the smooth rounded corner corresponding to one of the vertices.

[0040] Understandably, according to existing Bézier curve construction methods, when drawing the rounded corner of one of the multiple vertices of an interface element, the electronic device needs to store four coordinate points. Therefore, four vertices require storing 16 coordinate points, posing a significant challenge for software developers when developing a single interface element. For electronic devices, when there are many interface elements, the storage and computational load are substantial. Drawing multiple vertices requires repeatedly retrieving the coordinates of each vertex, resulting in numerous interactions and inconvenient operation. This application, however, only requires the electronic device to store a first rounded corner parameter including a first radius, a first parameter, and a second parameter. Retrieving the first rounded corner parameter once is sufficient to construct a starting point and two parameters, yielding the remaining 15 coordinate points. This simplifies the selection of Bézier curve points and reduces storage and complexity.

[0041] Secondly, an electronic device is provided in the embodiments of this application, the electronic device comprising: one or more processors; a memory; wherein the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code including computer instructions, and the one or more processors call the computer instructions to cause the electronic device to perform the method of drawing smooth rounded corners described in the first aspect or any possible implementation of the first aspect.

[0042] Thirdly, this application provides a chip or chip system including at least one processor and a communication interface. The communication interface and the at least one processor are interconnected via a circuit. The at least one processor is used to run a computer program or instructions to perform the method for drawing smooth rounded corners described in the first aspect or any possible implementation of the first aspect. The communication interface in the chip can be an input / output interface, pins, or circuits, etc.

[0043] In one possible implementation, the chip or chip system described above in the embodiments of this application further includes at least one memory, which stores instructions. The memory can be an internal storage unit of the chip, such as a register or cache, or it can be a storage unit of the chip itself (e.g., read-only memory, random access memory, etc.).

[0044] Fourthly, embodiments of this application provide a computer storage medium storing a computer program that, when executed by a processor, causes the computer to perform a method for drawing smooth rounded corners as described in the first aspect or any possible implementation thereof.

[0045] Fifthly, embodiments of this application provide a computer program product that, when run on a communication device, causes the communication device to perform a method for drawing smooth rounded corners as described in the first aspect or any possible implementation thereof.

[0046] It should be understood that the descriptions of technical features, technical solutions, beneficial effects, or similar language in this application do not imply that all features and advantages can be achieved in any single embodiment. Rather, it is understood that the description of a feature or beneficial effect means that a specific technical feature, technical solution, or beneficial effect is included in at least one embodiment. Therefore, the descriptions of technical features, technical solutions, or beneficial effects in this specification do not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions, and beneficial effects described in this embodiment can be combined in any suitable manner. Those skilled in the art will understand that embodiments can be implemented without one or more specific technical features, technical solutions, or beneficial effects of a particular embodiment. In other embodiments, additional technical features and beneficial effects may be identified in specific embodiments that do not embody all embodiments. Attached Figure Description

[0047] The accompanying drawings used in the embodiments of this application are described below.

[0048] Figure 1 This is an application scenario diagram of a smooth rounded corner provided in an embodiment of this application;

[0049] Figure 2 This is a schematic diagram of a smooth rounded corner provided in an embodiment of this application;

[0050] Figure 3A The diagram shown is a schematic of a second-order Bézier curve.

[0051] Figure 3B The diagram shown is a schematic of a third-order Bézier curve;

[0052] Figure 4 A schematic diagram of concentric circles provided for an embodiment of this application;

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

[0054] Figure 6 This is a schematic diagram of the software architecture of the electronic device provided in the embodiments of this application;

[0055] Figure 7 This is a schematic flowchart of a method for drawing smooth rounded corners provided in an embodiment of this application;

[0056] Figure 8A This is a schematic diagram illustrating the effect of drawing a Bézier curve by calling an interface, as provided in an embodiment of this application.

[0057] Figure 8B This is a schematic diagram of the smooth rounded corners of the graphic corresponding to the drawn icon provided in an embodiment of this application;

[0058] Figure 9 This is a schematic diagram of the remaining three vertices of an icon provided in an embodiment of this application. Detailed Implementation

[0059] The terminology used in the following embodiments of this application is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include the plural expressions as well, unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in this application refers to and includes any or all possible combinations of one or more of the listed items.

[0060] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as implying or suggesting relative importance or implicitly indicating the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature, and in the description of the embodiments of this application, unless otherwise stated, "multiple" means two or more.

[0061] The term "user interface (UI)" used in the specification, claims, and drawings of this application refers to the medium through which an application or operating system interacts and exchanges information with a user. It enables the conversion between the internal form of information and a form acceptable to the user. The user interface of an application is written in source code using specific computer languages ​​such as Java or Extensible Markup Language (XML). This source code is parsed and rendered on the terminal device, ultimately presenting user-recognizable content, such as images, text, buttons, and other controls.

[0062] The most common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operation displayed graphically. It can be a collection of interface elements such as windows and controls displayed on the screen of an electronic device. Controls can include visible interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

[0063] To better understand this application, the following exemplary descriptions of some concepts related to the embodiments of this application are provided for reference. As shown below:

[0064] 1. Controls

[0065] Controls, also known as widgets, are fundamental elements of a user interface. Typical controls include toolbars, menu bars, text boxes, buttons, scroll bars, images, and text. The properties and content of controls in the interface are defined using tags or nodes, such as in XML. <textview> 、 <imgview> 、 <videoview>Nodes define the controls contained in the interface. A node corresponds to a control or property in the interface, and after parsing and rendering, the node is presented as the content visible to the user. In addition, many applications, such as hybrid applications, often contain web pages within their interfaces. A web page, also known as a webpage, can be understood as a special control embedded in the application interface. Web pages are source code written in a specific computer language, such as Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript (JS), etc. Web page source code can be loaded and displayed as user-readable content by a browser or a web page display component with browser-like functionality. The specific content contained in a webpage is also defined through tags or nodes in the webpage source code; for example, HTML uses tags or nodes to define the content. 、 、 <video> 、 <canvas>To define the elements and attributes of a webpage.

[0066] In computer programming, a control (also called a widget, component, or control) is a graphical user interface element whose displayed information arrangement can be changed by the user; for example, it may be a window or text box. A control is a basic visual building block contained within an application, controlling all the data processed by the application and the interactive operations related to that data. Different combinations of controls are typically packaged in widget toolkits, allowing programmers to build graphical user interfaces (GUIs). Most operating systems include a set of controls for program design, which programmers can add to their applications and specify their behavior. Controls are usually defined as classes in object-oriented programming (OOP). Therefore, many controls are derived from class inheritance.

[0067] Taking the Android system as an example, the following are some typical examples of controls provided by the system:

[0068] Linear Layout control: Used to implement flow layout, it can control the horizontal or vertical arrangement of elements placed in the control.

[0069] The ListView control is used to display elements (or objects, which can contain text and images) in a list format. This control allows you to group elements into columns with or without column headers, and display accompanying icons and text. You can use the ListView control to organize list items called ListItem elements (which can contain text and images) into one of four different views: Large (Standard) Icons, Small Icons, List, and Report. Additionally, this control can manage the sorting method of elements in the list and the appearance of selected elements.

[0070] GridView control: Used to display elements (or objects, which can contain text and images) in a grid format.

[0071] The RecyclerView control can display elements (or objects, which can contain text and images) in list, grid, and other formats. Compared to the ListView control, the RecyclerView control has a more powerful element reuse mechanism and provides more layout managers to handle various layouts. You can customize the layout manager to determine the arrangement rules of the items. For example, it can provide: a linear layout similar to the ListView control, implementing horizontal or vertical list element layouts; a grid layout, allowing you to specify the number of elements; and a waterfall layout, allowing you to specify the list direction and the number of elements in each direction.

[0072] The ViewPager control provides a multi-page switching effect. This control is a container class, allowing other controls to be added to it. The ViewPager control requires a PagerAdapter class to provide data; multiple views can be populated by creating adapters. When the user swipes left or right, images can be displayed. The ImageView control is used to display images.

[0073] In a user interface, one or more controls can be used depending on the layout requirements, or controls can be nested within a single control. Taking the LinearLayout control as an example, a horizontally laid-out view can be set based on the LinearLayout control; this view serves as the parent view. On the parent view, two child views, a first and a second, with heights equal to the parent view's height, can be set using the LinearLayout control. Both child views are arranged vertically. Within the second child view, a third and a fourth child view can be set using the LinearLayout control. These two child views are arranged vertically above the parent view, and their widths are equal to the parent view's.

[0074] It should be noted that the above is only an example of nested control usage. In other examples, the control implementing the parent view and the control implementing the child view can also be different types of controls. This application embodiment does not limit this.

[0075] 2. Smooth rounded corners

[0076] Taking mainstream electronic devices as an example, the hardware design of electronic devices tends towards a smoother, rounded corner design, presenting a smooth rounded corner trend from the inside out. For example, the hardware frame of electronic devices features smooth, rounded corners. To adapt to the smooth, rounded corners of the hardware, the system user interface of electronic devices also adopts a smooth, rounded corner design.

[0077] In addition, compared to other shapes, smooth rounded corners are easier to recognize, have less visual impact, are gentler, and are more guiding.

[0078] Please see Figure 1 , Figure 1 This is an application scenario diagram of a smooth rounded corner provided in an embodiment of this application. Figure 1 (a) is a diagram illustrating the application of smooth rounded corners on controls. Figure 1 (b) is an application scenario diagram of smooth rounded corners on a window. It is understood that smooth rounded corners are not limited to the application scenarios provided in the embodiments of this application, and can also be applied in other scenarios. For example, outline stroking, filling, clipping, etc.

[0079] from Figure 1 As can be seen from (a), the main system interface 111 of the electronic device 100 includes application cards 112, application desktop folders 113, and application desktop icons 114. The application cards 112 display detailed application information, such as time, date, weather, and schedule. The desktop folders 113 display icons for multiple applications, and the application desktop icons 114 display small images corresponding to the applications. All three elements—cards 112, desktop folders 113, and desktop icons 114—use smooth rounded corners. That is, the four vertices of cards 112, desktop folders 113, and desktop icons 114 have smooth rounded corners.

[0080] Taking opening a messaging application as an example, the electronic device 100 can receive user actions to open the messaging application, such as clicking the messaging application's desktop icon. In response to this action, the electronic device 100 can display something like... Figure 1 (b) The information application's startup window 115. Not limited to this, in other examples, the electronic device 100 may receive user actions that display a small window (or a background application window), such as a swipe up from the bottom of the screen, in response to which the electronic device 100 may display, as shown in [example of window 115]. Figure 1 (b) The small window 116. In other examples, the electronic device 100 may also display, such as Figure 1 (b) Notification management window 117; in other examples, electronic device 100 may also display, such as Figure 1 (b) Pop-up window 118, etc. Among them, the startup window 115, the small window 116, the notification management window 117 and the pop-up window 118 all adopt a smooth rounded corner design. That is, the four vertices of the startup window 115, the small window 116, the notification management window 117 and the pop-up window 118 are smooth rounded corners.

[0081] For example, one or more of the following: card 112, desktop folder 113, desktop icon 114, startup window 115, small window 116, notification management window 117, and pop-up window 118 can use either G1 smooth rounded corners or G2 smooth rounded corners. For instance, desktop folder 113, startup window 115, and small window 116 use G1 smooth rounded corners, while desktop icon 114, notification management window 117, and pop-up window 118 use G2 smooth rounded corners. Here, G1 smooth rounded corners are ordinary smooth rounded corners, which are uniform arcs (1 / 4πd) determined after a given radius d and center point. G2 smooth rounded corners include smooth rounded corners determined by second-order Bézier curves and smooth rounded corners determined by third-order Bézier curves.

[0082] Please see Figure 2 , Figure 2 This is a schematic diagram of a smooth rounded corner provided in an embodiment of this application. Wherein, Figure 2 (a) is a schematic diagram of the smooth fillet of G1. Figure 2 (b) is a G2 smooth fillet determined based on a second-order Bézier curve. Figure 2 (c) represents the smooth fillet of G2 determined based on the third-order Bézier curve. Figure 2 (d) is a schematic diagram showing the relationship between the smooth rounded corners of elements in the user interface (using cards as an example) and the smooth rounded corners of electronic device hardware.

[0083] from Figure 2 It can be seen that, under the same radian length (i.e., the same ratio of arc length to radius), Figure 2 As shown in (a), a G1 smooth fillet is a smooth fillet transitioning to a 1 / 4 arc. Because the curvature of the straight line is 0, while the curvature of the arc is a fixed value, there is an abrupt change in curvature from the straight line to the arc. Although it is tangentially continuous (also known as G1 continuity), it cannot achieve curvature continuity (also known as G2 continuity). Therefore, the corresponding first display area appears to represent a larger area visually, and the first display area is compressed inward. Figure 2 As shown in (a), the connection between the smooth fillet and straight edge of G1 is not smooth and the connection is awkward.

[0084] Figure 2 As shown in (b), a G2 smooth fillet is replaced by a curve instead of a quarter arc for transition. When drawing, it is required that the curvature of the connecting straight lines be continuous at both ends; that is, the curvature of the curve in the corresponding second display area gradually and continuously increases from 0 at both ends. Compared to the first display area, Figure 2 As shown in (b), the second display area corresponding to a G2 smooth rounded corner appears to represent a smaller area, and the center of the arc bulges outward, with a smoother connection between the arc and the straight edge.

[0085] Figure 2 The G2 smooth fillet shown in (c) is Figure 2 The G1 smooth fillet shown in (a) and Figure 2 The combination of G2 smooth rounded corners shown in (b). Compared to the first display area and the second display area, Figure 2 As shown in (c), the third display area corresponding to a G2 smooth rounded corner appears to represent a smaller area, and the center of the arc bulges outward, with a smoother connection between the arc and the straight edge.

[0086] exist Figure 2 In the display area shown in (d), the smooth rounded corners of the application's cards are associated with the smooth rounded corners of the electronic device 100. When the curvature changes of the smooth rounded corners of the application's cards and the curvature changes of the smooth rounded corners of the electronic device 100 are more matched, the curvature transition of the smooth rounded corners of the application's cards is more natural. Therefore, the visual illusion caused by the smooth rounded corners of the hardware and the smooth rounded corners of the cards can be optimized, providing users with a better viewing experience.

[0087] 3. Bézier curves

[0088] A Bézier curve, also known as a Bézier curve or Bézier curve, is a mathematical curve. It is commonly used in graphic design and computer graphics, and is one of the most frequently used basic lines in graphic modeling. A Bézier curve consists of a series of control points and data points, and can be used to create smooth curves and surfaces. By adjusting the position of the control points, the entire curve can be adjusted.

[0089] There are several types of Bézier curves, including linear Bézier curves, second-order Bézier curves, third-order Bézier curves, and so on.

[0090] like Figure 3A The image shows a schematic diagram of a second-order Bézier curve. Figure 3A It can be seen that the second-order Bézier curve 101 is a curve defined by three points (points A, B, and C). Point A is the starting point, point C is the ending point, and point B is the control point. First, determine points D and E on line segments AB and AC respectively. Then, place points E on points A and B respectively, and move them accordingly. The requirement is that point D moves uniformly in the direction of point B, and point E moves uniformly in the direction of point C, satisfying the following condition: Then, connect points D and E to determine line segment DE, and determine point F on line segment DE. First, place point F on point D, and then move point F uniformly in the direction of point E to satisfy the following condition. Finally, find all points that meet the above conditions, and the second-order Bézier curve 101 can be determined by the trajectory of the movement of these points.

[0091] As can be seen, a second-order Bézier curve consists of three points, which form two line segments. One point moves along each line segment, resulting in two more points. These two points form a line segment, and another point moves along this segment, resulting in one more point. Finally, the trajectory of this point constitutes the second-order Bézier curve 101.

[0092] like Figure 3B The image shows a schematic diagram of a third-order Bézier curve. Figure 3B It can be seen that the third-order Bézier curve 102 is a curve defined by four points (points A, B, C, and D). Point A is the starting point, point D is the ending point, and points B and C are the control points. First, determine points E, F, and G on line segments AB, BC, and CD respectively. Then, place points E, F, and G on points A, B, and C respectively, and move them accordingly. The requirement is that point E moves uniformly towards point B, point F moves uniformly towards point C, and point G moves uniformly towards point D, satisfying the following conditions: Then, connect points E and F to determine line segment EF, and connect points F and G to determine line segment FG. Identify points H and I on line segments EF and FG respectively. Place points H and I on points E and F respectively, requiring point H to move uniformly in the direction of point F, and point I to move uniformly in the direction of point G, to satisfy... Next, connect point H and point I to determine line segment HI, and then determine point J on line segment HI. Point J is required to move uniformly from point H towards point I, such that it satisfies... Finally, find all points that meet the above conditions, and the third-order Bézier curve 102 can be determined by the movement trajectory of the store.

[0093] As can be seen, a third-order Bézier curve consists of four points. These four points form three line segments, and one point moves along each line segment, resulting in three more points. These three points form two line segments, and one point moves along each line segment, resulting in two more points. These two points form a single line segment, and one point moves along this segment, resulting in a single point. Finally, the trajectory of this single point constitutes the third-order Bézier curve.

[0094] Among them, the smooth fillet determined based on the third-order Bézier curve is smoother and more rounded than the smooth fillet determined based on the second-order Bézier curve.

[0095] As described above, for a third-order Bézier curve, once points A and D are determined, the shape of the curve is also fixed. The shape of the G2 smooth fillet determined by the third-order Bézier curve needs to be adjusted using software, which may introduce some limitations. Taking a card smooth fillet as an example... Figure 4 This is a schematic diagram of concentric circles provided in an embodiment of this application. The smooth fillet of the card is a G2 smooth fillet determined based on a third-order Bézier curve. From... Figure 4 As can be seen, r1 is the radius of the hardware smoothed rounded corner, r2 is the radius of the card smoothed rounded corner, line a is the tangent of the hardware smoothed rounded corner, and line b is the tangent of the card smoothed rounded corner. To make the card smoothed rounded corner parallel to the hardware smoothed rounded corner, that is, to make lines a and b parallel, the G2 curve needs to be fine-tuned in software to correspond to the curvature of the hardware smoothed rounded corner, thus making the card smoothed rounded corner parallel to the hardware smoothed rounded corner. Because another software is needed to fine-tune the G2 smoothed rounded corner, it introduces some limitations and is inconvenient to implement.

[0096] As can be seen from the above description, to draw a G2 smooth fillet determined by a third-order Bézier curve, the electronic device needs to read the data four times to obtain the data of four coordinate points. For the four corners, the data of 16 coordinate points needs to be obtained, which is quite troublesome to implement, increases the complexity of drawing, and thus increases the computational load of the electronic device.

[0097] Based on this, this application provides a method for drawing smooth rounded corners. This method is applied to an electronic device with rendering and display functions. The electronic device stores a first radius, a first parameter, and a second parameter required for drawing the smooth rounded corners. The first parameter indicates the degree of protrusion of the smooth rounded corner, and the second parameter indicates the degree of smoothness of the smooth rounded corner. The electronic device can draw smooth rounded corners of interface elements according to the first radius, the first parameter, and the second parameter, and display the interface elements with the aforementioned smooth rounded corners on the display screen.

[0098] In one implementation, the electronic device can determine the start point, end point, and control point of a Bézier curve based on a first radius, a first parameter, and a second parameter; draw the Bézier curve based on the start point, end point, and control point; and draw a smooth fillet based on the Bézier curve. The Bézier curve includes a first segment of a third-order Bézier curve and a second segment of a third-order Bézier curve, and a smooth fillet can be obtained based on the first segment of the third-order Bézier curve and the second segment of the third-order Bézier curve.

[0099] For example, multiple smooth rounded corners correspond to a set of parameters, or a single UI element corresponds to a set of parameters. When drawing multiple smooth rounded corners corresponding to one type of UI element, only the aforementioned first radius, first parameter, and second parameter are needed, reducing implementation complexity. However, existing solutions use one set of coordinates for one rounded corner and multiple sets of coordinates for one UI element. For each vertex of a UI element, the coordinates corresponding to that vertex need to be read to determine the smooth rounded corner of that vertex, which requires multiple operations, making the operation complex and impractical.

[0100] First, the electronic device in this application embodiment can be a smart screen device, a smart TV (TV), a mobile phone, a tablet computer, an ultra-mobile personal computer (UMPC), a netbook, as well as a cellular phone, a personal digital assistant (PDA), a wearable device (such as a smartwatch, a smart bracelet), and other devices with display functions. This application embodiment does not impose any special restrictions on the specific form of the electronic device.

[0101] For example, taking a mobile phone as an electronic device, Figure 5 This is a schematic diagram of the structure of an electronic device 100 provided in an embodiment of this application. That is, exemplary, Figure 5 The electronic device shown could be a mobile phone.

[0102] like Figure 5 As shown, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0103] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 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.

[0104] Processor 110 may include one or more processing units, such as 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). These different processing units may be independent devices or integrated into one or more processors.

[0105] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

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

[0107] The charging management module 140 receives charging input from the charger. The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and supplies power to the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In another embodiment, the power management module 141 can also be located in the processor 110. In another embodiment, the power management module 141 and the charging management module 140 can also be located in the same device.

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

[0109] Antennas 1 and 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In another embodiment, the antenna can be used in conjunction with a tuning switch.

[0110] The mobile communication module 150 can provide wireless communication solutions for applications on the electronic device 100, including second-generation (2G), third-generation (3G), fourth-generation (4G), fifth-generation (5G), and sixth-generation (6G) mobile communication technologies. The mobile communication module 150 may include at least one filter, switch, power amplifier, low-noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1. In one embodiment, at least some functional modules of the mobile communication module 150 may be housed in the processor 110. In another embodiment, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0111] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through audio devices (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In one embodiment, the modem processor may be a separate device. In another embodiment, the modem processor may be independent of the processor 110 and housed within the same device as the mobile communication module 150 or other functional modules.

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

[0113] In one embodiment, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. The GNSS may include the Global Positioning System (GPS), the Global Navigation Satellite System (GLONASS), the BeiDou Navigation Satellite System (BDS), the Quasi-Zenith Satellite System (QZSS), and / or satellite-based augmentation systems (SBAS).

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

[0115] The display screen 194 is used to display images, videos, user interfaces, controls, windows, etc. In one implementation, the display screen 194 is used to display smooth rounded corners obtained by a smooth rounded corner drawing method provided in this application. The display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a MiniLED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In one embodiment, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.

[0116] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

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

[0118] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In one embodiment, electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0119] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0120] Internal memory 121 can be used to store computer executable program code, which includes instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional applications and data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory located in the processor.

[0121] Electronic device 100 can implement audio functions through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0122] Audio module 170 is used to convert digital audio information into analog audio signal output, and also to convert analog audio input into digital audio signal. Audio module 170 can also be used for encoding and decoding audio signals.

[0123] The loudspeaker 170A, also known as a "loudspeaker", is used to convert audio electrical signals into sound signals.

[0124] The receiver 170B, also known as the "earpiece", is used to convert audio electrical signals into sound signals.

[0125] The microphone 170C, also known as a "microphone" or "voice transducer," is used to convert sound signals into electrical signals.

[0126] The 170D headphone jack is used to connect wired headphones.

[0127] Pressure sensor 180A is used to sense pressure signals and can convert the pressure signals into electrical signals. In one embodiment, pressure sensor 180A can be disposed on display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates with conductive material. When force is applied to pressure sensor 180A, the capacitance between the electrodes changes. Electronic device 100 determines the pressure intensity based on the change in capacitance. When a touch operation is applied to display screen 194, electronic device 100 detects the intensity of the touch operation based on pressure sensor 180A. Electronic device 100 can also calculate the touch position based on the detection signal from pressure sensor 180A. In one embodiment, touch operations applied to the same touch position but with different touch operation intensities can correspond to different operation commands.

[0128] The gyroscope sensor 180B can be used to determine the motion attitude of the electronic device 100. In one embodiment, the angular velocity of the electronic device 100 about three axes (i.e., the x, y, and z axes) can be determined by the gyroscope sensor 180B.

[0129] The 180C barometric pressure sensor is used to measure barometric pressure.

[0130] The magnetic sensor 180D includes a Hall sensor. The electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip cover.

[0131] The accelerometer 180E can detect the magnitude of acceleration of electronic device 100 in various directions (generally three axes).

[0132] Distance sensor 180F is used to measure distance.

[0133] The proximity sensor 180G may include, for example, a light-emitting diode (LED) and a light detector, such as a photodiode. The LED may be an infrared LED. The electronic device 100 emits infrared light outward through the LED. The electronic device 100 uses the photodiode to detect infrared reflected light from a nearby object. When sufficient reflected light is detected, it can be determined that an object is near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that no object is near the electronic device 100.

[0134] The 180L ambient light sensor is used to detect ambient light intensity.

[0135] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can utilize the characteristics of the collected fingerprints to achieve fingerprint unlocking, accessing application locks, taking photos with fingerprints, answering calls with fingerprints, etc.

[0136] The 180J temperature sensor is used to detect temperature.

[0137] Touch sensor 180K, also known as a "touch device," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180K detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of electronic device 100, in a different position than display screen 194.

[0138] The bone conduction sensor 180M can acquire vibration signals.

[0139] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. Electronic device 100 can receive button input and generate key signal inputs related to user settings and function control of electronic device 100.

[0140] Motor 191 can generate vibration alerts. Indicator 192 can be an indicator light, used to indicate charging status, battery level changes, messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card.

[0141] The software system of electronic devices (such as mobile phones) can adopt a layered architecture, transaction-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses the layered architecture of the Android system as an example to illustrate the software architecture of a mobile phone. Please refer to... Figure 6 , Figure 6 This is a schematic diagram of the software architecture of the electronic device provided in the embodiments of this application.

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

[0143] The application layer can include a package of applications.

[0144] like Figure 6 As shown, applications can include gallery, desktop, call, messaging, memo, files, navigation, video, music, and other applications.

[0145] The desktop application is the system desktop, which can be called the Launcher or the "HomeScreen". It is the first application that you see when an electronic device is turned on, and it is used to display and manage other applications installed on the electronic device.

[0146] The calling application is a call-related application. When this application is launched, users can make calls through their electronic devices. The electronic device can determine that the audio scenario is a voice call based on the running application. For example, in response to a user answering a call on the calling application, the application can confirm a connected call through the call manager in the application framework layer. Then, the call manager can invoke the audio hardware abstraction in the abstract layer to activate the hardware involved in the call process, such as the microphone, earpiece, and screen sound output devices, thus enabling the electronic device to launch the calling application, allowing the user to begin the call.

[0147] When music and video applications are launched, users can play audio on their electronic devices. The device can determine the audio playback scenario based on the running application. For example, in response to a user's request to play a music file on a music application, the music application can identify the audio file through the audio playback management service at the application framework layer. This audio playback management service can then invoke the audio hardware in the abstraction layer to activate the hardware involved in music playback, such as speakers and earpieces, causing the electronic device to launch the music application and begin playing the music file.

[0148] 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.

[0149] Therefore, electronic devices can determine the output device scenario through applications and application framework layers.

[0150] like Figure 6 As shown, the application framework layer includes a phone manager, window manager, content provider, view system, resource manager, notification manager, etc.

[0151] A phone manager is used to provide communication functions for electronic devices. For example, it manages call status (including connection and disconnection).

[0152] The window manager is used to manage window applications. The window management service can obtain the screen size, determine if a status bar is present, lock the screen, and capture the screen, among other things.

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

[0154] A view system can be used to build the display interface of an application. Each display interface can consist of one or more controls. Generally, controls can include interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

[0155] Resource management services provide applications with various resources, such as localized strings, icons, images, layout files, video files, and so on.

[0156] Notification management services allow applications to display notifications in the status bar. These can be used to convey informational messages and disappear automatically after a short pause, requiring no user interaction. For example, notification management services can be used to notify of download completion or message alerts. Notification managers 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, or flashing indicator lights.

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

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

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

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

[0161] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

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

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

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

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

[0166] The following example, using a display scenario, illustrates the workflow of the software and hardware of electronic device 100.

[0167] When touch sensor 180K receives a touch operation, a corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into a raw input event (including touch coordinates, touch operation timestamp, etc.). The raw input event is stored in the kernel layer. The application framework layer retrieves the raw input event from the kernel layer and identifies the control corresponding to the input event. Taking the touch operation as launching a desktop application as an example, the desktop application calls the interface of the application framework layer to obtain the first coordinate point, first radius, first parameter, and second parameter corresponding to the interface element of the first application managed by the desktop application. For example, the first coordinate point is the coordinate of the top left vertex of the icon corresponding to the first application. The application framework layer calls the system library, which draws the smooth rounded corner corresponding to the first coordinate point of the first application based on the first coordinate point, first radius, first parameter, and second parameter, and then draws the remaining three smooth rounded corners based on the smooth rounded corner corresponding to the first coordinate point through mirror mapping. Finally, by calling the kernel layer to control the display driver, the interface element of the first application containing the smooth rounded corners is displayed on the display screen 194.

[0168] Please see Figure 7 , Figure 7 This is a flowchart illustrating a method for drawing smooth rounded corners provided in an embodiment of this application. This method can be based on... Figure 5 The hardware architecture and / or of the electronic device shown Figure 6 The method is implemented using the software architecture of the illustrated electronic device, but can also be implemented based on other architectures. The method includes steps S701-S703. For ease of description, this application describes the process using steps S701-S703 in this order, but it is not intended to limit the execution to this specific order. This application's embodiments do not limit the order of execution, the execution time, or the number of executions of one or more of the above steps.

[0169] Step S701: Obtain the first rounded corner parameter corresponding to the first interface element.

[0170] Understandably, in the user interface of an electronic device, there are interface elements such as windows and controls, which are represented graphically. Generally, the graphic corresponding to the interface element consists of four vertices. To improve the aesthetics of the graphic and enhance the user experience, before displaying the graphic corresponding to the interface element in the user interface, it is necessary to smooth and round the four vertices of the graphic to obtain four smooth rounded corners for each vertex.

[0171] Therefore, in response to user operation, the electronic device determines the first interface element to be displayed and then obtains the first rounded corner parameters required for drawing the smooth rounded corners of the graphic corresponding to the first interface element. The first rounded corner parameters include one or more of a first radius, a first parameter, and a second parameter. The first parameter indicates the degree of convexity of the smooth rounded corner of the first interface element, the second parameter indicates the smoothness of the smooth rounded corner, and the first radius is the radius of curvature corresponding to the G1 smooth rounded corner. It is understandable that when the interface elements being drawn are different—for example, if the interface elements do not belong to the same category or have different graphic sizes—the first radius, the first parameter, and the second parameter may also be different.

[0172] For example, in response to a user operation on button 190, the electronic device starts the operating system and launches a desktop application. It determines the position coordinates and quantity of interface elements such as icons, folders, and cards that the desktop application can manage. Then, it obtains the smooth corner radius parameters (including a first radius, a first parameter, and a second parameter) corresponding to each interface element. Specifically, when the smooth corner radius corresponding to the graphics of the icons, folders, and cards is different, the corresponding smooth corner radius parameters are also different; when the smooth corner radius corresponding to the graphics of the icons, folders, and cards is the same, the smooth corner radius parameters are also the same.

[0173] Step S702: The electronic device draws the first smooth rounded corner of the first interface element according to the first rounded corner parameter.

[0174] Specifically, as described above, smooth fillets drawn based on Bézier curves ensure a smooth transition between curves and straight lines, guaranteeing a very gentle change in curvature in the middle section of the curve. Therefore, in one possible implementation, when drawing multiple smooth fillets for any interface element, the electronic device can determine the termination point and two control points of the Bézier curve based on the smooth fillet parameters of the interface element (i.e., the first radius, the first parameter, and the second parameter). Then, it calls the interface encapsulating the Bézier curve, draws the Bézier curve based on the termination point and the two control points, and finally obtains multiple smooth fillets for the interface element based on the Bézier curve.

[0175] In one possible implementation, when the electronic device draws the second interface element, the second interface element and the first interface element belong to the same category. Therefore, the outlines of the graphics of the second interface element and the first interface element are the same. The electronic device can directly draw the second smooth rounded corner of the second interface element based on the first rounded corner parameter obtained when drawing the first smooth rounded corner of the first interface element, thereby further reducing the amount of computation.

[0176] For example, please see Figure 8A , Figure 8A This is a schematic diagram illustrating the effect of drawing a Bézier curve using an interface provided in an embodiment of this application. Figure 8A As shown, after the electronic device creates a `path` instance, it first calls the `path.moveTo` method to set the starting point, which is the starting point of the next contour, at point (x0, y0). Then, the electronic device calls `path.cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)` to set the control points and ending points of the third-order Bézier curve. This means adding a third-order Bézier curve starting from the last point, approaching the control points (x1, y1) and (x2, y2), and ending at (x3, y3). If `moveTo()` is not called on this contour, the first point will automatically be set to (0, 0). It can be seen that drawing a third-order Bézier curve using the `cubicTo()` interface only requires considering the construction of points (x0, y0), ..., (x3, y3), without needing to consider the implementation of the connecting lines.

[0177] In one possible implementation, the Bézier curve includes a first Bézier curve and a second Bézier curve, that is, a smooth rounded corner is achieved by splicing the two Bézier curves.

[0178] In one implementation, the electronic device determines a first point (i.e., the coordinates of the first point) based on a first radius, where the first point is the starting point of the first segment of the third-order Bézier curve. The electronic device determines a second point (i.e., the coordinates of the second point) based on the first radius and a first parameter, and a third point (i.e., the coordinates of the third point) based on the first radius and a second parameter, where the second and third points are control points of the first segment of the third-order Bézier curve. The electronic device determines a fourth point (i.e., the coordinates of the fourth point) based on the third point, where the fourth point is the ending point of the first segment of the third-order Bézier curve.

[0179] In one implementation, the termination point of the first segment of the third-order Bézier curve is the starting point of the second segment of the third-order Bézier curve. Therefore, the electronic device determines the starting point of the second segment of the third-order Bézier curve based on the fourth point, determines the first control point of the second segment of the third-order Bézier curve based on the fourth point and the first parameter, determines the second control point of the second segment of the third-order Bézier curve based on the fourth point and the second parameter, and determines the termination point of the second segment of the third-order Bézier curve based on the first radius.

[0180] For example, regarding the smooth rounded corners of the graphic corresponding to the icon interface element, please refer to [link to example]. Figure 8B , Figure 8B This is a schematic diagram of the smooth rounded corners of the graphic corresponding to the drawn icon provided in an embodiment of this application.

[0181] like Figure 8B As shown, a page displaying application icons is shown on desktop 800. This page includes multiple application icons (e.g., settings application icon, app store application icon, gallery application icon, browser application icon, etc.). After a user action is performed on an application icon, the electronic device can execute the application corresponding to that icon. Below the multiple application icons, a page indicator is displayed to indicate the positional relationship between the currently displayed page and other pages. Below the page indicator, a tray area is displayed. The tray area includes multiple tray icons, such as camera application icon, contacts application icon, phone application icon, and messaging application icon. The tray area remains displayed during page switching. In some embodiments, the page may also include multiple application icons and a page indicator. The page indicator may not be part of the page and may exist independently. The tray icons are also optional, and this embodiment does not impose any limitations on this.

[0182] Understandably, the electronic device 100 can draw the graphic corresponding to each application icon before displaying the application icons on the desktop 800. For example, when drawing the rectangular icon of an application (such as the rectangular icon of a browser application), the electronic device can smooth and round the four vertices of the rectangular icon, trimming the sharp right-angled vertices into smooth rounded corners, and then displaying the icon with smoothed rounded corners to improve the display effect.

[0183] from Figure 8B As can be seen, the four vertices of the rectangular icon of the browser application can be labeled as points A, B, D, and C in a clockwise direction. When drawing the smooth rounded corners of the browser application icon, the electronic device can determine the coordinates required to draw the smooth rounded corner of one of the four vertices based on the first radius, the first parameter, and the second parameter. Through coordinate transformation, mirror mapping, and other methods, the coordinates required to draw the smooth rounded corners of the other three vertices can be determined. Then, based on the third-order Bézier curve, the four smooth rounded corners of the browser application are drawn according to the coordinates corresponding to each vertex.

[0184] Next, let's take drawing the smooth rounded corner corresponding to point A in the upper left corner of a browser application icon as an example. The smooth rounded corner corresponding to point A consists of two segments of third-order Bézier curves, that is, a smooth rounded corner is obtained by splicing two segments of Bézier curves. First, when drawing the first segment of the third-order Bézier curve, we can determine the XY coordinate system with point A (x0, y0) as the origin (0, 0), and draw the smooth rounded corner corresponding to point A in the lower left area of ​​the XY coordinate system.

[0185] Continue to refer to Figure 8B Based on the XY coordinate system defined by point A(x0, y0) as the origin (0, 0), taking the drawing of a smooth fillet corresponding to point A in the lower right region of the XY coordinate system as an example, the drawing steps include:

[0186] Step S1: Determine the coordinates (x1, y1) of the first point 801 based on the first radius (e.g., G1 smooth fillet curvature). That is, the coordinates (x1, y1) of the first point 801 can be obtained by moving the origin (0, 0) down by the first radius R on the Y-axis.

[0187] Step S2: Determine the coordinates (x2, y2) of the second point 802 according to the first parameter (param1). That is, the coordinates of the second point 802 can be obtained by moving the origin (0, 0) down a first distance 8020 on the Y-axis. The first parameter is used to indicate the degree of convexity of the smooth fillet, and the first distance 8020 is used to indicate the degree of convexity of the smooth fillet determined based on the first radius. For example, the first distance 8020 is the ratio of the first radius R to the first parameter (param1) (R / param1). Therefore, the coordinates (x1, y1) of the second point 802 are (0, R / param1).

[0188] Step S3: Determine the coordinates (x3, y3) of the third point 803 according to the second parameter (param2). That is, the coordinates of the third point 803 can be obtained by moving the origin (0, 0) down by a second distance 8030 on the Y-axis. The second parameter is used to indicate the smoothness of the smooth fillet, and the second distance 8030 is used to indicate the smoothness of the smooth fillet determined based on the first radius. For example, the second distance 8030 is the ratio of the first radius R and the second parameter (param2) (R / param2). Therefore, the coordinates (x3, y3) of the third point 803 are (0, R / param2).

[0189] Step S4: Determine the coordinates of the fourth point 804 based on the coordinates of the third point 803. The coordinates of the fourth point 804 are used to indicate the endpoint of the first segment of the Bézier curve. For example, the coordinates of the fourth point 804 are half the sum of the coordinates of the third point 803, that is, the coordinates of the fourth point 804 are (x4, y4) = ((x3+y3) / 2, (x3+y3) / 2).

[0190] Step S5: Using the second point 802, the third point 803, and the fourth point 804 as input parameters, call cubicTo() to draw the first segment of the third-order Bézier curve. According to... Figure 3B It can be seen that, Figure 8B The first point 801 is shown as the starting point, the fourth point 804 as the ending point, and the second and third points 802 as control points. According to... Figure 7 It can be seen that the electronic device calls the interface encapsulated with a third-order Bézier curve to draw the first segment of the third-order Bézier curve.

[0191] It should be noted that steps S1, S2, and S3 can be executed simultaneously. Based on this, the electronic device determines the first segment of the third-order Bézier curve required for drawing a smooth fillet according to the first radius, the first parameter, and the second parameter.

[0192] Step S6: Using the fourth point 804 as the new starting point and (R, 0) as the ending point, repeat steps S2, S3 and S5 to complete the drawing of the second third-order Bézier curve.

[0193] It is understandable that, because the first and second Bézier curves are joined end-to-end to achieve a smooth rounded corner, the end point of the first Bézier curve is the starting point of the second Bézier curve. Therefore, the fourth point 804 can be used as the starting point of the second Bézier curve, and the electronic device can draw the second Bézier curve based on the fourth point 804, the first parameter, the second parameter, and the first radius. For example, according to steps S1, S2, S3, and the above description, the electronic device can determine the coordinates of the first control point based on the coordinates of the fourth point 804 and the first parameter; that is, by moving the coordinates (x4, y4) of the fourth point 804 to the right by a first distance 8020 on the X-axis, a control point is obtained. The coordinates of the second control point are determined based on the coordinates of the fourth point 804 and the second parameter; that is, by moving the coordinates (x4, y4) of the fourth point 804 to the right by a second distance 8030 on the X-axis, a control point is obtained. It is understandable that the smooth rounded corner corresponding to point A includes the second Bézier curve. Since point A is the origin, the tangent of the second Bézier curve at the termination point is parallel to or overlaps with the x-axis where the origin A is located. Therefore, the coordinates of the termination point can be determined based on the first radius. That is, the coordinates of the termination point (R, 0) can be obtained by moving the origin (0, 0) to the right by the first radius R on the x-axis. Finally, the electronic device calls the interface encapsulated with the third-order Bézier curve, and can draw the second third-order Bézier curve based on the two control points corresponding to the determined second Bézier curve and the termination point. Finally, the electronic device connects the first and second Bézier curves end to end to determine the smooth rounded corner corresponding to the upper left vertex A of the browser application icon.

[0194] For the rounded vertices corresponding to the top-right vertex B, bottom-left vertex C, and bottom-right vertex D of the browser application icon, the coordinates required to draw the third-order Bézier curves corresponding to the remaining three vertices (including the top-right vertex B, bottom-left vertex C, and bottom-right vertex D) can be determined by mirror mapping. Then, by repeating steps S1-S6, the first and second segments of the third-order Bézier curves required for the top-right vertex B, bottom-left vertex C, and bottom-right vertex D can be drawn. By splicing the first and second segments of the third-order Bézier curves corresponding to each vertex, the smooth rounded corners corresponding to each vertex can be obtained.

[0195] For example, please see Figure 9 , Figure 9 This is a schematic diagram of drawing the remaining three vertices of an icon according to an embodiment of this application, such as... Figure 9 As shown, each vertex of the icon corresponds to two Bézier curves; the solid line represents the first Bézier curve, and the dashed line represents the second Bézier curve. Once the coordinate points (including but not limited to points 801, 802, 803, and 804) needed to draw the first and second Bézier curves corresponding to vertex A are determined, the coordinate points needed to draw the first and second Bézier curves corresponding to vertices B, C, and D can be determined through mirror mapping. Figure 9 The coordinates required to draw the second Bézier curve corresponding to each vertex are not shown.

[0196] from Figure 9 It can be seen that by mapping the first point 801, the second point 802, the third point 803, and the fourth point 804 required for the first segment of the Bézier curve corresponding to point A, as well as the starting point, two control points, and the ending point required for the second segment of the Bézier curve, through X = AB / 2, we can obtain the first point 8011, the second point 8021, the third point 8031, and the fourth point 8041 required for the first segment of the Bézier curve corresponding to point B, as well as the starting point, two control points, and the ending point required for the second segment of the Bézier curve. Similarly, by mapping the first point 801, the second point 802, the third point 803, and the fourth point 804 required for the first segment of the Bézier curve corresponding to point A, as well as the starting point, two control points, and the ending point required for the second segment of the Bézier curve, through Y = AC / 2, we can obtain the first point 8012, the second point 8022, the third point 8032, and the fourth point 8042 required for the first segment of the Bézier curve corresponding to point C, as well as the starting point, two control points, and the ending point required for the second segment of the Bézier curve. By mapping the first point 8011, the second point 8021, the third point 8031, and the fourth point 8041 required for the first segment of the Bézier curve corresponding to point B, as well as the starting point, two control points, and the ending point required for the second segment of the Bézier curve, through Y = AC / 2, we can obtain the first point 8013, the second point 8023, the third point 8033, and the fourth point 8043 required for the first segment of the Bézier curve corresponding to point D, as well as the starting point, two control points, and the ending point required for the second segment of the Bézier curve.

[0197] Alternatively, the electronic device can determine the starting coordinates of the smooth fillets of the remaining three vertices based on a mirror mapping method, and then repeat steps S1-S6 to obtain the coordinates required for the Bézier curves corresponding to the remaining three vertices. Therefore, using the coordinates required for each Bézier curve segment as input parameters, calling cubicTo() can draw the Bézier curve.

[0198] As can be seen, this application can determine the 15 coordinate points required to draw the smooth rounded corners of the icon by constructing a starting point and two parameters (including the first parameter and the second parameter), which simplifies the point selection design of the Bézier curve.

[0199] In one possible implementation, after drawing a smooth rounded corner, the electronic device can further adjust the parallelism of the smooth rounded corner according to a first parameter and a second parameter, so that the tangent of the smooth rounded corner is parallel to the tangent of the hardware smooth rounded corner of the electronic device. For example, the first parameter has a value range of [1.0, 3.0], and the second parameter has a value range of [1.0, 3.0]. The electronic device can fine-tune the software smooth rounded corner (i.e., the smooth rounded corner determined by the third-order Bézier curve) according to the value ranges of the first and second parameters, so that the software smooth rounded corner and the hardware smooth rounded corner are parallel, that is, the quarter-tangent of the software smooth rounded corner is parallel to the quarter-tangent of the hardware smooth rounded corner.

[0200] Step S703: Display a first interface element including a first smooth rounded corner on the display screen of the electronic device.

[0201] Specifically, after the processing unit of the electronic device (such as the CPU or GPU) completes the drawing of the interface elements, it can send the drawn interface elements to the display unit of the electronic device, which then displays the first interface element, including the first smooth rounded corners, on the screen. Figure 8B One or more icons in the desktop 800 shown. In one implementation, the rendering thread (e.g., RenderThread) in the rendering module / hardware-accelerated UI drawing module of the electronic device can perform time-sequential frame rendering tasks to render a first interface element containing a first smooth rounded corner.

[0202] It should be understood that the steps in the above-described method embodiments provided in this application can be implemented by integrated logic circuits in the processor hardware or by instructions in software form. The method steps disclosed in the embodiments of this application can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules in the processor.

[0203] This application also provides an electronic device that may include a memory and a processor. The memory may be used to store a computer program; the processor may be used to invoke the computer program in the memory to cause the electronic device to perform the method in any of the above embodiments.

[0204] This application also provides a chip system including at least one processor for implementing the functions involved in the methods performed by the electronic device in any of the above embodiments.

[0205] In one possible design, the chip system also includes a memory for storing program instructions and data, which may be located within or outside the processor.

[0206] The chip system can consist of chips or include chips and other discrete components.

[0207] Optionally, the chip system may contain one or more processors. These processors can be implemented in hardware or software. When implemented in hardware, the processor can be a logic circuit, an integrated circuit, etc. When implemented in software, the processor can be a general-purpose processor, implemented by reading software code stored in memory.

[0208] Optionally, the chip system may contain one or more memories. The memory may be integrated with the processor or disposed separately from it; this application embodiment does not limit this. For example, the memory may be a non-transient processor, such as a read-only memory (ROM), which may be integrated with the processor on the same chip or disposed separately on different chips. This application embodiment does not specifically limit the type of memory or the arrangement of the memory and processor.

[0209] For example, the chip system may be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a micro controller unit (MCU), a programmable logic device (PLD), or other integrated chips.

[0210] This application also provides a computer program product comprising: a computer program (also referred to as code or instructions) that, when run, causes a computer to perform the method executed by the electronic device in any of the above embodiments.

[0211] This application also provides a computer-readable storage medium storing a computer program (also referred to as code or instructions). When the computer program is run, it causes the computer to perform the method executed by the electronic device in any of the above embodiments.

[0212] The various embodiments of this application can be combined arbitrarily to achieve different technical effects.

[0213] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive).

[0214] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This program can be stored in a computer-readable storage medium, and when executed, it can include the processes described in the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory (RAM), magnetic disks, or optical disks.

[0215] In summary, the above description is merely an embodiment of the technical solution of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made according to the disclosure of the present invention should be included within the scope of protection of the present invention.< / canvas> < / video> < / videoview> < / imgview> < / textview>

Claims

1. A method of drawing a smooth fillet, characterized by, The method is applied to an electronic device, and the method comprises: obtaining a first corner parameter corresponding to a first interface element, the first corner parameter comprising a first radius, a first parameter and a second parameter, wherein the first parameter indicates a convex degree of a smooth corner of the first interface element, and the second parameter indicates a smooth degree of the smooth corner of the first interface element; determining a starting point, an ending point and a control point of a first Bezier curve according to the first radius, the first parameter and the second parameter; drawing the first Bezier curve based on the starting point, the ending point and the control point of the first Bezier curve; drawing a smooth corner corresponding to a first vertex in the first interface element based on the first Bezier curve, wherein the first interface element comprises a plurality of vertices, and the first vertex belongs to the plurality of vertices; determining a starting point, an ending point and a control point of a second Bezier curve after respectively performing coordinate transformation and mirror mapping on the starting point, the ending point and the control point of the first Bezier curve; drawing the second Bezier curve based on the starting point, the ending point and the control point of the second Bezier curve; drawing a smooth corner corresponding to a second vertex in the first interface element based on the second Bezier curve, wherein the second vertex comprises a vertex other than the first vertex in the plurality of vertices; drawing a plurality of smooth corners corresponding to the plurality of vertices based on the starting point, the ending point and the control point of the first Bezier curve until a first smooth corner is obtained, wherein the first smooth corner comprises the smooth corners corresponding to the plurality of vertices; adjusting the first smooth corner according to the first parameter and the second parameter, so that a tangent line of the first smooth corner is parallel to a tangent line of a hardware smooth corner of the electronic device; displaying the first interface element comprising the first smooth corner.

2. The method of claim 1, wherein, The second interface element and the first interface element belong to the same category, and the method further comprises: drawing a first smooth corner of the second interface element according to the first corner parameter; displaying the second interface element comprising the first smooth corner.

3. The method according to claim 1 or 2, characterized in that, The first Bezier curve comprises a first segment of a third-order Bezier curve and a second segment of a third-order Bezier curve.

4. The method of claim 3, wherein, The determining of the starting point, the ending point and the control point of the first Bezier curve according to the first radius, the first parameter and the second parameter comprises: determining a first point according to the first radius, wherein the first point is a starting point of the first segment of the third-order Bezier curve; determining a second point according to the first radius and the first parameter, wherein the second point is a first control point of the first segment of the third-order Bezier curve; determining a third point according to the first radius and the second parameter, wherein the third point is a second control point of the first segment of the third-order Bezier curve; determining a fourth point according to the third point, wherein the fourth point is an ending point of the first segment of the third-order Bezier curve.

5. The method of claim 4, wherein, The determining of the starting point, the ending point and the control point of the Bezier curve according to the first radius, the first parameter and the second parameter comprises: determining a starting point of the second segment of the third-order Bezier curve according to the fourth point; determine a first control point of the second segment of the cubic Bezier curve according to the fourth point and the first parameter; determine a second control point of the second segment of the cubic Bezier curve according to the fourth point and the second parameter; determine a termination point of the second segment of the cubic Bezier curve according to the first radius.

6. An electronic device, comprising: The electronic device comprises one or more processors; a memory; wherein the memory is coupled with the one or more processors, the memory is configured to store computer program code, the computer program code comprises computer instructions, and the one or more processors invoke the computer instructions to enable the electronic device to perform the method in any one of claims 1 to 5.

7. A chip system, characterized by The chip system is applied to an electronic device, and the chip system comprises one or more processors configured to invoke computer instructions to enable the electronic device to perform the method in any one of claims 1 to 5.

8. A computer program product comprising instructions, characterized in that, When the computer program product runs on an electronic device, the computer program product enables the electronic device to perform the method in any one of claims 1 to 5.

9. A computer-readable storage medium comprising instructions, characterized in that, When the instructions run on an electronic device, the instructions enable the electronic device to perform the method in any one of claims 1 to 5.

Images