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

简介: 这一话的任务是在视图中绘制一个小人脸,你可以控制他的嘴角弧度以表示开心后者伤心。新建一个工程,然后拖一个空的view进去,对齐蓝线然后适应尺寸,这都是我们之前讲过的内容了。

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

新建一个工程,然后拖一个空的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的值为一个负数小数时,效果如图:


目录
相关文章
|
iOS开发
ios贝塞尔曲线表格视图
x轴和y轴都是可自定义,曲线的值也是对应的值
91 0
ios贝塞尔曲线表格视图
|
iOS开发
iOS开发-加在透明视图上的控件会透明
iOS开发-加在透明视图上的控件会透明
140 0
|
前端开发 小程序 数据处理
iOS上传图片视图的封装:用法 【下篇】
iOS上传图片视图的封装:用法 【下篇】
254 0
iOS上传图片视图的封装:用法 【下篇】
|
前端开发 API 数据处理
iOS小知识:封装上传图片视图(支持删除和添加)
iOS小知识:封装上传图片视图(支持删除和添加)
232 0
iOS小知识:封装上传图片视图(支持删除和添加)
|
安全 iOS开发
iOS 筛选视图的隐藏方案
iOS 筛选视图的隐藏方案
163 0
iOS 筛选视图的隐藏方案
|
监控 iOS开发
iOS视图置顶方案
iOS视图置顶方案
165 0
iOS视图置顶方案
|
API 开发工具 iOS开发
iOS视图置顶的应用:适配iOS12系统上日期控件被筛选视图遮挡问题
iOS视图置顶的应用:适配iOS12系统上日期控件被筛选视图遮挡问题
207 0
iOS视图置顶的应用:适配iOS12系统上日期控件被筛选视图遮挡问题
|
开发工具 iOS开发 git
iOS订单折扣视图应用于购物车界面(支持添加/删除/选择折扣)
iOS订单折扣视图应用于购物车界面(支持添加/删除/选择折扣)
155 0
iOS订单折扣视图应用于购物车界面(支持添加/删除/选择折扣)
|
iOS开发
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】
474 0
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】
|
iOS开发
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)
244 0
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)