UIView UIBezierPath CGPath CAShapeLayer 等的关系

前言:推荐使用 Dash 这个软件来查看 API 文档,比 xcode 自带的 API 文档方便太多

这些东西的关系,我到现在才整明白,分享下:

需求:

比如,我们需要在一个 ViewControllerview 中添加一个圆形的 UIView,如何做呢?

你需要知道的

  1. UIBezierPath 可以画任何形状
  2. CGPathUIBezierPath 的一个属性,可以从 UIBezierPath 中获取,也就是说 UIBezierPath 是高于 CGPath 的上层模型
  3. UIView 是画板,UIBezierPath 是画笔,在操作的时候不是往画板上添加东西,还是直接在画板上作画
  4. 要想作画,你需要在 UIViewdraw() 方法中用 UIBezierPath 画画,不能新建 UIView 对象后再添加路径

实现步骤

1. 新起一个 BallView: UIView 类, 在 draw() 方法中实现画画的方法

class BallView: UIView {
    override func draw(_ rect: CGRect) {
        // 在 rect 框架中新想一个椭圆路径,如果 rect 是方形的,这个路径就是正圆的
        let path = UIBezierPath(ovalIn: rect)
        
        // 设置路径的描边宽度
        path.lineWidth = 1
        
        // 设置这个路径的填充颜色和描边颜色
        UIColor.orange.setFill()
        UIColor.yellow.setStroke()
        
        // 填充这个路径,描边这个路径
        path.stroke()
        path.fill()
    }
}

2. 在你需要的 ViewController 中新建 BallView 对象,并添加到 view 的子 views

注意: 新建的任何 UIView 默认情况下背景是不透明的,你需要单独设置这个属性值来实现背景透明 isOpaque: Bool

class AnimationDymanicVC: UIViewController {
   override func viewDidLoad() {
        super.viewDidLoad()
        // 在 frame 中新建一个 BallView: CGRect 可以有多种实现方法,具体看 API
        let ballView = BallView(frame: CGRect(origin: view.center, size: CGSize(width: 60, height: 60)))
        ballView.isOpaque = false // 没有设置这条的时候显示是图1那样,设置以后是图2那样
        view.addSubview(ballView)
    }
}

opaque.png
notopaque.png


KyleBing
659 声望18 粉丝

前端,喜欢 Javascript scss,喜欢做一些实用的小工具