自制饼状图

说明:

自己写了一个饼状图的控件,可以旋转(如果嫌弃旋转范围太窄,可自行调节),可以出发点击事件。

注意:

如果视图放在scrollView,或者有特定手势存在的视图上的时候;会出现旋转不畅的现象,如果能
解决,自行解决;解决不了可以放弃旋转功能,或者放弃使用该控件。
ps:我是遇到了放在一个第三方的控件上,无论我怎么调整都被它影响,所以在公司app中,我放弃了
旋转功能

代码:

/**********************************/
/*********     饼状图     **********/
/**********************************/

class XJJPCItem {
var title: String?
var description: String?
var id: Int = 0
var scale: CGFloat = 0
var lineWidth: CGFloat = 1
var lineColor: UIColor?
var strockColor: UIColor?
var strockWidth: CGFloat = 1
var fillColor: UIColor?

//记录值,不用传入
var startAngle: CGFloat?
var endAngle: CGFloat?
var isSelected: Bool = false

init(_ title: String?,
     description: String?,
     id: Int?,
     scale: CGFloat?,
     lineWidth: CGFloat?,
     lineColor: UIColor?,
     strockColor: UIColor?,
     strockWidth: CGFloat?,
     fillColor: UIColor?) {
    self.title = title
    self.description = description
    self.id = id ?? 0
    self.scale = scale ?? 0
    self.lineWidth = lineWidth ?? 1
    self.lineColor = lineColor
    self.strockColor = strockColor
    self.strockWidth = strockWidth ?? 1
    self.fillColor = fillColor
}
}

class XJJPCView: UIView {
var touchUpBlock: ((_ id: Int) -> Void)?

var dataSource: [XJJPCItem]? {
    didSet {
        guard let data = dataSource else {return}
        self.source = data
        self.setNeedsDisplay()
    }
}

var defaultAngle: CGFloat = -1 / 4//以pi_2为基础设置,-1/4即为:-pi/2
var offset: CGFloat?//位移量,用于手势滑动

//文字属性
var textFont: UIFont!
var textColor: UIColor!

override init(frame: CGRect) {
    super.init(frame: frame)
    self.initUI()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touche: UITouch in touches {
        let point: CGPoint = touche.location(in: self)
        self.tap(point)
    }
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touche: UITouch in touches {
        let point: CGPoint = touche.location(in: self)
        let previous: CGPoint = touche.previousLocation(in: self)
        if (point.x - previous.x) > 1 || (point.y - previous.y) > 1 {
            self.move(point, previous)
        }
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    
}

//移动
private func move(_ point: CGPoint, _ previous: CGPoint) {
    let center: CGPoint = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
    let x: CGFloat = point.x - center.x
    let y: CGFloat = point.y - previous.y
    let per_angle: CGFloat = pi_2 / 100
    if x > 0 {
        self.diff_angle += per_angle * (y / 10)
    }else {
        self.diff_angle += -per_angle * (y / 10)
    }
    self.setNeedsDisplay()
}

//点击
private func tap(_ point: CGPoint) {
    let center: CGPoint = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
    let x: Double = Double(point.x - center.x)
    let y: Double = Double(point.y - center.y)
    let lenght: Double = sqrt(x * x + y * y)
    let angle: CGFloat = CGFloat(acos(x / lenght))
    let d_angle: CGFloat = (y >= 0) ? angle : -angle
    let a = self.angleTranslate(d_angle)
    
    if let r = self.sectorRadius {
        let _r = Double(r)
        if x > _r || x < -_r || y > _r || y < -_r {
            return
        }
    }
    
    self.source.forEach {[weak self] (item) in
        guard let sself = self else {return}
        item.isSelected = false
        if let b = item.startAngle, let c = item.endAngle {
            if b > c {
                if (a > b && a <= pi_2) || (a < c && a > 0) {
                    sself.touchUpBlock?(item.id)
                    item.isSelected = true
                }
            }else {
                if a > b, a < c {
                    sself.touchUpBlock?(item.id)
                    item.isSelected = true
                }
            }
        }
        sself.setNeedsDisplay()
    }
}

private let pi_2 = CGFloat(Double.pi * 2)
private var sectorRadius: CGFloat?//扇形区域半径

private var diff_angle: CGFloat = 0//旋转时的变化量

private var source: [XJJPCItem] = []

private func initUI() {
    self.backgroundColor = UIColor.clear
    self.textFont = UIFont.boldSystemFont(ofSize: 13)
    self.textColor = #colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1)
}

//将角度转化为0~pi_2之间的值
private func angleTranslate(_ angle: CGFloat) -> CGFloat {
    if angle < 0 {
        let multiple: Int = Int(-angle / pi_2) + 1
        return angle + pi_2 * CGFloat(multiple)
    }else if angle > pi_2 {
        let multiple = Int(angle / pi_2)
        return angle - pi_2 * CGFloat(multiple)
    }
    
    return angle
}

override func draw(_ rect: CGRect) {
    super.draw(rect)
    guard let current = UIGraphicsGetCurrentContext() else {return}
    
    current.clear(rect)
    current.setFillColor(UIColor.clear.cgColor)
    current.fill(rect)
    
    self.drawOnContext(current)
}

//根据数据画出图形
private func drawOnContext(_ context: CGContext) {
    guard source.count > 0 else {return}
    
    let center: CGPoint = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
    let r: CGFloat = self.bounds.height / 5 * 3 / 2
    var start: CGFloat = 0
    var end: CGFloat = 0
    
    self.sectorRadius = r
    
    var currentAngle: CGFloat = defaultAngle * pi_2 + diff_angle
    
    for item in source {
        start = currentAngle
        end = start + item.scale * pi_2
        let text: String = (item.title ?? "") + ": \(item.scale)"
        
        self.creatSector(context, center, r, start, end, item.strockWidth, item.strockColor ?? #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1), item.fillColor ?? #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1))
        let result = self.creatLine(context, center, r, start, item.scale * pi_2, item.lineColor ?? #colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1), item.lineWidth)
        self.creatText(context, text, result.0, result.1)
        
        if item.isSelected == true {
            self.creatSelectSector(context, center, r + 5, start, end, 10, item.strockColor ?? #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1), item.fillColor ?? #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1))
        }
        
        currentAngle = end
        
        item.startAngle = self.angleTranslate(start)
        item.endAngle = self.angleTranslate(end)
    }
}

//画扇形
private func creatSector(_ context: CGContext,
                         _ center: CGPoint,
                         _ radius: CGFloat,
                         _ startAngle: CGFloat,
                         _ endAngle: CGFloat,
                         _ strockWidth: CGFloat,
                         _ strockColor: UIColor,
                         _ fillColor: UIColor) {
    
    context.move(to: center)
    context.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
    context.setStrokeColor(strockColor.cgColor)
    context.setFillColor(fillColor.cgColor)
    context.setLineWidth(strockWidth)
    context.closePath()
    
    context.drawPath(using: .fillStroke)
}

//选中状态圆弧
private func creatSelectSector(_ context: CGContext,
                               _ center: CGPoint,
                               _ radius: CGFloat,
                               _ startAngle: CGFloat,
                               _ endAngle: CGFloat,
                               _ strockWidth: CGFloat,
                               _ strockColor: UIColor,
                               _ fillColor: UIColor) {
    let s_color: UIColor = fillColor.withAlphaComponent(0.4)
    
    context.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
    context.setStrokeColor(s_color.cgColor)
    context.setLineWidth(strockWidth)
    
    context.drawPath(using: .stroke)
}

//找到圆弧上直线经过的点,并返回圆心到这一点所在直线的任意一点,通过scale实现
private func findPoint(_ center: CGPoint,
                       _ radius: CGFloat,
                       _ startAngle: CGFloat,
                       _ moveAngle: CGFloat,
                       _ scale: CGFloat) -> CGPoint {
    let angle: CGFloat = startAngle + moveAngle / 2
    let o_x: CGFloat = radius * cos(angle)
    let o_y: CGFloat = radius * sin(angle)
    let c_x: CGFloat = center.x + o_x * scale
    let c_y: CGFloat = center.y + o_y * scale
    
    return CGPoint(x: c_x, y: c_y)
}

//画线
private func creatLine(_ context: CGContext,
                       _ center: CGPoint,
                       _ radius: CGFloat,
                       _ startAngle: CGFloat,
                       _ moveAngle: CGFloat,
                       _ lineColor: UIColor,
                       _ lineWidth: CGFloat) -> (CGPoint, Bool) {
    let centerAngle: CGFloat = self.angleTranslate(startAngle + moveAngle / 2)
    let isLeft: Bool = (centerAngle > pi_2 / 4) && (centerAngle < pi_2 / 4 * 3)
    let start: CGPoint = self.findPoint(center, radius, startAngle, moveAngle, 0.8)
    let middle: CGPoint = self.findPoint(center, radius, startAngle, moveAngle, 1.2)
    let diff: CGFloat = 1 - fabs(middle.x - center.x) / (radius * 1.2)
    let end: CGPoint = CGPoint(x: middle.x + (isLeft ? -20 : 20) * diff, y: middle.y)
    
    context.move(to: start)
    context.addLine(to: middle)
    context.addLine(to: end)
    context.setLineWidth(lineWidth)
    context.setStrokeColor(lineColor.cgColor)
    
    context.drawPath(using: .stroke)
    
    return (end, isLeft)
}

//写文字
private func creatText(_ context: CGContext, _ text: String, _ position: CGPoint, _ isLeft: Bool) {
    let style = NSMutableParagraphStyle()
    style.lineBreakMode = .byWordWrapping
    style.alignment = .center
    
    /*之前的写法
     let dic: [String : Any] = [
     NSFontAttributeName: textFont,
     NSForegroundColorAttributeName: textColor,
     NSParagraphStyleAttributeName: style,
     ]
     */
    
    let dic: [NSAttributedStringKey : Any] = [
        .font: textFont,
        .foregroundColor: textColor,
        .paragraphStyle: style,
        ]
    let size = text.size(withAttributes: dic)
    let x: CGFloat = isLeft ? (position.x - size.width) : position.x
    let y: CGFloat = position.y - size.height / 2
    let rect = CGRect(x: x,  y: y, width: size.width, height: size.height)
    text.draw(in: rect, withAttributes: dic)
}

}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3 119
  • 저는 오늘 "계춘할망" 을 봤어요. 이번이 두번째있는데, 저음 같아서, 재미있었어요. 윤여정 씨에 표정...
    广井佑树阅读 442评论 2 2
  • 四天时间连听带读,完成了《魔鬼经济学1》,这是一本很有趣,但又很有料的书。全书都在围绕一句话在讲故事,那就是揭示隐...
    Winning113阅读 183评论 0 0
  • 家里旧藏有一册《济慈诗选》朱维基译本。上海译文出版社1983年版。这一册济慈诗的译本,具体什么时候购买的,...
    南风之薰专栏阅读 751评论 2 4
  • 本周是主题作业,我们队经过讨论投票最后定的家庭主题,冥思了半天时间定下了自己每天鼓励家人至少一次的小目标,过去几天...
    刘伟的空间阅读 399评论 3 0