【自定义控件】练习:饼状图

效果

这里写图片描述

主要涉及:画圆弧、画文字

1、画圆弧:

RectF rect = new RectF(0,0,300,300);
canvas.drawArc(RectF rect,float startAngle,float swipAngle,boolean userCenter,Paint paint);

记录每一个结束时的角度,下一次开始的角度即为上次结束时的角度。

主要代码:

//计算每一个pie的角度
float startAngle = 0;//开始的角度
for (PieData data : pieData) {
    //将每一部分的圆弧画出来
    mPaint.setColor(data.getPieColor());//每一块的颜色
    float swipeAngle = data.getPieProportion() * 360;//每一块占多少角度
    canvas.drawArc(bigRect, startAngle, swipeAngle, true, mPaint);
   ...
}

2、画文字:

计算文本的位置
小圆半径 设为大圆半径的2/3

这里写图片描述

主要代码:

//画文本
float x0 = width / 2;
float y0 = height / 2;
float txtAngle = startAngle + swipeAngle / 2;
double radians = Math.toRadians(txtAngle);
double x1 = x0 + Math.cos(radians) * smallRadius;
double y1 = y0 + Math.sin(radians) * smallRadius;
Rect textRect = new Rect();
String pieName = data.getPieName();
mPaint.getTextBounds(pieName, 0, pieName.length(), textRect);

x1 = x1 - textRect.width() / 2;
y1 = y1 + textRect.height() / 2;

mPaint.setColor(data.getPieTxtColor());
mPaint.setTextSize(TranslateDimensionUtils.sp2px(mContext, data.getPieTextSize()));
canvas.drawText(pieName, (float) x1, (float) y1, mPaint);

代码:
https://github.com/WhatWeCan/customer_views/tree/master/PieView

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值