如何快速绘制饼图 (QuartzCore框架) - Swift

在本教程中，我们将学习如何使用QuartzCore框架绘制饼图。我们将使用Swift语言编写代码。

步骤 1 - 导入 QuartzCore 框架

为了绘制饼图，我们需要使用QuartzCore框架。你可以在你的Xcode项目中通过以下方式导入它：

1. 打开你的Xcode工程。
2. 在侧边栏中找到“General”。
3. 在粗体字“Embedded Binaries”下点击“添加”(加号icon), 然后选择“QuartzCore.framework”。

步骤 2 - 绘制饼图

我们需要在我们的视图控制器上绘制饼图。在此之前，我们需要创建一个某值与颜色对应的字典。

let data: Dictionary<String, Float> = [
    "Red": 30.0,
    "Green": 40.0,
    "Blue": 10.0,
    "Yellow": 20.0
]

我们需要添加一个视图并在其上下文中绘制饼图。我们需要绘制两个圆来创建一个饼图。一个代表完整的饼图，另一个作为画刷划过的百分比。我们使用“画刷”对象来绘制百分比部分的饼。

添加以下代码以创建并绘制两个圆：

override func viewDidLoad() {
    super.viewDidLoad()

    // Create a container view to hold the pie chart
    let containerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
    view.addSubview(containerView)

    // Set up the percentage drawn circle
    let circlePath = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 200, height: 200))
    let circleLayer = CAShapeLayer()
    circleLayer.path = circlePath.CGPath
    circleLayer.fillColor = UIColor.clearColor().CGColor
    circleLayer.strokeColor = UIColor.redColor().CGColor
    circleLayer.lineWidth = 20.0
    containerView.layer.addSublayer(circleLayer)

    // Set up the full circle cover
    let fullCircleLayer = CAShapeLayer()
    fullCircleLayer.path = circlePath.CGPath
    fullCircleLayer.fillColor = UIColor.clearColor().CGColor
    fullCircleLayer.strokeColor = UIColor.lightGrayColor().CGColor
    fullCircleLayer.lineWidth = 10.0
    containerView.layer.addSublayer(fullCircleLayer)
}

我们使用UIBezierPath类来绘制和包含圆的路径。然后我们创建了两个“CAShapeLayer”来代表两个圆。一个圆被用来表示完整的饼图，而另一个圆则被用作画刷。我们通过设置不透明度为0来使中间区域透明。我们为每个圆设置了不同的线宽和颜色以便于区分。

现在, 我们需要使用目标值和上述颜色字典来绘制饼图。将以下代码添加到上面的方法中。

// Set up the pie chart
let percentageLabels = ["Red": "0%", "Green": "0%", "Blue": "0%", "Yellow": "0%"]
var runningTotal: Float = 0.0

for (colorName, value) in data {
    let slice = CAShapeLayer()
    let slicePath = UIBezierPath()
    slicePath.moveToPoint(CGPoint(x: containerView.bounds.midX, y: containerView.bounds.midY))
    slicePath.addArcWithCenter(CGPoint(x: containerView.bounds.midX, y: containerView.bounds.midY),
                                   radius: containerView.bounds.width/2,
                                   startAngle: CGFloat(Double(runningTotal) * M_PI * 2),
                                   endAngle: CGFloat(Double(value + runningTotal) * M_PI * 2),
                                   clockwise: true)
    slicePath.closePath()
    slice.path = slicePath.CGPath

    slice.fillColor = UIColor.clearColor().CGColor
    slice.strokeColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.5).CGColor
    slice.lineWidth = 10
    containerView.layer.addSublayer(slice)

    percentageLabels[colorName] = String(Int(round(value / 100 * 360))) + "%"
    runningTotal += value
}

这段代码创建了每个颜色值所对应的比例部分。通过循环每个元素，我们每次都会计算一个新的“CAShapeLayer”图层来绘制这个颜色部分的比例图。我们使用新的不透明填充色（前面的图层为透明色）并设置边框颜色为白色。计算出每个颜色所对应的百分比，然后更新前面的百分比标签字典。

我们已经成功地绘制了饼图，但是多亏了“画刷”图层，所以目前它看起来就像一个没有填充的饼状物。下一步，我们需要在绘制的时候添加一个“画刷”图层。

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    // Add the percentage drawn circle animation
    let percentageLayer = CAShapeLayer()
    percentageLayer.path = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 200, height: 200)).CGPath
    percentageLayer.fillColor = UIColor.clearColor().CGColor
    percentageLayer.strokeColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0).CGColor
    percentageLayer.lineWidth = 20.0
    containerView.layer.addSublayer(percentageLayer)

    let percentageAnimation = CABasicAnimation(keyPath: "strokeEnd")
    percentageAnimation.duration = 2.0
    percentageAnimation.fromValue = NSNumber(float: 0.0)
    percentageAnimation.toValue = NSNumber(float: 1.0)
    percentageLayer.addAnimation(percentageAnimation, forKey: nil)
}

这段代码创建了一个新的“CAShapeLayer”，然后将其添加到“containerView”上。我们使用“CABasicAnimation”动画来设置描边的百分比。

现在你已经知道如何使用QuartzCore框架绘制饼图。请随意试验并根据自己的需求进行更改。

结论

在本教程中，我们学习了如何使用Swift和QuartzCore框架快速绘制饼图。我希望这篇文章能够对你在实际需求中绘制饼图有所帮助。

参考资料

• QuartzCore Framework
• StackOverflow Swift Draw Pie Chart