The use of dry goods Calayer Create star rating components (pentagram)

This article records the creation process of star rating components and the use of Calayer.

To achieve a star-rated component, the Calayer is used, involving masks, cgpathref, Uibezierpath, animations, and an algorithm for computing the key nodes of a multi-point star.

Calayer manages image-based content and allows us to add animations to the content. UIView and its subclasses have an attribute layer that we can use to make a lot of effect. such as rounded corners, polygons, and even custom shape of view, local occlusion, erase blur effect, local content in turn shiny effect, arc progress bar and so on.

First look at a property of the Calayer mask, this property is also calayer type, as his name means, is to block the content, the default is nil, so we can see a uiview on the content. If you assign a Calayer instance to a view's layer property of a visible content, the view immediately "disappears". The following code:

Calayer *masklayer = [calayer layer];

Masklayer.frame = Testview.bounds;

Self. Layer. Mask = Masklayer;

Another class Cashapelayer, inherited and Calayer, with many additional attributes, such as path, FillColor, Strokecolor. The Path property in which you can determine what is in the "Do not obscure" path range. If we assign the previous mask property to a Cashapelayer instance, or addsublayer the instance on the previous Calayer instance, and specify a path to the center circle, a common circular avatar display is achieved. The same as the corner of the layer that sets the UIView.

It is important to note that if the added Cashapelayer FillColor is [uicolor clearcolor]. Cgcolor, even within the path range, will lose the "do not obscure" effect, which defaults to opaque black. Simply put, if transparency obscures the content. It can be found that the fill and path colors on mask and its sublayer are not displayed and are used only to determine whether or not to block the content of the layer itself.

Using this feature, you can achieve a similar effect of "door opening" and "closing", and add two sublayer as "gate" on a calayer. You can also achieve more effects such as splash-ink.

It is worth mentioning that each sublayer can also use the frame and mask properties to make a partial occlusion effect relative to the view.

Go back to the FillColor property of Cashapelayer, which fills a color in the path range, Strokecolor is the color on the specified path track,Strokestart, STROKEEND specifies the starting and ending plot points of the trajectory, as well as line-related properties that specify the properties of the lines. Using these attributes, you can make progress bars of any shape, load animations, and so on.

from the above record it is important to see the Path property The property is of type Cgpathref. Common methods of Creation are  cgpathcreatemutable (void

 cgmutablepathref path = cgpathcreatemutable ();    Cgpoint firstpoint  = [[Keypointsarray Firstobject] cgpointvalue];        Cgpathmovetopoint (path, nil, firstpoint.x, FIRSTPOINT.Y);  for  (int  i = 1 ; i < Keypointsarray.count; I++) {cgpoint currentpoint  = [Keypointsarray[i] C        Gpointvalue];    Cgpathaddlinetopoint (path, nil, currentpoint.x, CURRENTPOINT.Y);        } cgpathaddlinetopoint (path, nil, firstpoint.x, FIRSTPOINT.Y);    _masklayer.path  = path;    _starshapelayer.path  = path; Cgpathrelease (path);  

You can also use the Uibezierpath series class method, and after adding a good path, the method -(cgpathref) Cgpath gets the path. For example:

    2.0 2.0) Radius:_radius startangle:02 * m_pi clockwise:yes];     = Bezierpath.cgpath;

The creation of star rating components is now recorded below.

For the final effect:

Clicking on the left and right side of the star will determine whether to fill half or full content. You can also set percent fill content. Support for >5 angle star.

The interior of a single star is: View sets a gray background color View.layer.mask path is a pentagram; View.layer adds a bgshapelayer with a yellow background, controls its width to achieve a fill percentage, and then adds a starshapelayer,path to the same pentagram, setting the path color as the border.

The difficulty here is to calculate the intersection point of a multi-angle star, which, if it is a pentagram, requires coordinates of 10 key points.

The following records the algorithm for finding the intersection:

1. First determine an initial vertex

2. Based on the equal radians and radii, all the outer vertices are obtained by the positive cosine correlation formula of trigonometric function.

3. Find the two intersecting lines of the inner intersection

4. From the two-yuan equation to find the intersection point

The specific implementation code is as follows:

-(Nsarray *) getstarkeypoints{Cgpoint Center= Cgpointmake (Self.frame.size.width/2.0, _radius); CGFloat Sectionangle=2* M_PI/_toppointcount; Nsmutablearray*keypointsarray =[Nsmutablearray array]; Cgpoint Firstpoint= Cgpointmake (center.x,0);        [Keypointsarray Addobject:[nsvalue Valuewithcgpoint:firstpoint]; //Peripheral vertices     for(inti =1; i < _toppointcount; i++) {cgfloat x= COSF (i * sectionangle-m_pi_2) *_radius; CGFloat y= Sinf (i * sectionangle-m_pi_2) *_radius; Cgpoint Point= Cgpointmake (x + center.x, y +center.y);    [Keypointsarray Addobject:[nsvalue Valuewithcgpoint:point]; }        //Inner IntersectionNsmutablearray *crosspointsarray =[Nsmutablearray array]; //The solution of two-yuan one-time equation//The AC point determines the linear equation y = kx + B//B dot line y = b.y     for(inti =0; i < _toppointcount; i++) {Cgpoint A=[Keypointsarray[i] cgpointvalue]; Nsinteger Index= i +1; if(Index > _toppointcount-1) {Index-=_toppointcount; } cgpoint B=[Keypointsarray[index] cgpointvalue]; Index= i +2; if(Index > _toppointcount-1) {Index-=_toppointcount; } cgpoint C=[Keypointsarray[index] cgpointvalue]; Index= i-1; if(Index <0) {Index+=_toppointcount; } cgpoint E=[Keypointsarray[index] cgpointvalue]; CGFloat f_x=0.0, f_y =0.0, K1 =0.0, K2 =0.0, B1 =0.0, b2 =0.0; if(a.x = =c.x) {f_x=a.x; } Else{K1= (A.Y-C.Y)/(A.x-c.x); B1= A.y-k1 *a.x; }                if(b.x = =e.x) {f_x=b.x; } Else{K2= (B.Y-E.Y)/(B.x-e.x); B2= B.y-k2 *b.x; }                if(a.x = =c.x) {f_y= K2 * f_x +B2; }Else if(b.x = =e.x) {f_y= K1 * f_x +B1; }Else{            if(K1 = =0) {f_y=a.y; F_x= (F_Y-B2)/K2; } Else{f_y= (B1 * k2-b2 * K1)/(K2-K1); F_x= (F_Y-B1)/K1; }} cgpoint PointF=Cgpointmake (f_x, f_y);    [Crosspointsarray Addobject:[nsvalue valuewithcgpoint:pointf]; }        //Merging Data     for(inti =0; i < Crosspointsarray.count; i++{[Keypointsarray insertobject:crosspointsarray[i] Atindex: (I*2+1)]; }        returnKeypointsarray;}

Adds a key segment to path, creating a multi-angular path for mask and border layer.

Finally add a tap gesture to determine the action based on the range of the touch points.

After the realization of a single pentagram, it is common to place the five pentagram side by side, uniformly managing the percent fill per pentagram.

Alwstarcomment has been updated in the base project: Https://github.com/ALongWay/base.git

The use of dry goods Calayer Create star rating components (pentagram)