【问题标题】:Draw a circular segment progress in SWIFT在 SWIFT 中绘制圆弧进度
【发布时间】:2015-10-26 18:33:42
【问题描述】:

我想创建一个带有切片的循环进度,其中每个切片都是一个弧。

我的代码基于这个答案: Draw segments from a circle or donut

但我不知道如何将它复制并旋转 10 次。 我想按照进度变量(百分比)为它着色。

编辑:我想要这样的东西

请帮忙

问候

【问题讨论】:

标签: xcode swift uiview draw cgcontext


【解决方案1】:

您可以使用圆形路径并设置 strokeStart 和 StrokeEnd。像这样的:

let circlePath = UIBezierPath(ovalInRect: CGRect(x: 200, y: 200, width: 150, height: 150))
var segments: [CAShapeLayer] = []
let segmentAngle: CGFloat = (360 * 0.125) / 360

for var i = 0; i < 8; i++ {
    let circleLayer = CAShapeLayer()
    circleLayer.path = circlePath.CGPath

    // start angle is number of segments * the segment angle
    circleLayer.strokeStart = segmentAngle * CGFloat(i)

    // end angle is the start plus one segment, minus a little to make a gap
    // you'll have to play with this value to get it to look right at the size you need
    let gapSize: CGFloat = 0.008
    circleLayer.strokeEnd = circleLayer.strokeStart + segmentAngle - gapSize

    circleLayer.lineWidth = 10
    circleLayer.strokeColor = UIColor(red:0,  green:0.004,  blue:0.549, alpha:1).CGColor
    circleLayer.fillColor = UIColor.clearColor().CGColor

    // add the segment to the segments array and to the view
    segments.insert(circleLayer, atIndex: i)
    view.layer.addSublayer(segments[i])
}

【讨论】:

  • 太棒了!!谢谢 !!还有一件事,您如何根据进度(0%到100%)对细分进行着色?从灰色到蓝色。谢谢你的帮助!!
  • 我只是使用步骤数来修改基色。由于您已经在逐步完成每个部分,因此在循环中应该很干净。
  • 太棒了!!有用。只需旋转图层,因为第一段从 -M_PI 而不是 -M_PI /2 开始
  • 关于旋转不起作用的另一个问题:我在 for 循环之外创建了一个新的 CAShapeLayer 并进行了此转换: var transform:CATransform3D = CATransform3DIdentity testlayer.anchorPoint = CGPoint(x: 0.5 , y: 0.5) transform = CATransform3DRotate(transform,degree2radian(CGFloat(-90)), 0, 0,1) testlayer.transform = transform view.layer.addSublayer(testlayer) 但是效果不好。为什么?
  • 我忘了说:var testlayer = CAShapeLayer() testlayer.frame = CGRect(x: self.view.frame.midX, y: 30, width: 200, height: 200)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多