This is the first time that cgcontextref is used to draw a picture. The main uibutton is to set the rounded corner. The first setting is that the four corners are circle. Currently, I do not know how to set a circular angle separately, the other corners are still rectangles. One of my ideas is to inherit from uibutton's own drawing to implement it. After a great deal, we finally achieved results.
In fact, you can find out how to draw circles and draw lines using cgcontextref on the Internet. I just want to combine these methods. The following is a code, with comments in the code, hoping to help you interpret the code.
@ Interface fillterbutton () {cgfloat _ radius; bool _ upperleft; bool _ upperright; bool _ lowerleft; bool _ lowerright; uicolor * _ filltercolor ;} @ end # define PI 3.14 @ implementation fillterbutton @ synthesize filltercolor = _ filltercolor;-(ID) initwithframe :( cgrect) frame {self = [Super initwithframe: frame]; If (Self) {// initialization code} return self;}-(void) setcornerradius :( cgfloat) radius upperleft :( bool) upperleft upperright :( bool) upperright lowerleft :( bool) lowerleft lowerright :( bool) lowerright {_ radius = radius; _ upperleft = upperleft; _ upperright = upperright; _ lowerleft = lowerleft; _ lowerright = lowerright;}-(void) drawrect :( cgrect) rect {// retrieve the specified color information RGB value. Note that _ filltercolor must be an RGB color space. Here we use [uicolor colorwithred: 1 Green: 0 Blue :. 3 Alpha: 1]. [uicolor redcolor] const cgfloat * components = cgcolorgetcomponents (_ filltercolor. cgcolor); cgcontextref context = uigraphicsgetcurrentcontext (); cgcontextbeginpath (context); // specify the color of the line as the color rgba value, that is, specify the stroke color cgcontextsetrgbstrokecolor (context, components [0], components [1], components [2], components [3]); // my approach is to break down the graph into two rectangles with the four-angle slice and overlapping center. First, draw two rectangles cgcontextaddrect (context, cgrectmake (_ radius, 0, self. frame. size. width-_ radius * 2, self. frame. size. height); cgcontextaddrect (context, cgrectmake (0, _ radius, self. frame. size. width, self. frame. size. height-_ radius * 2); // specify the fill color cgcontextsetfillcolorwithcolor (context, _ filltercolor. cgcolor); // notice order if (_ upperleft) {// start to draw a slice. Specify the coordinate cgcontextmovetopoint (context, _ radius, _ radius) of the slice center. // draw an arc, specify the arc center coordinates, arc radius, start radians, end radians, clockwise cgcontextaddarc (context, _ radius, 180 * PI/180,270 * PI/18);} else {// This rounded corner is changed to a rectangle cgcontextaddrect (context, cgrectmake (0, 0, _ radius, _ radius);} If (_ upperright) {cgcontextmovetopoint (context, self. frame. size. width-_ radius, _ radius); cgcontextaddarc (context, self. frame. size. width-_ radius, 270 * PI/180, 0 * PI/18);} else {cgcontextaddrect (context, cgrectmake (self. frame. size. width-_ radius, 0, _ radius, _ radius);} If (_ lowerright) {cgcontextmovetopoint (context, self. frame. size. width-_ radius, self. frame. size. height-_ radius); cgcontextaddarc (context, self. frame. size. width-_ radius, self. frame. size. height-_ radius, _ radius, 0 * PI/180, 90 * PI/180,0);} else {cgcontextaddrect (context, cgrectmake (self. frame. size. width-_ radius, self. frame. size. height-_ radius, _ radius, _ radius);} If (_ lowerleft) {cgcontextmovetopoint (context, _ radius, self. frame. size. height-_ radius); cgcontextaddarc (context, _ radius, self. frame. size. height-_ radius, _ radius, 90 * PI/180,180 * PI/180,0);} else {cgcontextaddrect (context, cgrectmake (0, self. frame. size. height-_ radius, _ radius, _ radius);} // close the path, and then fill in the path cgcontextclosepath (context); cgcontextdrawpath (context, kcgpathfillstroke );}
My method is stupid, that is, using the four-angle slice and two overlapping rectangles in the middle. I tried to draw images with straight lines and arcs, and then close the images. However, I found that the results of the images are always unsatisfactory. I don't know if it is because a straight line and an arc cannot be closed. Pay attention to the order of order.
Cgcontextref initial drawing experience