这是一个非常简单的画笔程序,没有用到任何复杂的框架,完全用基础框架完成。如果需要使用,直接拷贝工程中的画布类到自己的项目里就可以用。请先下载本教程的Xcode工程。
PaintPenAPI.zip |
下面说一下调用画笔工具的逻辑:
1.实例化PaintMaskViewController的一个对象;
2.用addSubview将该对象的view添加到程序当前的view上。(一定要保证画布的view在最前面)
由于画布的view是透明的,所以画布不会挡住后面的任何view。
3.在该画布上使用各种手势。例如:在屏幕上滑动手指,可以画线。双击屏幕可以重设画布。
实现此画笔工具的逻辑:
1.实例化PaintMaskViewController的时候,创建一个UIImageView对象,添加到该画布的对象里。此时的UIImageView是空的。
2.实现系统的三个手势函数,捕捉用户的操作:- (void)touchesBegan,- (void)touchesMoved,- (void)touchesEnded
3.利用CGContext相关函数进行绘图;
4.将绘制好的图像赋予一开始创建的UIImageView对象。具体来看看代码:
1.
- (void)initialize {
self.view.frame = CGRectMake(0, 50, 320, 430);
self.drawImage = [[UIImageView alloc] initWithImage:nil];
drawImage.frame = self.view.frame;
[self.view addSubview:self.drawImage];
[drawImage release];
mouseMoved = 0;
}
初始化的时候,设置drawImage的Frame大小。在这里可以设置成自己需要的大小。用在iPad上的话可以将画布设置得更大。
甚至可以用[[UIDevice currentDevice] model]来获取用户的设备信息,进行相应的设置。
2.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
mouseSwiped = YES;
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self.view];
currentPoint.y -= 40;
UIGraphicsBeginImageContext(self.view.frame.size);
[drawImage.image drawInRect:CGRectMake(0, 0, drawImage.frame.size.width, drawImage.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 1.0, 0.0, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;
mouseMoved++;
if (mouseMoved == 10) {
mouseMoved = 0;
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
//Double click to clean the canvas
UITouch *touch = [touches anyObject];
if ([touch tapCount] == 2) {
drawImage.image = nil;
return;
}
if(!mouseSwiped) {
//if color == green
UIGraphicsBeginImageContext(self.view.frame.size);
[drawImage.image drawInRect:CGRectMake(0, 0, drawImage.frame.size.width, drawImage.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 10.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 1.0, 0.0, 1.0);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
CGContextFlush(UIGraphicsGetCurrentContext());
drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
}
在这三个手势函数中,实现绘画功能。当用户手指触碰屏幕时,用touchesBegan捕捉当前坐标并赋给lastPoint,当用户开始滑动手指时,系统不断调用touchesMoved函数,每次调用都捕捉当前手指坐标,利用CGContextMoveToPoint和CGContextAddLineToPoint进行绘画,然后将lastPoint坐标更新。在这里可以设置画笔的各种参数,例如颜色,形状以及粗细等等。
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 1.0, 0.0, 1.0);
最后利用UIGraphicsGetImageFromCurrentImageContext()将绘画好的图片赋予drawImage。另外,以下这段代码可以用来清除画布。若检测到用户双击画布,则清除画布。
if ([touch tapCount] == 2) {
drawImage.image = nil;
return;
}
以上就是实现一个简单画笔工具的全部逻辑。读者可以根据自己的需要,添加更多更丰富的功能,例如添加各种颜色的画笔,添加橡皮擦工具等等。