1.通过添加一个objective-c class,并选择super为 UIView.不同于interface中的view和storyboard.
2.把view controller连接(IBOutlet)到新添加的view。
3.在model中drawRect方法中开始画一个笑脸。
画之前创建了一个画圆的通用方法:
102849512aa0f6870b67df24e00e9fc5692559a1e
1028495908b657cd858429423a4ab151c8ec36bca

-(void) drawCircleAtPoint:(CGPoint) p withRadius:(CGFloat) radius inContext:(CGContextRef) context { //注意对称封闭 push和pop UIGraphicsPushContext(context); CGContextBeginPath(context); CGContextAddArc(context, p.x, p.y, radius, 0, 2*M_PI, YES); CGContextStrokePath(context); UIGraphicsPopContext(); }
然后开始画笑脸

- (void)drawRect:(CGRect)rect { // Drawing code CGContextRef content =UIGraphicsGetCurrentContext(); //画图都是从这行开始 //draw face (1 circle) CGPoint midPoint; midPoint.x=self.bounds.origin.x + self.bounds.size.width/2; //屏幕最中心点,因为这里的self.bounds.origin位于(0,0). midPoint.y=self.bounds.origin.y + self.bounds.size.height/2; CGFloat size=self.bounds.size.width/2; if(self.bounds.size.height<self.bounds.size.width) size=self.bounds.size.height/2; //根据横竖屏情况取最小半径。 size *= self.scale; //由getter决定缩放比例 CGContextSetLineWidth(content, 5.0); [[UIColor blueColor] setStroke ]; [self drawCircleAtPoint:midPoint withRadius:size inContext:content]; //eyes (2 circle) #define EYE_H 0.35 #define EYE_V 0.35 #define EYE_RADIUS 0.15 CGPoint eyePoint; eyePoint.x=midPoint.x-size*EYE_H; //左眼中心从face中心向左和向上移动。 eyePoint.y=midPoint.y-size*EYE_V; [[UIColor blackColor] setStroke ]; [self drawCircleAtPoint:eyePoint withRadius:size*EYE_RADIUS inContext:content]; eyePoint.x += size*EYE_H*2; //右眼中心 从左眼位置向右移动到对称位置。 [self drawCircleAtPoint:eyePoint withRadius:size*EYE_RADIUS inContext:content]; //no nose //mouth #define MOUTH_H 0.45 #define MOUTH_V 0.40 #define MOUTH_SMILE 0.25 CGPoint mouthStart; mouthStart.x=midPoint.x- size *MOUTH_H;//左边嘴角位置 mouthStart.y=midPoint.y+ size *MOUTH_V; CGPoint mouthEnd=mouthStart; mouthEnd.x +=size *MOUTH_H *2; //右边嘴角移动到左边嘴角的对称位置 CGPoint mouthCP1=mouthStart; mouthCP1.x +=size *MOUTH_H *2/3; //CP(Curve Point) CGPoint mouthCP2=mouthEnd; mouthCP2.x -=size *MOUTH_H *2/3; float smile=1; CGFloat smileOffset =MOUTH_SMILE * size *smile; //喜哀幅度 mouthCP1.y+=smileOffset; mouthCP2.y+=smileOffset; CGContextBeginPath(content); CGContextMoveToPoint(content, mouthStart.x, mouthStart.y);//移动到左嘴角 CGContextAddCurveToPoint(content, mouthCP1.x, mouthCP2.y, mouthCP2.x, mouthCP2.y, mouthEnd.x, mouthEnd.y); [[UIColor redColor] setStroke ]; CGContextStrokePath(content); }
4.实现drawRect后,在旋转屏幕时需要实现 awakeFromNib而不用重新drawRect.(实际上可以通过面板中的一开关进行设置(mode:Redraw)即可)
-(void) awakeFromNib {
self.contentMode=UIViewContentModeRedraw;//允许旋转后自动重画
}
但为了不仅让在awakeFromNib中执行,还希望在initWithFrame中执行。原因:()
因此代码改为:
-(void) setup { self.contentMode=UIViewContentModeRedraw;//允许旋转后自动重画, } -(void) awakeFromNib { [self setup]; } - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code [self setup]; } return self; }
5.添加缩放scale的setter、getter:

@synthesize scale =_scale; #define DEFAULT_SCALE 0.90 -(CGFloat) scale { if(!_scale ){ return DEFAULT_SCALE; }else { return _scale; } } -(void) setScale:(CGFloat)scale { if (scale != _scale) { //高效处理 _scale=scale; [self setNeedsDisplay]; } }
6.然后添加手势

-(void) pinch:(UIPinchGestureRecognizer *)gesture { if (gesture.state == UIGestureRecognizerStateChanged || gesture.state == UIGestureRecognizerStateEnded) { self.scale *= gesture.scale;//自身view的缩放比例等于手势的缩放比例 gesture.scale=1; //这里每次需要重置手势 } }