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();