CAShapeLayer 和UIBezierPath 的举例使用

CAShapeLayer:  CAShapeLayer继承自CALayer,可以使用CALayer的所有属性值,配合贝塞尔曲线(UIBezierPath)可以实现不在view的drawRect方法中画出有一些想要的图形,CAShapeLayer属于CoreAnimation框架,其动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,其效率极高,能大大优化内存使用情况。

UIBezierPath: 使用UIBezierPath类可以创建基于矢量的路径,就是UIKit框架中,对绘图的封装,更加面向对象,实际操作起来,用法与CGContextRef类似,但是使用贝塞尔路径,更为方便。UIBezierPath常用的函数主要是下面几个,(下图二来自http://www.jianshu.com/p/0e785269dccc)

CAShapeLayer 和UIBezierPath 的举例使用_第1张图片
CAShapeLayer 和UIBezierPath 的举例使用_第2张图片

CAShapeLayer 是基于UIBezierPath 才存在的,必须要结合UIBezierPath一起使用。贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染。路径会闭环,才能够绘制出图形。下面举两个项目中会常用到的例子;


CAShapeLayer 和UIBezierPath 的举例使用_第3张图片

其他部分和正常定制cell一样,画图就是把UIBezierPath的起始路径移动到1点,[path moveToPoint:anglePoint];  然后依次根据2,3,4,5,6,7这几个点加入路径线段,[path addLineToPoint:CGPointMake( 0, cellH1)];    最后闭合[path closePath]; 其中被注释的的部分是在黄色提示框四周加入了圆角;

 #define JXDefaultHeight    8.0  //尖角的高度

#define JXDefaultWidth    5.0  //尖角的的半个宽度

#define JXDefaultRadius  6.0  //弧度的半径

#define cellH1  45.0  //cell白色部分的高度

#define cellH2  70.0  //cell白色部分的高度加上黄色部分的高度

CAShapeLayer 和UIBezierPath 的举例使用_第4张图片

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CAShapeLayer 和UIBezierPath 的举例使用_第5张图片

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CAShapeLayer 和UIBezierPath 的举例使用_第6张图片


这个页面类似于微信聊天的起泡,但是他不是画出来的,而是一个图片;对图片内部进行拉伸,保证他四周不变形;主要代码就是下面的两句话,返回一张拉伸之后,四周不变形的图片,然后动态的去计算文字内容的高度,更改背景气泡图片的坐标大小

你可能感兴趣的:(CAShapeLayer 和UIBezierPath 的举例使用)