美文网首页
iOS开发之绘图(Core Graphics)

iOS开发之绘图(Core Graphics)

作者: 安静SRR | 来源:发表于2016-04-22 15:42 被阅读1486次

    在准备画板的时候一定要重写drawRect方法

    常用的方法:

    • CGContextRef 上下文
    • 路径
      1 UIBezierPath 贝塞尔路径
      2 通过点绘制一条路径 CGMutablePathRef
      3 注意必须设置一个起始点 CGContextMoveToPoint
    • 画形状
      1 矩形 CGContextAddRect:
      2 曲线 CGContextAddCurveToPoint
      3 圆形 CGContextAddEllipseInRect
    • 截图
      1 开始截图的方法 UIGraphicsBeginImageContextWithOptions
      2 获得当前图片上下文的图片 UIGraphicsGetImageFromCurrentImageContext() -> 从画图的layer上得到的
      3 UIGraphicsEndImageContext 关闭图片上下文
      4 UIGraphicsBeginImageContext开始获得图片上下文
      5 CGContextStrokePath 把路径绘制到上下文
      6 直接把路径绘制到界面 stroke
    • 设置画笔
      1 CGContextSetLineWidth 设置画笔宽度
      2 setFill 设置画线区域范围的填充颜色
      3 CGContextSetStrokeColor 设置画笔颜色
      4 set 设置画笔颜色
      5 设置画笔颜色填充模式
      kCGPathFill, 只填充
      kCGPathStroke,只显示画笔颜色
      kCGPathFillStroke,既填充又有画笔

    使用步骤

    • 1 CGContextRef 上下文->画板
    • 2 画图的内容 -> 设置画图的内容
    • 3 把内容添加到上下文(画板)上
    • 4 把内容画到画板上

    代码示例

    //  Copyright © 2016年 安静SRR. All rights reserved.
    //
    
    #import "PaintingView.h"
    
    @interface PaintingView ()
    {
        CGContextRef contextRef;
    
    }
    @end
    
    @implementation PaintingView
    //所有画图的方法 写在drawRect里面
    //1、初始化的时候就会调用drawRect方法
    //2、调用setNeedsDisplay的时候也会调用drawRect方法
    
    -(void)drawRect:(CGRect)rect{
        [super drawRect:rect];
        [self addRound];
        
    }
    //画直线
    -(void)addLine{
    
    //1、创建画布上下文
    //获得当前的上下文当做画布
     CGContextRef context = UIGraphicsGetCurrentContext();
    //2、创建画图的内容
        UIBezierPath *path = [UIBezierPath bezierPath];
        /*
         Point 中心点
         x 中心点x
         y 中心点y
         
         y不变 x从小值 - 大值 横向直线
         */
      //2.1设置一个起始点
        [path moveToPoint:CGPointMake(10, 50)];
      //2.2添加其他点
        [path addLineToPoint:CGPointMake(300, 50)];
          [path addLineToPoint:CGPointMake(300, 350)];
        
      //2.3设置画笔宽度
        path.lineWidth = 2;
        
     //2.4设置画笔颜色
        //[[UIColor orangeColor]set];
        //画笔颜色
        [[UIColor whiteColor]setStroke];
        //填充颜色
        [[UIColor purpleColor]setFill];
        
        
    //3、把内容《路径》添加到上下文<画布>
        CGContextAddPath(context, path.CGPath);
    //4、绘制(渲染)内容到画板(上下文)
      //  CGContextStrokePath(context);
        //设置填充的样式
        CGContextDrawPath(context, kCGPathFillStroke);
        
    }
    //添加矩形
    -(void)addRect{
    //1、创建画布
        CGContextRef context = UIGraphicsGetCurrentContext();
    //2、设置内容
        CGContextAddRect(context, CGRectMake(10, 10, 100, 100));
        //2.1设置画笔颜色
        [[UIColor orangeColor]setStroke];
        [[UIColor colorWithRed:1.0 green:0.382 blue:0.4795 alpha:1.0]setFill];
        //2.2 设置画笔宽度;
        CGContextSetLineWidth(context, 5);
     //3、渲染内容到画板
      //  CGContextStrokePath(context);
      //   CGContextDrawPath(context, kCGPathFillStroke);
        //把内容直接渲染到画布
        CGContextStrokeRect(context, CGRectMake(10, 10, 100, 100));
    }
    //添加圆形
    -(void)addRound{
        //1、创建画布
         contextRef = UIGraphicsGetCurrentContext();
        //2、内容
        CGContextAddEllipseInRect(contextRef, CGRectMake(20, 20, 100, 100));
        //3、设置画笔颜色
        [[UIColor whiteColor]set];
        //渲染到画布
        CGContextDrawPath(contextRef, kCGPathFillStroke);
    
    }
    //画曲线
    -(void)addCurve
    {
       //1、创建画布
        CGContextRef context = UIGraphicsGetCurrentContext();
        //2、内容
        UIBezierPath *path = [UIBezierPath bezierPath];
        // [ moveToPoint:CGPointMake(10, 100)];
        //绘制曲线
        //  [path addCurveToPoint:CGPointMake(20, 130) controlPoint1:CGPointMake(100, 200) controlPoint2:CGPointMake(300, 100)];
        /**
         *  center 中心点
         *  radius 半径
         *  startAngle 开始的弧度
         *  endAngle 结束的弧度
         *  clockwise 是顺时针 还是逆时针
         */
        [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
        [[UIColor redColor]setStroke];
        [[UIColor yellowColor]setFill];
        //3、把内容添加到画布上
        CGContextAddPath(context, path.CGPath);
        //4、渲染
        CGContextDrawPath(context, kCGPathFillStroke);
    
    }
    //简化画线
    -(void)addLine2{
    //1、路径
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(200, 200)];
        [path addLineToPoint:CGPointMake(200, 500)];
        [[UIColor whiteColor]set];
        
        //2、画出内容
        [path stroke];
     }
    
    //截屏
    - (UIImage *)imageFromView
    {
       //1、获得图片的画布(上下文)
        //2、画布的上下文
        //3、设置截图的参数 截图
        //4、关闭图片的上下文
        //5、保存
        UIGraphicsBeginImageContext(self.frame.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        [self.layer renderInContext:context];
        //开始截图
        UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
       //关闭截图上下文
        UIGraphicsEndImageContext();
        
        UIImageWriteToSavedPhotosAlbum(theImage,nil,nil,nil); //保存图片到相册
        
        return theImage;
    }
    
    @end
    
    

    备注:代码示例里面包括了画直线、画矩形、画圆形、画曲线、还有保存截图的方法。有兴趣的朋友可以研究一下。
    这里面没有添加撤销的方法,在这里把思路说一下:因为画的线是存在数组里面的,可以添加一个响应事件,在这个响应事件里面添加移除数组元素的方法,这样就可以实现划线的撤消了

    相关文章

      网友评论

          本文标题:iOS开发之绘图(Core Graphics)

          本文链接:https://www.haomeiwen.com/subject/zyrxrttx.html