博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记14 视图绘制Demo
阅读量:6855 次
发布时间:2019-06-26

本文共 5168 字,大约阅读时间需要 17 分钟。

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

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

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

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

import UIKitclass 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 UIKitclass 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 UIKitclass 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的值为一个负数小数时,效果如图:

你可能感兴趣的文章
Tomcat安全配置规范
查看>>
Configure Dynamics 365 and Azure Service Bus Integration (using OneWay relay and listener)
查看>>
必须掌握的30种SQL语句优化
查看>>
day14-css边框以及其他常用样式
查看>>
还原数据库 提示数据在访问中,无法独占访问
查看>>
【其他】Xshell秘钥方式登陆服务器
查看>>
Codeforces 405C
查看>>
Tomcat之catalina.out日志分割
查看>>
Ubuntu下安装Matplotlib和basemap
查看>>
Fedora17 64bit 安装ORACLE 11gR2
查看>>
[转]以安装桌面体验功能为例来探索windows2012服务器管理器的新变化
查看>>
php 发送POST 请求
查看>>
angularjs四大核心特性
查看>>
售前工程师的成长---一个老员工的经验之谈(四)(转载)
查看>>
201571030329/201571030310《小学四则运算练习软件需求获取》结对项目报告
查看>>
JS数组攻略
查看>>
【高德地图Android SDK】视频教学
查看>>
scanf&scanf_s difference
查看>>
Junit中Assert.assertEquals()和Assert.assertSame方法有什么异同
查看>>
iOS应用App Store发布流程
查看>>