Android View专题3--使用Canvas绘制饼状图等有趣图形

基本概念

  Canvas:我们可以称之为画布，能够在上面绘制各种东西，是安卓平台2D图形绘制的基础，非常强大。

饼状图实现

饼状图

关键步骤及代码：

• 1 获取宽高，计算出半径R

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
       super.onSizeChanged(w, h, oldw, oldh);
       //1 获取宽高，计算出半径R
       width = w;
       height = h;
       circleR = Math.min(width,height)/2;
  }
  

• 2 移动到圆心

• 3 根据角度绘制 『弧度』
  @Override
  protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

     //2 移动到圆心开始绘制
     canvas.translate(width/2,height/2);
     RectF rectF = new RectF(-circleR,-circleR,circleR,circleR);
  
     for (int index=0;index < list.size();index++){
         PieData pieData =list.get(index);
         mPaint.setColor(getResources().getColor(pieData.color));
         //3 根据角度确定绘制弧度
         canvas.drawArc(rectF,currentAngle,pieData.angle,true,mPaint);
         currentAngle = currentAngle+pieData.angle;
     }
   }
  

两个简单的图形

两个有趣的图形

• 1 圆形
  @Override
  protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.translate(width/2,height/2);

    // 绘制两个圆形
    canvas.drawCircle(0,0,MAX_RADIU,mPaint);
    canvas.drawCircle(0,0,MIN_RADIU,mPaint);
    for (int index =0;index < 20; index++){
        canvas.drawLine(0,MIN_RADIU,0,MAX_RADIU,mPaint);
        canvas.rotate(20);
    }
  

  }

• 2 正方形
  @Override
  protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.translate(width/2,height/2);

    for (int index =0;index < 10; index++){
        //对画布进行缩放
        canvas.scale(0.8f,0.8f);
        canvas.drawRect(rectF,mPaint);
    }
  

  }

Demo源码：

Github源码

参考文章

当前Markdown语法与效果
安卓自定义View教程目录

简单造轮子系列 - 自定义支持手势旋转的Android Radar Chart(蛛网雷达图)

自定义View——画一个雷达图