stanford《Developing Apps for ios》第五課demo要點

來源:互聯網
上載者:User

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;    //這裡每次需要重設手勢    }}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.