ios - 在 CAShapeLayer 之上的 drawRect 中绘制元素

Question

我正在尝试创建一个圆环，使其周围的填充颜色更浅。我计划在 drawRect 中绘制圆圈并在 CAShapeLayer 中为填充设置动画并在顶部绘制一个白色圆圈。到目前为止，我的圈子在模拟器中看起来像这样:

我只需要边缘周围的颜色较浅。是否可以将 CAShapeLayer 放置在 drawRect 中绘制的两个圆圈之间？代码如下:

class MyTimer: UIView {

    let circleBgColor: UIColor = UIColor(colorLiteralRed: 244.0/255.0, green: 165.0/255.0, blue: 35.0/255.0, alpha: 1)
    let circleFgColor : UIColor = UIColor(colorLiteralRed: 254.0/255.0, green: 198.0/255.0, blue: 106.0/255.0, alpha: 1)

    let timeLeftLayer = CAShapeLayer()


    override init(frame: CGRect) {
        super.init(frame: frame)
        self.config()
    }

    //Only called in IB
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.config()
    }

    convenience init() {
        self.init(frame: CGRectZero)
    }

    //Common code here
    func config() {

        backgroundColor = UIColor.clearColor()

        //initially full of time left
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: frame.size.width/2, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: true)
        timeLeftLayer.path = circlePath.CGPath
        timeLeftLayer.fillColor = circleFgColor.CGColor
        timeLeftLayer.strokeEnd = 1

    }



    override func drawRect(rect: CGRect) {

        let outterCirclePath = UIBezierPath(ovalInRect: rect)
        circleBgColor.setFill()
        outterCirclePath.fill()


        layer.addSublayer(timeLeftLayer)


        let centerCirclePath = UIBezierPath(arcCenter: CGPoint(x: rect.size.width/2, y: rect.size.height/2), radius: rect.size.height*0.4, startAngle: 0, endAngle: CGFloat(M_PI*2), clockwise: true
        )

        UIColor.whiteColor().setFill()
        centerCirclePath.fill()


    }

}

关于此的任何指示都会很棒。谢谢

Answer 1

在两张图之间放置图层是不可能的，因为您的图画是在同一层中绘制的，更具体地说是在 View 的主层中。您应该做的是将每张图分开在一个图层上，然后在两个图层之间放置一个图层是完全可能的。

override func drawRect(rect: CGRect) {

    // backLayer drawing 
    let backLayer = CAShapeLayer()
    backLayer.frame = self.bounds
    backLayer.fillColor = circleBgColor.CGColor
    backLayer.path = UIBezierPath(ovalInRect: rect).CGPath
    self.layer.addSublayer(backLayer)

    // middleLayer drawing
    self.layer.addSublayer(timeLeftLayer)

    // frontLayer drawing
    let frontLayer = CAShapeLayer()
    frontLayer.frame = self.bounds
    frontLayer.fillColor = UIColor.whiteColor().CGColor
    frontLayer.path = UIBezierPath(arcCenter: CGPoint(x: rect.size.width/2, y: rect.size.height/2), radius: rect.size.height*0.4, startAngle: 0, endAngle: CGFloat(M_PI*2), clockwise: true
    ).CGPath
    self.layer.addSublayer(frontLayer)
}