【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记14 视图绘制Demo
来源:互联网 发布:淘宝商品复制 编辑:程序博客网 时间:2024/05/22 21:01
这一话的任务是在视图中绘制一个小人脸,你可以控制他的嘴角弧度以表示开心后者伤心。
新建一个工程,然后拖一个空的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的值为一个负数小数时,效果如图:
1 0
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记14 视图绘制Demo
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记12 Custom Views视图绘制1
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记19 为Demo添加手势
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记30 ScrollView Demo实战
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记47 文件系统Demo
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记11 View视图
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记28 ScrollView 滑动视图
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记1 IOS8概述
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记13 Drawing绘制、UIColor颜色、Fonts字体
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记23 多MVC模式Demo的实现
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记4 MVC enum Tuple Dictionary
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记5 Data Structures、Methods、Properties
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记6 init
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记7 AnyObject、Functions
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记8 String、Type Conversion、Assertions
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记9 Objective-c Compatibility
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记10 Property List
- Parcelable 类的使用
- 页面静态刷新<select>下拉框值
- IDEA+Maven3 + Jetty-plugin
- CViewController 回到 AViewController
- leetcode || 92、Reverse Linked List II
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记14 视图绘制Demo
- android图片缓存
- Nutch中MapReduce的分析
- pthread_join等待的个数,即停止4个线程便释放一块空间,所以pthread_join时需加锁,之后便需对线程句柄置空
- leetcode之ZigZag Conversion
- Substring with Concatenation of All Words
- Android解决输入法自动弹出方法大全
- hash函数的基本知识
- ubuntu下安装jdk