在开发过程中,如果现有的控件无法满足视图需求,那么我们就应该考虑自己绘制图案了。
常用的绘制方法有两种:
一种是使用CGContextRef。
通过重写 view 的 drawRect方法,利用图形上下文进行绘制。但该方法增加内存的负担,导致界面显示卡顿。由于ARC无法管理其内存,使用不慎,还会出现严重的内训泄露问题。因此不推荐使用。
另一种就是利用 CAShapLayer。
CAShapeLayer代表要被渲染到屏幕上的一个任意的形状。 它本身没有形状,它的形状来源于其属性path。
因此使用 CAShapeLayer 结合 UIBezierPath(贝塞尔曲线),能够简单的绘制出你想要的图形。使用起来方便,省心,还比较安全。
以下列举常用的图形的画法:
一、直线
CAShapeLayer *line = [CAShapeLayer layer];
line.strokeColor = lineColor.CGColor;
line.fillColor = [UIColor clearColor].CGColor;
line.lineWidth = 0.5f;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(x1,y1)];
[path addLineToPoint:CGPointMake(x2,y2)];
line.path = [path CGPath];
[self.layer addSublayer:line];
二、虚线
CAShapeLayer *dottedLine = [CAShapeLayer layer];
dottedLine.fillColor = [UIColor clearColor].CGColor;
dottedLine.lineWidth = 1.0f;
dottedLine.strokeColor = color.CGColor;
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(x1, y1)];
[path1 addLineToPoint:CGPointMake(x2, y2)];
dottedLine.path = path.CGPath;
[dottedLine setLineDashPattern:@[@2, @3]];
[self.layer addSublayer:dottedLine];
三、三角形
//画三角形的原理很简单,根据三个点,画出两条线,然后闭合,填充颜色,就好了。
CAShapeLayer *triangleLayer = [CAShapeLayer layer];
triangleLayer.strokeColor = color.CGColor;
triangleLayer.fillColor = color.CGColor;
triangleLayer.lineWidth = 0.5f;
CGPoint tmpPoint0 = CGPointMake(x0, y0);
CGPoint tmpPoint1 = CGPointMake(x1, y1);
CGPoint tmpPoint2 = CGPointMake(x2, y2);;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint: tmpPoint0];
[path addLineToPoint: tmpPoint1];
[path addLineToPoint: tmpPoint2];
[path closePath];//闭合曲线
triangleLayer.path = path.CGPath;
[self.layer addSublayer:triangleLayer];
四、多边形
画多边形的原理同画三角形,根据已知点画出几条直线,然后闭合,填充颜色即可。
五、圆形以及圆环
//其中 fCirclrCenter 为 圆心的坐标 radius为半径 startAngle开始角度 endAngle结束角度 clockwise方向(顺时针or逆时针)
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.strokeColor = lineColor.CGColor;
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.lineWidth = 0.5f;
circleLayer.path = ([UIBezierPath bezierPathWithArcCenter:fCirclrCenter radius:ScreenWidth/2-50 startAngle:0 endAngle:2*M_PI clockwise:YES]).CGPath;
[self.layer addSublayer:triangleLayer];
//圆环的画法其实和圆一样,只是把lineWidth这个参数调大一点就好了。
如:circleLayer.lineWidth = 20.0f;
六、扇形
CAShapeLayer *fanLayer = [CAShapeLayer layer];
fanLayer.strokeColor = color.CGColor;
fanLayer.fillColor = color.CGColor;
fanLayer.lineWidth = 0.5f;
UIBezierPath *piePath = [UIBezierPathbezierPath];
[piePath moveToPoint:center];
[piePath addArcWithCenter:center radius:radius startAngle:topAngle endAngle:endAngle clockwise:YES];
[piePath closePath];
fanLayer.path = path.CGPath;
[self.layer addSublayer:fanLayer];
以上就是几类常见图片的画法。在画图的过程中比较困难的是坐标的计算,正好检验一下自己的数学知识都还给老师了没有^o^。 真正另外结合CABasicAnimation,还能实现动态绘制以及给自己的图形添加动画。感兴趣的可以参考网上资料,尝试一下。