Question

我在项目中使用了this主题动画。问题是我想使用特定区域的圆圈（灰色区域）。为此，我添加了一个视图（灰色区域），代码如下所示。但它每次都在x轴上定位不同的位置。（y是固定的）。第二个问题是我想使用文本周围的圆圈。为此，我将文本和视图垂直和水平放置在屏幕的中心。我该如何解决这两个问题？

Problem screenshots

这些是我使用的代码。

override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clearColor()

        // Use UIBezierPath as an easy way to create the CGPath for the layer.
        // The path should be the entire circle.
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)

        // Setup the CAShapeLayer with the path, colors, and line width

        circleLayer.path = circlePath.CGPath
        circleLayer.fillColor = UIColor.clearColor().CGColor
        circleLayer.strokeColor = randomColor().CGColor
        circleLayer.lineWidth = 40;

        // Don't draw the circle initially
        circleLayer.strokeEnd = 0.0

        // Add the circleLayer to the view's layer's sublayers
        layer.addSublayer(circleLayer)
    }


func animateCircle(duration: NSTimeInterval) {
        // We want to animate the strokeEnd property of the circleLayer
        let animation = CABasicAnimation(keyPath: "strokeEnd")

        // Set the animation duration appropriately
        animation.duration = duration

        // Animate from 0 (no circle) to 1 (full circle)
        animation.fromValue = 0
        animation.toValue = 1

        // Do a linear animation (i.e. the speed of the animation stays the same)
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

        // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
        // right value when the animation ends.
        circleLayer.strokeEnd = 1.0

        // Do the actual animation
        circleLayer.addAnimation(animation, forKey: "animateCircle")
    }

func addCircleView() {
        let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)

        // Create a new CircleView
        var circleView = CircleView(frame: CGRect(x: view.frame.origin.x/2, y: view.frame.origin.y/2, width: 200, height: 200))

       extraView.addSubview(circleView)
        println(view.frame.width)
        println(view.frame.height)

        // Animate the drawing of the circle over the course of 1 second
        circleView.animateCircle(1.0)
    }

Answer 1

问题是Auto layout。您忘记了circleView <=> extraView的设置布局。请参阅下面的代码。

func addCircleView() {
        let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)

        // Create a new CircleView
        var circleView = CircleView(frame: CGRect(x: view.frame.origin.x/2, y: view.frame.origin.y/2, width: 200, height: 200))

        extraView.addSubview(circleView)
        println(view.frame.width)
        println(view.frame.height)

        let constCenterX = NSLayoutConstraint(item: circleView, attribute: .CenterX, relatedBy: .Equal, toItem: extraView, attribute: .CenterX, multiplier: 1, constant: 0)

        let constCenterY = NSLayoutConstraint(item: circleView, attribute: .CenterY, relatedBy: .Equal, toItem: extraView, attribute: .CenterY, multiplier: 1, constant: 0)

        self.view.addConstraints([constCenterX, constCenterY])

        // Animate the drawing of the circle over the course of 1 second
        circleView.animateCircle(1.0)

        //circleView.textLabel?.text = "Hello World!"
}

BTW：对于第二个问题，你应该在CircleView中创建一个UILabel（centerX＆amp; centerY）。希望有所帮助！

如何在特定区域使用drawRect？

1 个答案: