美文网首页
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