Graphics总结

获得context

UIView的drawRect方法中:

UIGraphicsGetCurrentContext();

创建画布,获得context。最常用的imageContext:

UIGraphicsBeginImageContextWithOptions(annoImage.size, NO, 0.0);

CGContextRef context = UIGraphicsGetCurrentContext();

 

 

各种绘图

线条颜色、填充颜色、线条宽度、虚线、线条形状等

CGContextStrokePath时候,线条颜色和填充颜色生效。

(两种颜色不能同时生效,所以如果想同时有填充颜色和线条颜色,需要画两次?)

- (UIImage *)drawImage{
    UIGraphicsBeginImageContext(CGSizeMake(202, 202));
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(context, 1, 1, 1, 0xa0/255.0);//线条颜色
    CGContextSetLineWidth(context, 1.0);//线条宽度
    CGContextAddRect(context, CGRectMake(0,0, 202, 202));
    CGContextStrokePath(context);
    
    CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);//填充颜色
    CGContextFillRect(context, CGRectMake(0, 0, 15, 2));
    CGContextFillRect(context, CGRectMake(0, 0, 2, 15));
    CGContextFillRect(context, CGRectMake(202-15, 0, 15, 2));
    CGContextFillRect(context, CGRectMake(202-2, 0, 2, 15));
    CGContextFillRect(context, CGRectMake(0, 202-2, 15, 2));
    CGContextFillRect(context, CGRectMake(0, 202-15, 2, 15));
    CGContextFillRect(context, CGRectMake(202-15, 202-2, 15, 2));
    CGContextFillRect(context, CGRectMake(202-2, 202-15, 2, 15));
    CGContextStrokePath(context);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

CGContextSetLineCap 设置线条终点形状  

CGContextSetLineDash 画虚线  

 

画矩形

1.使用系统方法直接画矩形:

CGContextAddRect(context, CGRectMake(0,0, 202, 202));//画矩形边框
CGContextFillRect(context, CGRectMake(0, 0, 15, 2));//画实心矩形

2.画path:

通过CGContextMoveToPoint、CGContextAddLineToPoint绘制。绘制完成后CGContextClosePath,然后使用CGContextStrokePath填充颜色。

 

画弧线

1.CGContextAddArcToPoint

- (void)getDrawPath:(CGContextRef)context//自定义annotation calloutView的边框
{
    CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(context, 0.5);
    CGRect rrect = self.bounds;
    CGFloat radius = 10;
    
    CGFloat minx = CGRectGetMinX(rrect),
    midx = CGRectGetMidX(rrect),
    maxx = CGRectGetMaxX(rrect);
    CGFloat miny = CGRectGetMinY(rrect),
    // midy = CGRectGetMidY(rrect),
    maxy = CGRectGetMaxY(rrect)-Arror_height;
    CGContextMoveToPoint(context, midx+Arror_height, maxy);
    CGContextAddLineToPoint(context,midx, maxy+Arror_height);
    CGContextAddLineToPoint(context,midx-Arror_height, maxy);
    
    CGContextAddArcToPoint(context, minx, maxy, minx, miny, radius);
    CGContextAddArcToPoint(context, minx, miny, maxx, miny, radius);
    CGContextAddArcToPoint(context, maxx, miny, maxx, maxx, radius);
    CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
    CGContextAddLineToPoint(context, midx+Arror_height, maxy);
    
    CGContextFillPath(context);
    CGContextClosePath(context);
    
    CGContextMoveToPoint(context, midx+Arror_height, maxy);
    CGContextAddLineToPoint(context,midx, maxy+Arror_height);
    CGContextAddLineToPoint(context,midx-Arror_height, maxy);
    
    CGContextAddArcToPoint(context, minx, maxy, minx, miny, radius);
    CGContextAddArcToPoint(context, minx, miny, maxx, miny, radius);
    CGContextAddArcToPoint(context, maxx, miny, maxx, maxx, radius);
    CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
//    CGContextAddLineToPoint(context, midx+Arror_height, maxy);
    CGContextClosePath(context);
    CGContextStrokePath(context);
}

CGContextAddArcToPoint:当前点到第一个点的线、与第一个点到第二个点的线相交,然后画弧线。当前点与弧线连接,第二个点与弧线不连接,弧线结束即结束。

2.CGContextAddArc

- (UIImageView *)createShadowImageView{//创建渐变颜色的扇形
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(self.view.frame.size.height*1.1/2, self.view.frame.size.height*1.1/2), NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGPoint center = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
    for (int i = 0; i < 90; i++){
        CGContextSetRGBFillColor(context, 1, 1, 1, (i/90.0)*0.2);
        CGContextMoveToPoint(context, 0, 0);
        CGContextAddArc(context, 0, 0, center.y*1.1, i*(M_PI/180), (i+1)*(M_PI/180), 0);
        CGContextClosePath(context);
        CGContextFillPath(context);
    }
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    return imageView;
} 

CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)。colckwize为方向。

 

画椭圆、正圆

CGContextAddEllipseInRect、CGContextFillEllipseInRect

 

画图片 

 

画VIEW

[imageView.layer renderInContext:context];

[view drawViewHierarchyInRect:view.bounds afterScreenUpdates:YES];

 

Context的处理

 缩小图片并截取成圆形(截取矩形类似操作)

画出形状后,CGContextClip,再画的内容都在形状的范围内才画出了。

- (UIImage *)getSmallImage{
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 57, 57)];
    imageView.image = selectedImage;
    
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(57, 57), NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(context, CGRectMake(0, 0, 57, 57));
    CGContextClip(context);
    [imageView.layer renderInContext:context];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

 

挖空

CGContextClearRect(context, rect);

 

挖一个圆形

首先Clip一个圆形,然后ClearRect。

    CGContextAddEllipseInRect(context, r);
    CGContextClip(context);
    CGContextClearRect(context, r);

 

从context的某个位置开始绘图

- (UIImage*)createImageWithPic:(UIImageView*)pic inImage:(UIImage*)annoImage{//在annotation上添加照片
    UIGraphicsBeginImageContextWithOptions(annoImage.size, NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    [annoImage drawInRect:CGRectMake(0, 0, annoImage.size.width, annoImage.size.height)];
    CGContextTranslateCTM(context, 4.1, 1.6);
    [pic.layer renderInContext:context];
    CGContextTranslateCTM(context, -4.1, -1.6);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

CGContextTranslateCTM(context, 4.1, 1.6),修改原点,则绘图的起始位置为{4.1,1.6}。绘制完成后调用CGContextTranslateCTM(context, -4.1, -1.6)。

 

截取图片,返回截取到的图片

- (void)setBackground{
    UIImage *image = [UIImage imageNamed:@"image_health_bkg.png"];
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    imageView.frame = [UIScreen mainScreen].bounds;
    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, 0, -64);
    [imageView.layer renderInContext:context];
//    CGContextTranslateCTM(context, 0, 64);
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    self.layer.contents = (id)image.CGImage;
    return;
}

 图片比VIEW大,要把上边儿部分截去64。建立一个VIEW大小的context,CGContextTranslateCTM(context, 0, -64)让绘图原点从{0,-64}开始,再画图就可以了。

 

imagePicker获取最终截取的图片

        UIScrollView *scrollView = (UIScrollView *)[self findView:testViewController.view withName:@"PLImageScrollView"];
        UIView *imageView = [self findView:testViewController.view withName:@"PLExpandableImageView"];
        
        CGPoint contentOffset = scrollView.contentOffset;
        double scale = imageView.transform.a;
        double x = imageView.frame.origin.x;
        double y = imageView.frame.origin.y;
        
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(self.view.frame.size.width/scale, self.view.frame.size.width/scale), NO, 0.0);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextTranslateCTM(context, -(contentOffset.x - x)/scale, -(contentOffset.y+124-y)/scale);
        [originalimage drawInRect:CGRectMake(0, 0, originalimage.size.width, originalimage.size.height)];
        CGContextTranslateCTM(context, (contentOffset.x- x)/scale, (contentOffset.y+124-y)/scale);
        selectedImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

 

 

 

posted on 2014-12-01 09:36  嘉遁  阅读(763)  评论(0编辑  收藏  举报

导航