canvas绘制练习——自定义一个简单的雷达图

实现效果：

坐标系的问题：
在绘制图形时，X轴的正方向是水平向左，Y轴的正方向是垂直向下的。

开始实现：
鉴于雷达图是种中心对称的图形，所有顶点都在同一个圆上。因此第一步应该是确定这个圆的半径。
要想完整显示整个图形，那半径肯定是不能超过画布里面长宽最短的一个，而且里面还包含文字，因此确定半径时还需要把文字的长度和高度考虑进去。

float radius ;
if(isX){  
   //水平方向较短,计算半径时只考虑字高    
  radius = (distance - 4 * mTextSize)/2;
}else {    
  //垂直方向较短,计算半径时要考虑字长的总长度    
  int maxLength = 0;    
  for(Item item : mItemList){        
    if(item.itemName.length() > maxLength){            
      maxLength = item.itemName.length();        
    }    
  }    
  radius = distance/2 - (maxLength + 1)*mTextSize;
}

接下来还需要确定的就是各个顶点的坐标了，因为整个图形里面的其他元素都可以通过这几个顶点坐标来计算出来。
考虑到文字的方向都需要按照水平显示，不旋转canvas，显然更容易处理。而且根据雷达图的图形特性，把绘制坐标移动到画布中间，在极坐标里面把正上方的点定为第一个顶点，然后通过等角度的旋转就能得出其他的顶点的极坐标位置了，最后将点转换为直接坐标系的坐标。这样就得多所有顶点的坐标了。

private final static float firstAngle = (float) (-Math.PI/2);

for(int i = 0; i < itemNum ; i++){    
  Point point = new Point();    
  double mDegrees = firstAngle + i * angle;    
  point.y = (float) (radius * Math.sin(mDegrees));    
  point.x = (float)( radius * Math.cos(mDegrees));    
  points.add(point);
}

接下来就是有了这些基础数据就可以绘制图形了

private void drawMap(Canvas canvas){    
  Paint bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);   
  bPaint.setColor(colorLineBase);   
  canvas.translate(canvas.getWidth()/2,canvas.getHeight()/2);   

  //各顶点与中点的连线   
  for(Point c : points){       
     canvas.drawLine(0,0,c.x,c.y,bPaint);    
  }  

  //各顶点之间的连线   
  for(int i = 0; i < itemNum && itemNum > 1;i++){     
     Point item = points.get(i);       
     Point itemNext =  i== itemNum -1 ? points.get(0) : points.get(i + 1);    
     canvas.drawLine(item.x,item.y, itemNext.x, itemNext.y,bPaint);     
     canvas.drawLine(item.x/2,item.y/2, itemNext.x/2, itemNext.y/2,bPaint);   
  }   
 
  //绘制各项文字
  TextPaint tPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
  tPaint.setColor(colorText);
  tPaint.setTextSize(mTextSize);
  for(int i = 0; i < itemNum; i++){    
    Point point = points.get(i);    
    Item item = mItemList.get(i);    
    float mx = point.x;    
    float my = point.y;    
    float textLength = item.itemName.length() * mTextSize;    
    if( mx < 1 && mx > -1){
        //因为计算精度的问题，不能准确在垂直方向，只能指定一个范围来捕捉        
        mx = - textLength/2;        
        if(my < 0){            
          my = my - mTextSize/2;        
        }else {            
          my = my + mTextSize*3/2;        
        }    
    }else if(mx > 0){        
        mx = mx + mTextSize/2;        
        if(my > 0){            
          my = my + mTextSize/2;        
        }    
    }else if(mx < 0){        
      mx = mx - textLength - mTextSize/2;        
      if(my > 0){            
        my = my + mTextSize/2;        
      }    
    }    
    canvas.drawText(item.itemName,mx,my,tPaint);
  }

  //绘制各项数据的分布图   
  Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  Paint paintPath = new Paint(Paint.ANTI_ALIAS_FLAG);  
  paintPath.setStyle(Paint.Style.FILL);    
  paintPath.setColor(colorMap);   
  paintPath.setAlpha(255/2);   
  Path path = new Path(); 
  paint.setColor(colorMap);   
  for(int i = 0; i < itemNum; i++){     
    int position = i < itemNum - 1 ? i+1 : 0;     
    Point point = points.get(i);     
    Item item = mItemList.get(i);      
    Point nextPoint = points.get(position);   
    Item nextItem = mItemList.get(position);    
    float scale = item.value/mTotalValue;    
    float scaleNext =  nextItem.value/mTotalValue;      
    canvas.drawLine(point.x * scale, point.y * scale, nextPoint.x * scaleNext, nextPoint.y * scaleNext, paint);     
    if(i==0){           
      path.moveTo(point.x * scale, point.y * scale);      
    }      
    path.lineTo(nextPoint.x * scaleNext, nextPoint.y * scaleNext);    
  }   
   canvas.drawPath(path,paintPath);
}

项目代码：https://github.com/clam314/DiagramMap