- (void)drawRect:(CGRect)rect
{
[self drawRooftopAtTopPointof:CGPointMake(160.0f, 40.0f) textToDisplay:@"Miter"
lineJoin:kCGLineJoinMiter];
[self drawRooftopAtTopPointof:CGPointMake(160.0f, 180.0f) textToDisplay:@"Bevel"
lineJoin:kCGLineJoinBevel];
[self drawRooftopAtTopPointof:CGPointMake(160.0f, 320.0f) textToDisplay:@"Round"
lineJoin:kCGLineJoinRound];
}
- (void) drawRooftopAtTopPointof:(CGPoint)paramTopPoint textToDisplay:(NSString*)paramText lineJoin:(CGLineJoin)paramLineJoin{
// 设置颜色
[[UIColor brownColor] set];
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 设置接合点,点的类型
CGContextSetLineJoin(currentContext, paramLineJoin);
// 设置线的宽度
CGContextSetLineWidth(currentContext,20.0f);
// 移动开始坐标
CGContextMoveToPoint(currentContext, paramTopPoint.x - 140, paramTopPoint.y +100);
// 指定路径至指定的坐标
CGContextAddLineToPoint(currentContext,paramTopPoint.x, paramTopPoint.y);
// 指定路径至指定的坐标
CGContextAddLineToPoint(currentContext,paramTopPoint.x + 140, paramTopPoint.y +100);
// 画线
CGContextStrokePath(currentContext);
}
2.使用CGMutablePathRef画线
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
CGRect screenBounds = [[UIScreen mainScreen] bounds];
// 指定坐标
CGPathMoveToPoint(path, NULL, screenBounds.origin.x,screenBounds.origin.y);
// 指定路径至指定的坐标
CGPathAddLineToPoint(path,NULL, screenBounds.size.width, screenBounds.size.height);
// 指定坐标
CGPathMoveToPoint(path,NULL,screenBounds.size.width, screenBounds.origin.y);
// 指定路径至指定的坐标
CGPathAddLineToPoint(path,NULL, screenBounds.origin.x, screenBounds.size.height);
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 添加路径到绘画上下文
CGContextAddPath(currentContext,path);
// 指定绘画颜色
[[UIColor blueColor] setStroke];
// 绘画
CGContextDrawPath(currentContext, kCGPathStroke);
// 释放路径
CGPathRelease(path);
3.画矩形-CGPathAddRect
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 设置长方形的边框
CGRect rectangle = CGRectMake(10.0f,10.0f, 200.0f, 300.0f);
// 将长方形的边框,添加到路径
CGPathAddRect(path,NULL,rectangle);
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 添加路径到绘画上下文
CGContextAddPath(currentContext, path);
// 设置填充颜色
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
// 设置绘画颜色
[[UIColor brownColor] setStroke];
// 设置绘画宽度
CGContextSetLineWidth(currentContext,5.0f);
// 绘画
CGContextDrawPath(currentContext, kCGPathFillStroke);
// 释放路径
CGPathRelease(path);
4.画多个长方形-CGPathAddRects
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 画多个长方形时,将数组传入该方法
CGRect rectangle1 = CGRectMake(10.0f,10.0f, 200.0f, 300.0f);
CGRect rectangle2 = CGRectMake(40.0f,100.0f, 90.0f,300.0f);
CGRect rectangles[2] = {rectangle1, rectangle2 };
// 画多个长方形时,将数组传入该方法
CGPathAddRects(path, NULL,(const CGRect *)&rectangles, 2);
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 添加路径到绘画上下文
CGContextAddPath(currentContext, path);
// 设置填充颜色
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
// 设置绘画颜色
[[UIColor brownColor] setStroke];
// 设置绘画宽度
CGContextSetLineWidth(currentContext,5.0f);
// 绘画
CGContextDrawPath(currentContext, kCGPathFillStroke);
// 释放路径
CGPathRelease(path);
5.为长方形设置阴影效果
- (void) drawRectAtTopOfScreen{
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 绘画前,保存绘画上下文状态
CGContextSaveGState(currentContext);
// 设置阴影
CGContextSetShadowWithColor(currentContext,CGSizeMake(10.0f, 10.0f), 30.0f,[[UIColor grayColor] CGColor]);
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 矩形边框
CGRect firstRect = CGRectMake(55.0f, 60.0f,150.0f, 150.0f);
// 将矩形加入到路径
CGPathAddRect(path,NULL, firstRect);
// 添加路径到绘画上下文
CGContextAddPath(currentContext, path);
// 设置填充颜色
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
// 绘画
CGContextDrawPath(currentContext, kCGPathFill);
// 释放路径
CGPathRelease(path);
// 恢复我们保存的绘画状态
CGContextRestoreGState(currentContext);
}
解释:
CGContextSetShadowWithColor 方法:
参数分别为:绘画上下文,偏移量(右,下),模糊度(值越大越模糊),阴影颜色。
在这里,有一个很有趣的现象,就是,我们绘制后,我们用于绘图的状态,会被保存下来。当我们。这时候,我们需要使用CGContextSaveGState方法,先将我们绘画时的状态保存下来。然后,我们在绘画中可以设置颜色、阴影等参数。等我们使用完成,我们用CGContextRestoreGState方法来恢复我们保存的绘画状态。
也就是上面代码标红的地方!!!
6.绘制轴形渐变颜色
直接贴代码:
- (void)drawRect:(CGRect)rect
{
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 绘画前,保存绘画上下文状态
CGContextSaveGState(currentContext);
// 获取一个设备相关的颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// 定义开始颜色
UIColor *startColor = [UIColor orangeColor];
// 获得颜色成分
CGFloat *startColorComponents =(CGFloat *)CGColorGetComponents([startColor CGColor]);
UIColor *endColor = [UIColor blueColor];
CGFloat *endColorComponents =(CGFloat *)CGColorGetComponents([endColor CGColor]);
CGFloat colorComponents[8] = {
startColorComponents[0],
startColorComponents[1],
startColorComponents[2],
startColorComponents[3],
endColorComponents[0],
endColorComponents[1],
endColorComponents[2],
endColorComponents[3],
};
CGFloat colorIndices[2] = {0.0f, 1.0f};
// 创建一个渐变
CGGradientRef gradient = CGGradientCreateWithColorComponents (colorSpace,(const CGFloat*)&colorComponents, (const CGFloat *)&colorIndices,2);
// 释放颜色空间(使retain减1)
CGColorSpaceRelease(colorSpace);
CGPoint startPoint, endPoint;
startPoint = CGPointMake(120,260);
endPoint = CGPointMake(200.0f, 260);
// 绘制指定的渐变填充
// CGContextDrawLinearGradient (currentContext, gradient,startPoint,endPoint, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
CGContextDrawLinearGradient (currentContext, gradient,startPoint,endPoint,0);
CGGradientRelease(gradient);
CGContextRestoreGState(currentContext);
}
解释:
CGGradientCreateWithColorComponents 方法
创建一个渐变,根据提供的颜色成分
CGGradientRef CGGradientCreateWithColorComponents(
CGColorSpaceRef space,
const CGFloat components[],
const CGFloat locations[],
size_t count
);
space:颜色空间对象
components:定义渐变(gradient)的每一种颜色的颜色成分。一般包括R,G,B,和透明度;如果为RGB颜色空间,那么只包括R,G,B,而没有透明度。
如果,我们使用的颜色空间是一个RGBA颜色空间,并且我们想使用2种颜色的渐变(一个颜色用于开始位置,一个用于结束位置)。那么,我们需要提供8个颜色成分。分别为开始位置的RGBA,和结束位置的RGBA。
locations:每一种颜色颜色成分的位置。位置的范围为0-1之间。
count:提供的位置数量。
CGColorSpaceGetNumberOfComponents 方法
得到指定的颜色空间中所包含的颜色成分的数量
size_t CGColorSpaceGetNumberOfComponents(CGColorSpaceRef cs);
cs:被检测的颜色空间对象
CGColorSpaceRelease 方法
释放指定的颜色空间,也就是将指定的颜色空间的retain减1,使用该方法,不会报错,即使指定的颜色空间为NULL。
void CGColorSpaceRelease(CGColorSpaceRef cs);
cs:要释放的颜色空间
CGContextDrawLinearGradient 方法
void CGContextDrawLinearGradient(
CGContextRef context,
CGGradientRef gradient,
CGPoint startPoint,
CGPoint endPoint,
CGGradientDrawingOptions options
);
context:绘画上下文
gradient:指定的渐变对象
startPoint:设置绘制渐变的开始坐标
endPoint:设置绘制渐变的结束坐标
options:一个表示,指示是否绘制渐变的范围超出开始坐标,结束坐标;如果传入0,那么绘制将不会超出范围。
7.利用CGAffineTransform放射变换矩阵来画一个简单的矩形
- (void)drawRect:(CGRect)rect
{
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 定义要绘制的矩形边框
CGRect rectangle = CGRectMake(0.0f,0.0f,200.0f, 300.0f);
// 创建一个变换矩阵,分别代表向x,y轴的偏移量
CGAffineTransform transform = CGAffineTransformMakeTranslation(100.0f, 100.0f);
// 将矩形加入到路径
CGPathAddRect(path,&transform, rectangle);
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 绘画前,保存绘画上下文状态
CGContextSaveGState(currentContext);
// 添加路径到绘画上下文
CGContextAddPath(currentContext,path);
// 设置填充颜色
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
// 指定绘画颜色
[[UIColor brownColor] setStroke];
// 设置线的宽度
CGContextSetLineWidth(currentContext,5.0f);
// 绘画
CGContextDrawPath(currentContext,kCGPathFillStroke);
// 释放路径
CGPathRelease(path);
// 恢复我们保存的绘画状态
CGContextRestoreGState(currentContext);
// 释放绘画上下文
CGContextRelease(currentContext);
}
8.利用CGContextTranslateCTM来指定变化位移来画一个简单的矩形
这个方法跟 7 达到的效果是一样的。只不过区别在于:
CGPathAddRect方法是直接在路径上的形状应用变换。
CGAffineTransform transform = CGAffineTransformMakeTranslation(100.0f, 100.0f);
CGPathAddRect(path,&transform, rectangle);
CGContextTranslateCTM方法是,在绘画上下文中应用坐标的变换。
CGContextTranslateCTM(currentContext, 100.0f,200.0f);
贴:
- (void)drawRect:(CGRect)rect
{
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 定义要绘制的矩形边框
CGRect rectangle = CGRectMake(10.0f,10.0f, 200.0f, 300.0f);
// 将矩形加入到路径
CGPathAddRect(path,NULL, rectangle);
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 绘画前,保存绘画上下文状态
CGContextSaveGState(currentContext);
// 在指定的绘画上下文中改变原始坐标系统
CGContextTranslateCTM(currentContext, 100.0f,200.0f);
// 添加路径到绘画上下文
CGContextAddPath(currentContext, path);
// 设置填充颜色
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
// 指定绘画颜色
[[UIColor brownColor] setStroke];
// 设置线的宽度
CGContextSetLineWidth(currentContext,5.0f);
// 绘画
CGContextDrawPath(currentContext, kCGPathFillStroke);
// 释放路径
CGPathRelease(path);
// 恢复我们保存的绘画状态
CGContextRestoreGState(currentContext);
// 释放绘画上下文
CGContextRelease(currentContext);
}
CGContextTranslateCTM 方法
void CGContextTranslateCTM (CGContextRef c,CGFloat tx,CGFloat ty);
在指定的绘画上下文中改变原始坐标轴
c:绘画上下文
tx:x轴偏移量
ty:y轴偏移量
9.利用CGAffineTransformMakeScale放射变换矩阵来进行缩放
- (void)drawRect:(CGRect)rect
{
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 定义要绘制的矩形边框
CGRect rectangle = CGRectMake(0.0f,0.0f,200.0f, 300.0f);
// 返回一个放射变换,根据指定的缩放值
CGAffineTransform transform =CGAffineTransformMakeScale(0.5f, 0.5f);
// 将矩形加入到路径
CGPathAddRect(path,&transform, rectangle);
// 得到当前绘画上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
// 绘画前,保存绘画上下文状态
CGContextSaveGState(currentContext);
// 添加路径到绘画上下文
CGContextAddPath(currentContext,path);
// 设置填充颜色
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
// 指定绘画颜色
[[UIColor brownColor] setStroke];
// 设置线的宽度
CGContextSetLineWidth(currentContext,5.0f);
// 绘画
CGContextDrawPath(currentContext,kCGPathFillStroke);
// 释放路径
CGPathRelease(path);
// 恢复我们保存的绘画状态
CGContextRestoreGState(currentContext);
// 释放绘画上下文
CGContextRelease(currentContext);
}
解释:
CGAffineTransformMakeScale 方法
返回一个放射变换,根据指定的缩放值
sx:x轴的缩放值
sy:y轴的缩放值
10.利用CGAffineTransformMakeRotation放射变换矩阵来进行旋转
// 返回一个旋转的放射变换,根据指定的弧度值
CGAffineTransform transform = CGAffineTransformMakeRotation((45.0f * M_PI) / 180.0f);
11.利用CGContextRotateCTM放射变换矩阵来进行旋转
// 在绘画上下文中指定旋转
CGContextRotateCTM(currentContext, (45.0f * M_PI) / 180.0f);
CGContextRotateCTM(currentContext, (45.0f * M_PI) / 180.0f);
好像明白了一些!
有两类变换:
1.CGContentXXXCTM:是针对当前绘画上下文的。这样的话,整个绘画上下文都会相应的变换。
2.CGAffineTransformMakeXXXX:是针对当前绘画路劲的。这样的话,只是指定的路劲会相应变换。
纯小白级别的mark!
希望对你有所帮助!