Sunday, 15 February 2015

core graphics - Create a Round Gradient Progress Bar in iOS with CoreGraphics -



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