繪制餅圖

繪制餅圖步驟

  1. 新建一個(gè)類,繼承自UIView(略)

  2. 在-(void)drawRect:(CGRect)rect方法實(shí)現(xiàn)下述幾步

  3. 取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文(貝塞爾路徑不用)

  4. 拼接路徑,繪制相應(yīng)的圖形內(nèi)容

    • 根據(jù)餅圖大小分比例,寫入數(shù)組中
    • 根據(jù)比例大小,設(shè)置圓弧旋轉(zhuǎn)角度(即將360分比例),遍歷數(shù)組畫出所有圓?。淮嬖谝?guī)律startA = endA; angle = 比例 * 總度數(shù)360°; endA = startA + angle;
    • 每次畫出的圓弧都要將下面3步完成,即每畫一個(gè)圓弧就要渲染。
  • 把路徑添加到上下文(貝塞爾路徑不用)

  • 設(shè)置繪圖狀態(tài)

  • 利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面

- (void)drawRect:(CGRect)rect {
    // Drawing code

    NSArray *data = @[@25,@25,@50];

    // 圓心
   CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    CGFloat startA = 0;
    CGFloat endA = 0;
    CGFloat angle = 0;

//拼接路徑
    for (NSNumber *num in data) {
        startA = endA;
        //根據(jù)占比繪制圓弧,最終湊成一個(gè)圓
        angle = [num integerValue] / 100.0 * M_PI * 2;
        endA = startA + angle;
// 畫第一個(gè)扇形
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:startA endAngle:endA clockwise:YES];

// 連接一根線到圓心
    [path addLineToPoint:center];

// 設(shè)置繪圖狀態(tài)
    [[self randomColor] set];

// 渲染
    [path fill];
    }
}

// 封裝隨機(jī)顏色
- (UIColor *)randomColor
{
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;

    return [UIColor colorWithRed:r green:g blue:b alpha:1];
}

//點(diǎn)擊重繪(不必要)
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self setNeedsDisplay];
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這是看了小馬哥的視頻整理的筆記。這是看了小馬哥的視頻整理的筆記。這是看了小馬哥的視頻整理的筆記。(怕被罵說抄襲) ...
    CaesarsTesla閱讀 393評(píng)論 2 5
  • android繪制餅圖 按照規(guī)矩先上圖,動(dòng)畫效果有兩種(1.從0度漸進(jìn)到360度,2.每個(gè)小扇形從0漸進(jìn)到自己的弧...
    蓅哖伊人為誰(shuí)笑閱讀 1,708評(píng)論 0 2
  • UIBezierPath Class Reference 譯:UIBezierPath類封裝了Core Graph...
    鋼鉄俠閱讀 1,941評(píng)論 0 3
  • 18- UIBezierPath官方API中文翻譯(待校對(duì)) ----------------- 華麗的分割線 -...
    醉臥欄桿聽雨聲閱讀 1,159評(píng)論 1 1
  • Quartz2D以及drawRect的重繪機(jī)制字?jǐn)?shù)1487 閱讀21 評(píng)論1 喜歡1一、什么是Quartz2D Q...
    PurpleWind閱讀 907評(píng)論 0 3

友情鏈接更多精彩內(nèi)容