cocoa touch - How do you set a gradient fillcolor for cashapelayer without using a mask? -


how set gradient fillcolor cashapelayer? related question clearer explanation: using cocoa follow path gradient

i need gradient that's not mask, instead gradient based on drawing of cashapelayer's path.

i can't use gradient mask on top, because i'm making route on minimap in game. if player walks on own tracks, should in different color.

i want mapview's polyline:
source: http://cdn4.raywenderlich.com/wp-content/uploads/2014/06/23_multicolor_polyline.png

i made minimap route by: logging user's different directions, running them through loop bezier paths.

i appended bezier paths, , put on cashapelayer.

is there way have multicolored in cashapelayer?

is there keypath cabasicanimation can put gradient?

my code below, , images.

[mymapview.layer.sublayers makeobjectsperformselector:@selector(removefromsuperlayer)]; [[mymapview subviews]  makeobjectsperformselector:@selector(removefromsuperview)]; int = 0; int x = 17; int y = 272; int m = 16; uibezierpath *kpath = [uibezierpath bezierpath];    while (i < histdirections.count) {     if (i > 0)     {             uibezierpath *path = [uibezierpath bezierpath];             [path movetopoint:cgpointmake(x, y)];              if ([[histdirections objectatindex:i] intvalue] ==1)              {                  [path addlinetopoint:cgpointmake(x, y-m)];                  y = y - m;              }              else if ([[histdirections objectatindex:i] intvalue] ==2)              {                  [path addlinetopoint:cgpointmake(x-m, y)];                  x = x -m;              }              else if ([[histdirections objectatindex:i] intvalue] ==3)              {                  [path addlinetopoint:cgpointmake(x+m, y)];                  x = x+m;              }              else              {                  [path addlinetopoint:cgpointmake(x, y+m)];                  y = y - m;              }         [kpath appendpath:path];     }     i++; } [catransaction begin]; [catransaction setanimationtimingfunction:[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]]; [catransaction setcompletionblock:^{     uiimageview *viewpulse = [[uiimageview alloc] initwithframe:cgrectmake(x -5, y-5, 10.0, 10.0)];     viewpulse.image = [uiimage imagenamed:@"arro.png"];     viewpulse.backgroundcolor = [uicolor clearcolor];     if(direction == 1)     {         viewpulse.transform = cgaffinetransformmakerotation(-m_pi/2);     }     else if (direction == 2)     {         viewpulse.transform = cgaffinetransformmakerotation(m_pi);     }     else if (direction == 4)     {         viewpulse.transform = cgaffinetransformmakerotation(m_pi/2);     }     [mymapview addsubview:viewpulse];     cabasicanimation *scaleanimation = [cabasicanimation animationwithkeypath:@"transform.scale"];     scaleanimation.duration = 0.8;     scaleanimation.repeatcount = huge_val;     scaleanimation.autoreverses = yes;     scaleanimation.fromvalue = [nsnumber numberwithfloat:1.6];     scaleanimation.tovalue = [nsnumber numberwithfloat:0.8];     [viewpulse.layer addanimation:scaleanimation forkey:@"scale"]; }]; cashapelayer *shapelayer = [cashapelayer layer];  kpath.linecapstyle = kcglinecapround; kpath.linecapstyle = kcglinejoinround;  shapelayer.path = [kpath cgpath];  shapelayer.strokecolor = [[uicolor colorwithred:51/255.0f green:(51)/255.0f blue:170/255.0f alpha:1.0f] cgcolor]; shapelayer.linewidth = 4.0; shapelayer.linecap = kcalinecapround; shapelayer.fillcolor = [[uicolor clearcolor] cgcolor]; [mymapview.layer addsublayer:shapelayer];  cabasicanimation *hanimation = [cabasicanimation animationwithkeypath:@"strokeend"]; float dur = (histdirections.count * 0.27); if (dur > 2) {     dur = 2; } hanimation.duration            = dur; hanimation.repeatcount         = 1.0; hanimation.fromvalue = [nsnumber numberwithfloat:0.0f]; hanimation.tovalue   = [nsnumber numberwithfloat:1.0f];    /* cagradientlayer *gradientlayer = [cagradientlayer layer]; gradientlayer.frame = mymapview.frame; gradientlayer.colors = @[(__bridge id)[uicolor bluecolor].cgcolor,(__bridge id)[uicolor greencolor].cgcolor,(__bridge id)[uicolor yellowcolor].cgcolor,(__bridge id)[uicolor orangecolor].cgcolor, (__bridge id)[uicolor redcolor].cgcolor]; gradientlayer.startpoint = cgpointmake(0,0.5); gradientlayer.endpoint = cgpointmake(1,0.5);  [mymapview.layer addsublayer:gradientlayer]; gradientlayer.mask = shapelayer;*/ [catransaction commit]; 

gradient mask:

monocolor line:

nevermind! figured out can do. since create layer multiple paths, put cgpaths array, , looped each path unique cashapelayer it's own color


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -