canvas教程

Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大

字号+ 作者:H5之家 来源:H5之家 2017-02-01 09:01 我要评论( )

这篇文章主要介绍了Android编程实现canvas绘制饼状统计图功能,可实现自动适应条目数量与大小的功能,涉及Android基于canvas的图形绘制相关操作技巧,需要的朋友可

public class PieChartView extends View { private int screenW, screenH; /** * The paint to draw text, pie and line. */ private Paint textPaint, piePaint, linePaint; /** * The center and the radius of the pie. */ private int pieCenterX, pieCenterY, pieRadius; /** * The oval to draw the oval in. */ private RectF pieOval; private float smallMargin; private int[] mPieColors = new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW, Color.MAGENTA, Color.CYAN}; private PieItemBean[] mPieItems; private float totalValue; public PieChartView(Context context) { super(context); init(context); } public PieChartView(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public PieChartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } private void init(Context context) { //init screen screenW = ScreenUtils.getScreenW(context); screenH = ScreenUtils.getScreenH(context); pieCenterX = screenW / 2; pieCenterY = screenH / 3; pieRadius = screenW / 4; smallMargin = ScreenUtils.dp2px(context, 5); pieOval = new RectF(); pieOval.left = pieCenterX - pieRadius; pieOval.top = pieCenterY - pieRadius; pieOval.right = pieCenterX + pieRadius; pieOval.bottom = pieCenterY + pieRadius; //The paint to draw text. textPaint = new Paint(); textPaint.setAntiAlias(true); textPaint.setTextSize(ScreenUtils.dp2px(context, 16)); //The paint to draw circle. piePaint = new Paint(); piePaint.setAntiAlias(true); piePaint.setStyle(Paint.Style.FILL); //The paint to draw line to show the concrete text linePaint = new Paint(); linePaint.setAntiAlias(true); linePaint.setStrokeWidth(ScreenUtils.dp2px(context, 1)); } //The degree position of the last item arc's center. private float lastDegree = 0; //The count of the continues 'small' item. private int addTimes = 0; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mPieItems != null && mPieItems.length > 0) { float start = 0.0f; for (int i = 0; i < mPieItems.length; i++) { //draw pie piePaint.setColor(mPieColors[i % mPieColors.length]); float sweep = mPieItems[i].getItemValue() / totalValue * 360; canvas.drawArc(pieOval, start, sweep, true, piePaint); //draw line away from the pie float radians = (float) ((start + sweep / 2) / 180 * Math.PI); float lineStartX = pieCenterX + pieRadius * 0.7f * (float) (Math.cos(radians)); float lineStartY = pieCenterY + pieRadius * 0.7f * (float) (Math.sin(radians)); float lineStopX, lineStopY; float rate; if (getOffset(start + sweep / 2) > 60) { rate = 1.3f; } else if (getOffset(start + sweep / 2) > 30) { rate = 1.2f; } else { rate = 1.1f; } //If the item is very small, make the text further away from the pie to avoid being hided by other text. if (start + sweep / 2 - lastDegree < 30) { addTimes++; rate += 0.2f * addTimes; } else { addTimes = 0; } lineStopX = pieCenterX + pieRadius * rate * (float) (Math.cos(radians)); lineStopY = pieCenterY + pieRadius * rate * (float) (Math.sin(radians)); canvas.drawLine(lineStartX, lineStartY, lineStopX, lineStopY, linePaint); //write text String itemTypeText = mPieItems[i].getItemType(); String itemPercentText = Utility.formatFloat(mPieItems[i].getItemValue() / totalValue * 100) + "%"; float itemTypeTextLen = textPaint.measureText(itemTypeText); float itemPercentTextLen = textPaint.measureText(itemPercentText); float lineTextWidth = Math.max(itemTypeTextLen, itemPercentTextLen); float textStartX = lineStopX; float textStartY = lineStopY - smallMargin; float percentStartX = lineStopX; float percentStartY = lineStopY + textPaint.getTextSize(); if (lineStartX > pieCenterX) { textStartX += (smallMargin + Math.abs(itemTypeTextLen - lineTextWidth) / 2); percentStartX += (smallMargin + Math.abs(itemPercentTextLen - lineTextWidth) / 2); } else { textStartX -= (smallMargin + lineTextWidth - Math.abs(itemTypeTextLen - lineTextWidth) / 2); percentStartX -= (smallMargin + lineTextWidth - Math.abs(itemPercentTextLen - lineTextWidth) / 2); } canvas.drawText(itemTypeText, textStartX, textStartY, textPaint); //draw percent text canvas.drawText(itemPercentText, percentStartX, percentStartY, textPaint); //draw text underline float textLineStopX = lineStopX; if (lineStartX > pieCenterX) { textLineStopX += (lineTextWidth + smallMargin * 2); } else { textLineStopX -= (lineTextWidth + smallMargin * 2); } canvas.drawLine(lineStopX, lineStopY, textLineStopX, lineStopY, linePaint); lastDegree = start + sweep / 2; start += sweep; } } } public PieItemBean[] getPieItems() { return mPieItems; } public void setPieItems(PieItemBean[] pieItems) { this.mPieItems = pieItems; totalValue = 0; for (PieItemBean item : mPieItems) { totalValue += item.getItemValue(); } invalidate(); } private float getOffset(float radius) { int a = (int) (radius % 360 / 90); switch (a) { case 0: return radius; case 1: return 180 - radius; case 2: return radius - 180; case 3: return 360 - radius; } return radius; } static class PieItemBean { private String itemType; private float itemValue; PieItemBean(String itemType, float itemValue) { this.itemType = itemType; this.itemValue = itemValue; } public String getItemType() { return itemType; } public void setItemType(String itemType) { this.itemType = itemType; } public float getItemValue() { return itemValue; } public void setItemValue(float itemValue) { this.itemValue = itemValue; } } }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • heatmap.js 一个用canvas画热力图的利器

    heatmap.js 一个用canvas画热力图的利器

    2017-02-01 09:01

  • html5 Canvas鐢诲浘鏁欑▼(10)鈥旀妸闈㈡媶鎴愮嚎鏉℃ā鎷熷嚭鍦

    html5 Canvas鐢诲浘鏁欑▼(10)鈥旀妸闈㈡媶鎴愮嚎鏉℃ā鎷熷嚭鍦

    2017-02-01 08:00

  • canvas画图完成后,转base64编码放在图片上

    canvas画图完成后,转base64编码放在图片上

    2017-01-31 18:05

  • 基于HTML5Canvas和jQuery的画图工具的实现

    基于HTML5Canvas和jQuery的画图工具的实现

    2017-01-31 18:03

网友点评
p