iOS绘制五角能力图的Demo

只贴VC了:

//
//  ViewController.swift
//  AbilityDiagramDemo
//
//  Created by Heyuan Li on 17/2/8.
//  Copyright © 2017年 Heyuan Li. All rights reserved.
//

import UIKit
import SnapKit

class ViewController: UIViewController {

    private let abilityImageSize: CGFloat = 300

    private lazy var imageView: UIImageView = {
        let iv = UIImageView()
        iv.backgroundColor = UIColor.blue
        iv.image = self.drawAbilityCover()
        iv.layer.shouldRasterize = true
        return iv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    private func setupUI() {
        view.addSubview(self.imageView)

        imageView.snp.makeConstraints { (make) in
            make.width.equalTo(abilityImageSize)
            make.height.equalTo(abilityImageSize)
            make.center.equalToSuperview()
        }
    }

    ///  给定中心点,和外接圆半径,获取各个点
    private func calculatePolygonPoints(n: UInt, center: CGPoint, radius: CGFloat) -> [CGPoint] {
        var arr = [CGPoint]()

        let rotateDegree = CGFloat(540) / CGFloat(n) - 90
        /// let rotateDegree = 0

        for i in 0..<n {
            let degree = 2 * CGFloat.pi * (CGFloat(i) / CGFloat(n)) - CGFloat.pi / CGFloat(180) * CGFloat(rotateDegree)
            let x = center.x + radius * cos(degree)
            let y = center.y + radius * sin(degree)
            arr.append(CGPoint(x: rint(x), y:rint(y)))
        }

        debugPrint(arr)
        return arr
    }

    private func calculateRatioPoints(center: CGPoint, point: CGPoint, ratio: CGFloat) -> CGPoint {
        let newX = (point.x - center.x) * ratio + center.x
        let newY = (point.y - center.y) * ratio + center.y
        return CGPoint(x: rint(newX), y:rint(newY))
    }

    ///  绘制能力值图层
    private func drawAbilityCover() -> UIImage? {
        defer {
            ///  Context end
            UIGraphicsEndImageContext()
        }

        let size = CGSize(width: abilityImageSize, height: abilityImageSize)
        ///  Context begin
        UIGraphicsBeginImageContext(size)
        guard let ctx = UIGraphicsGetCurrentContext() else {
            return nil
        }

        ///  Draw Debug Circle
        ctx.setFillColor(UIColor.green.cgColor)
        ctx.fillEllipse(in: CGRect(x: 0, y: 0, width: abilityImageSize, height: abilityImageSize))

        ///  Center point
        let centerPoint = CGPoint(x: abilityImageSize / 2, y: abilityImageSize / 2)

        ///  Draw polygon path
        ctx.setFillColor(UIColor.red.withAlphaComponent(1.0).cgColor)
        ctx.setStrokeColor(UIColor.black.cgColor)
        let path = CGMutablePath()
        let polygonPoints = calculatePolygonPoints(n: 5,
                                            center: centerPoint,
                                            radius: abilityImageSize / 2)
        if polygonPoints.count > 0 {
            path.move(to: polygonPoints[0])
            for i in 1..<polygonPoints.count {
                path.addLine(to: polygonPoints[i])
            }
        }
        ctx.addPath(path)
        ctx.drawPath(using: .fill)

        ///  Draw ratio polygon path
        ctx.setFillColor(UIColor.black.withAlphaComponent(0.6).cgColor)
        ctx.setStrokeColor(UIColor.black.cgColor)
        let polygonPoints2 = polygonPoints.map { (point) -> CGPoint in
            return calculateRatioPoints(center: centerPoint, point: point, ratio: CGFloat(arc4random()) / CGFloat(UInt32.max))
        }
        debugPrint(polygonPoints2)
        let path2 = CGMutablePath()
        if polygonPoints2.count > 0 {
            path2.move(to: polygonPoints2[0])
            for i in 1..<polygonPoints2.count {
                path2.addLine(to: polygonPoints2[i])
            }
        }
        ctx.addPath(path2)
        ctx.drawPath(using: .fill)

        ///  Draw ratio polygon edge circle
        ctx.setFillColor(UIColor.yellow.withAlphaComponent(1.0).cgColor)
        ctx.setStrokeColor(UIColor.black.cgColor)
        let edgeCircleRadius: CGFloat = 4
        for point in polygonPoints2 {
            ctx.fillEllipse(in: CGRect(x: point.x - edgeCircleRadius,
                                       y: point.y - edgeCircleRadius,
                                       width: edgeCircleRadius * 2,
                                       height: edgeCircleRadius * 2))
        }

        /// Get UIImage
        let image = UIGraphicsGetImageFromCurrentImageContext()
        return image
    }

}

 

 

Leave a Reply

Your email address will not be published.