iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)
1.画三角形 运行结果如下
1.1具体实现步骤
1.1.1首先新建一个project,然后自定义一个view
1.2代码
- #import "htingShapeView.h"
- @implementation htingShapeView
- - (id)initWithFrame:(CGRect)frame
- {
- self = [super initWithFrame:frame];
- if (self) {
- // Initialization code
- }
- return self;
- }
- - (void)drawRect:(CGRect)rect
- {
- // draw4Rect();
- drawTriangle();
- }
- /**
- * 画四边形
- */
- void draw4Rect()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画矩形
- CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
- // set : 同时设置为实心和空心颜色
- // setStroke : 设置空心颜色
- // setFill : 设置实心颜色
- [[UIColor whiteColor] set];
- // CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
- // 3.绘制图形
- CGContextFillPath(ctx);
- }
- /**
- * 画三角形
- */
- void drawTriangle()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画三角形
- CGContextMoveToPoint(ctx, 0, 0);
- CGContextAddLineToPoint(ctx, 100, 100);
- CGContextAddLineToPoint(ctx, 150, 80);
- // 关闭路径(连接起点和最后一个点)起点和终点连起来
- CGContextClosePath(ctx);
- //
- CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);
- // 3.绘制图形
- CGContextStrokePath(ctx);
- }
- @end
2.画矩形运行效果如下
2.1具体实现步骤
2.1.1搭建界面同上
2.1.2代码
- #import "htingShapeView.h"
- @implementation htingShapeView
- - (id)initWithFrame:(CGRect)frame
- {
- self = [super initWithFrame:frame];
- if (self) {
- // Initialization code
- }
- return self;
- }
- - (void)drawRect:(CGRect)rect
- {
- draw4Rect();
- // drawTriangle();
- }
- /**
- * 画四边形
- */
- void draw4Rect()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画矩形
- CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
- // set : 同时设置为实心和空心颜色
- // setStroke : 设置空心颜色
- // setFill : 设置实心颜色
- [[UIColor whiteColor] set];
- // CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
- // 3.绘制图形
- CGContextFillPath(ctx);
- }
- /**
- * 画三角形
- */
- void drawTriangle()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画三角形
- CGContextMoveToPoint(ctx, 0, 0);
- CGContextAddLineToPoint(ctx, 100, 100);
- CGContextAddLineToPoint(ctx, 150, 80);
- // 关闭路径(连接起点和最后一个点)起点和终点连起来
- CGContextClosePath(ctx);
- //
- CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);
- // 3.绘制图形
- CGContextStrokePath(ctx);
- }
- @end
3.画圆 圆弧 等 运行效果如下
3.1代码实现
- #import "htingCircleView.h"
- @implementation htingCircleView
- - (id)initWithFrame:(CGRect)frame
- {
- self = [super initWithFrame:frame];
- if (self) {
- // Initialization code
- }
- return self;
- }
- /**
- * 在view第一次显示到屏幕上的时候会调用一次
- */
- - (void)drawRect:(CGRect)rect
- {
- // drawCircle2();
- drawCircle();
- }
- void drawCircle2()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画1/4圆
- CGContextMoveToPoint(ctx, 100, 100);
- CGContextAddLineToPoint(ctx, 100, 150);
- CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
- CGContextClosePath(ctx); //合并路径 把起点和终点连起来
- [[UIColor redColor] set];//设置颜色 红色
- // 3.显示所绘制的东西 FillPath实心
- CGContextFillPath(ctx);
- }
- /**
- * 画圆弧
- */
- void drawArc()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画圆弧
- // x\y : 圆心
- // radius : 半径
- // startAngle : 开始角度
- // endAngle : 结束角度
- // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
- // CGContextAddArc(<#CGContextRef c#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat radius#>, <#CGFloat startAngle#>, <#CGFloat endAngle#>, <#int clockwise#>)
- CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
- // CGContextAddArc(ctx, 100(圆心x), 100(圆心y), 50, M_PI_2, M_PI, 0);
- // 3.显示所绘制的东西
- CGContextFillPath(ctx); //把绘制的路径用空心显示出来
- //CGContextStrokePath(ctx);画实心
- }
- /**
- * 画圆
- */
- void drawCircle()
- {
- // 1.获得上下文
- CGContextRef ctx = UIGraphicsGetCurrentContext();
- // 2.画圆
- CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));//(50, 10,是坐标也就是这个圆的位置 100, 100表示宽高都是100
- CGContextSetLineWidth(ctx, 10); //设置线宽画圆环
- // 3.显示所绘制的东西
- CGContextStrokePath(ctx);
- }
- @end