1.CAShapeLayer

CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形。该子类根据其fill color和strokeColor值对该路径填充或者描边,或二者都有,并显示结果。fillColor默认值是黑色,二strokenColor没有默认值。CAShapeLayer也可能有contents,该形状显示在内容图像的上方,但没有任何属性允许你指定合成模式(compositioning  mode)。

 

普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的bounds值一致,它本身是有形状的,而且是矩形.

CAShapeLayer在初始化时也需要给一个frame值,但是,它本身没有形状,它的形状来源于你给定的一个path,然后它去取CGPath值,它与CALayer有着很大的区别

 CAShapeLayer有着几点很重要:

1. 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接

2. strokeStart以及strokeEnd代表着在这个path中所占用的百分比

3. CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果

 

2.UIBezierPath


UIBezierPath贝塞尔弧线常用方法记

 //根据一个矩形画曲线

+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect

 

//根据矩形框的内切圆画曲线

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect

 

//根据矩形画带圆角的曲线

+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius

 

//在矩形中,可以针对四角中的某个角加圆角

+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii

 

参数:

corners:枚举值,可以选择某个角

cornerRadii:圆角的大小

 //以某个中心点画弧线  + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

参数:

center:弧线中心点的坐标

radius:弧线所在圆的半径

startAngle:弧线开始的角度值

endAngle:弧线结束的角度值

clockwise:是否顺时针画弧线

 

 

//画二元曲线,一般和moveToPoint配合使用

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint

参数:

endPoint:曲线的终点

controlPoint:画曲线的基准点

 

//以三个点画一段曲线,一般和moveToPoint配合使用

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2

参数:

endPoint:曲线的终点

controlPoint1:画曲线的第一个基准点

controlPoint2:画曲线的第二个基准点


 


3.demo 代码:





4.效果


使用CAShapeLayer的path属性与UIBezierPath画出扫描框_初始化使用CAShapeLayer的path属性与UIBezierPath画出扫描框_圆角_02使用CAShapeLayer的path属性与UIBezierPath画出扫描框_默认值_03


 


 



 

5关键点分析fillLayer.fillRule = kCAFillRuleEvenOdd

 


利用layer的FillRule属性生成一个空心的layer

SVG的图形填充规则通过fill—rule属性来指定

SVG的图形填充规则通过fill-rule属性来指定。



‘fill-rule’

有效值:  

nonzero | evenodd | ​​inherit​

默认值:  

nonzero

应用于:  

​shape形状类元素​​ 和 ​​文字内容类元素​

可继承:  

比例:  

媒体:  

可见

​动画可用​​:  


 ​​‘fill-rule’​​ 属性用于指定使用哪一种​​算法​​去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的。但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解就不那么明确了。

 ​​‘fill-rule’​​ 属性提供两种选项用于指定如何判断图形的“内部”:

nonzero 字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。下图演示了nonzero规则:

使用CAShapeLayer的path属性与UIBezierPath画出扫描框_子类_04

​点击查看示例SVG文件 (仅适用于支持SVG的浏览器)​

evenodd 字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。下图演示了evenodd 规则:

使用CAShapeLayer的path属性与UIBezierPath画出扫描框_默认值_05

​点击查看示例SVG文件 (仅适用于支持SVG的浏览器)​


(提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办,因为任意方向的射线都可以,那么只需要简单的选择另一条没有这种特殊情况的射线即可。)

 



------------------越是喧嚣的世界,越需要宁静的思考------------------ 合抱之木,生于毫末;九层之台,起于垒土;千里之行,始于足下。 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。