core graphics - Create a Round Gradient Progress Bar in iOS with CoreGraphics -
i want create this:
i tried create core graphics this:
float radius = cgrectgetwidth(rect)/2.0f - self.circleborderwidth/2.0f; float angleoffset = 0; uibezierpath *apath = [uibezierpath bezierpathwitharccenter:cgpointmake(cgrectgetmidx(rect), cgrectgetmidy(rect)) radius:radius startangle:-angleoffset endangle:(mcirclesegs + 1)/(float)kcirclesegs*m_pi*2 - angleoffset clockwise:yes]; cgpathref shape = cgpathcreatecopybystrokingpath(apath.cgpath, null, 3, kcglinecapsquare, kcglinejoinmiter, 1.0f); cgcontextref ctx = uigraphicsgetcurrentcontext(); cgcontextaddpath(ctx, shape); cgcontextclip(ctx); anglegradientlayer *angle = [[anglegradientlayer alloc] init]; angle.colors = [nsarray arraywithobjects: (id)[uicolor colorwithred:0 green:0 blue:0 alpha:1].cgcolor, (id)[uicolor colorwithred:1 green:1 blue:1 alpha:1].cgcolor, nil]; cgcontextcliptorect(ctx, self.bounds); [angle drawincontext:ctx]; [angle release];
but think on wrong track here. doesn't example. coregraphics able draw this? how?
the bezier path utilize clip seems fraction of circle, while in image show, path more complex : 2 fractions of circle, linked 2 lines, whole path having 'ring' shape.
this approach should work, used timer same kind of look. although didn't used straight anglegradientlayer, modified - (cgimageref)newimagegradientinrect:(cgrect)rect
method homecoming uiimage. had rotate image + pi/2, pavlov gradient angular gradient starts horizontally.
i utilize uiimage, because it's background doesn't change, saved instance of uiimage in layer, , draw whenever update clipping path
- (void)drawincontext:(cgcontextref)ctx { uibezierpath *currentpath = [self timerpath]; // other drawing code glow (shadow) , white stroke) cgcontextaddpath(ctx, currentpath.cgpath); // clip ! cgcontextclip(ctx); cgcontextdrawimage(ctx, self.bounds, _circulargradientimage.cgimage); //_circulargradientimage modified newimagegradientinrect method. }
here's :
ios core-graphics uibezierpath
No comments:
Post a Comment