Rounded corner image generation method, electronic device, and storage medium
Through region superposition and image processing technology, rounded corner pictures are generated, which solves the problem of large storage space and bandwidth in the existing technology, and realizes flexible rounded corner pictures generation and efficient system bandwidth management.
Patent Information
- Application Number
- CN202411211697.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-30
- Publication Date
- 2024-12-17
- Estimated Expiration
- 2044-08-30
AI Technical Summary
When generating rounded corner pictures in the prior art, designers need to design and export pictures with transparency information in advance, resulting in the picture taking up a large storage space and system bandwidth. When the rounded corner radius needs to be modified, the picture needs to be regenerated, which is inefficient. .
By superimposing the foreground picture and background picture in regions, a rounded corner picture is generated, and an image without transparency information is used, and a MASK rounded corner image is generated through rounding processing, upsampling, downsampling, anti-aliasing and symmetrical mirroring processing is used to generate a MASK rounded corner image , only the rounded corner areas are superimposed to reduce the system bandwidth.
It realizes the flexibility of generating rounded corner pictures without increasing image resource usage and system bandwidth, reducing designer workload and improving efficiency.
Smart Images

Figure CN118761919B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of image processing technology, and in particular to a method for generating a rounded corner image, an electronic device, and a storage medium. Background Art
[0002] In the digital age, rounded corner images are ubiquitous on web pages, mobile apps, and various human-computer interaction interfaces. Rounded corner images are more friendly and more in line with people's current aesthetics. For generating rounded corner images, the more common practice is for designers to design images with rounded corner effects in advance, and then developers put them into devices for use. Such images with rounded corner effects are generally used as foreground images, and need to be displayed after being overlaid with background images for transparency; therefore, such images with rounded corner effects require transparency information, such as PNG format can contain transparency channels. The rounded corner images prepared by designers in advance have a certain radius, and when the radius needs to be modified, the designer needs to regenerate a new image. In addition, each pixel value of the rounded corner image exported by the designer carries transparency information, which will take up more storage space. Based on the overlay of the image with the background image, the generated image will occupy more system bandwidth. When overlaying with the background image, the transparency is overlaid on the entire image area, resulting in the generated image occupying more system bandwidth. Summary of the invention
[0003] The present application aims to solve at least one of the technical problems existing in the prior art. To this end, the present application proposes a method for generating a rounded corner image, an electronic device, and a storage medium, which can generate a rounded corner image by superimposing a foreground image and a background image in different regions, thereby reducing the system bandwidth occupied by the generated rounded corner image.
[0004] In a first aspect, an embodiment of the present application provides a method for generating a rounded corner image, comprising:
[0005] Get the background image and the foreground image without transparency information;
[0006] Performing region division on the foreground image, and determining a non-target region image and at least one target region image from the candidate region images obtained by the division;
[0007] Performing rounding processing on the target area image according to a preset rounding radius to obtain an initial first arc;
[0008] Performing upsampling processing, downsampling processing, anti-aliasing processing and symmetric mirror processing on the first circular arc to obtain a smooth second circular arc;
[0009] Performing image filling processing on the target area image based on the second circular arc to generate a MASK rounded corner image;
[0010] The MASK rounded corner image is transparently superimposed with the area to be superimposed of the background image, and data of the non-target area image is transferred to cover the area to be covered of the background image to generate a rounded corner image.
[0011] According to some embodiments of the present application, rounding the target area image according to a preset rounding radius to obtain an initial first arc includes:
[0012] Determine the first initial coordinates of the center of the target area image, the initial starting point of the arc, and the first error value; the first error value is calculated according to the first initial error calculation formula and the preset fillet radius; the first initial coordinates include a first horizontal coordinate and a first vertical coordinate, the first horizontal coordinate is 0, and the first vertical coordinate is the preset fillet radius;
[0013] When the first horizontal coordinate is less than or equal to the first vertical coordinate, performing arc coordinate iterative calculation processing according to the first error value, a preset horizontal coordinate iterative formula, a vertical coordinate iterative formula, a first error iterative calculation formula, and a second error iterative calculation formula to obtain the current coordinates of the arc and the current second error value;
[0014] When the abscissa of the current coordinate of the arc is less than or equal to the ordinate of the current coordinate of the arc, continue to perform iterative calculation of the arc coordinates according to the second error value, the preset abscissa iteration formula, the ordinate iteration formula, the first error iteration calculation formula, and the second error iteration calculation formula to update the current coordinate of the arc;
[0015] Until the horizontal coordinate of the current coordinate of the arc is greater than the vertical coordinate of the current coordinate of the arc, the iterative calculation process of the arc coordinate is terminated, and the coordinate of the end point of the arc is output;
[0016] The first arc is generated according to the first initial coordinates, the current coordinates of the arc, and the coordinates of the arc endpoint.
[0017] According to some embodiments of the present application, the arc coordinate iterative calculation processing is performed according to the first error value, the preset horizontal coordinate iterative formula, the vertical coordinate iterative formula, the first error iterative calculation formula, and the second error iterative calculation formula to obtain the current coordinates of the arc and the current second error value, including:
[0018] When it is determined that the first error value is greater than or equal to zero, updating the first ordinate based on the ordinate iteration formula to obtain a second ordinate, and updating the first error value according to the first error iteration calculation formula to obtain a current second error value;
[0019] Updating the first horizontal coordinate to a second horizontal coordinate according to the horizontal coordinate iteration formula;
[0020] The current coordinate of the arc is generated according to the second ordinate and the second abscissa.
[0021] According to some embodiments of the present application, the iterative calculation of arc coordinates is performed according to the first error value, the preset horizontal coordinate iteration formula, the vertical coordinate iteration formula, the first error iteration calculation formula, and the second error iteration calculation formula to obtain the current coordinates of the arc and the current second error value, and further includes:
[0022] Determine that the first error value is less than zero, and update the first error value according to the second error iterative calculation formula to obtain a current second error value;
[0023] Updating the first horizontal coordinate to a second horizontal coordinate according to the horizontal coordinate iteration formula;
[0024] The current coordinate of the arc is generated according to the first ordinate and the second abscissa.
[0025] According to some embodiments of the present application, performing upsampling processing, downsampling processing, anti-aliasing processing, and symmetric mirror processing on the first arc to obtain a smooth second arc includes:
[0026] Determine a second initial coordinate and an initial third error value of the first arc; the third error value is calculated according to a second initial error calculation formula and the preset fillet radius; the abscissa of the second initial coordinate is 0, and the ordinate of the second initial coordinate is the product of the preset fillet radius and a preset upsampling multiple;
[0027] Based on the error term recursion method, the arc coordinates are iteratively calculated according to the second initial coordinates and the third error value to calculate the upsampled arc coordinates on the first arc;
[0028] According to the iteration order in the iterative calculation process of the arc coordinates, down-sampling process is performed with every four up-sampled arc coordinates as a coordinate group, and transparency information of edge pixels on the first arc is calculated;
[0029] The first circular arc including the transparency information is mirror-symmetric along a preset symmetry axis to obtain the second circular arc including the transparency information.
[0030] According to some embodiments of the present application, the downsampling process is performed using the four up-sampled arc coordinates as a coordinate group to calculate the transparency information of the edge pixels on the first arc, including:
[0031] Determine a first circular arc coordinate, a second circular arc coordinate, a third circular arc coordinate, and a fourth circular arc coordinate from the coordinate group;
[0032] Right-shifting the ordinates of the first arc coordinate, the second arc coordinate, the third arc coordinate, and the fourth arc coordinate respectively according to a preset number of bits, and obtaining a first shift result, a second shift result, a third shift result, and a fourth shift result accordingly;
[0033] Determine a calculation formula according to a comparison result among the first shift result, the second shift result, the third shift result, and the fourth shift result;
[0034] The transparency information of the downsampled edge pixels is calculated according to the calculation formula.
[0035] According to some embodiments of the present application, performing transparency superposition of the MASK rounded corner image and the to-be-superimposed area of the background image includes:
[0036] In the case where one target area image is determined from the candidate area images, and one MASK rounded corner image is generated correspondingly by performing image filling processing on one target area image based on the second circular arc, determining a target number of times;
[0037] According to the target number of times, the MASK rounded corner image is mirrored and rotated a target number of times, and while generating the MASK rounded corner image, transparency is superimposed with the area to be superimposed of the background image.
[0038] According to some embodiments of the present application, performing image filling processing on the target area image based on the second circular arc to obtain a MASK rounded corner image includes:
[0039] In the target area image, setting a MASK value in a sector-shaped area formed by the second circular arc and the center of the circle to a first transparency value;
[0040] In the target area image, the MASK value of the remaining area outside the fan-shaped area is set to a second transparency value to obtain the MASK rounded corner image; wherein the second transparency value is smaller than the first transparency value.
[0041] In a second aspect, an embodiment of the present application provides an electronic device comprising at least one processor and a memory for communicating with the at least one processor; the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the rounded corner image generation method as described in any one of the embodiments of the first aspect.
[0042] In a third aspect, an embodiment of the present application provides a storage medium, which is a computer-readable storage medium, and the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to implement the rounded corner image generation method as described in any one of the embodiments of the first aspect when executed by a computer.
[0043] The embodiment of the present application includes: in the process of generating a rounded corner image, first, a background image and a foreground image without transparency information are obtained; secondly, the foreground image is divided into regions, and a non-target region image and at least one target region image are determined from the candidate region images obtained by the division; then, the target region image is rounded according to a preset rounded corner radius to obtain an initial first arc; then, the first arc is upsampled, downsampled, anti-aliased and symmetrically mirrored to obtain a smooth second arc; then, the target region image is filled based on the second arc to generate a MASK rounded corner image; finally, the MASK rounded corner image is transparently superimposed with the area to be superimposed of the background image, and the non-target region image is data-transferred to cover the area to be covered of the background image, to generate a rounded corner image, and to reduce the system bandwidth occupied by the generated rounded corner image. That is to say, the embodiment of the present application can generate a rounded corner image by superimposing the foreground image and the background image in different regions, and to reduce the system bandwidth occupied by the generated rounded corner image.
[0044] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or understood by practicing the present application. The purpose and other advantages of the present application can be realized and obtained through the structures particularly pointed out in the description and the drawings. BRIEF DESCRIPTION OF THE DRAWINGS
[0045] Figure 1 It is a flowchart of a method for generating a rounded corner image provided by an embodiment of the present application;
[0046] Figure 2 This is a schematic diagram of the area division of a foreground image provided by an embodiment of the present application;
[0047] Figure 3 is a schematic diagram of a first arc provided by an embodiment of the present application;
[0048] Figure 4 It is a schematic diagram of the flow chart of iterative calculation processing of arc coordinates provided by an embodiment of the present application;
[0049] Figure 5 is a schematic diagram of a generated MASK rounded corner image provided by an embodiment of the present application;
[0050] Figure 6It is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION
[0051] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments.
[0052] It should be understood that in the description of the present application, the orientation descriptions, such as up, down, front, back, left, right, etc., indicating orientations or positional relationships, are based on the orientations or positional relationships shown in the drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be understood as a limitation on the present application.
[0053] It should be noted that although a logical order is shown in the flowchart in the description of the present application, in some cases, the steps shown or described may be performed in an order different from that in the flowchart. In the description of the present application, a number of means one or more, and a plurality of means two or more. The description of "first" and "second" is only used for the purpose of distinguishing technical features, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features or implicitly indicating the order of the indicated technical features.
[0054] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.
[0055] First, some terms used in this application are explained:
[0056] Mask: A mask containing transparency information. In the field of image processing, masking is a technique used to control the visibility or transparency of an image.
[0057] The present application provides a method for generating a rounded corner image, an electronic device, and a storage medium, and relates to the field of image processing technology. The method includes: obtaining a background image and a foreground image without transparency information; dividing the foreground image into regions, and determining a non-target region image and at least one target region image from the candidate region images obtained by the division; performing rounding processing on the target region image according to a preset rounded corner radius to obtain an initial first arc; performing upsampling processing, downsampling processing, anti-aliasing processing, and symmetric mirror processing on the first arc to obtain a smooth second arc; performing image filling processing on the target region image based on the second arc to generate a MASK rounded corner image; performing transparency superposition on the MASK rounded corner image and the area to be superimposed of the background image, and performing data transfer on the non-target region image to cover the area to be covered of the background image to generate a rounded corner image. The present application can reduce the system bandwidth occupied by the generated rounded corner image.
[0058] The embodiments of the present application are further described below in conjunction with the accompanying drawings.
[0059] First, as Figure 1 As shown, the method for generating a rounded corner image may include but is not limited to steps S110 to S140.
[0060] Step S110: Acquire a background image and a foreground image without transparency information.
[0061] Step S120: performing region division on the foreground image, and determining a non-target region image and at least one target region image from the candidate region images obtained by the division.
[0062] Step S130: rounding the target area image according to a preset rounding radius to obtain an initial first arc.
[0063] Step S140: performing upsampling processing, downsampling processing, anti-aliasing processing and symmetric mirror processing on the first arc to obtain a smooth second arc.
[0064] Step S150: performing image filling processing on the target area image based on the second arc to generate a MASK rounded corner image.
[0065] Step S160: perform transparency superposition on the MASK rounded corner image and the area to be superimposed of the background image, perform data transfer on the non-target area image to cover the area to be covered of the background image, and generate a rounded corner image.
[0066] The embodiment of the present application uses a picture that does not contain transparency information (such as a picture in JPG format) for rounded corner overlay, so as to reduce the memory usage of picture resources.
[0067] Specifically, in step S110, the foreground image without transparency information may be an image in JPG format, an image in JPEG format, or an image in other formats. Therefore, the present application does not impose any specific restrictions on the format of the foreground image without transparency information.
[0068] To further illustrate step S120, specifically, Figure 2 As shown, when the foreground image is divided into regions, the foreground image can be divided into nine candidate region images, and each candidate region image obtained by the division is numbered. Among them, the candidate region images corresponding to region No. 0, region No. 2, region No. 6, and region No. 8 are the corresponding target region images to be rounded; the candidate region images corresponding to region No. 1, region No. 3, region No. 4, region No. 5, and region No. 7 are the corresponding non-target region images that do not need to be rounded. It should be noted that the target region image is used for transparency superposition with the background image after rounding. Therefore, four MASK rounded corner images need to be generated based on the target region image, while no MASK rounded corner image needs to be generated for the non-target region image.
[0069] Specifically, in order to subsequently generate a MASK rounded-corner image based on the target area image, the target area image is a square; and when multiple target area images are selected, the multiple target area images have the same shape and size.
[0070] It should be noted that only one target area image can be determined, and a corresponding MASK rounded corner image can be generated, and then the MASK rounded corner image can be symmetrically mirrored according to the target number to generate the target number of MASK rounded corner images. It is also possible to determine the target number of target area images according to the number of targets that need to be generated, and directly generate a corresponding MASK rounded corner image for each target area image to obtain the target number of MASK rounded corner images. Therefore, this application does not impose specific restrictions on the number of determined target area images.
[0071] Through step S160, after the foreground image is divided into regions, transparency is superimposed only on the rounded corner regions, and data is directly moved on the non-rounded corner regions, thereby reducing the system bandwidth.
[0072] Through step S110 to step S160, in the process of generating a rounded corner image, first, a background image and a foreground image without transparency information are obtained; secondly, the foreground image is divided into regions, and a non-target region image and at least one target region image are determined from the candidate region images obtained by the division; then, the target region image is rounded according to a preset rounded corner radius to obtain an initial first arc; then, the first arc is upsampled, downsampled, anti-aliased and symmetrically mirrored to obtain a smooth second arc; then, the target region image is filled based on the second arc to generate a MASK rounded corner image; finally, the MASK rounded corner image is transparently superimposed with the area to be superimposed of the background image, and data is transferred to the non-target region image to cover the area to be covered of the background image, to generate a rounded corner image, and to reduce the system bandwidth occupied by the generated rounded corner image. That is to say, the embodiment of the present application can generate a rounded corner image by superimposing the foreground image and the background image in different regions, thereby reducing the system bandwidth occupied by the generated rounded corner image.
[0073] According to some embodiments of the present application, step S130 is further described. Step S130: rounding the target area image according to a preset fillet radius to obtain an initial first arc, including but not limited to steps S131 to S135.
[0074] Step S131: determining the first initial coordinates of the center of the target area image, the initial starting point of the arc, and the first error value; the first error value is calculated according to the first initial error calculation formula and the preset fillet radius; the first initial coordinates include a first abscissa and a first ordinate, the first abscissa is 0, and the first ordinate is the preset fillet radius;
[0075] Step S132: when the first horizontal coordinate is less than or equal to the first vertical coordinate, the arc coordinates are iteratively calculated according to the first error value, the preset horizontal coordinate iteration formula, the vertical coordinate iteration formula, the first error iteration calculation formula, and the second error iteration calculation formula to obtain the current coordinates of the arc and the current second error value;
[0076] Step S133: when the abscissa of the current coordinate of the arc is less than or equal to the ordinate of the current coordinate of the arc, continue to perform iterative calculation of the arc coordinates according to the second error value, the preset abscissa iteration formula, the ordinate iteration formula, the first error iteration calculation formula, and the second error iteration calculation formula to update the current coordinate of the arc;
[0077] Step S134: until the horizontal coordinate of the current coordinate of the arc is greater than the vertical coordinate of the current coordinate of the arc, the iterative calculation process of the arc coordinate is terminated, and the coordinate of the end point of the arc is output;
[0078] Step S135: Generate a first arc according to the first initial coordinates, the current coordinates of the arc, and the coordinates of the arc endpoint.
[0079] Specifically, when determining the center of the target area image, the center of each target area image is the point closest to the center of the foreground image. Figure 2 In the figure, the point at the lower right corner of area No. 0 is determined as the center of the circle, the point at the lower left corner of area No. 2 is determined as the center of the circle, the point at the upper right corner of area No. 6 is determined as the center of the circle, and the point at the upper left corner of area No. 8 is determined as the center of the circle.
[0080] Specifically, the first arc is a one-eighth arc.
[0081] It can be understood that the value of the preset fillet radius can be set, and the designer can determine the length of the preset fillet radius according to actual needs, and automatically generate the required first arc based on the preset fillet radius, which is conducive to the flexible generation of first arcs of various sizes, thereby reducing manual workload.
[0082] Specifically, the preset fillet radius is R, and the first error iterative calculation formula is d = 5 / 4 - R.
[0083] Specifically, the horizontal axis iteration formula is: x=x+1.
[0084] Specifically, the ordinate iteration formula is: y=y-1.
[0085] Specifically, the first error iterative calculation formula is: d=d+2(xy)+5.
[0086] Specifically, the second error iterative calculation formula is: d=d+2x+3.
[0087] According to some embodiments of the present application, step S132 is further described. Step S132: performing arc coordinate iterative calculation processing according to the first error value, the preset horizontal coordinate iterative formula, the vertical coordinate iterative formula, the first error iterative calculation formula, and the second error iterative calculation formula to obtain the current coordinates of the arc and the current second error value, including:
[0088] When it is determined that the first error value is greater than or equal to zero, the first ordinate is updated based on the ordinate iteration formula to obtain the second ordinate, and the first error value is updated according to the first error iteration calculation formula to obtain the current second error value;
[0089] Update the first horizontal coordinate to the second horizontal coordinate according to the horizontal coordinate iteration formula;
[0090] Generate the current coordinate of the arc according to the second ordinate and the second abscissa.
[0091] According to some embodiments of the present application, step S132 is further described. Step S132: performing arc coordinate iterative calculation processing according to the first error value, the preset horizontal coordinate iterative formula, the vertical coordinate iterative formula, the first error iterative calculation formula, and the second error iterative calculation formula to obtain the current coordinates of the arc and the current second error value, further comprising:
[0092] Determine that the first error value is less than zero, update the first error value according to the second error iteration calculation formula to obtain the current second error value; update the first horizontal coordinate to the second horizontal coordinate according to the horizontal coordinate iteration formula; generate the current coordinate of the arc according to the first vertical coordinate and the second horizontal coordinate.
[0093] Through steps S131 to S135, an algorithm for generating a 1 / 8 arc is implemented. By recursively calculating the error term and performing iterative error calculation based on the initial first error value, the coordinates on the first arc can be calculated without using the standard equation of the circle, and the first arc can be generated.
[0094] An example is given to illustrate the specific flow chart of generating the first arc provided in the embodiment of the present application.
[0095] It is understandable that the standard equation of a circle is: Assume that the center of the circle is at the origin (0, 0), the radius is R, the first initial coordinates of the initial starting point of the arc are (0, R), and the coordinates of the end point of the arc are At, clockwise, Figure 3 One-eighth arc shown.
[0096] First, the parameters are initialized, that is, the center of the target area image is determined, specifically, the point at the lower left corner of area No. 2 is determined as the center of the circle, the first initial coordinates of the initial starting point of the arc are: x = 0, y = R, and the first error value is d = 5 / 4 -R.
[0097] like Figure 4 As shown, Figure 4 It is a flowchart of iterative calculation processing of arc coordinates provided by an embodiment of the present application.
[0098] Step S401: determine whether x<= y holds; if so, jump to step S402; if not, end the arc coordinate iterative calculation process and output the current arc coordinates.
[0099] Step S402: Determine whether d≥0 is established; if so, jump to step S403; if not, jump to step S405;
[0100] Step S403: Execute the ordinate iteration formula: y=y-1, and update the ordinate;
[0101] Step S404: according to the current horizontal coordinate and vertical coordinate, execute the first error iteration calculation formula: d=d+2(xy)+5 to obtain an updated second error value; jump to step S406;
[0102] Step S405: according to the current horizontal coordinate and vertical coordinate, the second error iterative calculation formula is: d=d+2x+3, and the updated second error value is obtained; jump to step S406;
[0103] Step S406: Execute the horizontal coordinate iteration formula: x=x+1, and update the horizontal coordinate;
[0104] Steps S401 to S406 are re-executed according to the current horizontal coordinate, vertical coordinate, and second error value until it is determined that:
[0105] If x<= y does not hold, the loop ends and the current arc coordinates are output.
[0106] The embodiment of the present application implements an algorithm for generating a one-eighth arc based on the error term recursion method through the above steps S401 to S406, and uses the initial first error value to perform error iterative calculation, so that the arc coordinates can be calculated without using the standard equation of the circle.
[0107] It should be noted that the algorithm for generating a 1 / 8 arc implemented through steps S131 to S135 does not take into account the anti-aliasing problem of arc edge pixels. Therefore, the first arc needs to be further processed.
[0108] According to some embodiments of the present application, step S140 is further described. Step S140: upsampling, downsampling, anti-aliasing and symmetric mirroring are performed on the first arc to obtain a smooth second arc, including but not limited to steps S141 to S144.
[0109] Step S141: Determine the second initial coordinates and the initial third error value of the first arc; the third error value is calculated based on the second initial error calculation formula and the preset fillet radius; the horizontal coordinate of the second initial coordinate is 0, and the vertical coordinate of the second initial coordinate is the product of the preset fillet radius and the preset upsampling multiple.
[0110] Step S142: Based on the error term recursive method, the arc coordinates are iteratively calculated according to the second initial coordinates and the third error value to calculate the upsampled arc coordinates on the first arc.
[0111] Step S143: According to the iteration order in the arc coordinate iterative calculation process, down-sampling is performed with every four up-sampled arc coordinates as a coordinate group to calculate the transparency information of the edge pixels on the first arc.
[0112] Step S144: mirror-symmetric the first circular arc including transparency information along a preset symmetry axis to obtain a second circular arc including transparency information.
[0113] Specifically, the abscissa of the second initial coordinate is: x_up = 0, and the ordinate of the second initial coordinate is: y_up = 4 *R.
[0114] Specifically, the preset fillet radius is R, and the second initial error calculation formula is: d = 1-4*R. It should be noted that the second initial error calculation formula is obtained by simplifying the first error iterative calculation formula: d = 5 / 4 - R. It can be understood that when the preset fillet radius becomes 4 times the original, 5 / 4 in the first error iterative calculation formula is simplified to 1, so that the influence of the relative error is reduced.
[0115] It should be noted that, in step S141, the preset upsampling multiple may be four times, or may be 2 times or 8 times. Therefore, the embodiment of the present application does not impose any specific restriction on the value of the preset upsampling multiple.
[0116] It can be understood that by implementing upsampling processing in step S142, the upsampling operation can further reduce the error impact caused by simplifying the first error iterative calculation formula.
[0117] It can be understood that the upsampling process is implemented by step S142. Specifically, the algorithm for generating a one-eighth arc based on the error term recursion is applied from step S401 to step S406, so as to complete the iterative calculation process of the arc coordinates and calculate the upsampled arc coordinates on the first arc. And by upsampling the first arc, the error iterative calculation is simplified to integer calculation. Specifically, the upsampled arc coordinates are marked as (x_up, y_up).
[0118] According to some embodiments of the present application, step S143 is further described, wherein downsampling processing is performed on every four up-sampled arc coordinates as a coordinate group to calculate the transparency information of the edge pixels on the first arc, including but not limited to: determining the first arc coordinate, the second arc coordinate, the third arc coordinate and the fourth arc coordinate from the coordinate group; right-shifting the vertical coordinates of the first arc coordinate, the second arc coordinate, the third arc coordinate and the fourth arc coordinate by a preset number of bits, respectively, to obtain a first shift result, a second shift result, a third shift result and a fourth shift result accordingly; determining a calculation formula based on a comparison result between the first shift result, the second shift result, the third shift result and the fourth shift result; and calculating the transparency information of the down-sampled edge pixels according to the calculation formula.
[0119] It can be understood that, through step S143, after downsampling the first arc, the transparency of the edge pixels on the 1 / 8 arc (the transparency of the arc in the MSK rounded corner image) is obtained, thereby achieving the anti-aliasing effect of the arc edge.
[0120] Assuming that 4 times upsampling is performed, an example is given to specifically explain the downsampling process performed in step S143 .
[0121] First, according to the iteration order in the iterative calculation process of the arc coordinates (specifically, the algorithm for generating one-eighth arc based on the error term recursive method is implemented from step S401 to step S406), the arc coordinates of the pixels on each four up-sampled arcs are grouped for down-sampling. If the coordinates of these four arc coordinates are: the first arc coordinate (x0, y0), the second arc coordinate (x1, y1), the third arc coordinate (x2, y2), and the fourth arc coordinate (x3, y3); the down-sampled coordinates are: x_down = x0 / 4, y_down. The transparency corresponding to (x_down, y_down) is calculated in four cases.
[0122] The first case: when y0>>2, y1>>2, y2>>2, y3>>2 are all equal, let y_down = y0>>2; then the transparency corresponding to the coordinate (x_down, y_down) is: alpha = ((y0&3) + (y1&3) + (y2&3) + (y3&3)) *16. It should be noted that the symbol ">>" is a right shift operator, where y>>2 is equivalent to y / 4. In computers, shift operations are faster than division operations, which is conducive to improving computing efficiency. The symbol "&" is an AND operation. The decimal 3 is represented by binary as 0b11. The purpose of the AND operation is to take the lower 2 bits to calculate alpha. It should be noted that when the preset upsampling multiple is 4, 3 is selected to perform the AND operation with each vertical coordinate in the transparency calculation, so as to take the lower 2 bits of the data for the next operation. In addition, in the calculation formula of alpha, multiplication by 16 is mainly to adapt the value width of alpha. Alpha is generally 8 bits wide and can represent data in the range of 0 to 255. If it is not multiplied by 16, the existing calculation process will obtain a value less than 16, and after multiplication by 16, a value less than 255 is obtained. Multiplication by 16 is equivalent to realizing a linear mapping from the range of 0 to 16 to the range of 0 to 256.
[0123] It should be noted that, in addition to the case where y0, y1, y2, and y3 are completely equal after shifting as shown in the first case, there are three other cases where y0, y1, y2, and y3 are not completely equal after shifting, which is equivalent to being unequal after downsampling. It can be understood that since 4 times upsampling is performed first, downsampling here is equivalent to restoring the original coordinates, so the coordinates are not equal after downsampling, and one x_down will correspond to two points (y_down0 and y_down1 respectively). Only when they are completely equal after shifting do they correspond to one point.
[0124] Furthermore, three situations in which the values are not completely equal after the shift are further explained.
[0125] The second case: when y0>>2 and y1>>2 are not equal, and y1>>2, y2>>2, and y3>>2 are equal, one x_down corresponds to two points y_down0 and y_down1: y_down0 = y0>>2; y_down1 = y1>>2.
[0126] The transparency corresponding to the coordinate (x_down, y_down0) is: alpha 0 = (y0&3) * 16.
[0127] The transparency corresponding to the coordinates (x_down, y_down1) is:
[0128] alpha 1 =64 + (y1&3) * 16 + (y2&3) * 16 + (y3&3) *16.
[0129] It should be noted that in the second case, the maximum value of alpha0 is a value less than 64, and the value 64 in the calculation formula of alpha 1 ensures that alpha0<=alpha 1.
[0130] It should be noted that alpha0 is the transparency of the point (x_down, y_down0). Compared with the point (x_down, y_down1), it is closer to the outside of the arc, and alpha0 must be less than or equal to alpha 1.
[0131] The third case: when y0>>2, y1>>2, y2>>3 are equal, and y2>>2 and y3>>2 are not equal, one x_down corresponds to two points y_down0 and y_down1: y_down0 = y0>>2; y_down1 = y3>>2.
[0132] The transparency corresponding to the coordinate (x_down, y_down0) is:
[0133] alpha 0 =(y0&3) * 16 + (y1&3) * 16 + (y2&3) * 16.
[0134] The transparency corresponding to the coordinate (x_down, y_down1) is: alpha 1 = 196 + (y3&3).
[0135] It should be noted that, in the third case, the maximum value of alpha0 is a value less than 196, and the 196 in the calculation formula of alpha 1 ensures that alpha0 is less than or equal to alpha 1.
[0136] The fourth case: when y0>>2 and y1>>2 are equal, and y1>>2 and y2>>2 are not equal, one x_down corresponds to two points y_down0 and y_down1: y_down0 = y0>>2; y_down1 = y2>>2.
[0137] The transparency corresponding to the coordinate (x_down, y_down0) is:
[0138] alpha 0 =(y0&3) * 16 + (y1&3) * 16 + (y2&3) * 16.
[0139] The transparency corresponding to the coordinate (x_down, y_down1) is: alpha 1 = 128 + (y1&3) * 16 + (y2&3) * 16.
[0140] It should be noted that, in the fourth case, the maximum value of alpha0 is a value less than 128, and the 128 in the calculation formula of alpha 1 ensures that alpha0 is less than or equal to alpha 1.
[0141] Through step S143, in the process of downsampling the first arc, the embodiment of the present application processes the arc coordinates and transparency in four cases, thereby achieving an anti-aliasing effect on the arc edge.
[0142] To further explain step S144, specifically, the first arc is a one-eighth arc segment, the preset symmetry axis is a 45-degree line, and the first arc is symmetrically mirrored along the 45-degree line to obtain a 1 / 4 arc (i.e., a second arc) including transparency information. The edge of the obtained second arc is as follows Figure 5 as shown by the gray edge in the figure.
[0143] Through step S141 to step S144, a second arc with anti-aliasing and smoother edge transition is obtained, which is beneficial to improving the quality of the subsequently generated rounded corner image.
[0144] According to some embodiments of the present application, step S150 is further described. Step S150: Based on the second arc, the target area image is subjected to image filling processing to obtain a MASK rounded corner image, including but not limited to: in the target area image, the MASK value in the fan-shaped area formed by the second arc and the center of the circle is set to the first transparency value; in the target area image, the MASK value of the remaining area outside the fan-shaped area is set to the second transparency value to obtain a MASK rounded corner image; wherein the second transparency value is less than the first transparency value. In this way, a MASK rounded corner image is obtained, which lays a data foundation for the subsequent generation of a rounded corner image by superimposing it with the background image.
[0145] Specifically, the first transparency value is 255, indicating opacity; the second transparency value is 0, indicating full transparency.
[0146] Specifically, the entire target area image is filled, the MASK value inside the arc is 255, indicating opacity, and the MASK value outside the arc is 0, indicating full transparency. Taking the preset fillet radius R = 5 as an example, the obtained MASK fillet image of the upper right corner fillet area (area No. 2) is as follows Figure 5 shown.
[0147] It should be noted that the MASK value specifically refers to alpha or apha0, alpha1 calculated in step S143.
[0148] According to some embodiments of the present application, step S160 will be further described, in which the MASK rounded corner image is transparently superimposed with the area to be superimposed of the background image, including: when it is determined that there is one target area image from the candidate area image, and an image filling process is performed on the target area image based on the second arc to generate a corresponding MASK rounded corner image, a target number of times is determined; according to the target number of times, the MASK rounded corner image is mirrored and rotated a target number of times, and while generating the MASK rounded corner image, transparency superimposition is performed with the area to be superimposed of the background image.
[0149] It can be understood that the embodiment of the present application only generates one MASK rounded corner image without generating another three MASK rounded corner images. When the MASK rounded corner image is mirrored and rotated, they are superimposed at the same time. There is no need to store the other three MASK rounded corner images, which can reduce the memory occupied by the rounded corner images.
[0150] According to some embodiments of the present application, step S160 is further described, in which the MASK rounded corner image is transparently superimposed with the area to be superimposed of the background image, including: when it is determined that there is one target area image from the candidate area images, and image filling processing is performed on the target area image based on the second arc, and a MASK rounded corner image is generated correspondingly, the target number is determined; according to the target number, the MASK rounded corner image is mirrored and rotated to generate the target number of MASK rounded corner images.
[0151] Specifically, the MASK rounded corner image of area No. 2 is mirrored or rotated to obtain the MASK rounded corner images of the other three rounded corner areas, and finally the processing is performed by area.
[0152] The background image and the foreground image are superimposed in step S160 to generate a rounded image. Figure 2 It can be understood that the candidate area images corresponding to area No. 0, area No. 2, area No. 6, and area No. 8 are the corresponding target area images to be rounded; corresponding MASK rounded corner images are generated, and the MASK rounded corner images contain the transparency information of each pixel in the rounded corner area. The final rounded corner effect can be obtained by superimposing the transparency with the background image. The foreground image of the non-rounded corner area is directly moved to cover the background image at the corresponding position. Only the transparency of the rounded corner area is superimposed, and the data of the non-rounded corner area is directly moved, which reduces the system bandwidth occupancy.
[0153] In summary, the embodiments of the present application provide a method for implementing rounded corner overlay on an image that does not contain transparency information, thereby reducing the memory occupied by image resources; in the process of implementing the rounded corner area overlay, an anti-aliased MASK rounded corner image with transparency information is generated, so that the edge transition of the arc of the MASK rounded corner image is smoother; and in the process of overlaying the foreground image and the background image, area division is performed, and transparency is only overlaid on the rounded corner area, and data is directly moved in the non-rounded corner area, thereby reducing the system bandwidth occupancy.
[0154] like Figure 6 As shown, the present invention also provides an electronic device, including:
[0155] The processor 601 may be implemented by a general-purpose central processing unit (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;
[0156] The memory 602 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 602 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 602, and the processor 601 calls and executes the rounded corner image generation method of the embodiment of this application;
[0157] Input / output interface 603, used to implement information input and output;
[0158] Communication interface 604, used to realize communication interaction between the present apparatus and other devices, which can be realized by wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.);
[0159] A bus 605 that transmits information between various components of the device (e.g., processor 601, memory 602, input / output interface 603, and communication interface 604);
[0160] The processor 601 , the memory 602 , the input / output interface 603 and the communication interface 604 are connected to each other in communication within the device via a bus 605 .
[0161] An embodiment of the present application further provides a storage medium, which is a computer-readable storage medium and stores a computer program. When the computer program is executed by a processor, the above-mentioned rounded corner image generation method is implemented.
[0162] As a non-transient computer-readable storage medium, the memory can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage devices. In some embodiments, the memory may optionally include a memory remotely arranged relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned networks include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof. The device embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and are implemented to be located in one place, or may also be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present embodiment.
[0163] It will be appreciated by those skilled in the art that all or some of the steps and systems in the methods disclosed above may be implemented as software, firmware, hardware, and appropriate combinations thereof. Some or all physical components may be implemented as software executed by a processor, such as a central processing unit, a digital signal processor, or a microprocessor, or as hardware, or as an integrated circuit, such as an application-specific integrated circuit. Such software may be distributed on a computer-readable medium, which may include a computer storage medium (or non-transitory medium) and a communication medium (or transient medium). As known to those skilled in the art, the term computer storage medium includes volatile and non-volatile, removable and non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, program modules, or other data). Computer storage media include, but are not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disk (DVD) or other optical disk storage, magnetic cassettes, magnetic tapes, disk storage or other magnetic storage devices, or any other medium that can be used to store desired information and can be accessed by a computer. Furthermore, it is well known to those skilled in the art that communication media typically include computer readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism, and may include any information delivery media.
Claims
1. A method for generating rounded corner images. It is characterized in that include: Get the background image and the foreground image without transparency information; Performing region division on the foreground image, and determining a non-target region image and at least one target region image from the candidate region images obtained by the division; Performing rounding processing on the target area image according to a preset rounding radius to obtain an initial first arc; Performing upsampling processing, downsampling processing, anti-aliasing processing and symmetric mirror processing on the first circular arc to obtain a smooth second circular arc; Performing image filling processing on the target area image based on the second circular arc to generate a MASK rounded corner image; The MASK rounded corner image is overlaid with the area to be overlaid of the background image with transparency, and the non-target area image is transferred to cover the area to be overlaid of the background image to generate a rounded corner image; The step of performing rounding processing on the target area image according to a preset rounding radius to obtain an initial first arc includes: Determine the first initial coordinates of the center of the target area image, the initial starting point of the arc, and the first error value; the first error value is calculated according to the first initial error calculation formula and the preset fillet radius; the first initial coordinates include a first horizontal coordinate and a first vertical coordinate, the first horizontal coordinate is 0, and the first vertical coordinate is the preset fillet radius; When the first horizontal coordinate is less than or equal to the first vertical coordinate, performing arc coordinate iterative calculation processing according to the first error value, a preset horizontal coordinate iterative formula, a vertical coordinate iterative formula, a first error iterative calculation formula, and a second error iterative calculation formula to obtain the current coordinates of the arc and the current second error value; When the abscissa of the current coordinate of the arc is less than or equal to the ordinate of the current coordinate of the arc, continue to perform iterative calculation of the arc coordinates according to the second error value, the preset abscissa iteration formula, the ordinate iteration formula, the first error iteration calculation formula, and the second error iteration calculation formula to update the current coordinate of the arc; Until the horizontal coordinate of the current coordinate of the arc is greater than the vertical coordinate of the current coordinate of the arc, the iterative calculation process of the arc coordinate is terminated, and the coordinate of the end point of the arc is output; The first arc is generated according to the first initial coordinates, the current coordinates of the arc, and the coordinates of the arc endpoint.
2. The method for generating a rounded corner image according to claim 1, It is characterized in that The arc coordinate iterative calculation process is performed according to the first error value, the preset horizontal coordinate iterative formula, the vertical coordinate iterative formula, the first error iterative calculation formula, and the second error iterative calculation formula to obtain the current coordinates of the arc and the current second error value, including: When it is determined that the first error value is greater than or equal to zero, updating the first ordinate based on the ordinate iteration formula to obtain a second ordinate, and updating the first error value according to the first error iteration calculation formula to obtain a current second error value; Updating the first horizontal coordinate to a second horizontal coordinate according to the horizontal coordinate iteration formula; The current coordinate of the arc is generated according to the second ordinate and the second abscissa.
3. The method for generating a rounded corner image according to claim 1, It is characterized in that The method of performing iterative calculation of arc coordinates according to the first error value, the preset horizontal coordinate iteration formula, the vertical coordinate iteration formula, the first error iteration calculation formula, and the second error iteration calculation formula to obtain the current coordinates of the arc and the current second error value also includes: Determine that the first error value is less than zero, and update the first error value according to the second error iterative calculation formula to obtain a current second error value; Updating the first horizontal coordinate to a second horizontal coordinate according to the horizontal coordinate iteration formula; The current coordinate of the arc is generated according to the first ordinate and the second abscissa.
4. The method for generating a rounded corner image according to claim 1, It is characterized in that The step of performing upsampling, downsampling, anti-aliasing and symmetric mirroring on the first arc to obtain a smooth second arc includes: Determine a second initial coordinate and an initial third error value of the first arc; the third error value is calculated according to a second initial error calculation formula and the preset fillet radius; the abscissa of the second initial coordinate is 0, and the ordinate of the second initial coordinate is the product of the preset fillet radius and a preset upsampling multiple; Based on the error term recursion method, the arc coordinates are iteratively calculated according to the second initial coordinates and the third error value to calculate the upsampled arc coordinates on the first arc; According to the iteration order in the iterative calculation process of the arc coordinates, down-sampling process is performed with every four up-sampled arc coordinates as a coordinate group, and transparency information of edge pixels on the first arc is calculated; The first circular arc including the transparency information is mirror-symmetric along a preset symmetry axis to obtain the second circular arc including the transparency information.
5. The method for generating a rounded corner image according to claim 4, It is characterized in that The downsampling process is performed using the four up-sampled arc coordinates as a coordinate group to calculate the transparency information of the edge pixels on the first arc, including: Determine a first circular arc coordinate, a second circular arc coordinate, a third circular arc coordinate, and a fourth circular arc coordinate from the coordinate group; Right-shifting the ordinates of the first arc coordinate, the second arc coordinate, the third arc coordinate, and the fourth arc coordinate respectively according to a preset number of bits, and obtaining a first shift result, a second shift result, a third shift result, and a fourth shift result accordingly; Determine a calculation formula according to a comparison result among the first shift result, the second shift result, the third shift result, and the fourth shift result; The transparency information of the downsampled edge pixels is calculated according to the calculation formula.
6. The method for generating a rounded corner image according to claim 1, It is characterized in that The step of performing transparency superposition of the MASK rounded corner image and the to-be-superimposed area of the background image comprises: In the case where one target area image is determined from the candidate area images, and one MASK rounded corner image is generated by performing image filling processing on one target area image based on the second circular arc, determining a target number of times; According to the target number of times, the MASK rounded corner image is mirrored and rotated a target number of times, and while generating the MASK rounded corner image, transparency is superimposed with the area to be superimposed of the background image.
7. The method for generating a rounded corner image according to claim 1, It is characterized in that The performing image filling processing on the target area image based on the second circular arc to obtain a MASK rounded corner image includes: In the target area image, setting a MASK value in a sector-shaped area formed by the second circular arc and the center of the circle to a first transparency value; In the target area image, the MASK value of the remaining area outside the fan-shaped area is set to a second transparency value to obtain the MASK rounded corner image; wherein the second transparency value is smaller than the first transparency value.
8. An electronic device, It is characterized in that It includes at least one processor and a memory for communicating with the at least one processor; the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the rounded corner image generation method as described in any one of claims 1 to 7.
9. A storage medium, It is characterized in that The storage medium is a computer-readable storage medium, and the computer-readable storage medium stores computer-executable instructions. The computer-executable instructions are used to implement the rounded corner image generation method as described in any one of claims 1 to 7 when executed by a computer.
