您的位置：首页 > 其它

使用CAShapeLayer 画任意的图形

2016-02-15 11:33 260 查看

CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形

/// -------------------------第一------------------------

// let layer = CAShapeLayer()

// layer.frame = CGRectMake(110, 100, 150, 100)

// layer.backgroundColor = UIColor.blackColor().CGColor

// view.layer.addSublayer(layer)

/// -------------------------第二------------------------

// let path = UIBezierPath(rect: CGRectMake(110, 100, 150, 100))

// let layer = CAShapeLayer()

// layer.path = path.CGPath//利用贝塞尔曲线的方式构建一段弧线，利用任意弧线来组成你想要的形状

// layer.backgroundColor = UIColor.blackColor().CGColor//背景颜色<尽量不要使用backgroundColor此属性>

// /**建议使用下面两个属性*/

// layer.fillColor = UIColor.clearColor().CGColor// 填充颜色

// layer.strokeColor = UIColor.blackColor().CGColor//边框颜色

// view.layer.addSublayer(layer)

/// -------------------------第三------------------------

//利用贝塞尔曲线画一个带圆角的图形

// let path = UIBezierPath(roundedRect: CGRectMake(110, 100, 150, 100), cornerRadius: 10)

// let layer = CAShapeLayer()

// layer.path = path.CGPath

// layer.fillColor = UIColor.blackColor().CGColor

// layer.strokeColor = UIColor.redColor().CGColor

// view.layer .addSublayer(layer)



//还可以指定起始角和半径画圆

// let radius : CGFloat = 60.0

// let startAngle : CGFloat = CGFloat(0.0)

// let endAngel : CGFloat = CGFloat((3*M_PI)/2)//这里涉及到的起始角和结束角是按照顺时针的方向设定的这里的角度是使用弧度制来标示的

// let path = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: startAngle, endAngle: endAngel, clockwise: true)

// let layer = CAShapeLayer()

// layer.path = path.CGPath

// layer.fillColor = UIColor.blackColor().CGColor

// layer.strokeColor = UIColor.redColor().CGColor

// view.layer .addSublayer(layer)

/// -------------------------第四------------------------

//贝塞尔曲线的画法是由起始点，终点，和控制点三个参数来画的

let startPoint = CGPointMake(50, 300)

let endPoint = CGPointMake(300, 300)

let controlPoint = CGPointMake(170, 200)

let controlPoint2 = CGPointMake(220,400)



let layer1 = CALayer()

layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5)

layer1.backgroundColor = UIColor.redColor().CGColor



let layer2 = CALayer()

layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5)

layer2.backgroundColor = UIColor.redColor().CGColor



let layer3 = CALayer()

layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5)

layer3.backgroundColor = UIColor.redColor().CGColor



let layer4 = CALayer()

layer4.frame = CGRectMake(controlPoint2.x, controlPoint2.y, 5, 5)

layer4.backgroundColor = UIColor.redColor().CGColor



let layer = CAShapeLayer()

let path = UIBezierPath()

/**添加曲线的路径*/

   path.moveToPoint(startPoint)//让它移动到起始点<必须在前面><必须在前面><必须在前面>重要的说三遍！！！！！！！！！

// path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)//告诉它结束点和控制点<单个控制点>

path.addCurveToPoint(endPoint, controlPoint1: controlPoint2, controlPoint2: controlPoint)<两个控制点>

layer.path = path.CGPath

layer.fillColor = UIColor.clearColor().CGColor

layer.strokeColor = UIColor.blackColor().CGColor

view.layer .addSublayer(layer)

view.layer.addSublayer(layer1)

view.layer.addSublayer(layer2)

view.layer.addSublayer(layer3)

view.layer.addSublayer(layer4)

////////////////////////

  //strokeEnd、strokeStart和lineWidth 三个属性，第一个动画用了strokeEnd这个属性的值范围是0-1，动画显示了从0到1之间每一个值对这条曲线的影响，strokeStart的方法则是相反的，如果把这两个值首先都设置成0.5然后慢慢改变成0和1的时候就会变成第二个动画，配合lineWidth则曲线会慢慢变粗，这里的很多属性都是支持动画的

let animation = CABasicAnimation(keyPath: "strokeEnd")

animation.fromValue = 0.5

animation.toValue = 1

animation.duration = 2

layer.addAnimation(animation, forKey: "")

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航