Quartz2D 简单用法

你的名字 2022-08-09 03:20 193阅读 0赞

/**
     *
     
     drawRect在以下情况下会被调用：
     
     1、如果在UIView初始化时没有设置rect大小，将直接导致drawRect不被自动调用。drawRect 掉用是在Controller->loadView, Controller->viewDidLoad 两方法之后掉用的.所以不用担心在 控制器中,这些View的drawRect就开始画了.这样可以在控制器中设置一些值给View(如果这些View draw的时候需要用到某些变量 值).
     2、该方法在调用sizeToFit后被调用，所以可以先调用sizeToFit计算出size。然后系统自动调用drawRect:方法。
     3、通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:。
     4、直接调用setNeedsDisplay，或者setNeedsDisplayInRect:触发drawRect:，但是有个前提条件是rect不能为0。
     以上1,2推荐；而3,4不提倡
     
     drawRect方法使用注意点：
     
     1、 若使用UIView绘图，只能在drawRect：方法中获取相应的contextRef并绘图。如果在其他方法中获取将获取到一个invalidate 的ref并且不能用于画图。drawRect：方法不能手动显示调用，必须通过调用setNeedsDisplay 或 者 setNeedsDisplayInRect，让系统自动调该方法。
     2、若使用calayer绘图，只能在drawInContext: 中（类似鱼drawRect）绘制，或者在delegate中的相应方法绘制。同样也是调用setNeedDisplay等间接调用以上方法
     3、若要实时画图，不能使用gestureRecognizer，只能使用touchbegan等方法来掉用setNeedsDisplay实时刷新屏幕
     *
     *
     */
    #import "MyView.h"
    
    @implementation MyView
    
    
    
    - (void)setRectHeight:(CGFloat)rectHeight{
      
        _rectHeight = rectHeight;
        [self setNeedsDisplay];
    
    }
    
    
    - (void)drawRect:(CGRect)rect {
        NSLog(@"快点响应，需要不停的刷新你啊");
    //    [self drawLines];
    //    [self lineAnimation];
    //    [self CGMutablePathRefCreateLine];
        [self layerTest];
        
    }
    /**
     *  Quartz2D绘图的代码步骤
     *
     *  1. 获得图形上下文
     
        2. 拼接路径（下面代码是搞一条线段）
     
        3. 绘制路径
     */
    
    #pragma mark   画线---这种是把所有点的坐标都写在了Context中，他有一块区域来保存这些点。
    - (void)drawLines{
        // 处理上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 设置线条样式
        CGContextSetLineCap(ctx, kCGLineCapSquare);
        // 设置线条粗细宽度
        CGContextSetLineWidth(ctx, 1.0);
        // 设置线条的颜色
        CGContextSetRGBFillColor(ctx, 9.0, 10.0, 20.0, 60.0);
        // 设置开始路径
        CGContextMoveToPoint(ctx, 0, 400);
        //设置下一个坐标点
        CGContextAddLineToPoint(ctx, 100, 300);
        //设置下一个坐标点
        CGContextAddLineToPoint(ctx, 230, 400);
        //设置下一个坐标点
        CGContextAddLineToPoint(ctx, 250, 350);
        //设置下一个坐标点
        CGContextAddLineToPoint(ctx, 260, 100);
        //连接上面定义的坐标点
        CGContextStrokePath(ctx);
    }
    
    
    #pragma mark  CGMutablePathRef 这种形式更加的直观， 直接把所有的点放入一个path中，然后直接画这个path
    // 需要的图形的效果都在path的点上面， 画圆形和四边形都是一样的。
    - (void)CGMutablePathRefCreateLine{
        CGContextRef  ctx = UIGraphicsGetCurrentContext();
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, 200, 200);
        CGPathAddLineToPoint(path, NULL, 220, 220);
        CGPathAddLineToPoint(path, NULL, 240, 180);
        CGContextAddPath(ctx, path);
        //宽度
        CGContextSetLineWidth(ctx, 2.0f);
        // 颜色
        CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
        // 渲染
        CGContextStrokePath(ctx);
        
        
        // 画圆形图像
        CGMutablePathRef pathRound = CGPathCreateMutable();
        CGPathAddEllipseInRect(pathRound, NULL, CGRectMake(50, 150, 100, 100));
        CGContextAddPath(ctx, pathRound);
        CGContextStrokePath(ctx);
        
        
        // 释放资源
        CGPathRelease(path);
        CGPathRelease(pathRound);
    }
    
    
    
    #pragma mark   Layer用法。
    /**
     *   layer同时也有zposotion的属性,拥有低的zposition的layer比高的先绘制.
     */
    - (void)layerTest{
    
        CAShapeLayer *oneLayer = [CAShapeLayer layer];
        oneLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
        oneLayer.backgroundColor = [UIColor orangeColor].CGColor;
        
        
        CAShapeLayer *twoLayer = [CAShapeLayer layer];
        twoLayer.frame = CGRectMake(0, 150, self.bounds.size.width, self.bounds.size.height);
        twoLayer.backgroundColor = [UIColor clearColor].CGColor;
        // 在上面这一个图层中进行画图处理。
        CGMutablePathRef  path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, 80, 100);
        CGPathAddLineToPoint(path, NULL, 180, 100);
        CGPathAddLineToPoint(path, NULL, 180, 200);
        CGPathAddLineToPoint(path, NULL, 80, 200);
        CGPathAddLineToPoint(path, NULL, 80, 100);
        
        twoLayer.path = path;
        twoLayer.lineWidth = 2.0f;
        twoLayer.strokeColor = [UIColor redColor].CGColor;
        twoLayer.fillColor = [UIColor clearColor].CGColor;
        
        // 添加动画效果
        CABasicAnimation *animation = [[CABasicAnimation alloc]init];
        animation.duration = 1.0f;
        animation.fromValue = @0;
        animation.toValue = @1;
        [twoLayer addAnimation:animation forKey:@"strokeEnd"];
        
        
        // 画一个长方形
        CAShapeLayer *threeLayer = [CAShapeLayer layer];
        threeLayer.backgroundColor = [UIColor clearColor].CGColor;
        threeLayer.strokeColor = [UIColor redColor].CGColor;
        threeLayer.fillColor = [UIColor redColor].CGColor;
        threeLayer.lineWidth = 2.0f;
        
        CGMutablePathRef pathRect = CGPathCreateMutable();
        // 带圆角的长方形
        for (int i = 0; i<300; i=i+50) {
            CGPathAddRoundedRect(pathRect, NULL, CGRectMake(10+i, 200, 20, self.rectHeight), 5, 5);
        }
        threeLayer.path = pathRect;
        if (self.rectHeight < 100) {
            [[NSNotificationCenter defaultCenter]postNotificationName:@"rectHeightVal" object:nil];
        }
        
        
        [self.layer addSublayer:oneLayer];
        [self.layer addSublayer:twoLayer];
        [self.layer addSublayer:threeLayer];
        
    }
    
    
    #pragma mark  touch事件， 判断是否点击这个长方形了，然后回调暴露给外面。
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
        UITouch *touch = [touches anyObject];
        CGPoint currentLocation = [touch locationInView:self];
        NSLog(@"%@",NSStringFromCGPoint(currentLocation));
        
        // 判断点是否在这些长方体内 
        
    }
    
    
    #pragma mark  设置动画效果  //注意：但凡通过Quartz2D中带有creat/copy/retain方法创建出来的值都必须要释放
    - (void)lineAnimation{
        CAShapeLayer *graphLayer = [CAShapeLayer layer];
        graphLayer.frame = self.bounds;
        graphLayer.backgroundColor = [UIColor clearColor].CGColor;
        graphLayer.strokeColor = [UIColor redColor].CGColor;
        graphLayer.lineWidth = 1;
        graphLayer.fillColor = [UIColor clearColor].CGColor;
        graphLayer.strokeStart = 0.0f;
        graphLayer.strokeEnd = 1.0f;
        
        // 画线
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, nil, 20, 400);
        int count = 0;
        for (int i = 20; i<400; i=i+10) {
            if (count%2 == 0) {
                CGPathAddLineToPoint(path, nil, i, 400);
            }else{
                CGPathAddLineToPoint(path, nil, i, 350);
            }
            count++;
        }
        graphLayer.path = path;
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.duration = 10;
        animation.fromValue = @0;
        animation.toValue = @1;
        [graphLayer addAnimation:animation forKey:@"strokeEnd"];
        [self.layer addSublayer:graphLayer];
    }
    
    @end

调用：

@implementation ViewController{
        MyView *myView;
    
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        myView = [[MyView alloc] init];
        myView.frame = CGRectMake(0, 0, 300, 400);
        myView.rectHeight = 10.0;
        [self.view addSubview:myView];
    }
    
    - (IBAction)valChange:(id)sender {
        UISlider *mySlider = (UISlider *)sender;
        myView.rectHeight = mySlider.value;
    }
    @end