【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记14 视图绘制Demo

这一话的任务是在视图中绘制一个小人脸，你可以控制他的嘴角弧度以表示开心后者伤心。

新建一个工程，然后拖一个空的view进去，对齐蓝线然后适应尺寸，这都是我们之前讲过的内容了。

然后新建一个FaceView的UIView类。然后把拖拽的视图与FaceView关联，这里有个小技巧，因为我们的视图是铺满整个屏幕的，所以你想选中view或者viewcontroller会有困难，那么按住shift和control再点击右键，会显示层次结构中的所有对象，你可以选择你需要的部分。

下面来展示一下FaceView的代码：

import UIKit

class FaceView: UIView {
    var faceCenter:CGPoint{
        return convertPoint(center, fromView: superview)
    }
    var faceRadius:CGFloat{
    return min(bounds.size.width,bounds.size.height) / 2
    }
    override func drawRect(rect: CGRect) {
        let facePath = UIBezierPath(arcCenter: faceCenter, radius: faceRadius, startAngle: 0, endAngle: 2*M_PI, clockwise: true)
    }

}

这里我们重写了drawRect方法，我们首先绘制小人的脸廓，使用了一个圆形，使用我们上一话中讲过的UIBezierPath画圆的构造器，参数分别为：圆点、半径、起始弧度、终止弧度、是否是顺时针。我们把设置两个计算属性给圆点和半径传值。如果只有get方法的话可以不写get直接写return语句。faceCenter表示圆点，我们不能直接用center，因为那是父视图的中点，但是我们可以使用方法convertPoint把父视图的中点转移动我们的视图中。半径我们希望尽可能大，所以选择视图宽高较小一方的一半。初始弧度为0，终止弧度2*M_PI表示2π。看起来一个完美的圆尽在我们的掌握之中了。

但是当你写完上述代码的时候你会发现报错了！你可能对错误的原因产生疑惑，其实问题出在2*M_PI上，它的类型是Double，而我们都知道绘制需要使用的单位都是CGFloat，这里的错误提示确实有问题以至于你很难发现错误。我们需要一个转型

CGFloat (2*M_PI)

这里我继续设定描边的宽度，把它作为类的属性设定初始化值然后在drawRect中调用它。

var lineWidth:CGFloat = 3 {didSet{setNeedsDisplay()}}

facePath.lineWidth = lineWidth

我们考虑边的宽度的改变会引起视图的改变，这就需要我们在宽度改变的时候重绘我们的视图，所以在属性lineWidth后面设置一个观察器，一旦值有变动，就调用setNeedsDisplay，还记得之前讲过的我们不能调用drawRect，那是系统方法，但是我们可以通过调用setNeedsDisplay通知系统调用drawRect已达到重绘的目的。我们继续定义一个颜色，同样的做法。

最后加上stroke方法。完整代码：

import UIKit

class FaceView: UIView {
    var lineWidth:CGFloat = 3 {didSet{setNeedsDisplay()}}
    var color:UIColor = UIColor.blueColor(){didSet{ setNeedsDisplay()}}
    var faceCenter:CGPoint{
        return convertPoint(center, fromView: superview)
    }
    var faceRadius:CGFloat{
    return min(bounds.size.width,bounds.size.height) / 2
    }
    override func drawRect(rect: CGRect) {
        let facePath = UIBezierPath(arcCenter: faceCenter, radius: faceRadius, startAngle: 0, endAngle: CGFloat (2*M_PI), clockwise: true)
        facePath.lineWidth = lineWidth
        color.set()
        facePath.stroke()
    }

}

运行结果：

看起来离边缘太近了，而且如果你旋转屏幕的话会看到：

这显然不是我们，我们之前讲过的每一次旋转屏幕系统都会重新调用drawRect，而默认的视图适应规则就是拉伸。现在把这些问题改正。

首先在storyboard中选中faceview把第一栏中的mode改成Redraw。

然后在faceView的代码中把原来的半径乘上个0.90,再次运行：

是不是舒服很多了？最后我们需要绘制眼睛和嘴巴。

下面是所有的代码，难度不大,我加了注释，你应该可以看懂：

import UIKit

class FaceView: UIView {
    var lineWidth:CGFloat = 3 {didSet{setNeedsDisplay()}}
    var color:UIColor = UIColor.blueColor(){didSet{ setNeedsDisplay()}}
    var faceCenter:CGPoint{
        return convertPoint(center, fromView: superview)
    }
    
    private struct Scaling{
        static let FaceRadiusToEyeRadiusRatio:CGFloat = 10
        static let FaceRadiusToEyeOffsetRatio:CGFloat = 3
        static let FaceRadiusToEyeSeparationRatio:CGFloat = 1.5
        static let FaceRadiusToMouthWidthRatio:CGFloat = 1
        static let FaceRadiusToMouthHeightRatio:CGFloat = 3
        static let FaceRadiusToMouthOffsetRatio:CGFloat = 3
    }
    private enum Eye {case Left,Right} //左右眼
    //绘制眼睛
    private func bezierPathForEye(whichEye:Eye) -> UIBezierPath{
    let eyeRadius = faceRadius / Scaling.FaceRadiusToEyeRadiusRatio
    let eyeVerticalOffset = faceRadius / Scaling.FaceRadiusToEyeOffsetRatio
    let eyeHorizonTalSeparation = faceRadius / Scaling.FaceRadiusToEyeSeparationRatio
    var eyeCenter = faceCenter
    eyeCenter.y -= eyeVerticalOffset
        switch whichEye{
        case .Left:eyeCenter.x -= eyeHorizonTalSeparation / 2
        case .Right:eyeCenter.x += eyeHorizonTalSeparation / 2
        }
    
    let path = UIBezierPath(arcCenter: eyeCenter, radius: eyeRadius, startAngle: 0, endAngle: CGFloat(2 * M_PI), clockwise: true)
        path.lineWidth = lineWidth
        return path
    }
    //参数范围-1到1，正数表示开心，负数表示伤心
    private func bezierPathForSmile(fractionOfMaxSmile:Double) -> UIBezierPath {
    let mouthWidth = faceRadius / Scaling.FaceRadiusToMouthWidthRatio
    let mouthHeight = faceRadius / Scaling.FaceRadiusToMouthHeightRatio
    let mouthVertiaclOffset = faceRadius / Scaling.FaceRadiusToMouthOffsetRatio
    let smileHeight = CGFloat(max(min(fractionOfMaxSmile, 1), -1)) * mouthHeight  //这种写法保证了 -1到1的范围
        //设置四个点，开始结束和拐点，可以靠这四点绘制一条弧线
    let start = CGPoint(x: faceCenter.x - mouthWidth / 2, y: faceCenter.y + mouthVertiaclOffset)
    let end = CGPoint(x: start.x + mouthWidth, y: start.y)
    let cp1 = CGPoint(x: start.x + mouthWidth / 3, y: start.y + smileHeight)
    let cp2 = CGPoint(x: end.x - mouthWidth / 3, y: cp1.y)
        
    let path = UIBezierPath()
    path.moveToPoint(start)
    path.addCurveToPoint(end, controlPoint1: cp1, controlPoint2: cp2)
    path.lineWidth = lineWidth
    return path
    }
    var faceRadius:CGFloat{
    return min(bounds.size.width,bounds.size.height) / 2 * 0.90
    }
    override func drawRect(rect: CGRect) {
        let facePath = UIBezierPath(arcCenter: faceCenter, radius: faceRadius, startAngle: 0, endAngle: CGFloat (2*M_PI), clockwise: true)
        facePath.lineWidth = lineWidth
        color.set()
        facePath.stroke()
        bezierPathForEye(.Left).stroke()
        bezierPathForEye(.Right).stroke()
        let smiliness = 0.75
        let smilePath = bezierPathForSmile(smiliness)
        smilePath.stroke()
    }

}

效果：

当你修改smiliness的值为一个负数小数时，效果如图：