美文网首页iOS程序猿iOS开发程序员
绘图相关(平滑过渡色、镂空效果、部分圆角等)

绘图相关(平滑过渡色、镂空效果、部分圆角等)

作者: King_Whb | 来源:发表于2016-09-02 11:30 被阅读272次

    1.绘制虚线
    根据图像的边缘绘制虚线

    view.center = self.view.center;
    view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:view];
    CAShapeLayer * shapeLayer = [CAShapeLayer layer];
    
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    shapeLayer.fillColor = [UIColor greenColor].CGColor;
    
    shapeLayer.path = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;
    
    shapeLayer.frame = view.bounds;
    
    shapeLayer.lineWidth = 1.f;
    
    shapeLayer.lineCap = kCALineCapRound;
    
    shapeLayer.lineDashPattern = @[@20, @2];//第一个参数是线条的长度,2代表的是间隔
    
    [view.layer addSublayer:shapeLayer];
    

    2.贝塞尔画出曲线(可以是直线,改变线型就会变成虚线)

    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    
    [path moveToPoint:CGPointMake(160, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:10 startAngle:0 endAngle:-2*M_PI clockwise:NO];
    
    [path moveToPoint:CGPointMake(155, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:5 startAngle:0 endAngle:-2*M_PI clockwise:NO];
    
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];
    
    
    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor greenColor].CGColor;
    shapeLayer.lineWidth = 3;
    shapeLayer.lineDashPhase = 1;
    
    shapeLayer.strokeStart = 0.2;
    shapeLayer.strokeEnd = 0.8;
    //填充颜色的规则,zero 是  kCAFillRuleEvenOdd是从左到右穿过为1不穿过为0,0为外部
    shapeLayer.fillRule = kCAFillRuleNonZero;
    
    shapeLayer.lineJoin = kCALineJoinRound;//交汇处的是否为圆角平切  不变等
    shapeLayer.lineCap = kCALineCapSquare; //线型
    shapeLayer.lineDashPattern = @[@3 ,@4];
    
    shapeLayer.path = path.CGPath;
    //add it to our view
    [self.view.layer addSublayer:shapeLayer];
    

    3.画正方形(部分圆角)

    CGSize radii = CGSizeMake(20, 20);
    UIRectCorner corner = UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corner cornerRadii:radii];
    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor greenColor].CGColor;
    shapeLayer.lineWidth = 3;
    

    // //shapeLayer.lineDashPhase = 1;
    // // shapeLayer.strokeStart = 0.2;
    // // shapeLayer.strokeEnd = 0.8;
    // //填充颜色的规则,zero 是 kCAFillRuleEvenOdd是从左到右穿过为1不穿过为0,0为外部
    // shapeLayer.fillRule = kCAFillRuleNonZero;

    shapeLayer.lineJoin = kCALineJoinRound;//交汇处的是否为圆角平切  不变等
    shapeLayer.lineCap = kCALineCapRound; //线型
    

    // shapeLayer.lineDashPattern = @[@3 ,@4];

    shapeLayer.path = path.CGPath;
    //add it to our view
    [self.view.layer addSublayer:shapeLayer];
    

    4.镂空效果

    imageView.image = [UIImage imageNamed:@"8"];
    [self.view addSubview:imageView];
    
    
    UIView *bgView = [[UIView alloc]initWithFrame:self.view.frame];
    bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
    [self.view addSubview:bgView];
    
    CGRect rc = CGRectMake(15, 30, 130, 130);
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:bgView.bounds];
    

    //[path appendPath:[[UIBezierPath bezierPathWithRect:rc] bezierPathByReversingPath]];

    [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:rc cornerRadius:80]bezierPathByReversingPath]];
    shapeLayer.path = path.CGPath;
    bgView.layer.mask = shapeLayer;
    

    4.二次函数曲线

    [path moveToPoint:CGPointMake(1, 0)];
    
    [path addQuadCurveToPoint:CGPointMake(500, 0) controlPoint:CGPointMake(300, 1000)];
    

    // [path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    

    5.直线

    [path moveToPoint:CGPointMake(1, 0)];
        
    [path addLineToPoint:CGPointMake(500, 500)];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    

    6.一般曲线

    [path moveToPoint:CGPointMake(1, 0)];
    
    [path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    

    7.用 CATextLayer显示文字并改变清晰度

    textLayer.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2-50, 200, 200);
    
    [self.view.layer addSublayer:textLayer];
    
    textLayer.foregroundColor = [UIColor blackColor].CGColor;
    textLayer.string = @"Lorem ipsum dolor sit amet, consectetur adipiscing \
    elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \
    leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \
    elementum, libero ut porttitor dictum, diam odio congue lacus, vel \
    fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \
    lobortis";
    textLayer.alignmentMode = kCAAlignmentJustified;
    
    textLayer.contentsScale = 2.0f;
    
    textLayer.wrapped = YES;
    UIFont *font = [UIFont systemFontOfSize:15];
    
    //set layer font
    CFStringRef fontName = (__bridge CFStringRef)font.fontName;
    //获取 font 的名字
    CGFontRef fontRef = CGFontCreateWithFontName(fontName);
    
    textLayer.font = fontRef;
    textLayer.fontSize = font.pointSize;
    CGFontRelease(fontRef);
    

    8.平滑过渡色

        gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];
        gradientLayer.locations = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1]];
    
        gradientLayer.startPoint = CGPointMake(0, 0);
        gradientLayer.endPoint = CGPointMake(1, 1);
    

    *** 注意颜色必须是CGColor,设置 locations 是[0-1]浮点型numberWithFloat

    绘图相关(平滑过渡色、镂空效果、部分圆角等)
    注:太麻烦了,就把所有的效果搞一张图上,虽然不清,但都能说明问题。
    之前对贝塞尔没有太多认识,3D 动画那一块也没有很深的了解,暂时不展示3D 动画那一块
    资料:http://blog.sina.com.cn/s/blog_8f5097be0101b91z.html

    相关文章

      网友评论

        本文标题:绘图相关(平滑过渡色、镂空效果、部分圆角等)

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