iOSIos@IONIC首页投稿(暂停使用,暂停投稿)

Swift CAShapeLayer

2016-11-19  本文已影响167人  HeartPower

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性,用cgPath来定义想要绘制的图形,最后CAShapeLayer就自动渲染出来了。当然,你也可以用Core Graphics直接向原始的CALayer的内容中绘制一个路径,相比之下,使用CAShapeLayer有以下一些优点:

  1. 渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
  2. 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
  3. 不会被图层边界裁剪掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被裁减掉。
  4. 不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。

CAShapeLayer可以用来绘制所有能够通过cgPath来表示的形状。这个形状不一定要闭合,图层路径也不一定要不可破,事实上你可以在一个图层上绘制好几个不同的形状。你可以控制一些属性比如lineWith,lineCap,lineJoin。但是在图层层面你只有一次机会设置这些属性。如果你想用不同的颜色或风格来绘制多个形状,就不得不为每个形状准备一个图层了。

绘制一个火柴人

<pre>import UIKit

class ViewController: UIViewController {

var containerView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    self.containerView = UIView()
    self.containerView.frame = self.view.bounds
    self.containerView.backgroundColor = UIColor.groupTableViewBackground
    self.view.addSubview(self.containerView)
    
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 175, y: 100))
    
    path.addArc(withCenter: CGPoint(x: 150, y: 100), radius: 25, startAngle: 0, endAngle: CGFloat(M_PI) * 2, clockwise: true)
    path.move(to: CGPoint(x: 150, y: 125))
    path.addLine(to: CGPoint(x: 150, y: 175))
    path.addLine(to: CGPoint(x: 125, y: 225))
    path.move(to: CGPoint(x: 150, y: 175))
    path.addLine(to: CGPoint(x: 175, y: 225))
    path.move(to: CGPoint(x: 100, y: 150))
    path.addLine(to: CGPoint(x: 200, y: 150))    
    let shapeLayer = CAShapeLayer()
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 1
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineCap = kCALineCapRound
    shapeLayer.path = path.cgPath
    
    self.containerView.layer.addSublayer(shapeLayer)
}

}
</pre>

效果图
1.png
绘制圆角矩形

<pre>import UIKit

class ViewController: UIViewController {

var containerView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    self.containerView = UIView()
    self.containerView.frame = self.view.bounds
    self.containerView.backgroundColor = UIColor.groupTableViewBackground
    self.view.addSubview(self.containerView)
    let rect = CGRect(x: 50, y: 100, width: 100, height: 100)
    let radii = CGSize(width: 20, height: 20)

    let corners: UIRectCorner = [UIRectCorner.topRight,UIRectCorner.bottomRight,UIRectCorner.bottomLeft]
    let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: radii)
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 1
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineCap = kCALineCapRound
    shapeLayer.path = path.cgPath
    
    self.containerView.layer.addSublayer(shapeLayer)
}

}
</pre>

效果图
2.png
上一篇下一篇

猜你喜欢

热点阅读