iOS绘制五角能力图的Demo

只贴VC了:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//
// 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
}
}
// // 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 } }
//
//  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. Required fields are marked *