1. 程式人生 > >使用CAShapeLayer與UIBezierPath畫動態柱狀圖

使用CAShapeLayer與UIBezierPath畫動態柱狀圖

</pre><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Menlo;"><pre name="code" class="objc" style="color: rgb(75, 209, 87); font-size: 11px;">//
//  TextView.m
//  練習
//
//  Created by 王文傑 on 16/9/20.
//  Copyright © 2016年 王文傑. All rights reserved.
//

#import "TextView.h"

@implementation TextView


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    
    NSArray * Value = @[@"60",@"90",@"100",@"80",@"200",@"30"];
    NSArray * month = @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月"];
    //獲取資料最大值
    float max = [[Value valueForKeyPath:@"@max.intValue"] floatValue];
    //計算座標比例
    float value = 140/max;
    //迴圈建立柱狀圖
    for (int i = 0; i<Value.count; i++) {
        /**
         *  
         //獲得上下文
         CGContextRef ctx=UIGraphicsGetCurrentContext();
         //第二個引數是x軸,第三個是y軸/起點
         CGContextMoveToPoint(ctx, 80+i*50, 200);
         //第二個引數是x軸,第三個是y軸/終點
         CGContextAddLineToPoint(ctx, 80+i*50, self.bounds.size.height-[[cost objectAtIndex:i] floatValue]*value);
         //設定繪圖的顏色
         CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0);
         //設定線條的寬度
         CGContextSetLineWidth(ctx, 10);
         //設定線條的起點和終點的樣式
         CGContextSetLineCap(ctx, kCGLineCapButt);
         //設定寬度
         CGContextSetLineWidth(ctx, 20);
         //繪製一條空心的線
         CGContextStrokePath(ctx);

         *
         *  @return 第一種方法
         */
        
        
        
        UIBezierPath *Polyline = [UIBezierPath bezierPath];
        //設定起點
        [Polyline moveToPoint:CGPointMake(80+i*50, 200)];
        //設定終點
        [Polyline addLineToPoint:CGPointMake(80+i*50,self.bounds.size.height-[[Value objectAtIndex:i] floatValue]*value)];
        //設定顏色
        [[UIColor clearColor] set];
        //設定寬度
        Polyline.lineWidth = 20;
        //新增到畫布
        [Polyline stroke];
        
        //新增CAShapeLayer
        CAShapeLayer *shapeLine = [[CAShapeLayer alloc]init];
        //設定顏色
        shapeLine.strokeColor = [UIColor colorWithRed:0.400 green:1.000 blue:1.000 alpha:0.8].CGColor;
        //設定寬度
        shapeLine.lineWidth = 20.0;
        //把CAShapeLayer新增到當前檢視CAShapeLayer
        [self.layer addSublayer:shapeLine];
        //把Polyline的路徑賦予shapeLine
        shapeLine.path = Polyline.CGPath;
        
        //開始新增動畫
        [CATransaction begin];
        //建立一個strokeEnd路徑的動畫
        CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        //動畫時間
        pathAnimation.duration = 2.0;
        //新增動畫樣式
        pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        //動畫起點
        pathAnimation.fromValue = @0.0f;
        //動畫停止位置
        pathAnimation.toValue   = @1.0f;
        //把動畫新增到CAShapeLayer
        [shapeLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
        //動畫終點
        shapeLine.strokeEnd = 1.0;
        //結束動畫
        [CATransaction commit];

        
        //柱狀圖值
        UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, self.bounds.size.height-20-[[Value objectAtIndex:i] floatValue]*value, 40, 20)];
        label.text = [NSString stringWithFormat:@"%@",[Value objectAtIndex:i]];
        label.textAlignment = NSTextAlignmentCenter;
        label.font = [UIFont systemFontOfSize:11];
        [self addSubview:label];
        //x軸座標
        UILabel * label1 = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, 200, 40, 20)];
        label1.text = [NSString stringWithFormat:@"%@",[month objectAtIndex:i]];
        label1.textAlignment = NSTextAlignmentCenter;
        label1.font = [UIFont systemFontOfSize:15];
        [self addSubview:label1];
        
    }
    
   
    
    //畫x軸
    for (int i = 0; i<15; i++) {
        UIBezierPath *Polyline = [UIBezierPath bezierPath];
        //設定起點
        [Polyline moveToPoint:CGPointMake(0, 200-i*10)];
        //設定終點
        [Polyline addLineToPoint:CGPointMake(self.bounds.size.width,200-i*10)];
        //設定顏色
        [[UIColor grayColor] set];
        //設定寬度
        Polyline.lineWidth = 0.3;
        //新增到畫布
        [Polyline stroke];
    }


}


@end
為了方便大家看的簡單明白,所以程式碼比較粗糙,也沒有封裝,應為需求開發網上找了好多UIBezierPath的資料都看的不是很明白,所以自己研究了半天寫出來給大家看看。

相關推薦

使用CAShapeLayerUIBezierPath動態

</pre><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Menlo;"><pre name="code" class="obj

d3.js(v5.7)完整地一個

img edi http 代碼 坐標 不能 畫布 分享 ueditor 一、首先定義畫布大小以及繪畫區域的位置(總不能頂著屏幕邊沿畫吧) 代碼: 圖示: 二、橫、縱向坐標軸 代碼: 圖示:

Echarts之動態

動態柱狀圖以及點選事件效果圖: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

matlab程式碼條紋

bwidth = size(bits,2); bheight = size(bits,1); bsize = bwidth * bheight; if ~isempty(colorlist)colorlist = uint8(255*colorlist);[colors,colori] = nextnonbw

ASP.NET+JQuery+.Ashx實現+百度Echarts 實現動態資料圖形報表的統計

在目前的一個專案中,需要用到報表表現資料,這些資料有多個維度,需要同時表現出來,同時可能會有大量資料呈現的需求,經過幾輪挑選,最終選擇了百度的echarts作為報表基礎類庫。echarts功能強大,介面優美。要呈現的資料就用柱狀圖來顯示了,柱狀圖更直觀的顯示出客戶最想要的東

使用seaborn堆積

問題描述: 原始表part-00000.csv中列name 有兩組值,一組是rmb,另一組是cis,所以想要實現按照name中資料分組的堆積柱狀圖。 1. 原始資料樣式 下載連結:http:/

python動態圖表視覺化:歷年軟科中國大學排行

本來想參照:https://mp.weixin.qq.com/s/e7Wd7aEatcLFGgJUDkg-EQ搞一個往年程式語言動態圖的,奈何找不到資料,有資料來源的歡迎在評論區留言。 這裡找到了一個,是2020年6月的程式語言排行,供大家看一下:https://www.tiobe.com/tiobe-ind

ECharts動態加載堆疊的實例

pos list ntb tar value set push show val 一、引入echarts.js文件(下載頁:http://echarts.baidu.com/download.html) 二、HTML代碼: <div style="width: 10

Highcharts 動態制作3D

nbsp ret isp cab AD quest pla objects AR 學習參考菜鳥網站:http://www.runoob.com/highcharts/highcharts-tutorial.html 我是通過後端返回設備數據,進行前端出圖,效果如下: 代碼

Matlab

Matlab 畫柱狀圖 errorlist=[std_dfg,std_dfgB,std_tli,std_tliB]; figure('Name','std of reconstruction error' ... ,'position',[100 200 1200 500]...

實現條形的結合,MPAndroidChart的簡單使用

先貼效果圖: 這種樣式的統計表格也是比較常用的,下面直接貼程式碼: public class ChartActivity extends BaseActivity { @BindView(R.id.chart1) MyCombinedChart mChart1;//完成

springboot動態載入Echarts

第一次寫部落格,廢話不多說,直接上程式碼 後臺程式碼 @RequestMapping("/rcbchart") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@Request

python 使用 matplotlib.pyplot來和餅

匯入包 import matplotlib.pyplot as plt 柱狀圖 最簡柱狀圖 # 顯示高度 def autolabel(rects): for rect in rects: height = rect.get_height() plt.text(r

vue專案中使用Echarts 動態更改圖表資料 , Vue 折線等圖表動態重新整理 ,

問題:在vue元件中,用echarts外掛 動態獲取、修改圖表資料 解決:已解決! 第一步:開啟cmd命令視窗 安裝echarts依賴 安裝:npm install echarts -S 第二步:在main.js中全域性引入   //引入echarts的圖表外掛

多系列php動態實現(ec)

<?php require_once 'data.php'; $arr1=$a->sum('answer','ask_id=1'); $arr2=$a->sum('answer','ask_id=2'); $arr3=$a->sum('answer','ask_id=3');

【Echarts】簡單實現——第一個的實現(在後臺動態獲取資料)

  第一次接觸這個東西,感覺還有點濛濛的。經過兩天的努力終於搞明白。下面我用自己的方式實現以下,方便大家理解。   下面是我使用一個簡單的mvc框架來實現這個demo。 效果圖: 步驟: 1、新建一個mvc框架的專案。 2、新建控制器:EchartsBa

用ECharts多柱子(可點選)

其實用ECharts畫柱子還是挺簡單的,多去官網看看官方文件,就理解了。 columLabel是多柱子的名字。columName 是橫座標。bgColorList 是柱子的顏色。arr 是每個柱子的值。list 是後臺傳過來的各個柱子的值,但是要經過處理賦值給arr ,賦值的方法也不只這一種

MATLAB中

論文中需要畫圖進行比較,感覺還是matlab畫起來比較方便,先把自己畫的圖及matlab程式碼放上。 y=[300 311;390 425; 312 321; 250 185; 550 535; 420 432; 410 520;]; b=bar(y); grid on; ch = get(b,

echarts ,折線互轉例項(資料動態請求後臺)

function initDayChart(){ var myChart = echarts.init(document.getElementById('appLoginLogDayChart')); myChart.setOption({ title : {

Android 實現視覺化動態音訊

public class FFTActivity extends Activity implements OnClickListener{ private Button button; private ImageView imageView; private int frequency = 8000;