拋物線大神繪制相關(guān)的文章https://hencoder.com/ui-1-1/
先放效果圖：
未標(biāo)題-2.gif
繪制思路：
繪制餅圖嗦董，考慮到各餅塊之間有間隔养晋，先定義基準(zhǔn)圓心 囊拜， 圓半徑俱恶，普通餅圖偏移量以及點(diǎn)擊狀態(tài)餅圖偏移量兔港。
private static final float COMMONPIARCSPACE = 2;//普通餅圖偏移量
private static final float PUSHOUTPIARCSPACE = 15;//點(diǎn)擊狀態(tài)餅圖偏移量
private static final Point point = new Point(300,300);//圓心
private static final float circleR = 200;//圓半徑
餅圖圓心的位置與餅圖的中線的夾角相關(guān),舉個例子：
image.png
當(dāng)餅圖弧度為 PI/2時(shí)庸毫，中線夾角為 PI/4，圓心從O(0,0)移動4個偏移量的位置為O(2,2)衫樊，即圓心分別在X軸及Y軸移動2個位置飒赃。上代碼：
/**
* 繪制每個百分比餅圖
* @param canvas
* @param startDegree 圓弧開始的角度
* @param degree 圓弧劃過的角度
* @param color 餅圖顏色
* @param drawDeltaValue 餅圖與基準(zhǔn)圓心的偏移量
*/
private void commonDrawPi(Canvas canvas,double startDegree,float degree,String color,float drawDeltaValue){
double averageDegree = startDegree + degree/2;
double deltaX = Math.cos(Math.toRadians(averageDegree));
double deltaY = Math.sin(Math.toRadians(averageDegree));
BigDecimal bigDeltaX = new BigDecimal(String.valueOf(deltaX)).setScale(16, BigDecimal.ROUND_HALF_UP);
BigDecimal bigDeltaY = new BigDecimal(String.valueOf(deltaY)).setScale(16, BigDecimal.ROUND_HALF_UP);
float changeX = bigDeltaX.floatValue() * drawDeltaValue;
float changeY = bigDeltaY.floatValue() * drawDeltaValue;
RectF rectF = new RectF(point.x - circleR + changeX
,point.y - circleR + changeY
,point.x + circleR + changeX
,point.y + circleR + changeY);
paint.setColor(Color.parseColor(color));
canvas.drawArc(rectF,BigDecimal.valueOf(startDegree).floatValue(),degree,true,paint);
}
判斷點(diǎn)擊事件所在餅圖位置。
判斷點(diǎn)擊位置科侈，只需要判斷點(diǎn)擊位置與基準(zhǔn)圓心的夾角 以及 點(diǎn)擊位置與基準(zhǔn)圓心間距離 即可载佳。
private List<Double>percentValueList = Arrays.asList(12.9,15.0,18.0,16.0,38.1);//餅圖所占百分比
/**
* 計(jì)算點(diǎn)擊位置
* @param event
* @return
*/
private int caculateShowPie(MotionEvent event){
float pointX = event.getX();
float pointY = event.getY();
float deltaX = pointX - point.x;
float deltaY = pointY - point.y;
double deltaXPow = Math.pow(BigDecimal.valueOf(deltaX).doubleValue(),2);
double deltaYPow = Math.pow(BigDecimal.valueOf(deltaY).doubleValue(),2);
double rPow = deltaXPow + deltaYPow;
if (rPow < Math.pow(COMMONPIARCSPACE,2) || rPow > Math.pow(circleR + COMMONPIARCSPACE,2)){
return PINOTSELECTED;
}
double sinA = deltaY/Math.sqrt(rPow); ;
double positionDegree = Math.toDegrees(Math.asin(sinA));
double scrennDegree = turnDegreeToScreenNormal(deltaX,deltaY,positionDegree);
float degree = 0;
double startDegree = 0;
for (int i = 0;i < percentValueList.size(); i++) {
Double percent = percentValueList.get(i);
degree = (float) (percent * CIRCLETOTALDEGREE / 100);
if (scrennDegree > startDegree && scrennDegree < startDegree + degree){
return i;
}
startDegree += degree;
}
return PINOTSELECTED;
}
因?yàn)槔L制餅圖角度為順時(shí)針方向，而反正弦得到的角度范圍 為[-PI/2,PI/2]臀栈。因此需要進(jìn)行轉(zhuǎn)換蔫慧。
/**
* 由于是采用的順時(shí)針繪制餅圖，所以需要將角度調(diào)整
* 計(jì)算角度所屬象限权薯，返回正確角度
* @param deltaX
* @param deltaY
* @param degree
* @return
*/
private double turnDegreeToScreenNormal(float deltaX,float deltaY,double degree){
if (deltaX > 0 && deltaY < 0){
//第一象限
return 360 + degree;
}else if (deltaX < 0 && deltaY < 0){
//第二象限
return 180 - degree;
}else if (deltaX < 0 && deltaY > 0){
//第三象限
return 90 + degree;
}else{
return degree;
}
}
點(diǎn)擊餅圖動畫姑躲，通過ValueAnimator改變偏移量達(dá)到動畫效果。
ValueAnimator mValueAnimator;//點(diǎn)擊動畫
float mAnimatedValue = 0f;//動畫瞬時(shí)值
float mTotalAnimateValue = 0f;//動畫總值
public void startAnim() {
stopAnim();
startAnimation(0f, 1f, ANIMATIONTIME);
}
public void stopAnim() {
if (mValueAnimator != null) {
clearAnimation();
mAnimatedValue = 0f;
mValueAnimator.end();
}
}
private ValueAnimator startAnimation(float startF, final float endF, long time){
mValueAnimator = ValueAnimator.ofFloat(startF, endF);
mTotalAnimateValue = endF - startF;
mValueAnimator.setDuration(time);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mAnimatedValue = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
if (!mValueAnimator.isRunning()) {
mValueAnimator.start();
}
return mValueAnimator;
}
最后貼上完整代碼：
public class DrawPieCircleView extends View{
String[] mColors = {"#FF1EBC71","#FFF55253","#FFDAA520"
,"#FF90EE90","#FB4E09","#AA49D2CC","#00A0E9"};
private static final int ANIMATIONTIME = 300;
private static final float CIRCLETOTALDEGREE = 360.0f;
private static final float COMMONPIARCSPACE = 2;//普通餅圖偏移量
private static final float PUSHOUTPIARCSPACE = 15;//點(diǎn)擊狀態(tài)餅圖偏移量
private static final Point point = new Point(300,300);//圓心
private static final float circleR = 200;//圓半徑
ValueAnimator mValueAnimator;//點(diǎn)擊動畫
float mAnimatedValue = 0f;//動畫瞬時(shí)值
float mTotalAnimateValue = 0f;//動畫總值
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
public static final int PINOTSELECTED = -1;
private int piSelectedPosition = PINOTSELECTED;//當(dāng)前點(diǎn)擊的餅圖
private int prePiSelectedPosition = PINOTSELECTED;//上一個點(diǎn)擊的餅圖
private boolean hasPieNeedPushOutShow = false;//是否有點(diǎn)擊狀態(tài)的餅圖需要展示
private List<Double>percentValueList = Arrays.asList(12.9,15.0,18.0,16.0,38.1);//餅圖所占百分比
public void setPercentValueList(List<Double> percentValueList) {
this.percentValueList = percentValueList;
postInvalidate();
}
public DrawPieCircleView(Context context){
super(context);
}
public DrawPieCircleView(Context context, AttributeSet attrs){
super(context, attrs);
}
public DrawPieCircleView(Context context,AttributeSet attrs,int defStyleAttr){
super(context, attrs,defStyleAttr);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN){
int nowSelectedPi = caculateShowPie(event);
if (nowSelectedPi == PINOTSELECTED) return super.onTouchEvent(event);
if (hasPieNeedPushOutShow){
if (piSelectedPosition == nowSelectedPi){
hasPieNeedPushOutShow = false;
prePiSelectedPosition = piSelectedPosition;
piSelectedPosition = PINOTSELECTED;
}else{
prePiSelectedPosition = piSelectedPosition;
piSelectedPosition = nowSelectedPi;
}
}else{
hasPieNeedPushOutShow = true;
prePiSelectedPosition = PINOTSELECTED;
piSelectedPosition = nowSelectedPi;
}
startAnim();
return true;
}
return super.onTouchEvent(event);
}
/**
* 計(jì)算點(diǎn)擊位置
* @param event
* @return
*/
private int caculateShowPie(MotionEvent event){
float pointX = event.getX();
float pointY = event.getY();
float deltaX = pointX - point.x;
float deltaY = pointY - point.y;
double deltaXPow = Math.pow(BigDecimal.valueOf(deltaX).doubleValue(),2);
double deltaYPow = Math.pow(BigDecimal.valueOf(deltaY).doubleValue(),2);
double rPow = deltaXPow + deltaYPow;
if (rPow < Math.pow(COMMONPIARCSPACE,2) || rPow > Math.pow(circleR + COMMONPIARCSPACE,2)){
return PINOTSELECTED;
}
double sinA = deltaY/Math.sqrt(rPow); ;
double positionDegree = Math.toDegrees(Math.asin(sinA));
double scrennDegree = turnDegreeToScreenNormal(deltaX,deltaY,positionDegree);
float degree = 0;
double startDegree = 0;
for (int i = 0;i < percentValueList.size(); i++) {
Double percent = percentValueList.get(i);
degree = (float) (percent * CIRCLETOTALDEGREE / 100);
if (scrennDegree > startDegree && scrennDegree < startDegree + degree){
return i;
}
startDegree += degree;
}
return PINOTSELECTED;
}
/**
* 由于是采用的順時(shí)針繪制餅圖盟蚣，所以需要將角度調(diào)整
* 計(jì)算角度所屬象限黍析，返回正確角度
* @param deltaX
* @param deltaY
* @param degree
* @return
*/
private double turnDegreeToScreenNormal(float deltaX,float deltaY,double degree){
if (deltaX > 0 && deltaY < 0){
//第一象限
return 360 + degree;
}else if (deltaX < 0 && deltaY < 0){
//第二象限
return 180 - degree;
}else if (deltaX < 0 && deltaY > 0){
//第三象限
return 90 + degree;
}else{
return degree;
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float degree = 0;
double startDegree = 0;
double totalDegre = CIRCLETOTALDEGREE;
for (int i = 0;i < percentValueList.size(); i++){
Double percent = percentValueList.get(i);
degree = (float)(percent*totalDegre/100);
float animatDistance = 0;
if ( i != prePiSelectedPosition && i != piSelectedPosition){
animatDistance = COMMONPIARCSPACE;
}else{
if (i == prePiSelectedPosition){
animatDistance = (mTotalAnimateValue - mAnimatedValue)/mTotalAnimateValue * (PUSHOUTPIARCSPACE - COMMONPIARCSPACE) + COMMONPIARCSPACE;
}else{
animatDistance = mAnimatedValue/mTotalAnimateValue * (PUSHOUTPIARCSPACE - COMMONPIARCSPACE) + COMMONPIARCSPACE;
}
}
commonDrawPi(canvas,startDegree,degree,mColors[i],animatDistance);
startDegree += degree;
}
if (mAnimatedValue == 1f){
if (hasPieNeedPushOutShow) {
prePiSelectedPosition = PINOTSELECTED;
} else {
prePiSelectedPosition = PINOTSELECTED;
piSelectedPosition = PINOTSELECTED;
}
}
}
/**
* 繪制每個百分比餅圖
* @param canvas
* @param startDegree 圓弧開始的角度
* @param degree 圓弧劃過的角度
* @param color 餅圖顏色
* @param drawDeltaValue 餅圖與基準(zhǔn)圓心的偏移量
*/
private void commonDrawPi(Canvas canvas,double startDegree,float degree,String color,float drawDeltaValue){
double averageDegree = startDegree + degree/2;
double deltaX = Math.cos(Math.toRadians(averageDegree));
double deltaY = Math.sin(Math.toRadians(averageDegree));
BigDecimal bigDeltaX = new BigDecimal(String.valueOf(deltaX)).setScale(16, BigDecimal.ROUND_HALF_UP);
BigDecimal bigDeltaY = new BigDecimal(String.valueOf(deltaY)).setScale(16, BigDecimal.ROUND_HALF_UP);
float changeX = bigDeltaX.floatValue() * drawDeltaValue;
float changeY = bigDeltaY.floatValue() * drawDeltaValue;
RectF rectF = new RectF(point.x - circleR + changeX
,point.y - circleR + changeY
,point.x + circleR + changeX
,point.y + circleR + changeY);
paint.setColor(Color.parseColor(color));
canvas.drawArc(rectF,BigDecimal.valueOf(startDegree).floatValue(),degree,true,paint);
}
public void startAnim() {
stopAnim();
startAnimation(0f, 1f, ANIMATIONTIME);
}
public void stopAnim() {
if (mValueAnimator != null) {
clearAnimation();
mAnimatedValue = 0f;
mValueAnimator.end();
}
}
private ValueAnimator startAnimation(float startF, final float endF, long time){
mValueAnimator = ValueAnimator.ofFloat(startF, endF);
mTotalAnimateValue = endF - startF;
mValueAnimator.setDuration(time);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mAnimatedValue = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
if (!mValueAnimator.isRunning()) {
mValueAnimator.start();
}
return mValueAnimator;
}
}
