IOS cashapelayer Cagradientlayer Uibezierpath Usage Instance

CGRect rect = CGRectMake (+, +, + );

UIView * Bgview = [[UIView alloc]initwithframe:rect];

Bgview.backgroundcolor = [Uicolor graycolor];

[Self. view Addsubview:bgview];

Cashapelayer * Tracklayer = [cashapelayer layer];

Tracklayer. frame = Bgview. bounds;

[Bgview. layer Addsublayer:tracklayer];

Tracklayer. FillColor = [[uicolor blackcolor] cgcolor];//fill color, this should be Clearcolor

Tracklayer. Strokecolor = [[uicolor Redcolor] cgcolor];//border color

Tracklayer. opacity = 0.5;

Tracklayer.linecap = Kcalinecapround;

Tracklayer.  linewidth = 4.0; Red Border width

Uibezierpath * Path = [uibezierpath bezierpathwitharccenter: Cgpointmake( 50 ) Radius: startangle:degreestoradians(-endangle): Degreestoradians(clockwise):YES];

The angle is from-210-30 degrees, which can be seen as shown

Tracklayer. path = [path cgpath];

The results after the run are as follows

Based on the above code, add the effect of the gradient below

Calayer * Gradinetlayer = [calayer layer];

Cagradientlayer * GradLayer1 = [cagradientlayer layer];

    gradLayer1. frame = cgrectmake (0, 0, Bgview. frame. size. width/2, Bgview. Frame. size. height)

[GradLayer1 setcolors: [nsarray arraywithobjects:(ID] [[uicolor Redcolor] Cgcolor], (ID) [uicolorfromrgb(0xfde802) cgcolor], Nil]];

[GradLayer1 setlocations:@[@0.5,@0.9,@1 ];

[GradLayer1 setstartpoint: Cgpointmake(0.5, 1)];

[GradLayer1 setEndPoint:cgpointmake (0.5, 0)];

[Gradinetlayer addsublayer:gradlayer1];

Cagradientlayer * GradLayer2 = [cagradientlayer layer];

    gradLayer2. frame = cgrectmake (Bgview. Frame. size. width/2, 0, Bgview. Frame. size. width/2, Bgview. Frame. size. height)

[GradLayer2 setcolors: [nsarray arraywithobjects:(ID] [uicolorfromrgb(0xfde802 ) Cgcolor], (ID) [[uicolor bluecolor] Cgcolor], Nil]];

[GradLayer2 setstartpoint: Cgpointmake(0.5, 0)];

[GradLayer2 setEndPoint:cgpointmake (0.5, 1)];

[Gradinetlayer addsublayer:gradlayer2];

[Gradinetlayer Setmask:tracklayer];

[Bgview. layer Addsublayer:gradinetlayer];

This article transferred from Zhangjiang Forum reprint please specify http://www.999dh.net/home.php?mod=space&uid=1&do=blog&quickforward=1&id=328

The results of the above code run are as follows:

The explanations are as follows:

Setlocations, in theory, is to set the display area of the colors (the principle is not clear here)

Setstartpoint is the starting point for the start gradient of the color, and the default is (0,0) the upper-left corner

setEndPoint is the point at which the color stops the gradient, and the default is (

If you press the default, the GradLayer1 color gradient should be from the upper-left corner from the redcolor gradient to the lower-right corner (the color is 0xfde802)

The StartPoint set in the code is (0.5,1), which refers to the middle of the x-axis, the bottom of the y-axis, and endpoint (0.5,0) to the top of the x-axis, the y-axis.

Finally the code [Gradinetlayer Setmask:tracklayer]; Comments are removed, resulting in the following running results

The main role here is Setmask credit, but why Tracklayer Strokecolor not come into force, here is not very clear. (Hey, don't know too much AH)