Cgcontextref initial drawing experience

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.