CN118154721B - Smooth fillet generation method, image drawing method and related devices - Google Patents

Abstract

The present disclosure relates to a smooth fillet generation method, a corresponding image drawing method, and a related apparatus. The smooth fillet generating method comprises the following steps: acquiring a smooth margin and a fillet radius value and determining a first coordinate point and a second coordinate point which are end points of the smooth fillet based on the sum of the smooth margin and the fillet radius value; determining a third coordinate point serving as a middle point of the smooth fillet according to the fillet radius; generating a first Bezier curve by taking the first coordinate point and the third coordinate point as endpoints, and generating a second Bezier curve by taking the third coordinate point and the second coordinate point as endpoints; the smoothly rounded corners are obtained based on the first and second bezier curves. The method and the device realize intuitive and smooth adjustable fillets by additionally adding smooth parameters representing the length in addition to the conventional fillet radius value and combining with a Bezier curve. The method can realize smooth fillets capable of lossless self-adaptive amplification with extremely low cost under the condition of not modifying the original Android implementation, and is suitable for various application development scenes.

Description

Smooth rounded corner generation method and image drawing method and related device

Technical Field

The present disclosure relates to the field of terminals, and in particular to a smooth rounded corner generation method and an image drawing method and related devices.

Background Art

In current mobile phone operating systems (e.g., Android), you only need to specify a fillet radius value to apply the corresponding fillet effect to the four corners of a rectangle. However, the generated fillet is usually directly drawn by directly drawing a circle corresponding to the specified fillet radius, and then cutting out a 1/4 arc from the circle and replacing it with the four corners of the rectangle. Visually, the fillet transition will appear convex and not smooth, thus affecting the user experience.

Summary of the invention

According to a first aspect of an embodiment of the present disclosure, a method for generating a smooth rounded corner is provided, wherein the smooth rounded corner is generated between a first side and a second side that are perpendicular to each other, and the method comprises: obtaining a smoothing margin and a rounded corner radius value; determining a first coordinate point located on the first side and a second coordinate point located on the second side according to the sum of the smoothing margin and the rounded corner radius value; determining a third coordinate point according to the rounded corner radius value, wherein the third coordinate point is the middle point of the smooth rounded corner; generating a first Bezier curve with the first coordinate point and the third coordinate point as endpoints, and generating a second Bezier curve with the third coordinate point and the second coordinate point as endpoints; and obtaining the smooth rounded corner based on the first Bezier curve and the second Bezier curve.

Optionally, generating a first Bezier curve with the first coordinate point and the third coordinate point as endpoints includes: generating the first Bezier curve with the first coordinate point and the third coordinate point as endpoints and the fourth coordinate point and the fifth coordinate point as handle points, wherein the coordinates of the fourth coordinate point and the fifth coordinate point are determined based on the fillet radius value so that the slope of the first Bezier curve changes continuously.

Optionally, before generating the first Bezier curve with the first coordinate point and the third coordinate point as endpoints, it also includes: determining the coordinates of the fourth coordinate point according to the first angle and the fillet radius value; and determining the coordinates of the fifth coordinate point according to the second angle and the fillet radius value; the first angle corresponds to the angle between the line between the fourth coordinate point and the positioning point and the second side, the positioning point corresponds to the center of a common fillet with the fillet radius value, and the second side is one of the two sides where the second coordinate point is located; the second angle corresponds to the angle formed by the line between the fifth coordinate point and the positioning point and the line between the third coordinate point and the positioning point.

Optionally, generating a second Bezier curve with the third coordinate point and the second coordinate point as endpoints includes: flipping the generated first Bezier curve to obtain the second Bezier curve.

Optionally, the coordinates of the coordinate point have the intersection of the first side and the second side as the origin, and the third coordinate point coincides with the middle point of a common fillet with a radius equal to the fillet radius value.

Optionally, the smoothing margin is the product of the fillet smoothness and the fillet radius value.

Optionally, the smooth rounded corner is drawn at a right angle in the rectangular area, and the method further comprises: rotating the smooth rounded corner by a predetermined angle; and moving the rotated smooth rounded corners to positions corresponding to the remaining right angles of the rectangular area.

According to the second aspect of the embodiment of the present disclosure, there is provided an image drawing method, comprising: generating a path using the method described in the first aspect, the path including the smooth rounded corners; and generating an image according to the object type of the drawing interface and the path. Wherein: in response to the object type being a path, the path is used as the image; in response to the object type being a canvas, one of the following calls is selected: clipping the canvas to the range of the path, and drawing the canvas content within the range of the path, or drawing the canvas content, and erasing the content outside the range of the path after the drawing is completed; in response to the object type being a drawable, using the call corresponding to the canvas to modify the drawing result of the drawable; in response to the object type being a bitmap, setting the bitmap as the drawing base map of the canvas, drawing the canvas content, and erasing the content outside the range of the path after the drawing is completed; in response to the object type being a view, setting the boundary contour of the view to a smooth rounded corner curve corresponding to the path and clipping the view according to the boundary contour; in response to the object type being a view group, using the set smooth rounded corner view object to automatically clip the views in the view group to generate the path as the set smooth rounded corner boundary.

According to a third aspect of an embodiment of the present disclosure, a computing device is provided, comprising: a processor; and a memory on which executable code is stored, and when the executable code is executed by the processor, the processor executes the method based on the first and/or second aspects.

According to a fourth aspect of an embodiment of the present disclosure, a non-temporary machine-readable storage medium is provided, on which an executable code is stored. When the executable code is executed by a processor of an electronic device, the processor executes the method described in the first and/or second aspect above.

According to a fifth aspect of an embodiment of the present disclosure, a computer program product is provided, comprising computer program instructions, which, when executed by a processor, implement the method based on the first and/or second aspect.

BRIEF DESCRIPTION OF THE DRAWINGS

The above and other objects, features and advantages of the present disclosure will become more apparent through a more detailed description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, wherein like reference numerals generally represent like components in the exemplary embodiments of the present disclosure.

FIG1 schematically shows an exemplary hardware structure block diagram of a terminal device according to an embodiment of the present disclosure.

FIG. 2 shows an example of drawing a rounded rectangle using an arc.

FIG3 shows a schematic flowchart of a method for generating smooth rounded corners according to an embodiment of the present disclosure.

FIG. 4 shows an example of a smooth rounded corner and its corresponding normal rounded corner generated according to the present disclosure.

FIG. 5 shows an example of drawing a smooth rounded corner according to a handle point determined by a first angle and a second angle in combination with a rounded corner radius value.

FIG6 shows a schematic flowchart of an image drawing method according to an embodiment of the present disclosure.

FIG. 7 shows a smooth rounded rectangle obtained according to the smooth rounded corner generation method disclosed in the present invention.

FIG. 8 shows an example of the image drawing method of the present disclosure.

FIG. 9 shows a schematic diagram of the structure of a computing device that can be used to implement the above method according to at least one embodiment of the present disclosure.

DETAILED DESCRIPTION

The preferred embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the preferred embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments described herein. On the contrary, these embodiments are provided to make the present disclosure more thorough and complete, and to fully convey the scope of the present disclosure to those skilled in the art.

The smooth rounded corner generation method and image drawing method provided in the embodiments of the present disclosure can be applied to electronic devices with display modules, such as mobile phones, tablet computers, wearable devices, vehicle-mounted devices, augmented reality (AR)/virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), etc., and can also be applied to databases, servers, and service response systems with display modules based on terminal artificial intelligence. The embodiments of the present disclosure do not impose any restrictions on the specific types of electronic devices.

In some embodiments, the terminal device may be an exemplary mobile phone 100 having an exemplary hardware structure as shown in FIG1 . As shown in FIG1 , the mobile phone 100 may specifically include components such as a radio frequency (RF) circuit 110, a memory 120, an input unit 130, a display unit 140, a sensor 150, an audio circuit 160, a short-range wireless communication module 170, a processor 180, and a power supply 190. Those skilled in the art may understand that the structure of the mobile phone 100 shown in FIG1 does not limit the terminal device, and the terminal device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

The following is a detailed introduction to the various components of the mobile phone 100 in conjunction with FIG. 1 :

The RF circuit 110 can be used for receiving and sending signals during the process of sending and receiving information or making calls. In particular, after receiving the downlink information of the base station, it is sent to the processor 180 for processing; in addition, the uplink data is sent to the base station. Generally, the RF circuit includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (Low Noise Amplifier, LNA), a duplexer, etc. In addition, the RF circuit 110 can also communicate with the network and other devices through wireless communication. The above-mentioned wireless communication can use any communication standard or protocol, and the wireless communication 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), New Radio (NR), GNSS, FM, low-orbit satellite connection and/or IR technology, etc. 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), etc.

The memory 120 can be used to store software programs and modules. The processor 180 executes various functional applications and data processing of the mobile phone by running the software programs and modules stored in the memory 120. The memory 120 may mainly include a program storage area and a data storage area, wherein 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 according to the use of the mobile phone (such as pictures, audio data, phone books, etc.), etc. In addition, the memory 120 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, or other volatile solid-state storage devices. For example, the memory 120 may store an operating system and application codes, and may store codes for implementing the smooth fillet generation method and image drawing method disclosed in the present invention.

The input unit 130 can be used to receive input digital or character information, and to generate key signal input related to the user settings and function control of the mobile phone 100. Specifically, the input unit 130 may include a touch panel 131 and other input devices 132. The touch panel 131, also known as a touch screen, can collect the user's touch operation on or near it (such as the user's operation on the touch panel 131 or near the touch panel 131 using any suitable object or accessory such as a finger (such as a single finger or multiple fingers), a stylus, etc.), and drive the corresponding connection device according to a pre-set program. Optionally, the touch panel 131 may include a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch orientation, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into the touch point coordinates, and then sends it to the processor 180, and can receive and execute the command sent by the processor 180. In addition, the touch panel 131 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 131, the input unit 130 may also include other input devices 132. Specifically, other input devices 132 may include but are not limited to one or more of a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, a joystick, etc.

The display unit 140 may be used to display information input by the user or information provided to the user and various menus of the mobile phone, such as displaying different applications. The display unit 140 may include a display panel 141. Optionally, the display panel 141 may be configured in the form of a liquid crystal display (LCD), a light emitting diode (LED), an organic light emitting diode (OLED), an active-matrix organic light emitting diode (AMOLED), etc. Further, the touch panel 131 may cover the display panel 141. When the touch panel 131 detects a touch operation on or near it, it is transmitted to the processor 180 to determine the type of touch event, and then the processor 180 provides a corresponding visual output on the display panel 141 according to the type of touch event. For example, when the touch panel 131 detects a touch sliding event, the processor 180 changes the display of the sliding object on the display panel 141 according to the touch sliding track of the user, for example, the display interface moves up or down. Although in FIG. 1 , the touch panel 131 and the display panel 141 are two independent components to implement the input and output functions of the mobile phone, in some embodiments, the touch panel 131 and the display panel 141 may be integrated into a touch screen to implement the input and output functions of the mobile phone.

The mobile phone 100 may also include at least one sensor 150, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 141 according to the brightness of the ambient light, and the proximity sensor may turn off the display panel 141 and/or the backlight when the mobile phone is moved to the ear. As a type of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in all directions (generally three axes), and can detect the magnitude and direction of gravity when stationary. It can be used for applications that identify the posture of the mobile phone (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; as for other sensors that can be configured in the mobile phone, such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc., they will not be repeated here.

The audio circuit 160, the speaker 161, and the microphone 162 can provide an audio interface between the user and the mobile phone. The audio circuit 160 can transmit the received audio data to the speaker 161 after converting the received audio data into an electrical signal, which is converted into a sound signal for output; on the other hand, the microphone 162 converts the collected sound signal into an electrical signal, which is received by the audio circuit 160 and converted into audio data, and then the audio data is output to the processor 180 for processing, and then sent to another electronic device through the RF circuit 110, or the audio data is output to the memory 120 for further processing.

Communication technologies such as Wi-Fi, Bluetooth, Near Field Communication (NFC) and Ultra Wide Band (UWB) belong to short-range wireless transmission technologies. The mobile phone can help users send and receive emails, browse web pages and access streaming media through the short-range wireless module 170, which provides users with wireless broadband Internet access. The above-mentioned short-range wireless module 170 may include a Wi-Fi chip, a Bluetooth chip, an NFC chip and a UWB chip. The Wi-Fi chip can realize the function of Wi-Fi Direct connection between the mobile phone 100 and other electronic devices, and can also make the mobile phone 100 work in an AP mode (Access Point mode) that can provide wireless access services and allow other wireless devices to access, or work in a STA mode (Station mode) that can connect to an AP but does not accept wireless devices to access, thereby establishing point-to-point communication between the mobile phone 100 and other Wi-Fi devices.

The processor 180 is the control center of the mobile phone. It uses various interfaces and lines to connect various parts of the entire mobile phone. By running or executing software programs and/or modules stored in the memory 120, and calling data stored in the memory 120, it executes various functions of the mobile phone and processes data, thereby monitoring the mobile phone as a whole. Optionally, the processor 180 may include one or more processing units; optionally, the processor 180 may include, for example, an application processor (Application Processor, AP), a modem processor, a graphics processor (Graphics Processing Unit, GPU), an image signal processor (Image Signal Processor, ISP), a controller, a video codec, a digital signal processor (Digital Signal Processor, DSP), a baseband processor, and/or a neural network processor (Neural-Network Processing Unit, NPU), etc. Among them, different processing units can be independent devices or integrated in one or more processors.

The mobile phone 100 also includes a power source 190 (such as a battery) for supplying power to various components. Preferably, the power source can be logically connected to the processor 180 through a power management system, so that the power management system can manage functions such as charging, discharging, and power consumption.

The mobile phone 100 may further include a camera. Optionally, the camera may be located at the front or rear of the mobile phone, which is not limited in the embodiments of the present disclosure.

The software system of the mobile phone 100 may adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture, etc. For example, the Android system or the IOS (I Operating System) both adopt a layered architecture.

Rounded corners refer to the design or treatment of the corners of an object so that its edges appear rounded rather than sharp right angles. In the computer field, rounded corners usually refer to a visual effect in interface design, which is used to make the corners of elements (for example, rectangular elements) look rounded rather than sharp. Rounded corners are widely used, especially in user interface design, where they can enhance visual beauty, reduce the sharpness of hard edges, and make the user interface more friendly and modern.

In existing terminal device operating systems (e.g., Android systems), rounded corners are usually achieved by drawing arcs or using specific shapes (e.g., the RoundRectShape class that represents a rounded rectangle in the Android system). These methods are more direct and easy to control the radius and position of the rounded corners. Whether drawing an arc or using RoundRectShape, the rounded corners generated by the operating system are directly drawn by drawing a circle corresponding to the specified rounded corner radius, and then cutting out a 1/4 arc from the circle and replacing it with the four corners of the rectangle. Figure 2 shows an example of using an arc to draw a rounded rectangle.

Here, "rounded rectangle" refers to a rectangle whose four right angles are replaced with rounded corners. After the user or the system specifies a fillet radius r (radius), a circle with a radius of r can be generated, and a 1/4 arc is cut out of the circle and then replaced and applied to the upper right, lower right, lower left and upper left corners of the rectangle, thereby obtaining the rounded rectangle shown on the right side of the figure. Here, for the convenience of explanation, it can be assumed that the rectangle is composed of the four sides (sides 1 to 4) shown in the figure, and a point r away from both side 1 and side 2 can be selected at the lower left corner of the rectangle as the center point C. Thus, a 1/4 arc is drawn to replace the right angle. Similar operations can be performed on several other right angles. Thus, a rounded rectangle is obtained. In other implementations, a 1/4 arc with a radius of r can also be obtained first and then moved to the corresponding positions of the four corners of the rectangle. The rounded rectangle obtained by replacing the right angle with the 1/4 arc as above will visually appear to have a convex and not smooth transition of the rounded corners, and the rounded corners obtained are not beautiful enough.

In order to achieve a smoother rounded corner with a smoother transition, it is necessary to use another method to generate a "rounded corner" of the corresponding size on demand. At this time, the "rounded corner" will no longer be constructed using a "circle", but using another mathematical shape or method. In the prior art, a rounded corner generation method derived from an ellipse formula is used, so it is called a "super elliptic curve". However, the rounded corners generated by the super elliptic curve method are still different from the final expectation: its shape is often not smooth enough, and the code for fitting the super elliptic curve can only be calculated and connected point by point-that is, it needs to be calculated continuously along the circumference. The smoother the rounded corners are expected to be drawn, the higher the calculation accuracy needs to be, and the accuracy is at the pixel level. In other words, the super elliptic curve method cannot express a curve with simple rules, so the performance consumption will increase significantly as the graphics increase and the smoothing accuracy increases.

In view of this, the present disclosure proposes a method for generating smooth rounded corners, by adding a parameter indicating the smoothness of the rounded corners in addition to the conventional rounded corner radius value, and then combining the Bezier curve to achieve a smooth and adjustable rounded corner. For the sake of convenience, the rounded corner generated based only on a 1/4 arc segment as shown in FIG2 may be referred to as a "normal rounded corner" or "rounded corner", and the rounded corner generated based on the rounded corner smoothness and combined with the Bezier curve in the present disclosure may be referred to as a "smooth rounded corner".

FIG3 shows a schematic flow chart of a method for generating smooth rounded corners according to an embodiment of the present disclosure. A smooth rounded corner is generated between a first side and a second side that are perpendicular to each other. For example, four corners of a rectangle can be generated. The method for generating smooth rounded corners can be used by a terminal device such as FIG1 above for drawing rounded corners, thereby obtaining a smooth rounded rectangle with a smoother curve than an ordinary rounded corner. Generally speaking, such a smooth rounded rectangle is more in line with the public aesthetics. For ease of understanding, FIG4 shows an example of a smooth rounded corner generated according to the present disclosure and its corresponding ordinary rounded corner. In the example of FIG4 , the intersection of two right-angled sides (side 1 and side 2, which can correspond to the first side and the second side, respectively) is set to O. The radius value of the ordinary rounded corner is r, and it can be obtained by selecting a point r away from both sides as the center point C to make a 1/4 arc. The end points of the rounded corners are respectively located on the two sides, and the distance from O is r.

In step S310, the smoothing margin and the rounded corner smoothness are obtained.

"Fillet radius value" generally refers to the radius of the fillet, indicating the radius of the circle used when a corner is rounded. In the example of a common fillet shown on the left side of FIG. 4, the fillet radius value is r. In the smooth fillet generation method disclosed in the present invention, the fillet radius value can be used to determine the position of the middle point of the smooth fillet (i.e., the third coordinate point shown below) as follows. For example, in one embodiment, the middle point of the smooth fillet can coincide with the middle point of the common fillet with a radius of r. Further, the fillet radius value can also be used to generate the first Bezier curve and/or the second Bezier curve as follows.

"Smoothing margin" (also referred to as "smoothing value" or "smoothing amount") is an additional parameter introduced by the present disclosure to generate a smoother rounded corner than the conventional 1/4 arc rounded corner. This parameter can be used to adjust the smoothness of the smoothed rounded corner. In the scenario using ordinary rounded corners, the 1/4 arc directly replaces the line segment of the first side and the second side near the intersection with a length of r. In the scenario using smoothed rounded corners, the length of the line segment near the intersection of the first side and the second side replaced by the smoothed rounded corner is greater than r, as shown in Figure 4, which can be a length d. The length d can be determined in combination with the smoothing margin and the fillet radius value. The smoothing margin m can be a determined length, which is used to determine the start and end positions of the fillet in combination with the fillet radius value. Compared with ordinary fillets, the addition of a smoothing margin can make the drawn smooth fillet curve reach the middle point of the smooth fillet through a longer distance, thereby achieving a smoother fillet curve.

In one embodiment, the first thing directly obtained may be the "rounding smoothness" as a ratio value. The ratio value s may be used to determine the smoothing margin in combination with the rounding radius value. The smoothing margin may be the product of the rounding smoothness and the rounding radius value. For example, when the rounding smoothness s is 0.5, the smoothing margin m may be 0.5r.

In one embodiment, the preset fillet radius value and smoothing margin can be directly obtained. In another embodiment, the preset fillet radius value and fillet smoothness can be obtained, and the smoothing margin can be calculated based on the fillet radius value and fillet smoothness. Thus, a rectangle with smooth rounded corners can be generated based on a specific value input in advance. In another embodiment, the fillet radius value and the smoothing margin can be determined according to a predetermined rule. For example, in a rectangle with a length of a and a width of b, a smooth rounded corner is formed at the corner of the rectangle. At this time, the fillet radius value and the smoothing margin can be related to a and/or b (for example, with a predetermined ratio), and the smoothing margin can be a fixed ratio with the fillet radius value, or it can be a value related to a and/or b (for example, with a predetermined ratio).

Subsequently, the range of the right-angled side to be replaced can be determined according to the fillet radius value and the smoothing margin. Thus, in step S320, the first coordinate point located at the first side and the second coordinate point located at the second side can be determined by the sum of the smoothing margin and the fillet radius value. At this time, the first coordinate point and the second coordinate point are the endpoints of the smooth fillet.

In order to ensure a smooth appearance after adding rounded corners, the first coordinate point and the second coordinate point need to be located on the two right-angled sides used to replace the right angle. For example, in order to replace the right angle shown in Figure 4 with a smooth rounded corner, the first coordinate point and the second coordinate point need to be located on side 1 and side 2 respectively (to ensure that the smooth rounded corner curve is connected to the right angle side without disconnection), and the first coordinate point and the second coordinate point are each farther from the intersection of the two sides (that is, the intersection of side 1 and side 2, that is, the intersection of the lower left right angle) than the distance r of the ordinary rounded corner.

Here, the distance between the first coordinate point and the intersection of the two sides can be set as d ₁ , and the distance between the second coordinate point and the intersection of the two sides can be set as d ₂ . At this time, due to the existence of the smoothing margin m, d ₁ >r and d ₂ >r. When different smoothing margins are used for the first side and the second side (for example, m ₁ and m ₂ , respectively), d ₁ =r+ m ₁ , and d ₂ =r+ m ₁ , that is, at this time, the values of d ₁ and d ₂ can be different.

In other embodiments, for the sake of symmetry and beauty, the generated smooth fillet is a curve symmetrical with respect to the middle point. In this case, the fillet smoothness can have the same value for the long side and the short side of the rectangle, and the values of _d1 and _d2 are the same, and the values of _m1 and _m2 are also the same. In the example on the right side of Figure 4, _d1 = _d2 . It can be assumed that _m1 = _m2 = m, so _d1 = _d2 = d, that is, the distance between the first coordinate point (coordinate point 1) and the second coordinate point (coordinate point 2) and the intersection point O of the two sides is d. When point O is the origin (0,0) and the two sides are the coordinate axes (for example, side 1 corresponds to the first coordinate axis and side 2 corresponds to the second coordinate axis), the coordinates of coordinate point 1 are (0,d) and the coordinates of coordinate point 2 are (d,0), and d=r+m. When the fillet smoothness is used instead of the smoothing margin as the initial parameter, since m= s×r, d= r + s×r.

In step S330, a third coordinate point may be determined according to the fillet radius, and the third coordinate point is the middle point of the smooth fillet. In the present disclosure, the middle point of the smooth fillet may be at the same position as the middle point of the ordinary fillet. That is, in the example of FIG. 4 , the third coordinate point (coordinate point 3) required for drawing the smooth fillet may be at the same position as the middle point of the ordinary fillet. When point O is the origin (0,0) and the two sides are the coordinate axes, the coordinates of the middle point of the fillet on the left side of the figure and the coordinate point 3 on the right side may be ( , ), that is, the middle point of the smooth fillet is determined by the fillet radius. In the example shown in the figure, for ease of understanding, an auxiliary line g (gray dotted line in the figure) is connected between the positioning point at the same position as the center C of the ordinary fillet and point O, and the position on the auxiliary line g that is r away from the positioning point is the position of coordinate point 3.

After determining the two endpoints (e.g., coordinate point 1 and coordinate point 2) and an intermediate point (e.g., coordinate point 3) of the smooth fillet, a method capable of generating a smooth curve can be selected to generate a smooth curve based on these points. In the present disclosure, a Bezier curve with good smoothness is selected to generate the smooth fillet.

Thus, in step S340, a first Bezier curve is generated with the first coordinate point and the third coordinate point as endpoints, and a second Bezier curve is generated with the third coordinate point and the second coordinate point as endpoints. Thus, in step S350, the smooth fillet is obtained based on the first Bezier curve and the second Bezier curve.

In the example of FIG. 4 , the curve between coordinate point 1 and coordinate point 3 corresponds to the first Bezier curve, and the curve between coordinate point 3 and coordinate point 2 corresponds to the second Bezier curve. The first Bezier curve and the second Bezier curve are used as a smooth fillet as a whole. Thus, the curve between coordinate point 1 and coordinate point 2 corresponds to the generated smooth fillet.

Since the positions of the first coordinate point and the second coordinate point are farther than the end points of the ordinary rounded corner, and the position of the third coordinate point is the same as the middle point of the ordinary rounded corner, the first Bezier curve and the second Bezier curve generated thereby, and the smooth rounded corner obtained by combining the first Bezier curve and the second Bezier curve can have a smoother curvature than the ordinary rounded corner, thereby providing a smoother and more beautiful rounded corner.

As mentioned above, a smooth rounded corner is generated between a first side (e.g., side 1) and a second side (e.g., side 2) that are perpendicular to each other, and the coordinate points of each control point of the Bezier curve used to generate the smooth rounded corner can be based on the intersection between the first side and the second side as the origin (e.g., point O). At this time, the third coordinate point can coincide with the middle point of a common rounded corner with a radius equal to the rounded corner radius value.

In the present disclosure, when the generated smooth rounded corner is a curve symmetrical with respect to the middle point, that is, _d1 = _d2 = d, in order to reduce the amount of calculation while obtaining the smooth rounded corner, a first Bezier curve can be generated based on the first coordinate point and the third coordinate point (as endpoints) and one or more handle points through the above Bezier curve parameter equation, and the second Bezier curve can be obtained by flipping the generated first Bezier curve. Thus, generating the second Bezier curve with the third coordinate point and the second coordinate point as endpoints may include: flipping the generated first Bezier curve to obtain the second Bezier curve.

In the example of FIG. 4 , the second Bezier curve between coordinate point 3 and coordinate point 2 can be obtained by flipping the generated first Bezier curve. When point O is the origin (0,0), the coordinates of coordinate point 1 are (0,d) and the coordinates of coordinate point 2 are (d,0), the second Bezier curve can be obtained directly by exchanging the positions of the two coordinate values of each coordinate of the first Bezier curve (the values of the first and second coordinate axes are interchanged, that is, ( xi _{, yi} ) is converted to ( _yi , xi ₎ ). Thus, by combining the first and second Bezier curves, a smooth rounded corner is obtained.

In order to further reduce the amount of calculation required to draw four smooth rounded corners for a rectangle, the smooth rounded corners for other right angles of the rectangle can be obtained by rotating and shifting the smooth rounded corners by a predetermined angle (it should be understood that a rectangle also includes a square with equal length and width, so the method disclosed in the present invention can also be used to draw four smooth rounded corners for a square). That is, the smooth rounded corner generated by steps S310 to S350 above can be drawn at a right angle position in a rectangular area, and the method also includes: rotating the smooth rounded corner by a predetermined angle; and moving the rotated smooth rounded corners to positions corresponding to the remaining right angles of the rectangular area. Specifically, when first generating a smooth rounded corner for a rectangle, such as the lower left corner, the generated smooth rounded corner can be rotated 90° clockwise and moved to the upper left corner of the rectangle, and the rotated smooth rounded corner is made tangent to both edge 1 and edge 4 (or the starting position of the smooth rounded corner of the upper left corner is directly determined according to the rounded corner radius value and the rounded corner smoothness, and then the rotated smooth rounded corner is connected). The generated smooth rounded corners can be rotated 180° and 270° clockwise and then moved to the upper right corner and the lower right corner of the rectangle respectively. Thus, a smooth rounded rectangle with four corners replaced by smooth rounded corners is obtained. It should be understood that the generated smooth rounded corners can also be rotated 90°, 180° and 270° counterclockwise and then shifted to obtain a smooth rounded rectangle.

It should be understood that although the example of smooth rounded corners of the present disclosure is described here in conjunction with the two sides and the right angle corresponding to the lower left corner of the rectangle shown in Figure 4 (the same is true in Figure 5 below), in other embodiments, any other right angles of the rectangle can also be used for description, and the rectangle itself can also be at a certain angle (for example, an acute angle) to the direction of the drawn screen, for example. Regardless of the orientation of the right angle and its two sides, the above method of the present disclosure can be used to generate smooth rounded corners. Further, although for the convenience of explanation, the coordinate system is limited to the intersection of the two sides forming the right angle as the origin, and these two sides are the first and second coordinate axes, respectively, the coordinate system can be a relative coordinate system, and any position can be used as the origin, and the two mutually perpendicular lines intersecting at the origin are used as the first and second coordinate axes. Under these coordinate axes, the principle of the present disclosure can still be used to draw smooth rounded corners.

As mentioned above, the smooth rounded corners of the present disclosure can be drawn using a Bezier curve. A Bezier curve is a mathematical curve defined by a series of control points. For a two-dimensional Bezier curve, it is usually defined by two endpoints and one or more handle points.

The endpoints of a Bezier curve are the starting and ending points of the curve. For a 2D Bezier curve, two endpoints are used to define the starting and ending positions of the curve. These endpoints are the two extreme points of the curve, which determine the starting and ending directions of the curve. Handles are control points located between the endpoints, also known as midpoints. In a Bezier curve, handles are used to control the shape and direction of the curve. For a 2D Bezier curve, in addition to the endpoints, there can be one or more handles. These handles affect the path and curvature of the curve between the endpoints through their position and number. Here, the endpoints and handles can be collectively referred to as the control points of the Bezier curve.

The degree of a Bezier curve depends on the number of control points. Generally speaking, n control points define an n-1 degree Bezier curve. The degree of a curve determines its flexibility and smoothness. The higher the degree, the more complex the curve is, and it can describe various shapes more precisely, but the amount of calculation also increases accordingly.

The shape of a Bezier curve is calculated using control points. The calculation process uses the interpolation formula of the Bezier curve, which determines the position of each point on the curve based on the position of the control points and the degree of the curve. The Bezier curve has local control, so the adjustment of a handle point will only affect the shape of a certain section of the curve, and will not have a global impact on the entire curve.

Bezier curves generate smooth curves by means of control points and polynomial interpolation. Specifically, a Bezier curve is defined by a series of control points. For a two-dimensional Bezier curve, there are usually a series of control points for the Bezier curve that can be defined as: the starting point ( P ₀ ), the end point ( P _n ), and the middle control points ( P ₁ , P ₂ , ..., P _n-1 ). The positions of these control points determine the shape of the curve. For a one-dimensional Bezier curve, the parametric equation of the curve can be expressed as:

in, is the control point, is a Bernstein polynomial and can be defined as:

in, is the number of combinations, n+1 represents the number of control points, and t is a given parameter, which represents the relative position of point B( t ) on the Bezier curve.

Specifically, in the calculation formula of the Bezier curve, t is usually used to represent the position parameter of a position or point on the curve. In the parametric representation of the Bezier curve, the value range of t is 0≤ t ≤1. When t = 0, the Bezier curve calculation formula gives the starting position of the curve; when t = 1, the formula gives the end position of the curve. Therefore, by gradually increasing the value of t within the range of t , the point B( t ) at each position on the curve can be calculated, thereby drawing a complete Bezier curve.

In the present disclosure, the first coordinate point and the third coordinate point can be used as endpoints, and a first Bezier curve can be generated by selecting one or more handle points. In one embodiment, two handle points can be set for drawing the first Bezier curve. To this end, the first Bezier curve is generated with the first coordinate point and the third coordinate point as endpoints, including: the first Bezier curve is generated with the first coordinate point and the third coordinate point as endpoints, and the fourth coordinate point and the fifth coordinate point as handle points, wherein the coordinates of the fourth coordinate point and the fifth coordinate point are determined based on the fillet radius value so that the slope of the first Bezier curve changes continuously.

In one embodiment, the specific position of the handle point can be determined based on the common fillet corresponding to the fillet radius value r and the two right-angled sides. In order to determine the positions of the fourth coordinate point and the fifth coordinate point, a first angle for locating the fourth coordinate point and a second angle for locating the fifth coordinate point can be additionally determined. To this end, before generating the first Bezier curve with the first coordinate point and the third coordinate point as endpoints, the smooth fillet generation method disclosed in the present invention also includes: determining the coordinates of the fourth coordinate point based on the first angle and the fillet radius value; and determining the coordinates of the fifth coordinate point based on the second angle and the fillet radius value.

FIG5 shows an example of drawing a smooth fillet according to a handle point determined by a first angle and a second angle in combination with a fillet radius value. In the illustrated example, the first angle and the second angle may be angles based on a common fillet positioning with an acquired fillet radius value r. Here, for the convenience of explanation, the two sides where the smooth fillet is located (i.e., the two vertical sides corresponding to the right angle to generate the smooth fillet) may be referred to as the first side and the second side. For example, the side where the first coordinate point is located may be referred to as the first side, and the side where the second coordinate point is located may be referred to as the second side. In the example of FIG5 , the first side and the second side correspond to side 1 and side 2, respectively. The positioning point corresponds to the center position of a common fillet with the fillet radius value. That is, when the intersection O is regarded as the origin, and the first side and the second side are regarded as the first coordinate axis and the second coordinate axis, respectively, the coordinates of the positioning point are (r, r). In the example of FIG5 , d=smoothing margin m+fillet radius value r, and the positions of the first coordinate point (coordinate point 1) and the second coordinate point (coordinate point 2) are obtained. Further, similar to the example shown in FIG. 4 , in FIG. 5 , the position of the smooth fillet middle point, ie, the third coordinate point (coordinate point 3 ), can also be determined according to the line between the positioning point and the origin (the first auxiliary line g ₁ ) and the fillet radius value r.

As shown in the figure, the first angle α may correspond to the angle between the line connecting the fourth coordinate point and the positioning point and the second side (although the figure shows that the angle between the line connecting the fourth coordinate point and the positioning _point and the second auxiliary line g ₂ is α, since the second auxiliary line g ₂ is parallel to the side 2, it is obvious that the angle between the line connecting the fourth coordinate point and the positioning point and the side 2 is also α). Since the position of the fourth coordinate point is determined based on the first angle α in actual operation, it can be considered that the fourth coordinate point is located at a certain position on the line l ₁ extending from the positioning point and having an angle α with the second auxiliary line g _2. In the example of FIG. 5, in order to ensure the smoothness of the first Bezier curve, the intersection of the line l ₁ and the side 1 can be used as the fourth coordinate point, that is, the coordinate point 4 shown in the figure. According to the knowledge of trigonometric functions, the distance between the coordinate point 4 and the positioning point is r/cosα. In other embodiments, the fourth coordinate point may also be located at other positions on the line l ₁ , for example, at any point on the line l ₁ within the range where the distance from the positioning point is not less than r and not greater than r/cosα.

Further, the second angle β corresponds to the angle formed by the line connecting the fifth coordinate point and the positioning point (line l ₂ shown in FIG. 5 ) and the line connecting the third coordinate point and the positioning point (first auxiliary line g ₁ shown in FIG. 5 ). Similarly, since the position of the fifth coordinate point is determined based on the second angle β in actual operation, it can be considered that the fifth coordinate point is located at a certain position on the line l ₂ extending from the positioning point and having an angle β with the first auxiliary line g _1. In the example of FIG. 5 , in order to ensure the smoothness of the first Bezier curve, a line perpendicular to the first auxiliary line g ₁ can be made at the position of the coordinate point 3 as the third auxiliary line g ₃ , and the intersection of the line l ₂ and the third auxiliary line g ₃ is taken as the fifth coordinate point, that is, the coordinate point 5 shown in the figure. According to the knowledge of trigonometric functions, the distance between the coordinate point 5 and the coordinate point 3 is r×tanβ, and the distance between the coordinate point 5 and the positioning point is r/cosβ. In other embodiments, the fifth coordinate point may also be located at other positions on line l2 , for example, at any _point on _{line l1} within a range where the distance from the positioning point is not less than r and not greater than r/cosβ.

After the positions of the fourth coordinate point and the fifth coordinate point are determined, the first Bezier curve can be drawn based on the above formula with the first coordinate point and the third coordinate point as endpoints and the fourth coordinate point and the fifth coordinate point as handle points.

Since the first Bezier curve is used to replace half of a normal fillet, that is, 1/8 of a circular arc, and is drawn using two handle points, the values of the first angle α and the second angle β should be around 15°. In one embodiment, the values of the first angle α and the second angle β can be between 15°±5°. In one embodiment, the values of the first angle α and the second angle β can be between 15°±3°. In one embodiment, the values of the first angle α and the second angle β can be between 15°±1°. For example, in one implementation, the first angle α can be 15° and the second angle β can be 14°.

As shown above, in conjunction with FIG. 5, an example of how to locate the four control points of the first Bezier curve is given in a graphical manner, thereby facilitating the understanding of the principles of the present disclosure. In actual operation, the terminal can use the following formula to obtain the coordinates of the four control points of the first Bezier curve (at this time, the point O is considered to be the origin, the two right-angled sides correspond to the first and second coordinate axes, and the obtained fillet smoothness value is smoothness, and the fillet radius value is radius. At this time, it can be considered that the smoothing margin margin = smoothness × radius):

Coordinate point 1: (0, smoothness × radius + radius)

Coordinate point 3: (-radius × cos45° + radius, -radius × sin45° + radius)

Coordinate point 4: (0, -tanα×radius + radius)

Let the intermediate variable be: largeSide = cos45°×radius, and

smallSide = cos45°×tanβ×radius

Then: Coordinate point 5: (-(smallSide + largeSide) + radius, -(largeSide -smallSide) + radius)

For ease of understanding, two dotted lines perpendicular to each other are shown in Figure 5, where the long line represents the length of largeSide and the short line represents the length of smallSide. Since both dotted lines are at an angle of 45° to the third auxiliary line g ₃ , it is obvious that the first coordinate value of coordinate point 5 is radius-smallSide – largeSide, and the second coordinate value is radius-smallSide + largeSide, which is the above formula.

Similarly, since the second Bezier curve is symmetric to the first Bezier curve about the first auxiliary _line g1 , the coordinates of the four control points of the second Bezier curve as shown in FIG5 are:

Coordinate point 2: (smoothness × radius + radius, 0)

Coordinate point 3: (-radius × cos45° + radius, -radius × sin45° + radius)

Coordinate point 6: (-tanα × radius + radius, 0)

Coordinate point 7: (-(largeSide - smallSide) + radius, -(smallSide + largeSide)+ radius)

In the embodiments of the present disclosure, the second Bezier curve may be obtained by flipping the first Bezier curve as described above, thereby obtaining a smooth rounded corner; the second Bezier curve may also be calculated according to the above formula, thereby obtaining a smooth rounded corner.

Therefore, compared with ordinary rounded corner curves, the smooth rounded corner generation solution disclosed in the present invention can solve the problem of abrupt slope changes (at the intersection of the rounded corner and the edge), is visually smoother, and can achieve adaptive zooming in and out based on the Bezier curve. Compared with other rounded corner solutions, it has the advantages of being simple to use and requiring less computing power, and can be widely applied to various operating systems, especially to large-scale rapid applications without modifying the original Android implementation.

In one embodiment, the smooth rounded corner generation method disclosed in the present invention can be used on a terminal, for example, to generate smooth rounded corners on an Android system. Specifically, the corresponding interfaces can be implemented at the Path, Canvas, Drawable, bitmap, View, and ViewGroup levels of the operating system. To this end, the present disclosure can also be implemented as an image drawing method. FIG6 shows a schematic flow chart of an image drawing method according to an embodiment of the present disclosure.

In step S610, a path is generated by using the smooth rounded corner generation method as described above, and the path includes the smooth rounded corner.

Then, in step S620, an image is generated according to the object type of the drawing interface and the path.

In a specific operation, images are generated according to different object types.

In response to the object type being a path, the path may be directly used as the image.

In response to the object type being a canvas (usually, the path is a closed path), one of the following calls is selected: clipping the canvas to the range of the path and drawing the canvas content within the range of the path; or drawing the canvas content and erasing the content outside the range of the path after drawing is completed.

In response to the object type being a drawable, a call corresponding to the canvas is used to modify a drawing result of the drawable.

In response to the object type being a bitmap, the bitmap is set as a drawing base map of the canvas, the canvas content is drawn, and after the drawing is completed, the content outside the range of the path is erased.

In response to the object type being a view, a boundary contour of the view is set to a smooth rounded curve corresponding to the path and the view is clipped according to the boundary contour.

In response to the object type being a view group, the set smooth rounded corner view object is used to automatically clip the views in the view group to generate the path as the set smooth rounded corner boundary.

In an application of the Android system, a smooth rounded corner curve may be first generated according to the parameters passed in by the caller and the size of the drawn area (for example, based on the method described above in conjunction with FIG. 3 ). Subsequently, the caller may select the object type to which the smooth rounded corner is to be applied and the calling method as required, and a smooth rounded corner in a corresponding method may be generated according to the calling method of the caller.

Specifically, to generate a smooth rounded curve, it is essentially necessary to draw the coordinates of the left, top, right, and bottom corners of the area, and to obtain the rounded smoothness and the rounded radius values of the four corners. To this end, the original coordinates of the seven core control points can be obtained according to the above information, radius, and smoothness (for example, the coordinate calculation formula of the above coordinate points 1 to 7 can be used and can be referred to in the diagram of FIG5 ).

According to the above parameters (for example, the original coordinates of the 7 control points), you can start drawing a smooth rounded curve.

In one example, the 7 coordinate points can be first translated as a whole to the upper left corner of the drawing area. The first Bezier curve is drawn, with the starting point being coordinate point 1, the control points being coordinate points 4 and 5, and the end point being coordinate point 7. The second Bezier curve is drawn, with the starting point being coordinate point 3, the control points being coordinate points 6 and 7, and the end point being coordinate point 2, thereby obtaining a smooth rounded corner for the upper left corner.

Subsequently, the coordinate points can be flipped left and right around the center of the drawing area to obtain 7 new points. After reversing the order of the new 7 points, the original coordinate points 1 to 7 are replaced. At this time, the curve is connected to coordinate point 1 and the steps of generating the first and second Bezier curves are repeated to obtain a smooth rounded corner for the upper right corner.

Subsequently, the order of the 7 coordinate points can be reversed, and then the calculation is performed upside down around the center of the drawing area, and the original coordinate points 1 to 7 are replaced with the obtained new coordinate points, thereby obtaining the smooth rounded corners of the lower right corner and the lower left corner by repeating the steps. At this time, the curve can be closed to obtain a smooth rounded corner curve. That is, a smooth rounded rectangle (i.e., a smooth rounded corner curve) is obtained by replacing four right angles with four smooth rounded corners. FIG. 7 shows a smooth rounded rectangle obtained by the smooth rounded corner generation method disclosed in the present invention. In the example of FIG. 7 , the smoothing margin m is 0.5r (if the rounded corner smoothness is used as a parameter, the rounded corner smoothness s is 50%). Compared with the rounded rectangle shown in FIG. 2 , the smooth rounded rectangle shown in FIG. 7 is smoother.

In the present disclosure, the object types to which smooth rounded corners can be applied include: Path, Canvas, Drawable, bitmap, View, and ViewGroup. For different types of interface objects, one or more different calling methods can be selected.

In the Android system, a drawing path is an object used to describe the outline of a graphic, which can contain elements such as straight lines, curves, and arcs, and is used to draw complex graphics or shapes on a canvas. Android provides the android.graphics.Path class to operate and manage path objects, through which paths can be created, modified, and drawn. For a Path, applying the above method for generating a smooth rounded curve disclosed in the present invention can obtain a Path that meets the requirements.

In Android development, Canvas is a class in the Android graphics framework (android.graphics.Canvas), which provides a drawing surface for Bitmap or view View for rendering graphics. The Canvas class allows various drawing operations such as drawRect(), drawCircle(), drawText(), drawPath(), etc., allowing developers to render shapes, text, and other graphic elements onto the canvas. For Canvas, you can draw smooth rounded corners according to the "drawing within the boundary method" or the "erasing outside the boundary method". If you use the "drawing within the boundary method", you can first clip the Canvas to the range of the Path provided above, and then cancel the clipping after the drawing is completed, so that you can draw content that meets the definition of smooth rounded corners. According to the "erasing outside the boundary method", you can draw first, and then use a transparent color to cover the range outside the range described by the Path after the drawing is completed, so that you can erase the drawn content that does not meet the smooth rounded corner range.

Drawable is an important class in the Android system for managing and displaying drawable graphic resources. It supports multiple types of graphic representations and can be dynamically loaded and used through resource files or codes. Drawable can be used in development to achieve rich interface effects and interactions, adding visual appeal and functionality to the application. For Drawable, in one embodiment, a SmoothCornerDrawable object can be provided, and any object of Drawable type can be passed in. For the user, the object will automatically achieve a smooth rounded corner effect when drawing. For the behavior within the system, the drawing result of the Drawable is actually modified during the drawing phase using one of the two methods of the Canvas mentioned above.

Bitmap is a commonly used image processing and display tool in Android development. Through the Bitmap class and related tool classes, developers can flexibly load, create, modify and display bitmaps. For bitmaps, after obtaining the bitmap, you can set the bitmap as the drawing base map of Canvas, and use the "out-of-bounds erase method" to cover the bitmap with smooth rounded corners.

View and ViewGroup are the core classes for building user interfaces in Android applications. Developers can use these classes to create, manage, and customize various interface elements. View represents a single visual element, while ViewGroup is a container for organizing and managing multiple Views. By using View and ViewGroup properly, a flexible and interactive user interface can be built. For View, the present disclosure may provide an extension function that sets the boundary contour of View to a smooth rounded curve and sets View to be clipped to the boundary, thereby achieving smooth rounded corners. For ViewGroup, this embodiment provides a SmoothCornerView object that automatically clips the internal sub-View to the set smooth rounded boundary.

FIG8 shows an example of an image drawing method disclosed in the present invention. As shown in the figure, no matter what kind of interface object, the key parameters of smooth rounded corners can be obtained first. These parameters can be input by the user or generated according to rules. Subsequently, a trajectory with smooth rounded corners (for example, a closed path composed of smooth rounded corner curves) is generated according to the parameters based on the above method disclosed in the present invention. Thereafter, all contents can be drawn within the trajectory range according to the in-boundary drawing method; or the contents outside the trajectory range can be erased according to the out-boundary erasing method. Thus, a target object with smooth rounded corners is obtained.

The smooth rounded corner generation and corresponding image drawing method disclosed in the present invention can achieve a smooth rounded corner with smoother edge transition than ordinary rounded corners, high precision, low performance loss, and lossless adaptive enlargement without modifying the original Android implementation, and can be applied in almost all application development scenarios.

The present disclosure may also be implemented as a computing device. FIG9 shows a schematic diagram of a computing device that can be used to implement the above method according to at least one embodiment of the present disclosure. As shown in the figure, the computing device 900 includes a memory 910 and a processor 920.

The processor 920 may be a multi-core processor or may include multiple processors. In some embodiments, the processor 920 may include a general-purpose main processor and one or more special coprocessors, such as a graphics processing unit (GPU), a digital signal processor (DSP), etc. In some embodiments, the processor 920 may be implemented using a customized circuit, such as an application-specific integrated circuit (ASIC) or a field programmable gate array (FPGA).

The memory 910 may include various types of storage units, such as system memory, read-only memory (ROM), and permanent storage devices. Among them, ROM can store static data or instructions required by the processor 920 or other modules of the computer. The permanent storage device may be a readable and writable storage device. The permanent storage device may be a non-volatile storage device that does not lose the stored instructions and data even after the computer is powered off. In some embodiments, the permanent storage device uses a large-capacity storage device (such as a magnetic or optical disk, flash memory) as a permanent storage device. In some other embodiments, the permanent storage device may be a removable storage device (such as a floppy disk, optical drive). The system memory may be a readable and writable storage device or a volatile readable and writable storage device, such as a dynamic random access memory. The system memory may store some or all instructions and data required by the processor at runtime. In addition, the memory 610 may include any combination of computer-readable storage media, including various types of semiconductor memory chips (DRAM, SRAM, SDRAM, flash memory, programmable read-only memory), and disks and/or optical disks may also be used. In some embodiments, the memory 910 may include a readable and/or writable removable storage device, such as a laser disc (CD), a read-only digital versatile disc (such as a DVD-ROM, a double-layer DVD-ROM), a read-only Blu-ray disc, an ultra-density optical disc, a flash memory card (such as an SD card, a mini SD card, a Micro-SD card, etc.), a magnetic floppy disk, etc. The computer-readable storage medium does not include carrier waves and transient electronic signals transmitted wirelessly or wired.

The memory 910 stores executable codes. When the executable codes are processed by the processor 920 , the processor 920 can execute the smooth rounded corner generating method and the image drawing method mentioned above.

In addition, the method according to the present disclosure may also be implemented as a computer program or a computer program product, which includes computer program code instructions for executing the above steps defined in the above method of the present disclosure.

Alternatively, the present disclosure may also be implemented as a non-transitory machine-readable storage medium (or computer-readable storage medium, or machine-readable storage medium) on which executable code (or computer program, or computer instruction code) is stored. When the executable code (or computer program, or computer instruction code) is executed by a processor of an electronic device (or computing device, server, etc.), the processor executes the various steps of the above-mentioned method according to the present disclosure.

Those skilled in the art will further appreciate that the various illustrative logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein may be implemented as electronic hardware, computer software, or a combination of both.

The flow charts and block diagrams in the accompanying drawings show the possible architecture, functions and operations of the system and method according to multiple embodiments of the present disclosure. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and/or flow chart, and the combination of the boxes in the block diagram and/or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

The embodiments of the present disclosure have been described above, and the above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and changes will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The selection of terms used herein is intended to best explain the principles of the embodiments, practical applications, or improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the embodiments disclosed herein.

Claims (9)

1. An image drawing method for an Android system, comprising: generating paths including smooth rounded corners; and Generate an image according to the object type of the drawing interface and the path, The smooth rounded corner is generated between a first side and a second side that are perpendicular to each other, and a method for generating the smooth rounded corner includes: Get the smoothing allowance and fillet radius values; Determine a first coordinate point located on the first side and a second coordinate point located on the second side according to the sum of the smoothing margin and the fillet radius value, wherein the first coordinate point and the second coordinate point are endpoints of the smooth fillet; Determine a third coordinate point according to the fillet radius value, wherein the third coordinate point is the middle point of the smooth fillet; generating a first Bezier curve with the first coordinate point and the third coordinate point as endpoints, and generating a second Bezier curve with the third coordinate point and the second coordinate point as endpoints; and The smooth rounded corner is obtained based on the first Bezier curve and the second Bezier curve, The step of generating a first Bezier curve with the first coordinate point and the third coordinate point as endpoints includes: A first Bezier curve is generated with the first coordinate point and the third coordinate point as endpoints and the fourth coordinate point and the fifth coordinate point as handle points, wherein the coordinates of the fourth coordinate point and the fifth coordinate point are determined based on the fillet radius value so that the slope of the first Bezier curve changes continuously, Before generating a first Bezier curve with the first coordinate point and the third coordinate point as endpoints, the method further includes: Determine the coordinates of the fourth coordinate point according to the first angle and the fillet radius value; and Determine the coordinates of the fifth coordinate point according to the second angle and the fillet radius value, The first angle corresponds to the angle between the line between the fourth coordinate point and the positioning point and the second side, the positioning point corresponds to the center of a common fillet with the fillet radius value, and the second side is one of the two sides where the smooth fillet is located, where the second coordinate point is located; The second angle corresponds to an angle formed by a line connecting the fifth coordinate point and the positioning point and a line connecting the third coordinate point and the positioning point. 2. The method according to claim 1, wherein generating a second Bezier curve with the third coordinate point and the second coordinate point as endpoints comprises: The generated first Bezier curve is flipped to obtain the second Bezier curve. 3. The method according to claim 1 or 2, wherein the coordinates of the coordinate point are based on the intersection of the first side and the second side as the origin, and the third coordinate point coincides with the middle point of a common fillet with a radius equal to the fillet radius value. The method of claim 1 , wherein the smoothing margin is a product of a fillet smoothness and a fillet radius value. 5. The method according to claim 1, wherein the smooth rounded corner is drawn at a right angle position of the rectangular area, and the method further comprises: Rotating the smooth rounded corner by a predetermined angle; and The rotated smooth rounded corners are respectively moved to positions corresponding to the remaining right angles of the rectangular area. 6. The method of claim 1, wherein: In response to the object type being a path, taking the path as the image; In response to the object type being a canvas, selecting one of the following calls: clipping the canvas to the range of the path and drawing the canvas content within the range of the path, or drawing the canvas content and erasing the content outside the range of the path after drawing; In response to the object type being a drawable, modifying a drawing result of the drawable using a call corresponding to the canvas; In response to the object type being a bitmap, the bitmap is set as a drawing base map of the canvas, the canvas content is drawn, and after the drawing is completed, the content outside the range of the path is erased; In response to the object type being a view, setting a boundary contour of the view to a smooth rounded curve corresponding to the path and clipping the view according to the boundary contour; and In response to the object type being a view group, the set smooth rounded corner view object is used to automatically clip the views in the view group to generate the path as the set smooth rounded corner boundary. 7. A computing device comprising: Processor; and A memory having executable codes stored therein, which, when executed by the processor, causes the processor to execute the method according to any one of claims 1 to 6. 8. A non-transitory machine-readable storage medium having executable codes stored thereon, which, when executed by a processor of an electronic device, causes the processor to execute the method according to any one of claims 1 to 6. 9. A computer program product, comprising computer program instructions, characterized in that when the computer program instructions are executed by a processor, the method according to any one of claims 1 to 6 is implemented.