Quartz 2D--长方形和线条绘图

今天原本想模仿2048 游戏的。但是在设计背景环境时，涉及到绘图的知识！于是就开始对绘图进行了一翻学习。

若想自己绘图必须写自己的View（继承UICView）；然后重写UIView 中的 drawRect:rect 方法

-(void)drawRect:(CGRent)rect{

//1 硬编码获取当前视图上下文，（很重要，在绘图时都是依据上下文来进行的）

CGContextRef context=UIGraphicsGetCurrentContext();

//2、绘制长方形，并且带背景颜色

CGContextSetFillColorWithColor(context,[UIColor colorWithRed:0.1 green:0.3 blue:0.8 alpha:1].CGColor);//这里red,blue, green,alpha 值必须在0~1 之间,这里是c 函数，因此参数也需要C函数里面值，因此这里不能用UIColor 对象，而是里面的属性CGColor。

//2.1 执行填充操作, 到这里长方形绘制完成

CGContextFillRect(context,CGRectMake(0,0,320,320));//后面指定的

//3.1 开始画线条

CGContextSetLineWidth(context,4.0);//设置画刷粗细为4个像素

CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);//设置画笔颜色

CGContextMoveToPoint(context,0.0f,0.0f);//可以设想将画笔移到起点位子（线条的起点位子）

CGContextAddLineToPoint(context,10.0f,10.0f);//两点成一线，

CGContext AddLineToPoint(context,20.0f,10.0f);// 类似队列任意添加点集合

//一切准备好后开始绘图

CGContextStrokePath(context);//执行完成后会出现一跳红色折线

}

---下面是绘制带圆角长方形

- (void)drawRect:(CGRect)rect {

CGFloat width = rect.size.width;

CGFloat height = rect.size.height; // 简便起见，这里把圆角半径设置为长和宽平均值的1/10

CGFloat radius = (width + height) * 0.05; // 获取CGContext，注意UIKit里用的是一个专门的函数 CGContextRef context = UIGraphicsGetCurrentContext(); // 移动到初始点

CGContextMoveToPoint(context, radius, 0); // 绘制第1条线和第1个1/4圆弧

CGContextAddLineToPoint(context, width - radius, 0);

CGContextAddArc(context, width - radius, radius, radius, -0.5 * M_PI, 0.0, 0); // 绘制第2条线和第2个1/4圆弧 CGContextAddLineToPoint(context, width, height - radius);

CGContextAddArc(context, width - radius, height - radius, radius, 0.0, 0.5 * M_PI, 0); // 绘制第3条线和第3个1/4圆弧

CGContextAddLineToPoint(context, radius, height);

CGContextAddArc(context, radius, height - radius, radius, 0.5 * M_PI, M_PI, 0); // 绘制第4条线和第4个1/4圆弧 CGContextAddLineToPoint(context, 0, radius);

CGContextAddArc(context, radius, radius, radius, M_PI, 1.5 * M_PI, 0); // 闭合路径 CGContextClosePath(context); // 填充半透明黑色

CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 0.5);

CGContextDrawPath(context, kCGPathFill);

}

巴特西

Quartz 2D--长方形和线条绘图

最新文章

热门文章