Method for drawing smooth fillet and related device

Abstract

The invention provides a method for drawing a smooth fillet and a related device.The method is applied to electronic equipment with a rendering display function, the electronic equipment stores a first radius, a first parameter and a second parameter needed for drawing the smooth fillet, the first parameter is used for indicating the protruding degree of the smooth fillet, and the second parameter is used for indicating the protruding degree of the smooth fillet. The second parameter is used for indicating the smoothness of the smooth fillet. The electronic equipment can draw the smooth fillet of the interface element according to the first radius, the first parameter and the second parameter, and the interface element with the smooth fillet is displayed on the display screen. For example, a plurality of smooth fillets correspond to a set of parameters, or one interface element corresponds to a set of parameters, and when the plurality of smooth fillets corresponding to one / one / one type of interface elements are drawn, a set of parameters including the first radius, the first parameter and the second parameter are needed, so that the implementation complexity is reduced.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a method for drawing smooth rounded corners and a related device. Background Art

[0002] As people's electronic equipment functions are increasingly improved, mobile phones, tablet computers and other electronic devices display more and more content on their display pages, and the display forms are becoming more and more diverse, such as displaying small icons of applications or files in icon form, displaying application interfaces in window form, displaying detailed information in card form, displaying prompt information in pop-up form, and so on. In order to provide users with a good visual experience, the above display forms are usually smoothed and rounded to obtain a smooth rounded display effect. For example, when an electronic device displays an icon, the four vertices of the rectangular icon can be smoothed and rounded to display a rectangular icon with smooth rounded corners.

[0003] Generally speaking, electronic devices can perform smooth rounded corner processing based on third-order Bezier curves, but at least four coordinate points are required to draw a smooth rounded corner using a third-order Bezier curve. It is understandable that when there are more smooth rounded corners to be drawn, more coordinate points are required, which increases the complexity of drawing and the amount of calculation of the electronic device. Summary of the invention

[0004] A method for drawing smooth rounded corners and a related device provided in an embodiment of the present application can reduce the complexity of drawing smooth rounded corners and reduce the calculation amount of electronic equipment.

[0005] In a first aspect, the present application provides a method for drawing smooth rounded corners, which is applied to an electronic device, and the method includes:

[0006] Acquire a first fillet parameter corresponding to a first interface element, wherein the first fillet parameter includes a first radius, a first parameter, and a second parameter, wherein the first parameter indicates a convexity of a smooth fillet of the first interface element, and the second parameter indicates a smoothness of the smooth fillet of the first interface element;

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

[0008] The first interface element including the first smooth rounded corner is displayed.

[0009] It is understandable that smooth fillet is a fillet processing method, and compared with ordinary fillets, the transition from a straight line to a fillet is smoother. In the embodiment of the present application, when drawing the first smooth fillet corresponding to the first interface element, it is only necessary to obtain the first fillet parameter once, and the smooth fillet is drawn by using the parameters indicating the degree of protrusion and smoothness of the smooth fillet and the fillet radius, which can reduce the number of times data is read / acquired, thereby reducing the complexity of drawing the smooth fillet and reducing the amount of calculation of the electronic device.

[0010] In combination with the first aspect, in a possible implementation manner of the first aspect, the second interface element and the first interface element belong to the same category, and the method further includes:

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

[0012] A second interface element including the first smooth rounded corner is displayed.

[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, for example, the outlines of the graphics are the same, 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 the need to read data, further reducing the amount of calculation.

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

[0015] Determine a starting point, an ending point, and a control point of a Bezier curve according to the first radius, the first parameter, and the second parameter;

[0016] Draw the Bezier curve based on the starting point, the ending point and the control point;

[0017] A first smooth rounded corner of the first interface element is drawn based on the Bezier curve.

[0018] It can be seen that smooth rounded corners can be obtained more easily through Bezier curves, and determining a Bezier curve requires a starting point, an ending point, and a control point. The starting point, the ending point, and the control point can be determined based on the first radius, the first parameter, and the second parameter provided in the present application, so that the Bezier curve can be drawn more easily.

[0019] In combination with the first aspect, in a possible implementation manner of the first aspect, the Bezier curve includes a first segment of a third-order Bezier curve and a second segment of a third-order Bezier curve.

[0020] In the present application, in order to make the transition from a straight line to a rounded corner smoother, the present application splices the third-order Bezier curves at both ends together to obtain a smooth rounded corner.

[0021] In combination with the first aspect, in a possible implementation manner of the first aspect, determining 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 includes:

[0022] Determine 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;

[0023] Determine 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;

[0024] Determine 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;

[0025] A fourth point is determined according to the third point, wherein the fourth point is a termination point of the first segment of the third-order Bezier curve.

[0026] It can be seen that determining a third-order Bezier curve requires a starting point, a first control point, a second control point, and an end point. The electronic device can pre-store the first radius, the first parameter, and the second parameter, construct a starting point through the first radius, and then obtain other points based on a starting point, the first parameter, and the second parameter, thereby simplifying the point selection design of the Bezier curve.

[0027] In combination with the first aspect, in a possible implementation manner of the first aspect, determining 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 includes:

[0028] Determine a starting point of the second Bezier curve according to the fourth point;

[0029] Determine a first control point of the second segment of the third-order Bezier curve according to the fourth point and the first parameter;

[0030] Determine a second control point of the second segment of the third-order Bezier curve according to the fourth point and the second parameter;

[0031] The end point of the second segment of the third-order Bezier curve is determined according to the first radius.

[0032] It can be seen that the present application can connect the two ends of the Bezier curve end to end and splice them into a smooth rounded corner. Therefore, the end point of the first Bezier curve is the starting point of the second Bezier curve. The other points of the second Bezier curve can be determined according to the starting point, the first parameter and the second parameter, which simplifies the point selection design of the Bezier curve.

[0033] In combination with the first aspect, in a possible implementation manner 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] The first smooth rounded corner of the first interface element is adjusted according to the first parameter and the second parameter so that the tangent line of the first smooth rounded corner is parallel to the tangent line of the hardware smooth rounded corner of the electronic device.

[0035] It can be seen that the present application realizes a rounded corner through two Bezier curves, and the software rounded corner can be fine-tuned according to the hardware screen rounded corner.

[0036] In combination with the first aspect, in a possible implementation manner of the first aspect, the first smooth rounded corners include smooth rounded corners corresponding to multiple vertices of the interface element respectively.

[0037] In combination with the first aspect, in a possible implementation manner of the first aspect, drawing a 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 multiple vertices according to the first radius, the first parameter, and the second parameter;

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

[0040] It is understandable that according to the existing Bezier curve construction method, when drawing the rounded corners of one of the multiple vertices of the interface element, the electronic device needs to store four coordinate points, so the four vertices need to store 16 coordinate points. Therefore, the software developer needs to construct 16 coordinate points when developing an interface element, which is a great challenge for the developer. For electronic devices, when there are many interface elements, the storage volume is large and the calculation volume is also large. When drawing multiple vertices, it is necessary to obtain the coordinate points corresponding to each vertex multiple times, which requires more interactions and inconvenient operation. However, the present application only requires the electronic device to store the first fillet parameter including the first radius, the first parameter and the second parameter, obtain the first fillet parameter once, to construct a starting point and two parameters to obtain the remaining 15 coordinate points, which simplifies the point selection design of the Bezier curve and reduces the storage volume and complexity.

[0041] In a second aspect, an electronic device is provided by an embodiment of the present 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 comprises computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute the method for drawing smooth rounded corners described in the first aspect or any possible implementation of the first aspect.

[0042] In a third aspect, the present application provides a chip or a chip system, which includes at least one processor and a communication interface, wherein the communication interface and the at least one processor are interconnected through a line, and the at least one processor is used to run a computer program or instruction to execute 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, a pin, or a circuit, etc.

[0043] In a possible implementation, the chip or chip system described above in the embodiment of the present application further includes at least one memory, in which instructions are stored. The memory may be a storage unit inside the chip, such as a register, a cache, etc., or a storage unit of the chip (e.g., a read-only memory, a random access memory, etc.).

[0044] In a fourth aspect, an embodiment of the present application provides a computer storage medium, which stores a computer program. When the computer program is executed by a processor, the computer executes the method of drawing smooth rounded corners as described in the first aspect or any possible implementation of the first aspect.

[0045] In a fifth aspect, an embodiment of the present application provides a computer program product, which, when executed on a communication device, enables the communication device to execute a method for drawing smooth rounded corners as described in the first aspect or any possible implementation of the first aspect.

[0046] It should be understood that the description of technical features, technical solutions, beneficial effects or similar language in this application does not imply that all features and advantages can be realized in any single embodiment. On the contrary, it is understood that the description of features or beneficial effects means that specific technical features, technical solutions or beneficial effects are included in at least one embodiment. Therefore, the description of technical features, technical solutions or beneficial effects in this specification does not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions and beneficial effects described in the present embodiment can also be combined in any appropriate manner. Those skilled in the art will understand that the embodiment can be realized without one or more specific technical features, technical solutions or beneficial effects of a specific embodiment. In other embodiments, additional technical features and beneficial effects can also be identified in a specific embodiment that does not embody all embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] The following is an introduction to the drawings used in the embodiments of the present application.

[0048] Figure 1 This is an application scenario diagram of a smooth rounded corner provided by an embodiment of the present application;

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

[0050] Figure 3A Shown is a schematic diagram of a second-order Bezier curve;

[0051] Figure 3B Shown is a schematic diagram of a third-order Bezier curve;

[0052] Figure 4 A schematic diagram of concentric circles provided in an embodiment of the present application;

[0053] Figure 5 is a structural diagram of an electronic device 100 provided in an embodiment of the present application;

[0054] Figure 6 is a schematic diagram of the software architecture of the electronic device provided in the embodiment of the present application;

[0055] Figure 7 It is a schematic flow chart of a method for drawing smooth rounded corners provided in an embodiment of the present application;

[0056] Fig. 8A This is a schematic diagram of the effect of drawing a Bezier curve by calling an interface provided in an embodiment of the present application;

[0057] Figure 8B It is a schematic diagram of a smooth rounded corner of a graphic corresponding to a drawing icon provided in an embodiment of the present application;

[0058] Fig. 9 It is a schematic diagram of the remaining three vertices of a drawing icon provided in an embodiment of the present application. DETAILED DESCRIPTION

[0059] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations to the present application. As used in the specification and appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include plural expressions, unless there is a clear indication to the contrary in the context. It should also be understood that the term "and / or" used in the present application refers to and includes any or all possible combinations of one or more listed items.

[0060] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.

[0061] The term "user interface (UI)" in the specification, claims and drawings of this application refers to the medium interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface of an application is a source code written in a specific computer language such as Java and extensible markup language (XML). The interface source code is parsed and rendered on the terminal device and finally presented as content that can be recognized by the user, such as pictures, texts, buttons and other controls.

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

[0063] In order to better understand the present application, the following exemplary descriptions of some concepts related to the embodiments of the present application are given for reference. As shown below:

[0064] 1. Controls

[0065] Controls, also known as widgets, are basic elements of user interfaces. Typical controls include toolbars, menu bars, text boxes, buttons, scroll bars, images, and text. The properties and contents of controls in an interface are defined by tags or nodes, such as XML. <textview> 、 <imgview> 、 <videoview>The controls contained in the interface are specified by nodes such as . A node corresponds to a control or attribute in the interface. After parsing and rendering, the node is presented as user-visible content. In addition, many applications, such as hybrid applications, usually also contain web pages in their interfaces. A web page, also known as a page, can be understood as a special control embedded in the application interface. A web page is source code written in a specific computer language, such as hypertext markup language (HTML), cascading style sheets (CSS), JavaScript (JS), etc. The web page source code can be loaded and displayed as user-recognizable content by a browser or a web page display component with similar functions to a browser. The specific content contained in a web page is also defined by tags or nodes in the web page source code. For example, HTML is defined by 、 、 <video> 、 <canvas>To define the elements and attributes of a web page.

[0066] In computer programming, a widget (or part, component, widget, or control) is a graphical user interface element that displays information in an arrangement that can be changed by the user, such as a window or text box. A widget is a basic visual building block that is included in an application and controls all data that the application handles and the interactions with that data. Different combinations of widgets are usually packaged in widget toolkits, and programmers can build graphical user interfaces (GUIs). Most operating systems include a set of widgets for programming, which programmers can add to applications and specify their behavior. Widgets are usually defined as classes in object oriented programming (OOP). Therefore, many widgets are derived from class inheritance.

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

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

[0069] ListView control: used to display elements (or objects, which can contain text and pictures) in a list format. With this control, elements can be organized into columns with or without column headers, and accompanying icons and text can be displayed. You can use the ListView control to organize list items called ListItem elements (which can contain text and pictures) into one of the following four different views: large (standard) icons, small icons, lists, and reports. In addition, the control can also manage the sorting method of the elements in the list and the appearance of the selected element.

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

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

[0072] ViewPager control: provides the effect of switching multiple pages. This control is a container class, and other controls can be added to it. The ViewPager control requires the PagerAdapter adapter class to provide it with data. You can create an adapter to fill multiple views for the control. When the user swipes left or right, you can ImageView control: used to display images (pictures).

[0073] In a user interface, one or more controls can be used according to the layout requirements, or controls can be nested inside a control. Taking the LinearLayout control as an example, a horizontal layout view can be set based on the LinearLayout control, which is the parent view; on the parent view, two subviews, the first and second subviews, whose heights are equal to the height of the parent view, are set based on the LinearLayout control, and the layout of the two subviews is set to vertical arrangement; in the second subview, the third and fourth subviews are set based on the LinearLayout control, and the two subviews are arranged vertically on the parent view, and their widths are equal to the parent view.

[0074] It should be noted that the above is only an example of nested use of controls. In other examples, the controls that implement the parent view and the controls that implement the child view may also be different types of controls, and the embodiments of the present application do not limit this.

[0075] 2. Smooth rounded corners

[0076] Taking the current mainstream electronic devices as an example, the hardware appearance of electronic devices tends to be softer and smooth rounded corners in industrial design, thus showing a smooth rounded corner trend from the inside out. For example, the hardware frame of electronic devices presents smooth rounded corners. In order to adapt to the smooth rounded corners of the hardware appearance of electronic devices, the system user interface of electronic devices also adopts a smooth rounded corner design.

[0077] In addition, compared with other graphics, smooth rounded corners are easier to identify, have less visual impact, and are gentle and guiding.

[0078] See also Figure 1 , Figure 1 This is an application scenario diagram of smooth rounded corners provided in an embodiment of the present application. Figure 1 (a) is an application scenario diagram of smooth rounded corners on controls. Figure 1 (b) is an application scenario diagram of smooth rounded corners on a window. It is understandable that smooth rounded corners are not limited to the application scenarios provided in the embodiments of the present application, but can also be applied in other scenarios, such as outline stroke, filling, cutting, etc.

[0079] from Figure 1 As can be seen from (a), the system main interface 111 of the electronic device 100 includes application cards 112, application desktop folders 113, and application desktop icons 114. Among them, the application card 112 is used to display detailed information of the application, such as time, date, weather, schedule, etc., the desktop folder 113 is used to display icons of multiple applications, and the application desktop icon 114 is used to display small images corresponding to the application, and the card 112, desktop folder 113, and desktop icon 114 are all designed with smooth rounded corners. That is, the four vertices of the card 112, desktop folder 113, and desktop icon 114 are smooth rounded corners.

[0080] Taking opening a messaging application as an example, the electronic device 100 may receive a user operation of opening a messaging application, such as clicking a desktop icon of the messaging application. In response to the operation, the electronic device 100 may display a Figure 1 (b) The launch window 115 of the information application. Not limited to this, in other examples, the electronic device 100 may receive a user operation to display a small window (or an application window running in the background), such as a sliding operation from the bottom of the screen. In response to the operation, the electronic device 100 may display the following Figure 1 In some other examples, the electronic device 100 may also display the following: Figure 1 In some other examples, the electronic device 100 may also display the notification management window 117 of (b). Figure 1 (b) pop-up window 118, etc. Among them, the start window 115, the small window 116, the notification management window 117 and the pop-up window 118 are all designed with smooth rounded corners. That is, the four vertices of the start window 115, the small window 116, the notification management window 117 and the pop-up window 118 are smooth rounded corners.

[0081] Exemplarily, one or more of the card 112, desktop folder 113, desktop icon 114, startup window 115, small window 116, notification management window 117 and pop-up window 118 may use G1 smooth rounded corners or G2 smooth rounded corners. For example, the desktop folder 113, startup window 115 and small window 116 use G1 smooth rounded corners, and the desktop icon 114, notification management window 117 and pop-up window 118 use G2 smooth rounded corners. Among them, the G1 smooth rounded corner is a common smooth rounded corner, which is a uniform arc (1 / 4πd) determined by a given radius d and a center point. The G2 smooth rounded corners include smooth rounded corners determined by a second-order Bezier curve and smooth rounded corners determined by a third-order Bezier curve.

[0082] See also Figure 2 , Figure 2 is a schematic diagram of a smooth rounded corner provided in an embodiment of the present application. Figure 2 (a) is a schematic diagram of G1 smooth fillet. Figure 2 (b) is a G2 smooth fillet determined based on a second-order Bezier curve. Figure 2 (c) is the smooth rounded corner of G2 determined based on the third-order Bezier curve. Figure 2 (d) is a schematic diagram showing the relationship between the smooth rounded corners of elements in the user interface (taking a card as an example) and the smooth rounded corners of the electronic device hardware.

[0083] from Figure 2 It can be seen that under the same arc (that is, the ratio of arc length to radius is the same), Figure 2 The G1 smooth fillet shown in (a) is a smooth fillet with a 1 / 4 arc transition. Since the curvature of the straight line is 0 and the curvature of the arc is a fixed value, there is a sudden change in curvature from the straight line to the arc. Although it is tangent continuous (also called G1 continuous), it cannot achieve curvature continuity (also called G2 continuous). Therefore, the corresponding first display range is visually larger and the first display range is compressed inward, and Figure 2 The connection between the smooth rounded corner and the straight edge of G1 shown in (a) is discontinuous and abrupt.

[0084] Figure 2 The G2 smooth fillet shown in (b) uses a curve instead of a quarter arc as a transition. When drawing, the two ends of the connecting straight line must have continuous curvature, that is, the curvature of the corresponding curve in the second display range increases continuously from 0 at both ends. Compared with the first display range, Figure 2 The second display range corresponding to a G2 smooth rounded corner shown in (b) is visually smaller, and the center of the arc bulges outward, and the connection between the arc and the straight edge is smoother.

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

[0086] exist Figure 2 In the display area shown in (d), the smooth rounded corners of the application's card are associated with the hardware smooth rounded corners of the electronic device 100. When the curvature change of the smooth rounded corners of the application's card is more matched with the curvature change of the smooth rounded corners of the hardware of the electronic device 100, the curvature transition of the smooth rounded corners of the application's card is more natural, thereby optimizing the visual illusion brought about by the hardware smooth rounded corners and the card smooth rounded corners, providing users with a better viewing experience.

[0087] 3. Bezier curve

[0088] Bezier curve, also known as Bezier curve or Bezier curve, is a mathematical curve. It is often used in graphic design and computer graphics and is one of the most basic lines used in graphic modeling. Bezier curve consists of a series of control points and data points, which can be used to create smooth curves and surfaces. Among them, by adjusting the position of the control points, the entire curve can be adjusted.

[0089] There are several types of Bezier curves, including linear, quadratic, and cubic, among others.

[0090] like Figure 3A The following is a schematic diagram of a second-order Bezier curve. Figure 3A It can be seen that the second-order Bezier curve 101 is a curve determined by three points (including point A, point B and point C). Point A is used as the starting point, point C is used as the ending point, and point B is used as the control point. First, point D and point E are determined on line segment AB and line segment AC respectively. Point E and point E are placed on point A and point B respectively, and they are moved respectively. Point D is required to move uniformly in the direction where point B is located, and point E is required to move uniformly in the direction where point C is located, so that they meet Then, connect point D and point E to determine line segment DE, and determine point F on line segment DE. First, place point F on point D and require point F to move uniformly in the direction of point E so that it satisfies Finally, all points that meet the above conditions are found, and the second-order Bezier curve 101 can be determined through the motion trajectory of the points.

[0091] It can be seen that the second-order Bezier curve includes three points, which form two line segments, and one point moves on each line segment, thereby obtaining two points. These two points form a line segment, and one point moves on this line segment, thereby obtaining a point. Finally, the motion trajectory of this point constitutes the second-order Bezier curve 101.

[0092] like Figure 3B The following is a schematic diagram of a third-order Bezier curve. Figure 3B It can be seen that the third-order Bezier curve 102 is a curve determined by four points (including point A, point B, point C and point D). Point A is used as the starting point, point D is used as the end point, and points B and C are used as control points. First, point E, point F and point G are determined on line segment AB, line segment BC and line segment CD respectively. Point E, point F and point G are placed on point A, point B and point C respectively, and they move respectively. Point E is required to move uniformly in the direction of point B, point F is required to move uniformly in the direction of point C, and point G is required to move in the direction of point D, so that they meet Then, connect point E and point F to determine line segment EF, connect point F and point G to determine line segment FG, and confirm point H and point I on line segment EF and line segment FG respectively. First, place point H and point I on point E and point 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, so that they satisfy Then, connect point H and point I to determine line segment HI, and determine point J on line segment HI. Point J is required to move uniformly from point H to the direction of point I so that it satisfies Finally, all points that meet the above conditions are found, and the third-order Bezier curve 102 can be determined through the movement trajectory of the points.

[0093] It can be seen that the third-order Bezier curve consists of four points, which form three line segments. There is a point moving on each line segment, thus obtaining three points. These three points form two line segments, and there is a point moving on each line segment, thus obtaining two points. These two points form a line segment, and there is a point moving on this line segment, thus obtaining a point. Finally, the motion trajectory of this point constitutes the third-order Bezier curve.

[0094] Among them, the smooth rounded corner determined based on the third-order Bezier curve is smoother and more oblate than the smooth rounded corner determined based on the second-order Bezier curve.

[0095] From the above description, we can see that for the third-order Bezier curve, when point A and point D are confirmed, the shape of the third-order Bezier curve is also determined. The shape of the G2 smooth fillet determined by the third-order Bezier curve needs to be adjusted by software, which may bring some limitations. Take the card smooth fillet as an example. Figure 4 A schematic diagram of concentric circles provided in an embodiment of the present application. The card smooth fillet is a G2 smooth fillet determined based on a third-order Bezier curve. Figure 4 It can be seen that r1 is the radius of the hardware smooth fillet, r2 is the radius of the card smooth fillet, line a is the tangent of the hardware smooth fillet, and line b is the tangent of the card smooth fillet. In order to make the card smooth fillet parallel to the hardware smooth fillet, that is, to make line a and line b parallel, it is necessary to fine-tune the G2 curve through software to correspond to the arc of the hardware smooth fillet, so that the card smooth fillet is parallel to the hardware smooth fillet. Because another software needs to be introduced to fine-tune the G2 smooth fillet, it will bring some limitations and inconvenience.

[0096] From the above description, we can also know that to draw a G2 smooth rounded corner determined by a third-order Bezier curve, the electronic device needs to read data four times to obtain data of four coordinate points. The four corners need to obtain data of 16 coordinate points, which is more troublesome to implement and increases the complexity of drawing, thereby increasing the calculation amount of the electronic device.

[0097] Based on this, the present application provides a method for drawing smooth rounded corners, which is applied to an electronic device with a rendering display function, and the electronic device stores: a first radius, a first parameter, and a second parameter required for drawing a smooth rounded corner, wherein the first parameter is used to indicate the convexity of the smooth rounded corner, and the second parameter is used to indicate the smoothness of the smooth rounded corner. The electronic device can draw the smooth rounded corners of the interface element according to the first radius, the first parameter, and the second parameter, and display the interface element with the smooth rounded corner on the display screen.

[0098] In one implementation, the electronic device can determine 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; draw the Bezier curve based on the starting point, the ending point, and the control point; and draw a smooth rounded corner based on the Bezier curve. The Bezier curve includes a first segment of a third-order Bezier curve and a second segment of a third-order Bezier curve, and a smooth rounded corner can be obtained based on the first segment of the third-order Bezier curve and the second segment of the third-order Bezier curve.

[0099] Exemplarily, multiple smooth fillets correspond to a set of parameters, or one interface element corresponds to a set of parameters. When drawing multiple smooth fillets corresponding to a type / one / class of interface elements, only the first radius, first parameter, and second parameter are required, which reduces the complexity of implementation. However, the existing solution is that one fillet corresponds to a set of coordinates, and one interface element corresponds to multiple sets of coordinates. For each vertex of an interface element, the coordinates corresponding to the vertex need to be read to determine the smooth fillet of the vertex. This needs to be performed multiple times, and the operation is complicated, which is not conducive to implementation.

[0100] First of all, the electronic device in the embodiments of the present application can be a smart screen device, a smart television (television, 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 (personal digital assistant, PDA), a wearable device (such as: a smart watch, a smart bracelet), and other devices with display functions. The embodiments of the present application do not impose any special restrictions on the specific form of the electronic device.

[0101] For example, taking the electronic device as a mobile phone, Figure 5 is a schematic diagram of the structure of an electronic device 100 provided in an embodiment of the present application. That is, exemplary, Figure 5 The electronic device shown may 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, an earphone interface 170D, a sensor module 180, a button 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, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light 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 to be understood that the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or separate some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0104] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0105] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

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

[0107] The charging management module 140 is used to receive charging input from the charger. The power management module 141 is used to connect 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 provides power to the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle number, battery health status (leakage, impedance), etc. In another embodiment, the power management module 141 can also be set in the processor 110. In another embodiment, the power management module 141 and the charging management module 140 can also be set in the same device.

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

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

[0110] The mobile communication module 150 can provide wireless communication solutions including second generation (2G) / third generation (3G) / fourth generation (4G) / fifth generation (5G) / sixth generation (6G) applied to the electronic device 100. 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 from the antenna 1, and filter, amplify and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In one embodiment, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In one embodiment, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0111] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate 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 the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In one embodiment, the modem processor may be an independent device. In another embodiment, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0112] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. 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 the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0113] In one embodiment, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through 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 technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

[0114] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change 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 a smooth rounded corner obtained by a smooth rounded corner drawing method provided in the present application. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light emitting diode (QLED), etc. In one embodiment, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0116] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0117] ISP is used to process the data fed back by camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to ISP for processing and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on the noise, brightness, and color of the image. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In one embodiment, ISP can be set in camera 193.

[0118] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In one embodiment, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0119] The external memory 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 memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

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

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

[0122] The audio module 170 is used to convert digital audio information into analog audio signal output, and also used to convert analog audio input into digital audio signal. The audio module 170 can also be used to encode and decode audio signals.

[0123] Speaker 170A, also called a "horn", is used to convert audio electrical signals into sound signals.

[0124] Receiver 170B, also called "earpiece", is used to convert audio electrical signals into sound signals.

[0125] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals.

[0126] The earphone jack 170D is used to connect a wired earphone.

[0127] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In one embodiment, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. A capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure based on the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 100 detects the intensity of the touch operation based on the pressure sensor 180A. The electronic device 100 can also calculate the touch position based on the detection signal of the pressure sensor 180A. In one embodiment, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions.

[0128] The gyro sensor 180B may be used to determine the motion posture of the electronic device 100. In one embodiment, the angular velocity of the electronic device 100 around three axes (ie, x, y, and z axes) may be determined by the gyro sensor 180B.

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

[0130] The magnetic sensor 180D includes a Hall sensor, and the electronic device 100 can detect the opening and closing of the flip leather case by using the magnetic sensor 180D.

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

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

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

[0134] The ambient light sensor 180L is used to sense the brightness of ambient light.

[0135] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can use the collected fingerprint characteristics to implement fingerprint unlocking, access application locks, fingerprint photography, fingerprint call answering, etc.

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

[0137] The touch sensor 180K is also called a "touch control device". The touch sensor 180K can be set on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch control screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass 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 the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0138] Bone conduction sensor 180M can obtain vibration signals.

[0139] The key 190 includes a power key, a volume key, etc. The key 190 may be a mechanical key or a touch key. The electronic device 100 may receive key input and generate key signal input related to user settings and function control of the electronic device 100.

[0140] The motor 191 can generate a vibration prompt. The indicator 192 can be an indicator light, which can be used to indicate the charging status, power change, and can also be used to indicate messages, missed calls, notifications, etc. The SIM card interface 195 is used to connect a SIM card.

[0141] The software system of an electronic device (such as a mobile phone) can adopt a layered architecture, a transaction-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. This application embodiment takes the Android system with a layered architecture as an example to illustrate the software architecture of a mobile phone. Figure 6 , Figure 6 It is a schematic diagram of the software architecture of the electronic device provided in the embodiment of the present application.

[0142] The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer, the application framework layer (frame), the Android runtime (Android runtime), the system library, and the kernel layer.

[0143] The application layer may include a series of application packages.

[0144] like Figure 6 As shown, the applications may include gallery, desktop, call, message, memo, file, navigation, video, music and other applications.

[0145] The desktop application is the system desktop, which can be called Launcher or "HomeScreen", which is the first application seen after the electronic device is turned on. It is used to display and manage other applications installed in the electronic device.

[0146] The call application is a call application. When the call application is turned on, the user can make a call through the electronic device. The electronic device can determine that the audio scene is a voice call scene according to the running application. For example, in response to the user's operation of answering a call on the call application, the call application can determine that the call is connected through the phone manager of the application framework layer. Then, the phone manager can call the audio hardware abstraction of the abstract layer to start the hardware involved in the call process such as the microphone, the receiver, and the screen sound device, so that the electronic device starts the call application, and the user can start the call.

[0147] By opening music applications and video applications, users can play audio through electronic devices, and the electronic devices can determine the audio scene as an audio file playback scene based on the running application. For example, in response to the user's operation of playing a music file on a music application, the music application can determine the audio file through the audio playback management service of the application framework layer. Then, the audio playback management service can call the audio hardware of the abstract layer to start the hardware involved in the music playback process such as speakers and earpieces, so that the electronic device starts the music application and starts playing the music file.

[0148] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

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

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

[0151] The phone manager is used to provide communication functions for electronic devices, such as the management of call status (including answering, hanging up, etc.).

[0152] The window manager is used to manage window programs. The window management service can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0153] Content providers are used to store and retrieve data and make it accessible to applications. The above data can include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

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

[0155] The resource management service provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0156] The notification management service enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification management service is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, it can prompt text information in the status bar, emit a prompt sound, vibrate, and flash the indicator light.

[0157] Android Runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

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

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

[0160] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), rendering module, etc.

[0161] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0162] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[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 drawing engine for 2D drawings.

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

[0166] The following is an illustrative description of the workflow of the software and hardware of the electronic device 100 in conjunction with the display scenario.

[0167] When the touch sensor 180K receives a touch operation, the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into an original input event (including touch coordinates, timestamp of the touch operation, and other information). The original input event is stored in the kernel layer. The application framework layer obtains the original input event from the kernel layer and identifies the control corresponding to the input event. Taking the touch operation used to start the desktop application as an example, the desktop application calls the interface of the application framework layer to obtain the first coordinate point, the first radius, the first parameter, and the second parameter corresponding to the interface element of the first application managed by the desktop application. Exemplarily, the first coordinate point is the coordinate of the upper left vertex of the icon corresponding to the first application. The application framework layer calls the system library, and the system library draws the smooth fillet corresponding to the first coordinate point of the first application according to the first coordinate point, the first radius, the first parameter, and the second parameter, and then draws the remaining three smooth fillets based on the smooth fillet corresponding to the first coordinate point by mirror mapping. Finally, by calling the kernel layer to control the display driver, the interface element of the first application including the smooth fillet is displayed through the display screen 194.

[0168] See also Figure 7 , Figure 7 is a schematic diagram of a method for drawing smooth rounded corners provided in an embodiment of the present application. The method can be based on Figure 5 The hardware architecture of the electronic device shown and / or Figure 6 The method can be implemented based on the software architecture of the electronic device shown in the figure, or can be implemented based on other architectures. The method includes steps S701 to S703. For the convenience of description, the present application is described in the order of steps S701 to S703, and is not intended to limit the execution to the above order. The embodiments of the present application do not limit the execution order, execution time, execution number, etc. of the above one or more steps.

[0169] Step S701: Obtain a first fillet parameter corresponding to a first interface element.

[0170] It is understandable that in the user interface of an electronic device, there are interface elements such as windows and controls, and the interface elements are represented in the user interface in the form of graphics. Generally speaking, the graphics corresponding to the interface element include four vertices. In order to improve the aesthetics of the graphics and the user's perception, before displaying the graphics corresponding to the interface element in the user interface, the four vertices of the graphics need to be smoothed and rounded to obtain four smooth rounded corners corresponding to the four vertices.

[0171] Therefore, the electronic device determines the first interface element to be displayed in response to the user operation, and then obtains the first fillet parameter required for drawing the smooth fillet of the graphics corresponding to the first interface element. The first fillet parameter includes one or more of a first radius, a first parameter, and a second parameter, wherein the first parameter is used to indicate the degree of protrusion of the smooth fillet of the first interface element, and the second parameter is used to indicate the degree of smoothness of the smooth fillet of the first interface element, and the first radius is the radius of curvature corresponding to the G1 smooth fillet. It can be understood that when the drawn interface elements are different, for example, when the interface elements do not belong to the same category and the graphic sizes of the interface elements are different, the first radius, the first parameter, and the second parameter may also be different.

[0172] For example, the electronic device responds to the user operation on the button 190, starts the operating system and starts the desktop application, determines the position coordinates and quantity of the icons, folders, cards and other interface elements of the application that can be managed by the desktop application, and then obtains the smooth fillet parameters (including the first radius, the first parameter and the second parameter) corresponding to the icons, folders, cards and other interface elements of the application. When the smooth fillets corresponding to the graphics of the icons, folders, cards and other interface elements are different, the corresponding smooth fillet parameters are also different; when the smooth fillets corresponding to the graphics of the icons, folders, cards and other interface elements are the same, the smooth fillet parameters are also the same.

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

[0174] Specifically, it can be seen from the above description that the smooth fillet drawn based on the Bezier curve can make the transition of the connecting segment of the curve and the straight line smooth, that is, to ensure that the change of the partial curvature of the middle segment of the curve is extremely gentle. Therefore, in a possible implementation, when the electronic device draws multiple smooth fillets of any interface element, it can determine the end point and two control points of the Bezier curve according to the smooth fillet parameters of the interface element (i.e., the first radius, the first parameter, and the second parameter), and then call the interface encapsulated with the Bezier curve to draw the Bezier curve based on the end point and the two control points, and finally obtain multiple smooth fillets of the interface element based on the Bezier 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 contours 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 corners of the second interface element based on the first rounded corner parameters obtained when drawing the first smooth rounded corners of the first interface element, thereby further reducing the amount of calculation.

[0176] For example, see Fig. 8A , Fig. 8A Schematic diagram of the effect of drawing a Bezier curve by calling an interface provided in an embodiment of the present application. Fig. 8A As shown, after the electronic device creates a path instance, it first calls the path.move To method to set the starting point, that is, to set the starting point of the next contour to point (x0, y0), and then the electronic device calls path.cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) to set the control point and end point of the third-order Bezier curve, that is, to add a third-order Bezier from the last point, close to the control points (x1, y1) and (x2, y2), and end at (x3, y3). If moveTo() is not called for the secondary contour, the first point will be automatically set to (0, 0). It can be seen that calling the cubicTo() interface to draw a third-order Bezier curve only requires considering the construction of points (x0, y0), ..., (x3, y3), without considering the implementation of the connection part.

[0177] In a possible implementation, the Bezier curve includes a first Bezier curve segment and a second Bezier curve segment, that is, a smooth rounded corner is achieved by splicing the two Bezier curve segments.

[0178] In one implementation, the electronic device determines a first point (i.e., the position coordinates of the first point) according to a first radius, wherein the first point is the starting point of the first segment of the third-order Bezier curve. The electronic device determines a second point (i.e., the position coordinates of the second point) according to the first radius and the first parameter, and determines a third point (i.e., the position coordinates of the third point) according to the first radius and the second parameter, wherein the second point and the third point are control points of the first segment of the third-order Bezier curve. The electronic device determines a fourth point (i.e., the position coordinates of the fourth point) according to the third point, wherein the fourth point is the end point of the first segment of the third-order Bezier curve.

[0179] In one implementation, the termination point of the first segment of the third-order Bezier curve is the starting point of the second segment of the third-order Bezier curve. Therefore, the electronic device determines the starting point of the second segment of the third-order Bezier curve according to the fourth point, determines the first control point of the second segment of the third-order Bezier curve according to the fourth point and the first parameter, determines the second control point of the second segment of the third-order Bezier curve according to the fourth point and the second parameter, and determines the termination point of the second segment of the third-order Bezier curve according to the first radius.

[0180] For example, take the example of drawing the smooth rounded corners of the graphic corresponding to the icon interface element, see Figure 8B , Figure 8B It is a schematic diagram of a smooth rounded corner of a graphic corresponding to a drawn icon provided in an embodiment of the present application.

[0181] like Figure 8B As shown, a page with application icons is displayed in the desktop 800, and the page includes multiple application icons (for example, a setting application icon, an application market application icon, a gallery application icon, a browser application icon, etc.). After the electronic device responds to a user operation on a certain application icon, the electronic device can execute the application corresponding to the application icon. A page indicator is also displayed below the multiple application icons to indicate the positional relationship between the currently displayed page and other pages. A tray area is displayed below the page indicator. Among them, the tray area includes multiple tray icons, for example, a camera application icon, an address book application icon, a phone application icon, and an information application icon. The tray area remains displayed when the page is switched. In some embodiments, the above-mentioned page may also include multiple application icons and a page indicator. The page indicator may not be part of the page and exists separately. The above-mentioned tray icon is also optional, and the embodiment of the present application does not limit this.

[0182] It is understandable that the electronic device 100 may draw a graphic corresponding to each application icon before displaying the application icons in the desktop 800. For example, when drawing a rectangular icon of an application (such as a rectangular icon of a browser application), the electronic device may perform smooth rounding on the four vertices of the rectangular icon, cut the rigid right-angle turning vertices into smooth rounded corners, and then display the icon after the smooth rounding, so as to achieve the purpose of improving the display effect.

[0183] from Figure 8B It can be seen that the four vertices of the rectangular icon of the browser application can be recorded as point A, point B, point D and point C in the clockwise direction. When drawing the smooth rounded corners of the browser application icon, the electronic device can confirm the coordinates required for drawing the smooth rounded corners of one of the four vertices according to the first radius, the first parameter and the second parameter, and then determine the coordinate points required for drawing the smooth rounded corners of the other three vertices by means of coordinate change, mirror mapping, etc., and then draw the four smooth rounded corners of the browser application based on the third-order Bezier curve according to the coordinate points corresponding to each vertex.

[0184] Next, take drawing the smooth rounded corner corresponding to point A in the upper left corner of the browser application icon as an example, where the smooth rounded corner corresponding to point A includes two segments of third-order Bezier curves, that is, a smooth rounded corner is obtained by splicing two segments of Bezier curves. First, when drawing the first segment of the third-order Bezier curve, the XY coordinate system can be determined with point A (x0, y0) as the origin (0, 0), and the smooth rounded corner corresponding to point A is drawn in the lower left area of ​​the XY coordinate system.

[0185] Continue to refer Figure 8B Based on the XY coordinate system determined by point A (x0, y0) as the origin (0, 0), taking drawing the smooth rounded corner corresponding to point A in the lower right area 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 according to the first radius (such as G1 smooth fillet curvature), that is, the origin (0, 0) can be moved downward by the distance of the first radius R on the Y axis to obtain the coordinates of the first point 801 (x1, y1) = (0, R).

[0187] Step S2: Determine the coordinates (x2, y2) of the second point 802 according to the first parameter (param1), that is, the origin (0, 0) can be moved downward by the first distance 8020 on the Y-axis to obtain the coordinates of the second point 802, wherein the first parameter is used to indicate the degree of protrusion of the smooth rounded corner, and the first distance 8020 is used to indicate the degree of protrusion of the smooth rounded corner determined based on the first radius. Exemplarily, the first distance 8020 is the ratio (R / param1) of the first radius R and the first parameter (param1), so the coordinates of the second point 802 (x1, y1) = (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 origin (0, 0) can be moved downward by the second distance 8030 on the Y-axis to obtain the coordinates of the third point 803, wherein 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. Exemplarily, the second distance 8030 is the ratio of the first radius R to the second parameter (param2) (R / param2), so the coordinates (x3, y3) of the third point 803 are (0, R / param2).

[0189] Step S4: Determine the coordinates of the fourth point 804 according to the coordinates of the third point 803, wherein the coordinates of the fourth point 804 are used to indicate the end point of the first Bezier curve. Exemplarily, the coordinates of the fourth point 804 are half of the sum of the coordinates of the third point 803, that is, the coordinates of the fourth point 804 (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 Bezier curve. Figure 3B It can be seen that Figure 8B The first point 801 shown is used as the starting point, the fourth point 804 is used as the ending point, the second point 802 and the third point 803 are used as control points, and the Figure 7 It can be seen that the electronic device calls the interface encapsulating the third-order Bezier curve to draw the first segment of the third-order Bezier curve.

[0191] It should be noted that step S1, step S2 and step S3 can be performed simultaneously. Based on this, the electronic device determines the first segment of the third-order Bezier curve required for drawing the smooth rounded corner according to the first radius, the first parameter and the second parameter.

[0192] Step S6, taking the fourth point 804 as a new starting point and the end point as (R, 0), repeating steps S2, S3 and S5 to complete drawing of the second segment of the third-order Bezier curve.

[0193] It is understandable that, because the first section Bezier curve and the second section Bezier curve are connected end to end and spliced ​​together to achieve a smooth fillet, the termination point of the first section Bezier curve is the starting point of the second section Bezier curve. Therefore, the fourth point 804 can be used as the starting point of the second section Bezier curve, and the electronic device can draw the second section Bezier curve according to the fourth point 804, the first parameter, the second parameter and the first radius. Exemplarily, according to step S1, step S2, step S3 and the above description, the electronic device can determine the coordinates of the first control point according to the coordinates of the fourth point 804 and the first parameter, that is, the coordinates (x4, y4) of the fourth point 804 are moved to the right by the first distance 8020 on the X-axis to obtain a control point. The coordinates of the second control point are determined according to the coordinates of the fourth point 804 and the second parameter, that is, the coordinates (x4, y4) of the fourth point 804 are moved to the right by the second distance 8030 on the X-axis to obtain a control point. It can be understood that the smooth fillet corresponding to point A includes the second Bezier curve, and point A is the coordinate origin, so the tangent of the second Bezier curve at the end point is parallel to or overlaps with the horizontal axis where the coordinate origin A is located. Therefore, the coordinates of the end point can be determined according to the first radius, that is, the coordinate origin (0, 0) can be moved to the right by the distance of the first radius R on the X-axis to obtain the coordinates of the end point (R, 0). Finally, the electronic device calls the interface encapsulated with the third-order Bezier curve, and can draw the second third-order Bezier curve for the end point according to the two control points corresponding to the determined second Bezier curve. Finally, the electronic device splices the first Bezier curve and the second Bezier curve end to end to determine the smooth fillet corresponding to the upper left vertex A of the browser application icon.

[0194] For drawing the round vertices corresponding to the upper right vertex B, the lower left vertex C and the lower right vertex D of the browser application icon, the coordinate points required for drawing the third-order Bezier curves corresponding to the remaining three vertices (including the upper right vertex B, the lower left vertex C and the lower right vertex D) can be determined by mirror mapping, and then steps S1 to S6 are repeated to draw the first third-order Bezier curve and the second third-order Bezier curve required for drawing the upper right vertex B, the lower left vertex C and the lower right vertex D. The first third-order Bezier curve and the second third-order Bezier curve corresponding to each vertex are spliced ​​together to obtain a smooth rounded corner corresponding to each vertex.

[0195] For example, see Fig. 9 , Fig. 9 is a schematic diagram of the remaining three vertices of a drawing icon provided by an embodiment of the present application, such as Fig. 9 As shown, each vertex of the icon corresponds to two Bezier curves, the solid line is the first Bezier curve, and the dotted line is the second Bezier curve. After determining the coordinate points required for drawing the first Bezier curve and the second Bezier curve corresponding to vertex A (including but not limited to the first point 801, the second point 802, the third point 803 and the fourth point 804), the coordinate points required for drawing the first Bezier curve and the second Bezier curve corresponding to vertex B, vertex C and vertex D can be determined by mirror mapping. Among them, Fig. 9 The coordinate points required for drawing the second Bezier curve corresponding to each vertex are not illustrated.

[0196] from Fig. 9 It can be seen that the first point 801, the second point 802, the third point 803 and the fourth point 804 required for the first Bezier curve corresponding to the drawing point A and the starting point, two control points and the end point required for the second Bezier curve can be obtained by mapping X=AB / 2 to obtain the first point 8011, the second point 8021, the third point 8031 ​​and the fourth point 8041 required for the first Bezier curve corresponding to the drawing point B and the starting point, two control points and the end point required for the second Bezier curve. Similarly, the first point 801, the second point 802, the third point 803 and the fourth point 804 required for the first Bezier curve corresponding to the drawing point A and the starting point, two control points and the end point required for the second Bezier curve can be obtained by mapping Y=AC / 2 to obtain the first point 8012, the second point 8022, the third point 8032 and the fourth point 8042 required for the first Bezier curve corresponding to the drawing point C and the starting point, two control points and the end point required for the second Bezier curve. The first point 8011, the second point 8021, the third point 8031 ​​and the fourth point 8041 required for the first Bezier curve corresponding to the drawing point B, as well as the starting point, two control points and the ending point required for the second Bezier curve are mapped to Y=AC / 2 to obtain the first point 8013, the second point 8023, the third point 8033 and the fourth point 8043 required for the first Bezier curve corresponding to the drawing point D, as well as the starting point, two control points and the ending point required for the second Bezier curve.

[0197] Alternatively, the electronic device can determine the starting point coordinates of the smooth rounded corners of the remaining three vertices based on the mirror mapping method, and then repeat the above steps S1 to S6 to obtain the coordinate points required by the Bezier curves corresponding to the remaining three vertices. Therefore, based on the coordinate points required by each Bezier curve as input parameters, cubicTo() can be called to draw the Bezier curve.

[0198] It can be seen that the present application can determine the 15 coordinate points required for drawing smooth rounded corners of an icon by constructing a starting point and two parameters (including a first parameter and a second parameter), thereby simplifying the point selection design of the Bezier curve.

[0199] In a possible implementation, after drawing a smooth fillet, the electronic device can also adjust the parallelism of the smooth fillet according to the first parameter and the second parameter, so that the tangent of the smooth fillet is parallel to the tangent of the hardware smooth fillet of the electronic device. Exemplarily, the value range of the first parameter = [1.0, 3.0], the value range of the second parameter = [1.0, 3.0], the electronic device can fine-tune the software smooth fillet (that is, the smooth fillet determined by the third-order Bezier curve) according to the hardware screen smooth fillet based on the value range of the first parameter and the value range of the second parameter, so that the software smooth fillet is parallel to the hardware smooth fillet, that is, the quarter tangent of the software smooth fillet is parallel to the quarter tangent of the hardware smooth fillet.

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

[0201] Specifically, after the processing unit (such as a CPU or a GPU) of the electronic device completes drawing of the interface element, the drawn interface element can be sent to the display unit of the electronic device, and the display unit displays the first interface element including the first smooth rounded corner on the display screen, for example Figure 8B One or more icons in the desktop 800 shown. In one implementation, a rendering thread (such as RenderThread) in a rendering module / hardware-accelerated UI drawing module of the electronic device can perform a timed frame rendering task, thereby rendering a first interface element including a first smooth rounded corner.

[0202] It should be understood that each step in the above method embodiment provided by the present application can be completed by an integrated logic circuit of hardware in a processor or by instructions in the form of software. The method steps disclosed in the embodiments of the present application can be directly embodied as being executed by a hardware processor, or by a combination of hardware and software modules in a processor.

[0203] The present application also provides an electronic device, which may include: a memory and a processor, wherein the memory may be used to store a computer program; and the processor may be used to call the computer program in the memory so that the electronic device executes the method in any one of the above embodiments.

[0204] The present application also provides a chip system, which includes at least one processor for implementing the functions involved in the method executed by the electronic device in any of the above embodiments.

[0205] In one possible design, the chip system also includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.

[0206] The chip system may be composed of the chip, or may include the chip and other discrete devices.

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

[0208] Optionally, the memory in the chip system may also be one or more. The memory may be integrated with the processor or may be separately arranged with the processor, which is not limited in the embodiments of the present application. Exemplarily, 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 may be arranged on different chips respectively. The embodiments of the present application do not specifically limit the type of memory and the arrangement of the memory and the processor.

[0209] Exemplarily, the chip system can 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 microcontroller unit (MCU), a programmable logic device (PLD) or other integrated chips.

[0210] The present application also provides a computer program product, which includes: a computer program (also referred to as code, or instruction), which enables a computer to execute the method executed by the electronic device in any of the above embodiments when the computer program is executed.

[0211] The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program (also referred to as code or instruction). When the computer program is executed, the computer executes the method executed by the electronic device in any of the above embodiments.

[0212] The various implementation modes of the present application can be combined arbitrarily to achieve different technical effects.

[0213] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of 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, the process or function described in this application is generated in whole or in part. 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 computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integration. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk Solid State Disk), etc.

[0214] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

[0215] In short, the above description is only an embodiment of the technical solution of the present invention, and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present invention shall be included in the protection scope of the present invention.< / canvas> < / video> < / videoview> < / imgview> < / textview>

Claims

1. A method for drawing smooth rounded corners, characterized in that: Applied to electronic equipment, the method comprises: Acquire a first fillet parameter corresponding to a first interface element, wherein the first fillet parameter includes a first radius, a first parameter, and a second parameter, wherein the first parameter indicates a convexity of a smooth fillet of the first interface element, and the second parameter indicates a smoothness of the smooth fillet of the first interface element; Draw a first smooth rounded corner of the first interface element according to the first rounded corner parameter; The first interface element including the first smooth rounded corner is displayed.

2. The method according to claim 1, characterized in that The second interface element and the first interface element belong to the same category, and the method further includes: Draw a first smooth rounded corner of the second interface element according to the first rounded corner parameter; A second interface element including the first smooth rounded corner is displayed.

3. The method according to claim 1 or 2, characterized in that: Drawing the first smooth rounded corner of the first interface element according to the first rounded corner parameter includes: Determine a starting point, an ending point, and a control point of a Bezier curve according to the first radius, the first parameter, and the second parameter; Draw the Bezier curve based on the starting point, the ending point and the control point; A first smooth rounded corner of the first interface element is drawn based on the Bezier curve.

4. The method according to claim 3, characterized in that The Bezier curve includes a first segment of a third-order Bezier curve and a second segment of a third-order Bezier curve.

5. The method according to claim 4, characterized in that The determining 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 includes: Determine 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; Determine 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; Determine 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; A fourth point is determined according to the third point, wherein the fourth point is a termination point of the first segment of the third-order Bezier curve.

6. The method according to claim 5, characterized in that The determining 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 includes: Determine a starting point of the second Bezier curve according to the fourth point; Determine a first control point of the second segment of the third-order Bezier curve according to the fourth point and the first parameter; Determine a second control point of the second segment of the third-order Bezier curve according to the fourth point and the second parameter; The end point of the second segment of the third-order Bezier curve is determined according to the first radius.

7. The method according to any one of claims 1 to 6, characterized in that: 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: The first smooth rounded corner of the first interface element is adjusted according to the first parameter and the second parameter so that the tangent line of the first smooth rounded corner is parallel to the tangent line of the hardware smooth rounded corner of the electronic device.

8. The method according to any one of claims 1 to 7, characterized in that: The first smooth fillet includes smooth fillets corresponding to a plurality of vertices of the interface element.

9. The method according to claim 8, characterized in that Drawing the first smooth rounded corner of the first interface element according to the first rounded corner parameter includes: Draw a smooth rounded corner corresponding to one of the multiple vertices according to the first radius, the first parameter, and the second parameter; The smooth rounded corners corresponding to the remaining vertices of the plurality of vertices are drawn based on the smooth rounded corner corresponding to one of the vertices in a mirror mapping manner.

10. An electronic device, characterized in that: The electronic device comprises: 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 comprises computer instructions, and the one or more processors call the computer instructions so that the electronic device executes the method as described in any one of claims 1-9.

11. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the processor is used to call computer instructions so that the electronic device executes the method as described in any one of claims 1-9.

12. A computer program product comprising instructions, characterized in that When the computer program product is run on an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 9.

13. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is caused to execute the method as claimed in any one of claims 1 to 9.

Images