iOS用CGContextRef画图

来源：互联网发布：衣服淘宝站水煮鱼皇后编辑：程序博客网时间：2024/06/01 07:13

研究一下画图，一直对iOS的画图以及动画挺有兴趣的。

首先了解一下paths的几个重要元素

//points:    //指定一个点成为current point，Quartz会跟踪current point一般执行完一个相关函数后，current point都会相应的改变    CGContextMoveToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat x#>, <#CGFloat y#>)    //Lines:    //创建一条直线，从current point到（x,y），然后current point会变成（x,y）    CGContextAddLineToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat x#>, <#CGFloat y#>)    //创建多条直线，比如points有两个点，那么会画两条直线，从current point到（x1,y1）,    //然后是（x1,y1）到（x2,y2），然后current point会变成points中的最后一个点    //Arcs:    //(x,y)为圆的中心，radius为半径，startAngle为开始角度，endAngle为结束角度，clockwise表示，0为顺时针，1为逆时针    //假如想创建一个完整的圆圈，那么开始弧度是0，结束弧度为2PI，因为周长是2PI*r，最后执行    //current point就被重置为（x,y）,假如当前path已经存在一个subpath，那么这个函数执行    //的另一个效果是，会有一点直线从current point到弧的起点    CGContextAddArc(<#CGContextRef  _Nullable c#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat radius#>, <#CGFloat startAngle#>, <#CGFloat endAngle#>, <#int clockwise#>)    //(x1,y1)(x2,y2)，r为半径,首先画两条线分别是current point to(x1,y1)和    //（x1,y1）to (x2,y2)这样就是出现一个以（x1,y1）为顶点的两条射线    //然后定义半径长度，这个半径是垂直于两条射线的，这样就能决定一个圆了，更好的理解下图，不过    //个人下图所标的tangent point1 的位置是错误的。    //最后，函数执行完后，current point就被重置为（x2,y2）    //还有一点要注意的是，假如当前path已经存在一个subpath，那么这个函数执行的另一种效果是    //会有一条直线，从current point到（x1,y1）    CGContextAddArcToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat x1#>, <#CGFloat y1#>, <#CGFloat x2#>, <#CGFloat y2#>, <#CGFloat radius#>)

    //Curves    //画曲线，一般是一条直线，然后定义几个控制点，使直线变弯曲        //控制点（x1,y1）(x2,y2)直线的终点（x,y）    //假如第二个控制点（cp2x，cp2y）比（cp1x,cp1y） 更接近current point，那么会形成一个封闭的曲线    CGContextAddCurveToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat cp1x#>, <#CGFloat cp1y#>, <#CGFloat cp2x#>, <#CGFloat cp2y#>, <#CGFloat x#>, <#CGFloat y#>)

    //二次曲线函数    //控制点（px,py） 直线的终点（x,y），执行完函数貌似current point不会变化，没有具体测试过    CGContextAddQuadCurveToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat cpx#>, <#CGFloat cpy#>, <#CGFloat x#>, <#CGFloat y#>)

    //Rectangles    CGContextAddRect(<#CGContextRef  _Nullable c#>, <#CGRect rect#>)    //一次性画多个矩形,画矩形有一些特别，current point没有发生变化    CGContextAddRects(<#CGContextRef  _Nullable c#>, <#const CGRect * _Nullable rects#>, <#size_t count#>)

//Creat a Path    //调用函数CGCcontextBeginPath开始创建路径，先调用函数CGContextMoveToPoint设置起点    //然后开始画自己想画的路径，注意：    /*     1.Liners,arcs,and curves,是从current point开始的     2.假如想封闭一条路径，那么调用函数CGContextClosePath把当前点和起点连接起来     3.当画arcs的时候，Quartz会画一条线从current point到start point     4.画矩形的时候不会有从current point到start point的线     5.创建完毕后，必须调用painting函数，fill or stroke the path，不然不显示     6.开始创建一个新路径的时候，使用函数CGContextBeginPath     */        //将一个路径添加到graphics context中    CGContextAddPath(<#CGContextRef  _Nullable c#>, <#CGPathRef  _Nullable path#>)        //stroking:画出路径    //Filling:填充路径的封闭区域        //影响Stroking的参数,    //线宽    CGContextSetLineWidth(<#CGContextRef  _Nullable c#>, <#CGFloat width#>)    //线转弯样式,比如圆滑方式    CGContextSetLineJoin(<#CGContextRef  _Nullable c#>, <#CGLineJoin join#>)    //线两端的样式,比如两端变的圆滑    CGContextSetLineCap(<#CGContextRef  _Nullable c#>, <#CGLineCap cap#>)    //虚线相关    CGContextSetLineDash(<#CGContextRef  _Nullable c#>, <#CGFloat phase#>, <#const CGFloat * _Nullable lengths#>, <#size_t count#>)    //透明度相关    CGContextSetStrokePattern(<#CGContextRef  _Nullable c#>, <#CGPatternRef  _Nullable pattern#>, <#const CGFloat * _Nullable components#>)        //Stroking的相关函数    //Strokes当前path.    void CGContextStrokePath (CGContextRef c);        //Strokes 指定的 矩形.    void CGContextStrokeRect (CGContextRef c,CGRect rect);        //Strokes 指定的 矩形, 使用指定的宽度.    void CGContextStrokeRectWithWidth (CGContextRef c,CGRect rect,CGFloat width);        //Strokes 指定的椭圆.    void CGContextStrokeEllipseInRect (CGContextRef context,CGRect rect);        //Strokes 一些直线.    void CGContextStrokeLineSegments (CGContextRef c,const CGPoint points[],size_t count);        //决定是Stroking 还是Filling    void CGContextDrawPath (CGContextRef c,CGPathDrawingMode mode);

这些参考至http://donbe.blog.163.com/blog/static/138048021201052093633776/

具体的实现了几个：

//创建画布    CGContextRef ctx = UIGraphicsGetCurrentContext();    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 0.8);    CGContextSetLineWidth(ctx, 3);        CGContextMoveToPoint(ctx, 30, 0);    CGContextAddLineToPoint(ctx, 150, 0);    //x,y为圆心    CGContextAddArc(ctx, 150, 30, 30, - M_PI_2, M_PI_2, 0);    CGContextAddLineToPoint(ctx, 30, 60);    CGContextAddArc(ctx, 30, 30, 30, M_PI_2, - M_PI_2, 0);        CGContextStrokePath(ctx);

画出来的效果如同，圆角的按钮,

如果需要填充的话，

//填充颜色

CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextDrawPath(ctx, kCGPathFill);

通过数组添加线

CGPoint aPoints[2];//坐标点    aPoints[0] =CGPointMake(100, 80);//坐标1    aPoints[1] =CGPointMake(130, 80);//坐标2    //CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)    //points[]坐标数组，和count大小    CGContextAddLines(ctx, aPoints, 2);//添加线    CGContextDrawPath(ctx, kCGPathStroke); //根据坐标绘制路径

画矩形：

/*画矩形*/      CGContextStrokeRect(context,CGRectMake(100, 120, 10, 10));//画方框      CGContextFillRect(context,CGRectMake(120, 120, 10, 10));//填充框      //矩形，并填弃颜色      CGContextSetLineWidth(context, 2.0);//线的宽度      aColor = [UIColor blueColor];//blue蓝色      CGContextSetFillColorWithColor(context, aColor.CGColor);//填充颜色      aColor = [UIColor yellowColor];      CGContextSetStrokeColorWithColor(context, aColor.CGColor);//线框颜色      CGContextAddRect(context,CGRectMake(140, 120, 60, 30));//画方框      CGContextDrawPath(context, kCGPathFillStroke);//绘画路径

画矩形，并填弃渐变颜色：

//第一种填充方式，第一种方式必须导入类库quartcore并#import <QuartzCore/QuartzCore.h>，这个就不属于在context上画，而是将层插入到view层上面。  那么这里就设计到Quartz Core 图层编程了。    CAGradientLayer *gradient1 = [CAGradientLayer layer];    gradient1.frame = CGRectMake(240, 120, 60, 30);    gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,                        (id)[UIColor grayColor].CGColor,                        (id)[UIColor blackColor].CGColor,                        (id)[UIColor yellowColor].CGColor,                        (id)[UIColor blueColor].CGColor,                        (id)[UIColor redColor].CGColor,                        (id)[UIColor greenColor].CGColor,                        (id)[UIColor orangeColor].CGColor,                        (id)[UIColor brownColor].CGColor,nil];    [self.layer insertSublayer:gradient1 atIndex:0];

//第二种填充方式    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();    CGFloat colors[] =    {        1,1,1, 1.00,        1,1,0, 1.00,        1,0,0, 1.00,        1,0,1, 1.00,        0,1,1, 1.00,        0,1,0, 1.00,        0,0,1, 1.00,        0,0,0, 1.00,    };    CGGradientRef gradient = CGGradientCreateWithColorComponents    (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));//形成梯形，渐变的效果    CGColorSpaceRelease(rgb);

    //创建矩形    CGContextSaveGState(ctx);    CGContextMoveToPoint(ctx, 220, 90);    CGContextAddLineToPoint(ctx, 240, 90);    CGContextAddLineToPoint(ctx, 240, 110);    CGContextAddLineToPoint(ctx, 220, 110);    CGContextClip(ctx);//ctx裁剪路径,后续操作的路径    //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)    //gradient渐变颜色,startPoint开始渐变的起始位置,endPoint结束坐标,options开始坐标之前or开始之后开始渐变,      开始坐标和结束坐标是控制渐变的方向和形状    CGContextDrawLinearGradient(ctx, gradient,CGPointMake                                (220,90) ,CGPointMake(240,110),                                kCGGradientDrawsAfterEndLocation);

CGContextRestoreGState(ctx);// 恢复到之前的ctx

//画椭圆      CGContextAddEllipseInRect(ctx, CGRectMake(160, 180, 20, 8)); //椭圆      CGContextDrawPath(ctx, kCGPathFillStroke);

/*画贝塞尔曲线*/    //二次曲线    CGContextMoveToPoint(ctx, 120, 300);//设置Path的起点    CGContextAddQuadCurveToPoint(ctx,190, 310, 120, 390);//设置贝塞尔曲线的控制点坐标和终点坐标    CGContextStrokePath(ctx);    //三次曲线函数    CGContextMoveToPoint(ctx, 200, 300);//设置Path的起点    CGContextAddCurveToPoint(ctx,250, 280, 250, 400, 280, 300);//设置贝塞尔曲线的控制点坐标和控制点坐标终点坐标    CGContextStrokePath(ctx);

0 0