iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

简介:

前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果。

这里我们先来绘制一些简单的图形(如直线、三角形、圆、矩形、文字、图像),它有两种方式可以绘制,一种是通过上下文绘制,另一种是通过路径绘制。下面对绘制三角形做了一个两种方式绘制的演示。

 

绘制基本的图形,如果自定义一个视图类,那么需要在操作的视图类中重写- (void)drawRect:(CGRect)rect方法,并在在该方法中绘制图形,该画图方法无需手动调用,是系统自动调用的。这里,我采用自定义一个视图类并将控制器的视图关联此自定义类的方式来绘制图形。具体实例如下:

1.创建一个自定义的视图类DemoView,关联控制器视图。

    

 

2.在自定义的视图类的- (void)drawRect:(CGRect)rect方法中进行绘图:

//所有的调用方法都写在- (void)drawRect:(CGRect)rect

复制代码
- (void)drawRect:(CGRect)rect
{
    //1.获取绘图的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //画直线
    [self drawLine:context];
    
    //画三角形
    [self drawTriangle:context];
    
    //画矩形
    [self drawRectangle:context];
    
    //画圆
    [self drawCircle:context];
    
    //路径的使用
    [self drawByPath:context];
    
    //画文字
    [self drawString:context];
    
    //画图像
    [self drawImage];

}
复制代码

 

//绘制直线

#pragma mark -画直线(实线和虚线)

复制代码
-(void)drawLine:(CGContextRef) context
{
    //2.添加绘图路径
    CGContextMoveToPoint(context, 30, 40);
    CGContextAddLineToPoint(context, 100, 40); //终点
    
    //3.设置绘图的属性
    //描边的颜色
    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};
    CGContextSetStrokeColor(context, redColor);
    
    //填充的颜色
    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};
    CGContextSetFillColor(context, greenColor);
    
    //线宽
    CGContextSetLineWidth(context, 5);
    
    //线的类型(虚线)
    //CGFloat dash[2] = {1.0,2.0};
    //CGContextSetLineDash(context, 0,dash, 2);
    
    //4.绘图(设置既填充有描边)
    CGContextDrawPath(context, kCGPathFillStroke);
}
复制代码

所画直线和虚线截图为:

  

 

//绘制三角形

#pragma mark -直接在上下文画三角形(第一种方式)

复制代码
-(void)drawTriangle:(CGContextRef) context
{
    //2.添加绘图路径
    CGContextMoveToPoint(context, 100, 100);//起始点
    CGContextAddLineToPoint(context, 150, 100); //终点
    CGContextAddLineToPoint(context, 125, 150); //终点
    CGContextAddLineToPoint(context, 100, 100); //终点
    
    //3.设置绘图的属性
    //描边的颜色
    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};
    CGContextSetStrokeColor(context, redColor);
    
    //填充的颜色
    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};
    CGContextSetFillColor(context, greenColor);
    
    //线宽
    CGContextSetLineWidth(context, 5);
    
    
    //线的连接点的类型(miter尖角、round圆角、bevel平角)
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    
    //4.绘图(设置既填充有描边)
    CGContextDrawPath(context, kCGPathFillStroke);
    
}
复制代码

所画的三角形截图为:

 

//绘制矩形

#pragma mark -画矩形

复制代码
-(void)drawRectangle:(CGContextRef)context
{
    //添加矩形
    CGContextAddRect(context, CGRectMake(250, 100, 100, 100));
    
    //设置绘图的属性
    //描边的颜色
    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};
    CGContextSetStrokeColor(context, redColor);
    
    //填充的颜色
    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};
    CGContextSetFillColor(context, greenColor);
    
    //4.绘图
    CGContextDrawPath(context, kCGPathFillStroke);
}
复制代码

所画的矩形截图为:

 

//绘制圆

#pragma mark -画圆(正圆、椭圆)

复制代码
-(void)drawCircle:(CGContextRef) context
{
    //
    CGContextAddEllipseInRect(context, CGRectMake(200, 300, 100, 100));
    
    //椭圆
    CGContextAddEllipseInRect(context, CGRectMake(60, 300, 100, 150));
    
    
    //设置绘图的属性
    //描边的颜色
    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};
    CGContextSetStrokeColor(context, redColor);
    
    //填充的颜色
    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};
    CGContextSetFillColor(context, greenColor);
    
    //4.绘图
    CGContextDrawPath(context, kCGPathFillStroke);
}
复制代码

所画的正圆和椭圆截图为:

 

 

通过路径画三角形(第二种画图方式)

#pragma mark -先把路径添加到上下文,然后通过路径画三角形

复制代码
-(void)drawByPath:(CGContextRef)context
{
    //创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    
    //往路径中添加图像
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 100);
    CGPathAddLineToPoint(path, NULL, 150, 200);
    
    //设置绘图的属性
    [[UIColor redColor]setStroke];//描边
    [[UIColor greenColor]setFill];//填充
    //[[UIColor purpleColor]set];   //既描边又填充
    
    //将路径添加到上下文中
    CGContextAddPath(context, path);
    
    //闭合路径
    CGContextClosePath(context);
    
    //绘图
    CGContextDrawPath(context, kCGPathFillStroke);
    
    //清理
    CGPathRelease(path);
}
复制代码

所画三角形截图为:

 

//绘制文字

#pragma mark -画文字(不换行、换行)

复制代码
-(void)drawString:(CGContextRef)context
{
    NSString *str = @"hello world";
    
    //以点开始画不换行
    [str drawAtPoint:CGPointMake(100, 60) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]}];
    
    
    //在矩形中画,超出就换行
    [str drawWithRect:CGRectMake(100, 230, 50, 100) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]} context:nil];
}
复制代码

不换行和换行的文字截图为:

 

 

//绘制图像

#pragma mark -画图像(将原图绘制、将原图按照矩形区域大小绘制、带花边绘制)

复制代码
-(void)drawImage
{
    UIImage *imageName = [UIImage imageNamed:@"1.png"];
    
    
    //原始图像大小
    [imageName drawAtPoint:CGPointMake(250, 430)];
    
    //改变图像大小
    [imageName drawInRect:CGRectMake(250, 500, 100, 100)];
    
    //花纹样式画图像
    [imageName drawAsPatternInRect:CGRectMake(100, 500, 100, 100)];
}
复制代码

三种绘制的图像截图为:

   

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
分类:  iOS高级

本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/4868272.html,如需转载请自行联系原作者
相关文章
|
算法 C语言 iOS开发
iOS 在上下文中绘制图形
iOS 在上下文中绘制图形
136 0
|
文字识别 算法 Swift
毕业设计在iOS上使用OpenCV实现图片中的文字框选文字识别
毕业设计在iOS上使用OpenCV实现图片中的文字框选文字识别
570 0
毕业设计在iOS上使用OpenCV实现图片中的文字框选文字识别
|
人工智能 API iOS开发
iOS MachineLearning 系列(2)—— 静态图像分析之矩形识别
本系列文章将完整的介绍iOS中Machine Learning相关技术的应用。本篇文章开始,我们将先介绍一些与Machine Learning相关的API的应用。使用这些API可以快速方便的实现很多如图像识别,分析等复杂功能,且不会增加应用安装包的体积。
276 0
|
API iOS开发 Perl
iOS UIImageView文字头像,首字母缩略头像
iOS UIImageView文字头像,首字母缩略头像
iOS UIImageView文字头像,首字母缩略头像
|
iOS开发
iOS开发-使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字
iOS开发-使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字
117 0
iOS开发-使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字
|
iOS开发
iOS开发 - 同一段文字显示不同颜色和字体
iOS开发 - 同一段文字显示不同颜色和字体
112 0
|
iOS开发
iOS开发-调整文字之间间距
iOS开发-调整文字之间间距
294 0
|
iOS开发
iOS开发-同一段文字显示不同颜色
iOS开发-同一段文字显示不同颜色
102 0
|
程序员 API iOS开发
iOS开发:字符串设置指定内容的文字颜色、文字大小、文字字体类型
在iOS开发过程中,会有一些为了提高APP的视觉效果而设置的特别一点的效果,比如一行文字需要自定义不同的颜色和文字大小,这就用到通过富文本来设置字符串的颜色、大小和文字类型。这篇博文我打算只介绍怎么设置指定内容的一些文字属性设置,如果之前看过我写的博文,就会发现有一篇类似介绍通过富文本来设置字符串内容的博文,但是那篇是综合性的,包括介绍button的,以及UItextfield的设置,所以在这里我只介绍怎么设置字符串指定位置的一些自定义设置的方法,如有不妥之处,欢迎指正。
614 0
|
iOS开发 MacOS
IOS之Quartz
IOS之Quartz
156 0
IOS之Quartz