美文网首页
iOS开发中利用贝塞尔曲线画饼状图

iOS开发中利用贝塞尔曲线画饼状图

作者: 梁森的简书 | 来源:发表于2022-02-24 09:24 被阅读0次

看.m中的代码

#import "BezierView.h"

#define Color(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
#define RandomColor  Color(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256))

@interface BezierView ()
/// 中间镂空部分的layer
@property (nonatomic,strong) CAShapeLayer *placeRLayer;
@property (nonatomic, strong) UIColor *placeColor;
@end

@implementation BezierView

/**
 画饼状图
 */
- (void)drawBieChart:(NSArray *)targetValues placeColor:(nonnull UIColor *)placeColor {
    self.placeColor = placeColor;
    //移除之前添加的子layer,避免重复添加
    while (self.layer.sublayers.count) {
        [self.layer.sublayers.lastObject removeFromSuperlayer];
    }
    //设置圆的原点、半径
    CGPoint point = CGPointMake(self.frame.size.width / 2.0, self.frame.size.height / 2.0);
    CGFloat startAngle = 1.5 * M_PI;    // 从十二点方向开始画
    CGFloat endAngle;
    CGFloat radius = self.frame.size.width / 2.0;
    
    //计算总数
    __block CGFloat allValues = 0;
    [targetValues enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        allValues += [obj floatValue];
    }];
    //画扇形图
    for (int i = 0; i < targetValues.count; i++) {
        CGFloat value = [targetValues[i] floatValue];
        endAngle = startAngle + value / allValues * 2 * M_PI;
        UIBezierPath * beiPath = [UIBezierPath bezierPathWithArcCenter:point
                                                                radius:radius
                                                            startAngle:startAngle
                                                              endAngle:endAngle
                                                             clockwise:YES];
        [beiPath addLineToPoint:point];
        [beiPath closePath];
        //渲染颜色
        CAShapeLayer * layer = [CAShapeLayer layer];
        layer.path = beiPath.CGPath;
        layer.lineWidth = 1;
        layer.strokeColor = UIColor.clearColor.CGColor;
        layer.fillColor = RandomColor.CGColor;
        [self.layer addSublayer:layer];
        
        //以上次终点为下次绘制的起点
        startAngle = endAngle;
    }
    
    CGFloat r = self.frame.size.width * 0.3;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point
                                                        radius:r
                                                    startAngle:0
                                                      endAngle:2 * M_PI
                                                     clockwise:YES];
    [path addLineToPoint:point];
    self.placeRLayer.path = path.CGPath;
    [self.layer addSublayer:self.placeRLayer];
    
}

- (CAShapeLayer *)placeRLayer{
    if (!_placeRLayer) {
        _placeRLayer = [CAShapeLayer layer];
        _placeRLayer.fillColor = self.placeColor.CGColor;
    }
    return _placeRLayer;
}

@end

在创建UIBezierPath对象的时候首先要确定它的中心点、半径大小、开始点、结束点,UIBezierPath对象创建完成后要将该对象的CGPath赋值给一个CAShapeLayer对象的path属性,并将CAShapeLayer对象添加到某个layer上。

创建UIBezierPath对象的bezierPathWithArcCenter方法最后一个属性clockwise代码是否需要顺时针。

三点钟方向为0(0度)和2M_PI(360度),6点钟方向为0.5M_PI(90度),9点钟方向为M_PI(180度),12点钟方向为1.5M_PI(270度),一圈360度=2M_PI。

相关文章

  • iOS开发中利用贝塞尔曲线画饼状图

    看.m中的代码 在创建UIBezierPath对象的时候首先要确定它的中心点、半径大小、开始点、结束点,UIBez...

  • ios知识点(7)贝塞尔曲线

    贝塞尔曲线扫盲iOS UIBezierPath贝塞尔曲线常用方法iOS UIBezierPath(贝塞尔曲线)iO...

  • 一些贝塞尔曲线的用法

    贝塞尔曲线画饼图中的扇形: 贝塞尔曲线画类似抛物线的曲线有control点的

  • Bezier曲线

    参考自iOS开发 贝塞尔曲线UIBezierPath和iOS-UI进阶13 - 贝塞尔曲线和帧动画结合 使用UIB...

  • 贝塞尔曲线原理及在iOS中使用介绍

    贝塞尔曲线是指可以通过一些控制点去控制曲线的形状并且保持曲线的平滑特性,不会让人感觉到突兀。在iOS开发中,贝塞尔...

  • Flutter之 贝塞尔曲线(一)

    贝塞尔曲线简介 一阶贝塞尔曲线 公式 二阶贝塞尔曲线 对于二阶贝塞尔曲线,其实你可以理解为:在上利用一阶公式求出点...

  • 使用贝塞尔曲线画饼图

    没什么好说的上代码吧! 利用代理和数据源,让用户设置数据和半径及相应的颜色;在相应的控制器内实现代理方法和数据源方...

  • 实现波浪圆形进度控件 WaveProgress

    效果图 绘制波浪效果 上图中有4条贝塞尔曲线(当然你也可以利用正弦曲线画,近段时间接触了贝塞尔曲线,所以用它来练手...

  • 刮刮乐效果

    实现原理: 利用layer的mask遮罩 + 贝塞尔曲线UIBezierPath 关键代码: 效果图:

  • Android贝塞尔曲线相关资料

    资料整理: Android-贝塞尔曲线 贝塞尔曲线扫盲 练习贝塞尔曲线 贝塞尔曲线绘制在线演示(带坐标) 生成三阶...

网友评论

      本文标题:iOS开发中利用贝塞尔曲线画饼状图

      本文链接:https://www.haomeiwen.com/subject/vkxalrtx.html