一、画直线
二、画椭圆
三、画圆弧
四、画扇形（饼状图）
五、画文字
六、画图片
七、绘制四边形
八、画虚线
九、画多边形
十、画圆角矩形
首先创建一个 UIView
然后重写 drawRect: 方法
补充：
为什么要实现drawRect:方法才能绘图到view上？
因为在drawRect:方法中才能取得跟view相关联的图形上下文
drawRect:方法在什么时候被调用？
当view第一次显示到屏幕上时（被加到UIWindow上显示出来）
调用view的setNeedsDisplay或者setNeedsDisplayInRect:时
一、画直线
// 当自定义view第一次显示出来的时候就会调用drawRect方法 - (void)drawRect:(CGRect)rect {
// typedef struct CGContext *CGContextRef; // 1.获取图形上下文，用来保存绘图信息 CGContextRef cxt = UIGraphicsGetCurrentContext(); // 2.绘图(绘制直线) // 设置起点 CGContextMoveToPoint(cxt, 100, 100); // 设置终点 CGContextAddLineToPoint(cxt, 150, 150); // 绘制一条空心的线 (画线，只能用空心来渲染，实心渲染无效) CGContextStrokePath(cxt);
注：空心 和 实心 在后面有介绍。
}
下面是一些扩展
// 当自定义view第一次显示出来的时候就会调用drawRect方法 - (void)drawRect:(CGRect)rect { // 1.取得和当前视图相关联的图形上下文(因为图形上下文决定绘制的输出目标)/ // 如果是在drawRect方法中调用UIGraphicsGetCurrentContext方法获取出来的就是Layer的上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.绘图(绘制直线), 保存绘图信息 // 设置起点 CGContextMoveToPoint(ctx, 10, 100); // 设置终点 CGContextAddLineToPoint(ctx, 100, 100); // 设置绘图状态 // 设置线条颜色 红色 CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0); // 设置线条宽度 CGContextSetLineWidth(ctx, 10); // 设置线条的起点和终点的样式 CGContextSetLineCap(ctx, kCGLineCapRound); // 设置线条的转角的样式 CGContextSetLineJoin(ctx, kCGLineJoinRound); // 绘制一条空心的线 CGContextStrokePath(ctx); /*------------------华丽的分割线---------------------*/ // 重新设置第二条线的起点 CGContextMoveToPoint(ctx, 150, 200); // 设置第二条直线的终点(自动把上一条直线的终点当做起点) CGContextAddLineToPoint(ctx, 100, 50); // 设置第二条线的颜色 绿色 // [[UIColor greenColor] set]; CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0); // 绘制图形(渲染图形到view上) // 绘制一条空心的线 CGContextStrokePath(ctx); }
二、画椭圆
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); // 画椭圆(内切圆) CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100)); // 空心渲染 CGContextStrokePath(ctx); // 实心渲染 // CGContextFillPath(ctx); }
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); // 画圆 2 方法 CGContextAddArc(ctx, 100, 100, 50, 0, 2*M_PI, 0); CGContextStrokePath(ctx); // CGContextFillPath(ctx); }
三、画圆弧
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); /** * 画圆弧 * * @param ct 上下文 * @param x 圆心的x description#> * @param y#> 圆心的y description#> * @param radius#> 半径 description#> * @param startAngle#> 开始的弧度 description#> * @param endAngle#> 结束的弧度 description#> * @param clockwise#> 圆弧的方向(0 顺时针, 1 逆时针) description#> */ CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0); CGContextStrokePath(ctx); // CGContextFillPath(ctx); }
四、画扇形（饼状图）
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextMoveToPoint(ctx, 100, 100); // 画直线 CGContextAddLineToPoint(ctx, 100, 200); // 画弧线 CGContextAddArc(ctx, 100, 100, 100, M_PI_2, M_PI_4, 1); // 关闭路径 CGContextClosePath(ctx); // 渲染 CGContextStrokePath(ctx); }
五、画文字
- (void)drawRect:(CGRect)rect { NSString *str = @"hahah啊就是看到路峰las啊就是看到路峰las啊就是看到路峰las啊就是看到路峰las"; [str drawInRect:CGRectMake(20, 20, 100, 100) withAttributes:nil]; }
下面是扩展
- (void)drawRect:(CGRect)rect { // 画文字 NSString *str = @"哈哈哈撒了大空间发撒；离开家法拉盛江东父老快结束的福利卡手机打发；的快速的减肥；lajsd"; // 1.获取上下文 // CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.绘图 // 不推荐使用C语言的方法绘制文字, 因为quraz2d中的坐标系和UIkit中的坐标系不一致, 绘制出来的文字是颠倒的, 而且通过C语言的方法绘制文字相当麻烦 // CGContextSelectFont(<#CGContextRef c#>, <#const char *name#>, <#CGFloat size#>, <#CGTextEncoding textEncoding#>) // CGContextShowText(ctx, <#const char *string#>, <#size_t length#>) // 绘制矩形 // 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.绘图 CGContextAddRect(ctx, CGRectMake(50, 50, 100, 100)); // 3.渲染 CGContextStrokePath(ctx); NSMutableDictionary *md = [NSMutableDictionary dictionary]; // 设置文字颜色 md[NSForegroundColorAttributeName] =[UIColor redColor]; // 设置文字背景颜色 md[NSBackgroundColorAttributeName] = [UIColor greenColor]; // 设置文字大小 md[NSFontAttributeName] = [UIFont systemFontOfSize:20]; // 将文字绘制到指点的位置 [str drawAtPoint:CGPointMake(10, 10) withAttributes:md]; // 将文字绘制到指定的范围内, 如果一行装不下会自动换行, 当文字超出范围后就不显示 // [str drawInRect:CGRectMake(50, 50, 100, 100) withAttributes:nil]; }
六、画图片
- (void)drawRect:(CGRect)rect { // 加载图片到内存中 UIImage *img = [UIImage imageNamed:@"001"]; // 利用OC方法将图片绘制到layer上 // 图片拉伸 // [img drawInRect:CGRectMake(0, 0, 50, 50)]; // 图片保持原有尺寸 // [img drawAtPoint:CGPointMake(100, 100)]; // 图片保持原有尺寸平铺 [img drawAsPatternInRect:CGRectMake(0, 0, 300, 300)]; }
方法2:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGImageRef image = [UIImage imageNamed:@"001"].CGImage; CGRect imageRect; imageRect.origin = CGPointMake(120, 120); imageRect.size = CGSizeMake(150, 150); // 这样图片是倒着的，因为坐标系不一样 // CGContextDrawImage(context, imageRect, image); // image以imageRect.size平铺整个context（依旧为道者） CGContextDrawTiledImage(context, imageRect, image); }
这样去解决图片倒着的问题 // CGContextSaveGState(context); // CGContextTranslateCTM(context,0, 180.0f); // CGContextScaleCTM(context, 1.0, -1.0); // CGContextDrawImage(context, imageRect, image); // CGContextRestoreGState(context);
七、绘制四边形
- (void)drawRect:(CGRect)rect { // 绘制四边形 // 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.绘制四边形 CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100)); // 如果要设置绘图的状态必须在渲染之前 // CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0); // 绘制什么类型的图形(空心或者实心).就要通过什么类型的方法设置状态 // CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0); // 调用OC的方法设置绘图的颜色 // [[UIColor purpleColor] setFill]; // [[UIColor blueColor] setStroke]; // 调用OC的方法设置绘图颜色(同时设置了实心和空心) // [[UIColor greenColor] set]; [[UIColor colorWithRed:1.0 green:0 blue:0 alpha:1.0] set]; // 3.渲染图形到layer上 CGContextStrokePath(ctx); // CGContextFillPath(ctx); }
方法二：
CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextStrokeRect(ctx, CGRectMake(20, 20, 100, 100));
八、画虚线
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextAddRect(ctx, CGRectMake(20, 20, 100, 100)); CGFloat f[] = {10.0, 10.0, 2.0}; // 1.上下文 // 2.虚线在绘制的时候跳过多少个points // 3.是一个CGFloat数组 如：{10，10}表示的是先绘制10 points，然后跳过10 points，然后重复 // 4.一般写数组的长度（使用数组中多少个元素） CGContextSetLineDash(ctx, 10, f, 3); //{{10.0, 20.0, 10.0}, 3} //注：奇数个的例子，就是先绘制10 points， 接着跳过20 points，再绘制10points，接着跳过10 points，再绘制20points，在跳过10 points，然后接着重复。 CGContextStrokePath(ctx); }
九、画多边形
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); // Drawing with a white stroke color CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); // Drawing with a blue fill color CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0); // Draw them with a 2.0 stroke width so they are a bit more visible. CGContextSetLineWidth(context, 2.0); CGPoint center; // Add a star to the current path center = CGPointMake(90.0, 90.0); CGContextMoveToPoint(context, center.x, center.y + 60.0); for(int i = 1; i < 5; ++i) { CGFloat x = 60.0 * sinf(i * 4.0 * M_PI / 5.0); CGFloat y = 60.0 * cosf(i * 4.0 * M_PI / 5.0); NSLog(@"%f, %f",center.x + x,center.y + y); CGContextAddLineToPoint(context, center.x + x, center.y + y); } // And close the subpath. CGContextClosePath(context); // Now add the hexagon to the current path center = CGPointMake(210.0, 90.0); CGContextMoveToPoint(context, center.x, center.y + 60.0); for(int i = 1; i < 6; ++i) { CGFloat x = 60.0 * sinf(i * 2.0 * M_PI / 6.0); CGFloat y = 60.0 * cosf(i * 2.0 * M_PI / 6.0); NSLog(@"%d %f, %f",i,x,y); CGContextAddLineToPoint(context, center.x + x, center.y + y); } // And close the subpath. CGContextClosePath(context); // Now draw the star & hexagon with the current drawing mode. CGContextDrawPath(context, kCGPathEOFillStroke);
第二个参数作用： 大概可以这样理解，实际看上去，有些复杂？？看这里 // kCGPathFill, 渲染所有内容，不包含线条 // kCGPathEOFill, 奇偶渲染，不包含线条 // kCGPathStroke, 只渲染线条 // kCGPathFillStroke, 渲染线条，渲染内容 // kCGPathEOFillStroke 奇偶渲染，渲染线条，渲染内容 }
十、画圆角矩形
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); CGRect rrect = CGRectMake(210.0, 90.0, 60.0, 60.0); CGFloat radius = 15.0; CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect); CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect); // 下面代码的绘制路线如下所示了： // minx midx maxx // miny 2 3 4 // midy 1 9 5 // maxy 8 7 6 // 本例中开始点和结束点一样只是一个巧合，所以，我们在最后最好要加上CGContextClosePath // Start at 1 CGContextMoveToPoint(context, minx, midy); // Add an arc through 2 to 3 CGContextAddArcToPoint(context, minx, miny, midx, miny, radius); // Add an arc through 4 to 5 CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius); // Add an arc through 6 to 7 CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius); // Add an arc through 8 to 9 CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius); // Close the path CGContextClosePath(context); // Fill & stroke the path CGContextDrawPath(context, kCGPathFillStroke); }
2347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
