android图片花,Android中使用Canvas绘制南丁格尔玫瑰图(Nightingale rose diagram)
南丁格尔玫瑰图 在常规图表中实在很惊艳，但我初看没看懂，一查原来南丁格尔这么伟大，确实值得尊敬。
再仔细研究了下这种图的构成，发现原来就是把柱形图的柱形换成了扇形图的半径来表示，当然，变种有好多，我这只是说我理解的这种。
知道了其构成方式后就好实现了，依传入参数个数决定其扇形角度，依百分比决定其扇形的半径长度，然后就一切都水到渠成了。
漂亮的美图献上:
附上实现代码:
package com.xcl.chart;
/**
* Canvas练习
* 自已画南丁格尔玫瑰图(Nightingale rose diagram)
*
* author:xiongchuanliang
* date:2014-4-12
*/
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.DisplayMetrics;
import android.view.View;
public class PanelRoseChart extends View{
private int ScrWidth,ScrHeight;
//演示用的百分比例,实际使用中，即为外部传入的比例参数
private final float arrPer[] = new float[]{40f,50f,60f,35f,70f,80f,90f};
//演示用标签
private final String arrPerLabel[] = new String[]{"PostgreSQL","Sybase","DB2","国产及其它","MySQL","Ms Sql","Oracle"};
//RGB颜色数组
private final int arrColorRgb[][] = { {77, 83, 97},
{148, 159, 181},
{253, 180, 90},
{52, 194, 188},
{39, 51, 72},
{255, 135, 195},
{215, 124, 124}} ;
public PanelRoseChart(Context context) {
super(context);
// TODO Auto-generated constructor stub
//屏幕信息
DisplayMetrics dm = getResources().getDisplayMetrics();
ScrHeight = dm.heightPixels;
ScrWidth = dm.widthPixels;
}
public void onDraw(Canvas canvas){
//画布背景
canvas.drawColor(Color.BLACK);
float cirX = ScrWidth / 2;
float cirY = ScrHeight / 3 ;
float radius = ScrHeight / 5 ;//150;
float arcLeft = cirX - radius;
float arcTop = cirY - radius ;
float arcRight = cirX + radius ;
float arcBottom = cirY + radius ;
RectF arcRF0 = new RectF(arcLeft ,arcTop,arcRight,arcBottom);
//画笔初始化
Paint PaintArc = new Paint();
Paint PaintLabel = new Paint();
PaintLabel.setColor(Color.WHITE);
PaintLabel.setTextSize(16);
PaintLabel.setAntiAlias(true);
PaintArc.setAntiAlias(true);
//位置计算类
XChartCalc xcalc = new XChartCalc();
float Percentage = 0.0f;
float CurrPer = 0.0f;
float NewRaidus = 0.0f;
int i= 0;
//将百分比转换为扇形半径长度
Percentage = 360 / arrPer.length;
Percentage = (float)(Math.round(Percentage *100))/100;
for(i=0; i
{
//将百分比转换为新扇区的半径
NewRaidus = radius * (arrPer[i]/ 100);
NewRaidus = (float)(Math.round(NewRaidus *100))/100;
float NewarcLeft = cirX - NewRaidus;
float NewarcTop = cirY - NewRaidus ;
float NewarcRight = cirX + NewRaidus ;
float NewarcBottom = cirY + NewRaidus ;
RectF NewarcRF = new RectF(NewarcLeft ,NewarcTop,NewarcRight,NewarcBottom);
//分配颜色
PaintArc.setARGB(255,arrColorRgb[i][0], arrColorRgb[i][1], arrColorRgb[i][2]);
//在饼图中显示所占比例
canvas.drawArc(NewarcRF, CurrPer, Percentage, true, PaintArc);
//计算百分比标签
xcalc.CalcArcEndPointXY(cirX, cirY, radius - radius/2/2, CurrPer + Percentage/2);
//标识
canvas.drawText(arrPerLabel[i],xcalc.getPosX(), xcalc.getPosY() ,PaintLabel);
//下次的起始角度
CurrPer += Percentage;
}
//外环
PaintLabel.setStyle(Style.STROKE);
PaintLabel.setColor(Color.GREEN);
canvas.drawCircle(cirX,cirY,radius,PaintLabel);
canvas.drawText("author:xiongchuanliang", 10, ScrHeight - 200, PaintLabel);
}
}
代码实现起来很容易，但这种图的设计创意确实非常好。 叹服。
感兴趣的可以看看。
相关知识
Android 风向玫瑰图绘制
在线制作南丁格尔玫瑰图
Android使用字体图标库
在Android开发中怎么实现花瓣飘落效果？实现花瓣飘落的步骤！
给 Android 开发者的 Flutter 指南
(摘自童话)he Nightingale and the Rose 夜莺与玫瑰(童话) BY 王尔德
Android简单实现汉字笔顺动画——Java版
【Android开发那点破事】Android中Activity的生命周期
android 控件花屏问题
Android架构体系化学习与面试题期刊
网址: android图片花,Android中使用Canvas绘制南丁格尔玫瑰图(Nightingale rose diagram) https://m.huajiangbk.com/newsview1545136.html
| 上一篇: 仿macos风格的windows |
下一篇: python做图表的模块有哪些, |
