IOS开发之Quartz2D绘图的使用

Posted 2020-06-26 Biaoac

/*

 *绘图：Quarz 2D  ——》 Core Graphics

  

  作用：

          绘制图形 : 线条\三角形\矩形\圆\弧等

          绘制文字 绘制\生成图片(图像)

          读取\生成PDF

          截图\裁剪图片

          自定义UI控件

          涂鸦\画板

          手势解锁 … …

注意：

        Quartz2D的API是纯C语言的

        Quartz2D的API来自于Core Graphics框架 需要导入

        CoreGraphics.framework数据类型和函数基本都以CG作为前缀CGContextRefCGPathRefCGContextStrokePath(ctx);

 步骤：

   (1)CGContextRef  上下文 ——》 画板

   (2)画图的内容 ——》 设置画图的内容

   (3)把内容添加到上下文《画板》

   (4)把内容画到画板上

 

 常用方法介绍

   (1) CGContextRef  上下文

   (2) 路径

         《1》UIBezierPath

         《2》CGMutablePathRef   通过一个点绘制一个路径

         《3》注意  必须设置起始点CGContentextMoveToPoint

   (3) 画图形

            矩形 CGContextAddRect

            曲线 CGContextAddCurveToPoint

            圆形 CGContextAddEllipseInRect

       

         (3.1) CGContextSetLineWidth 设置笔画宽度

        （3.2）set 设置笔画的颜色

        （3.3）setFill 划线区域范围的填充

        （3.4）setStroke 设置笔画的颜色

        （3.5）设置画笔填充样式

            《1》kCGPathFill 只填充

            《2》kCGPathStroke 画笔颜色

            《3》kCGPathFillStroke 既填充又有画笔颜色

 

   （4）截图

      （1）UIGraphicsBeginImageContextWithOptions开始截图

      （2）获得当前图片上下文的图片UIGraphicsGetImageFromCurrentImageContext()

      （3）UIGraphicsEndImageContext 关闭图片上下文

      （4）UIGraphicsBeginImageContext开始获得图片上下文

      （5）CGContextStrokePath 把路径绘制到图片上下文

      （6）把路径绘制到界面上面  直接stroke

 

 

 */

 

// 所有画图的代码写在 drawRect 里面

//1. 初始化的时候会调用

//2。 setNeedsDisplay

 

 

- (void)drawRect:(CGRect)rect{

    [super drawRect:rect];

    

//    NSLog(@"dsadsadsa");

    [self addline];

}

 

 

 

 

// 画直线

- (void)addline{

    

//1.创建画布 上下文

//   获得当前的视图作为上下文

    CGContextRef context = UIGraphicsGetCurrentContext();

    

   /*

    point  中心点

    */

    

 

//2.创建画图的内容

//    *必须有一个起始点

//    *还要有个移动的位置（另一个位置）

    UIBezierPath *path = [UIBezierPath bezierPath];

    

//    2.1 设置其他点

    [path addLineToPoint:CGPointMake(50, 50)];

    [path addLineToPoint:CGPointMake(100, 100)];

    [path addLineToPoint:CGPointMake(300, 300)];

    

//    2.2 设置画笔的宽度

    path.lineWidth = 2;

//    2.3 设置画笔的颜色

//    [[UIColor redColor]set];

    //    设置画笔颜色

    [[UIColor whiteColor] setStroke];

    //    设置填充颜色

    [[UIColor brownColor] setFill];

    

//3. 把画上的路径添加到上下文

    CGContextAddPath(context, path.CGPath);

    

//4. 把画上的内容添加到画板

//    CGContextStrokePath(context);

    

    

//    设置填充的样式

    CGContextDrawPath(context, kCGPathFillStroke);

    

 

}

 

 

 

 

//画直线

- (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(10, 500)];

    [path addLineToPoint:CGPointMake(300, 500)];

    //    2.3设置画笔宽度

    path.lineWidth = 2;

    //    2.4设置画笔颜色

    //    [[UIColor whiteColor] set];

    //    设置画笔颜色

    [[UIColor whiteColor] setStroke];

    //    设置填充颜色

    [[UIColor brownColor] setFill];

    

    //    3、把画的内容《路径》添加到上下文《画布》

    CGContextAddPath(context, path.CGPath);

    //    4、绘制 渲染 内容到 上下文 《画布》

    //    CGContextStrokePath(context);

    //    设置填充的样式

    CGContextDrawPath(context, kCGPathFillStroke);

}

 

 

 

 

 

//添加矩形

- (void)addRect{

//   1.画布

    CGContextRef context = UIGraphicsGetCurrentContext();

//   2.内容

    CGContextAddRect(context, CGRectMake(0, 0, 100, 100));

    [[UIColor redColor]set];

    

//    设置画笔的宽度

    CGContextSetLineWidth(context, 3);

    

//   3.渲染

//    直接渲染矩形

//    CGContextStrokeRect(context, CGRectMake(0, 0, 100, 100));

    CGContextDrawPath(context, kCGPathFillStroke);

 

    

}

 

 

 

 

 

//  画圆形

- (void)addRound{

 

//    画布

    content8 = UIGraphicsGetCurrentContext();

//    内容

    CGContextAddEllipseInRect(content8, CGRectMake(10, 10, 100, 100));

    [[UIColor blackColor]set];

//    渲染到画布

    CGContextDrawPath(content8, kCGPathFillStroke);

 

}

 

 

 

 

// 画曲线

- (void)addCurve{

//   画布

    CGContextRef contenxt = UIGraphicsGetCurrentContext();

//    内容

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(100, 100)];

//    [path addCurveToPoint:CGPointMake(200, 150) controlPoint1:CGPointMake(0, 0) controlPoint2:CGPointMake(200, 150)];

    /**

     *  画圆

     *

     *  CGPointMake 中心点

     *  radius      半径

     *  startAngle   开始的弧度

     *  endAngle     结束的弧度

     *  clockwise    是顺时针还是逆时针

     */

    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];

    

    [[UIColor redColor]setStroke];

    [[UIColor blackColor]setFill];

//    把内容添加到画布上

    CGContextAddPath(contenxt, path.CGPath);

    

//  渲染

    CGContextDrawPath(contenxt, kCGPathFillStroke);

 

}

 

 

 

 

// 画线简化

- (void)addLine2{

//  1.路径

//  2。画出内容

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(100, 100)];

    [path addLineToPoint:CGPointMake(200, 500)];

    [[UIColor redColor]set];

    

    [path stroke];

 

 

 

}

 

 

 

 

//截屏

- (void)cutScreen{

    //    1.获得一个图片的上下文

    //    2.画布的上下文

    //    3.截图

    //    4.

    //    5.关闭图片的上下文

    //    6.保存

    UIGraphicsBeginImageContext(self.frame.size);

    [self addRound];

    [self.layer renderInContext:content8];

    

    /*

     第一个参数  图片尺寸

     第二个参数 是否不透明  yes不透明  no透明

     第三个参数 比例

     

     */

    UIGraphicsBeginImageContextWithOptions(self.frame.size, YES, 1);

    

    //    开始截图

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    

    

    //    关闭截图上下文

    UIGraphicsEndImageContext();

    UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);

    

    

}

 

 

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{

    

}