1.通過添加一個objective-c class,並選擇super為 UIView.不同於interface中的view和storyboard.
2.把view controller串連(IBOutlet)到新添加的view。
3.在model中drawRect方法中開始畫一個笑臉。
畫之前建立了一個畫圓的通用方法:
102849512aa0f6870b67df24e00e9fc5692559a1e
1028495908b657cd858429423a4ab151c8ec36bca
View Code
-(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();}
然後開始畫笑臉
View Code
- (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:
View Code
@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.然後添加手勢
View Code
-(void) pinch:(UIPinchGestureRecognizer *)gesture{ if (gesture.state == UIGestureRecognizerStateChanged || gesture.state == UIGestureRecognizerStateEnded) { self.scale *= gesture.scale;//自身view的縮放比例等於手勢的縮放比例 gesture.scale=1; //這裡每次需要重設手勢 }}