1.效果图
Untitled3.gif
2.代码展示
- 创建header file
/*
该方法负责绘制圆角矩形
x1,y2: 圆角矩形左上角的坐标
width , height :控制圆角矩形宽高
radius 控制圆角矩形的四个圆角的半径
*/
//void CGContextAssRoundRect(CGContextRef c, CGFloat x1, CGFloat y1, CGFloat width, CGFloat height, CGFloat radius)
//{
// //移动到左上角
// CGContextMoveToPoint(c, x1 + radius, y1);
// //添加一条连接到右上角的线段
// CGContextAddLineToPoint(c, x1 + width - radius, y1);
// //添加一段圆弧
// CGContextAddArcToPoint(c, x1 + width, y1, x1 + width, y1 + radius, radius);
// //添加一条连接到右下角的线段
// CGContextAddLineToPoint(c, x1 + width, y1 + height - radius);
//
//}
void CGContextAddRoundRect(CGContextRef c, CGFloat x1 , CGFloat y1, CGFloat width , CGFloat height , CGFloat radius)
{
// 移动到左上角
CGContextMoveToPoint (c, x1 + radius , y1);
// 添加一条连接到右上角的线段
CGContextAddLineToPoint(c , x1 + width - radius, y1);
// 添加一段圆弧
CGContextAddArcToPoint(c , x1 + width , y1, x1 + width
, y1 + radius, radius);
// 添加一条连接到右下角的线段
CGContextAddLineToPoint(c , x1 + width, y1 + height - radius);
// 添加一段圆弧
CGContextAddArcToPoint(c , x1 + width, y1 + height
, x1 + width - radius , y1 + height , radius);
// 添加一条连接到左下角的线段
CGContextAddLineToPoint(c , x1 + radius, y1 + height);
// 添加一段圆弧
CGContextAddArcToPoint(c , x1, y1 + height , x1
, y1 + height - radius , radius);
// 添加一条连接到左上角的线段
CGContextAddLineToPoint(c , x1 , y1 + radius);
// 添加一段圆弧
CGContextAddArcToPoint(c , x1 , y1 , x1 + radius , y1 , radius);
}
void CGContextAddStar(CGContextRef c , NSInteger n, CGFloat dx , CGFloat dy , NSInteger size)
{
CGFloat dig = 4 * M_PI / n ;
// 移动到指定点
CGContextMoveToPoint(c , dx , dy + size);
for(int i = 1 ; i <= n ; i++)
{
CGFloat x = sin(i * dig);
CGFloat y = cos(i * dig);
// 绘制从当前点连接到指定点的线条
CGContextAddLineToPoint(c , x * size + dx ,y * size + dy);
}
}
2.再创建一个header file
//枚举类型
typedef enum
{
klineShape = 0,
krectShape,
kEillpseShape,
kRoundRectShape,
kPenShape
}ShapeType;
3.继承uiview
@property (nonatomic, strong) UIColor* currentColor;
@property (nonatomic, assign) ShapeType shape;
CGPoint firstTouch, prevTouch, lastTouch;
// 定义向内存中图片执行绘图的CGContextRef
CGContextRef buffCtx;
UIImage* image;
- (id)initWithCoder:(NSCoder*)aCoder
{
self = [super initWithCoder:aCoder];
if (self) {
// 初始化时将当前颜色设为红色
self.currentColor = [UIColor redColor];
// 创建内存中的图片
UIGraphicsBeginImageContext(self.bounds.size);
// 获取向内存中图片执行绘图的CGContextRef
buffCtx = UIGraphicsGetCurrentContext();
}
return self;
}
// 当用户手指开始触碰时激发该方法
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
// 获取触碰点坐标
firstTouch = [touch locationInView:self];
// 如果当前正在进行自由绘制，prevTouch代表第一个触碰点
if (self.shape == kPenShape)
{
prevTouch = firstTouch;
}
}
// 当用户手指在控件上拖动时不断地激发该方法
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
// 获取触碰点坐标
lastTouch = [touch locationInView:self];
// 如果当前正在进行自由绘制
if (self.shape == kPenShape)
{
// 向内存中的图片执行绘制
[self draw:buffCtx];
// 取出内存中的图片，保存到image中
image = UIGraphicsGetImageFromCurrentImageContext();
}
// 通知该控件重绘，此时会实时地绘制起始点与用户手指拖动点之间的形状
[self setNeedsDisplay];
}
// 当用户手指离开控件时激发该方法
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
// 获取离开触碰的点坐标
lastTouch = [touch locationInView:self];
// 向内存中的图片执行绘制，即把最终确定图形绘制到内存中图片上
[self draw:buffCtx];
image = UIGraphicsGetImageFromCurrentImageContext();
// 通知重绘。
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
// 获取绘图上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 将内存中的图片绘制出来
[image drawAtPoint:CGPointZero];
// 调用draw:方法执行绘制
[self draw:ctx];
}
// 定义一个函数，用于根据firstTouch、lastTouch来确定矩形区域
- (CGRect) curRect
{
return CGRectMake(firstTouch.x, firstTouch.y,
lastTouch.x - firstTouch.x ,
lastTouch.y - firstTouch.y);
}
- (void)draw:(CGContextRef)ctx
{
// 设置线条颜色
CGContextSetStrokeColorWithColor(ctx, self.currentColor.CGColor);
// 设置填充颜色
CGContextSetFillColorWithColor(ctx, self.currentColor.CGColor);
// 设置线宽
CGContextSetLineWidth(ctx, 2.0);
CGContextSetShouldAntialias(ctx, YES);
switch (self.shape) {
CGFloat leftTopX , leftTopY;
case klineShape:
// 添加从firstTouch到lastTouch的路径
CGContextMoveToPoint(ctx, firstTouch.x, firstTouch.y);
CGContextAddLineToPoint(ctx, lastTouch.x, lastTouch.y);
// 绘制路径
CGContextStrokePath(ctx);
break;
case krectShape:
// 填充矩形
CGContextFillRect(ctx ,[self curRect]);
break;
case kEillpseShape:
// 填充椭圆
CGContextFillEllipseInRect(ctx ,[self curRect]);
break;
case kRoundRectShape:
// 计算左上角的坐标
leftTopX = firstTouch.x < lastTouch.x ? firstTouch.x :
lastTouch.x;
leftTopY = firstTouch.y < lastTouch.y ? firstTouch.y :
lastTouch.y;
// 添加圆角矩形的路径
CGContextAddRoundRect(ctx ,leftTopX ,leftTopY ,
fabs(lastTouch.x - firstTouch.x) ,
fabs(lastTouch.y - firstTouch.y) , 16);
// 填充路径
CGContextFillPath(ctx);
break;
case kPenShape:
// 添加从prevTouch到lastTouch的路径
CGContextMoveToPoint(ctx, prevTouch.x, prevTouch.y);
CGContextAddLineToPoint(ctx, lastTouch.x, lastTouch.y);
// 绘制路径
CGContextStrokePath(ctx);
// 使用prevTouch保存当前点
prevTouch = lastTouch;
break;
}
}
@interface ViewController ()
{
NSArray *colors;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
colors = [NSArray arrayWithObjects:
[UIColor redColor],[UIColor greenColor],
[UIColor blueColor],[UIColor yellowColor],
[UIColor purpleColor],[UIColor cyanColor],
[UIColor blackColor] , nil];
// Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)changeColor:(UISegmentedControl *)sender {
// 根据用户的选择来修改FKDrawView的当前颜色
((GSCDrawView*)self.view).currentColor = [colors objectAtIndex:sender.selectedSegmentIndex];
}
- (IBAction)changeShape:(UISegmentedControl *)sender {
// 修改FKDrawView控件的shape属性
((GSCDrawView*)self.view).shape = sender.selectedSegmentIndex;
}
