【Swift】使用贝塞尔曲线绘制表情

2019独角兽企业重金招聘Python工程师标准>>>

1、创建一个基于UIView名为FaceView的类

我们不直接在HappinessViewController(根视图控制器) 中实现&＃xff0c;而是将FaceView完全独立出来&＃xff0c;这正是遵循了MVC的设计原则。我们主要通过贝塞尔曲线来实现表情的绘制。

注&＃xff1a;&＃64;IBDesignable&＃xff1a;Xcode6 的发布&＃xff0c;苹果为开发者构建自定义控件推出了新功能IBDesignable和IBInspectable&＃xff0c;允许在IB中实时预览设计成果。这会给实际开发提升很高效率。IBDesignable作用在于可以使改视图在IB中实时预览。

//可以在IB中预览 &＃64;IBDesignable class FaceView: UIView {}

2、定义属性

定义线宽、线颜色、缩放系数

特别的&＃xff1a;我另外定义了一个自定义参数——幸福指数。他的范围是-1~1。

注&＃xff1a;&＃64;IBInspectable&＃xff1a;将自定义的属性在IB中显示&＃xff0c;以便我们更方便的控制其属性&＃xff0c;达到动态预览的效果。

&＃64;IBInspectable //线的宽度 var lineWidth : CGFloat &＃61; 3 { didSet {setNeedsDisplay() } }&＃64;IBInspectable //线的颜色 var color : UIColor &＃61; UIColor.blueColor() { didSet {setNeedsDisplay() } }&＃64;IBInspectable //表情缩放系数 var scale : CGFloat &＃61; 0.90 {didSet { setNeedsDisplay() } }&＃64;IBInspectable //微笑程度&＃xff08;幸福指数&＃xff09; var smiliness : Double &＃61; 0.75 {didSet { setNeedsDisplay() } }

3、采用结构体来规定固定参数

我们采用结构体来规定我们想要的参数。如下所示&＃xff1a;

private struct Scaling {static let FaceRadiusToEyeRadiusRatio:CGFloat &＃61; 10//眼睛弯曲半径比例static let FaceRadiusToEyeOffsetRatio:CGFloat &＃61; 3//眼睛偏移比例static let FaceRadiusToEyeSeparationRatio:CGFloat &＃61; 1.5//眼睛间隙比例static let FaceRadiusToMouthWidthRatio:CGFloat &＃61; 1//嘴宽度比例static let FaceRadiusToMouthHeightRatio:CGFloat &＃61; 3//嘴高度比例static let FaceRadiusToMouthOffsetRatio:CGFloat &＃61; 3//嘴便宜比例 }

4、设计一个枚举&＃xff0c;代表眼睛的左、右

private enum Eye { case Left, Right }

5、两个get属性

faceCenter&＃xff1a;计算在父视图的中心坐标。

//在父视图上的中心坐标 var faceCenter:CGPoint {get{return convertPoint(center, fromView: superview)} }

faceRadius&＃xff1a;表情的缩放系数

var faceRadius:CGFloat {get{return scale * min(bounds.size.width,bounds.size.height) / 2} }

6、先画圆圆的脸

当然是先画脸&＃xff08;圆&＃xff09;&＃xff0c;通过UIBezierPath类方法来画&＃xff08;创建路径对象&＃xff09;一个圆&＃xff08;路径&＃xff09;。

//arcCenter: 圆心 //radius&＃xff1a;半径 //startAngle:起点角度 //endAngle:终点角度 let facePath &＃61; UIBezierPath(arcCenter: faceCenter, radius: faceRadius, startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise: true)

设置颜色宽度。

//线的宽度 facePath.lineWidth &＃61; lineWidth //线的颜色 color.set()

最后别忘了调用stroke()&＃xff0c;将这个路径画出来。

//最终将它"画"出来 facePath.stroke()

7、其次是画眼睛&＃xff1a;

我们封装一下画眼睛这部分代码&＃xff0c;通过传入眼睛左右的枚举值来画。眼睛实质还是画圆&＃xff0c;只是不是完整的圆&＃xff0c;我们只需要根据左右找到其中心、半径及起始角度就好了。

//眼睛private func bezierPathForEye(whichEye: Eye) -> UIBezierPath{//计算眼睛的半径let eyeRadius &＃61; faceRadius/Scaling.FaceRadiusToEyeRadiusRatio//计算眼睛垂直的偏移量let eyeVerticalOffset &＃61; faceRadius/Scaling.FaceRadiusToEyeOffsetRatio//计算眼睛水平的距离let eyeHorizontalSeparation &＃61; faceRadius/Scaling.FaceRadiusToEyeSeparationRatio//眼睛中心var eyeCenter &＃61; faceCenter//y值是一致的eyeCenter.y -&＃61; eyeVerticalOffset//根据左右来计算眼的圆心x坐标switch whichEye {case .Left: eyeCenter.x -&＃61; eyeHorizontalSeparation / 2case .Right: eyeCenter.x &＃43;&＃61; eyeHorizontalSeparation / 2}//调用上面用过的UIBezierPath画圆的类方法来画圆let path &＃61; UIBezierPath(arcCenter: eyeCenter, radius: eyeRadius, startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise: true)//线的宽path.lineWidth &＃61; lineWidth//最后返回路径return path}

8、最后画嘴

嘴可以用曲线来画。使用UIBezierPath对象的方法&＃xff1a;addCurveToPoint&＃xff0c;来画曲线。需要计算的值有、起始点、控制点。

//微笑private func bezierPathForSmile(fractionOfMaxSmile : Double) -> UIBezierPath{//嘴宽let mouthWidth &＃61; faceRadius/Scaling.FaceRadiusToMouthWidthRatio//嘴高let mouthHeight &＃61; faceRadius/Scaling.FaceRadiusToMouthHeightRatio//嘴垂直偏移let mouthVerticalOffset &＃61; faceRadius/Scaling.FaceRadiusToMouthOffsetRatio//微笑高度let smileHeight &＃61; CGFloat(max(min(fractionOfMaxSmile, 1), -1)) * mouthHeight//开始点let start &＃61; CGPoint(x: faceCenter.x - mouthWidth / 2, y: faceCenter.y &＃43; mouthVerticalOffset)//结束点let end &＃61; CGPoint(x: start.x &＃43; mouthWidth, y: start.y)//第一个控制点let cp1 &＃61; CGPoint(x: start.x &＃43; mouthWidth / 3, y: start.y &＃43; smileHeight)//第二个控制点let cp2 &＃61; CGPoint(x: end.x - mouthWidth / 3, y: cp1.y)let path &＃61; UIBezierPath()//路径移至起点path.moveToPoint(start)//增加路径的终点、控制点path.addCurveToPoint(end, controlPoint1: cp1, controlPoint2: cp2)path.lineWidth &＃61; lineWidthreturn path}

其中控制点cp1、cp2可以通过下图来理解&＃xff1a;

9、重绘视图

在重绘中调用以上方法&＃xff0c;具体如下&＃xff1a;

override func drawRect(rect: CGRect){//圆圆的脸let facePath &＃61; UIBezierPath(arcCenter: faceCenter, radius: faceRadius, startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise: true)facePath.lineWidth &＃61; lineWidthcolor.set()facePath.stroke()//一双大眼bezierPathForEye(.Left).stroke()bezierPathForEye(.Right).stroke()//嘴let smilePath &＃61; bezierPathForSmile(smiliness)smilePath.stroke()}