MPAndroidChart之PieChart源码分析

最新推荐文章于 2024-08-19 00:44:29 发布

A771642

最新推荐文章于 2024-08-19 00:44:29 发布

阅读量2.3k

点赞数 2

分类专栏： Android应用文章标签： android 控件开源框架图表

本文链接：https://blog.csdn.net/A771642/article/details/71424966

版权

Android应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目前自己的项目用到图表。去github上看到MPAndroidChart很受欢迎，就下载下来了用了，随着项目的迭代，有些本身不具备的需求就来了。所以就花时间看了一下他的代码。非常感谢几个同事的帮忙。

根据时序图我把这个PieChart模块分成数据加载(1)，图表参数准备(2,3,4,5,8)，图表绘制(6,7,9,10)三个部分

一图表绘制（方法10）

绘制方法基本都一样，就主要介绍一下绘制扇形区域。

作者的步骤

（1）移动到B点

（2）绘制CD弧边

（3）绘制DE线段

（4）绘制EB弧边

mPathBuffer.moveTo(arcStartPointX, arcStartPointY);

mPathBuffer.arcTo(
		circleBox,
		startAngleOuter,
		sweepAngleOuter);
		
mPathBuffer.lineTo(
		center.x + innerRadius * (float) Math.cos(endAngleInner * Utils.FDEG2RAD),
		center.y + innerRadius * (float) Math.sin(endAngleInner * Utils.FDEG2RAD));

mPathBuffer.arcTo(
		mInnerRectBuffer,
		endAngleInner,
		-sweepAngleInner);

他这样写是有一点小bug。我把他的项目拆解学习运行时发现Path是连贯的操作，就感觉是游戏一笔画。所以BC线段和DE线段是不需要绘制的。

lineto代码可以省略。

以上我们就完成了PieChart静态布局。接下来在来看一下开局动画的实现，我也通过这个项目第一次了解Android属性动画的强大。

二属性动画实现

1 初始化时序图

2 调用此方法执行开始动画

（1）创建属性动画对象

（2）设置时间补间器（这个大家可以百度一下。我觉得数学好的人这个可以玩的贼6）

（3）添加动画更新回调

（4）启动动画

    public void animateY(int durationMillis, Easing.EasingOption easing) {

        if (android.os.Build.VERSION.SDK_INT < 11)
            return;

        ObjectAnimator animatorY = ObjectAnimator.ofFloat(this, "phaseY", 0f, 1f);
        animatorY.setInterpolator(Easing.getEasingFunctionFromOption(easing));
        animatorY.setDuration(durationMillis);
        animatorY.addUpdateListener(mListener);
        animatorY.start();
    }

三监听到动画更新回调时。调用方法postInvaliadate()去让PieChart执行ondraw()方法

（1）获取时序图中方法6 创建对象时传入的动画对象的phaseY的属性值

（2）设置扇形实际角度乘以当前动画对象的属性phaseY

float sliceAngle = drawAngles[j];
float phaseY = mAnimator.getPhaseY();

float sweepAngleOuter = (sliceAngle - sliceSpaceAngleOuter) * phaseY;
float sweepAngleInner = (sliceAngle - sliceSpaceAngleInner) * phaseY;

当动画更新回调AnimatorUpdateListener被不断触发时。就不断通知View执行ondraw，sweepAngle不断改变，达到动画效果。

问题

每次回调被触发时mAnimator.getPhaseY()是有不同的值的，有getPhaseY()那么一定会有方法去SetPhaseY()。在ChartAnimator.java中我确实发现了setPhaseY()。但是我全局搜索这个方法并没有发现有人去调用这个方法。到底是谁在调用这个方法？

回答

（1）这个我没有去细看的原理，google写的注释很明确（this是 ChartAnimator，propertyName是phaseY）这个对象应该有一个公共方法称为setName在其中。我猜测使用了反射。

 /**
     * Constructs and returns an ObjectAnimator that animates between float values. A single
     * value implies that that value is the one being animated to. Two values imply starting
     * and ending values. More than two values imply a starting value, values to animate through
     * along the way, and an ending value (these values will be distributed evenly across
     * the duration of the animation).
     *
     * @param target The object whose property is to be animated. This object should
     * have a public method on it called <code>setName()</code>, where <code>name</code> is
     * the value of the <code>propertyName</code> parameter.
     * @param propertyName The name of the property being animated.
     * @param values A set of values that the animation will animate between over time.
     * @return An ObjectAnimator object that is set up to animate between the given values.
     */
    public static ObjectAnimator ofFloat(Object target, String propertyName, float... values) {
        ObjectAnimator anim = new ObjectAnimator(target, propertyName);
        anim.setFloatValues(values);
        return anim;
    }

四手势触摸滚动

看这个真的太受打击了，数学玩的好的人秒懂，我自己看了一晚上没什么思路，我几个同事秒懂。扎心了，老铁。大体思路是这样：

1 touch事件监听

（1）监听onTouch事件。

（2）事件类型是按下时，获得开始角度

（3）事件类型是滑动时，获得当前角度，在减去开始按下的角度就是旋转角度

（4）通知view去执行ondraw方法。

public boolean onTouch(View v, MotionEvent event) {
	float x = event.getX();
	float y = event.getY();

	switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			setGestureStartAngle(x, y);
		break;
		case MotionEvent.ACTION_MOVE:
			updateGestureRotation(x, y);
            mChart.invalidate();
		break;
	}
	 return true;
}

4 同一标准换算坐标

1 前提

（1）作者是以圆心为坐标原点，向上为Y轴正半轴，向右为X轴正半轴建立坐标系。

（2）作者规则：所有角度都是从X轴正半轴出发（一定要按同一标准换算角度）

（3）我假设按下事件的坐标点都是X轴正半轴，旋转角度就都是move事件坐标的角度

    public void updateGestureRotation(float x, float y) {
        /*Log.e("wjq","mChart.getAngleForPoint(x, y) = " + mChart.getAngleForPoint(x, y));
        Log.e("wjq","mStartAngle = " + mStartAngle);*/
        mChart.setRotationAngle(mChart.getAngleForPoint(x, y) - mStartAngle);
    }

注意：这里计算的角度是反余弦值！

public float getAngleForPoint(float x, float y) {

        MPPointF c = getCenterOffsets();

        double tx = x - c.x, ty = y - c.y;
        double length = Math.sqrt(tx * tx + ty * ty);
        double r = Math.acos(ty / length);

        float angle = (float) Math.toDegrees(r);
        if (x > c.x)
            angle = 360f - angle;

        // add 90° because chart starts EAST
        angle = angle + 90f;

        // neutralize overflow
        if (angle > 360f)
            angle = angle - 360f;

        MPPointF.recycleInstance(c);

        return angle;
 }

2 角度计算

坐标点落四个象限时，所求角如下图示（角1为所求值，角2为反余弦值）：

第四象限： 90 - angle

第三象限： 90+angle

第二象限：90+angle

第一象限：360-angle+90

3 zhanghongyang的逻辑判断

http://blog.csdn.net/lmj623565791/article/details/43131133

他用的是反正弦值。其实和MPAndroid作者一样，但是他带入的点坐标没有正负之分，导致需要判断象限。从这点来看作者的数学逻辑更为优秀一点

			if (getQuadrant(x, y) == 1 || getQuadrant(x, y) == 4)
			{
				mStartAngle += end - start;
				mTmpAngle += end - start;
			} else
			// 二、三象限，色角度值是付值
			{
				mStartAngle += start - end;
				mTmpAngle += start - end;
			}

4 换算旋转角度

（1）获取旋转角度

（2）计算开始旋转角度

（3）换算成x，y坐标

protected void drawDataSet(Canvas c, IPieDataSet dataSet) {
	float rotationAngle = mChart.getRotationAngle();
	final float startAngleOuter = rotationAngle + (angle + sliceSpaceAngleOuter / 2.f) * phaseY;
	float arcStartPointX = center.x + radius * (float) Math.cos(startAngleOuter * Utils.FDEG2RAD);
    float arcStartPointY = center.y + radius * (float) Math.sin(startAngleOuter * Utils.FDEG2RAD);
}

5 图表绘制（同上逻辑）

当监听时间move的x，y坐标在不断改变，旋转角度不断改变，通知view不断绘制，就达到了手势触摸旋转效果。

五惯性滚动

通过角加速度匀速减小角度，达到惯性滚动的目的。

1 计算角速度

（1）初始化角加速度为0

（2）初始化集合为0

（3）把down事件的点击时间和和坐标X,Y的角度组装成AngularVelocitySample对象存入集合中

（4）把move事件的点击时间和和坐标X,Y的角度组装成AngularVelocitySample对象存入集合中

（5）初始化加速角速度为0

（6）把up事件的点击时间和和坐标X,Y的角度组装成AngularVelocitySample对象存入集合中

（7）计算角速度

（8）通知computeScroll执行

public boolean onTouch(View v, MotionEvent event) {
	switch (event.getAction()) {
	case MotionEvent.ACTION_DOWN:
		stopDeceleration();
		resetVelocity();

		sampleVelocity(x, y);

		break;

	case MotionEvent.ACTION_MOVE:
		sampleVelocity(x, y);
		break;

	case MotionEvent.ACTION_UP:
		stopDeceleration();
		sampleVelocity(x, y);
		mDecelerationAngularVelocity = calculateVelocity();
		mDecelerationLastTime = AnimationUtils.currentAnimationTimeMillis();
		Utils.postInvalidateOnAnimation(mChart);
		break;
	}
}

2 检查对象

这个方法要注意他检查的是索引第0个到倒数第三个，是为了保证calculateVelocity方法中必定要取到两个对象计算角加速度

private void sampleVelocity(float touchLocationX, float touchLocationY) {

    long currentTime = AnimationUtils.currentAnimationTimeMillis();

    _velocitySamples.add(new AngularVelocitySample(currentTime, mChart.getAngleForPoint(touchLocationX, touchLocationY)));

    // Remove samples older than our sample time - 1 seconds
    for (int i = 0, count = _velocitySamples.size(); i < count - 2; i++) {
        if (currentTime - _velocitySamples.get(i).time > 1000) {
            _velocitySamples.remove(0);
            i--;
            count--;
        } else {
            break;
        }
    }
}

3 计算速度

（1）获得时间差和角度差，计算角加速度

（2）判断滚动方向是CW（顺时针）和CCW（逆时针）

private float calculateVelocity() {

        if (_velocitySamples.isEmpty())
            return 0.f;

        AngularVelocitySample firstSample = _velocitySamples.get(0);
        AngularVelocitySample lastSample = _velocitySamples.get(_velocitySamples.size() - 1);

        // Look for a sample that's closest to the latest sample, but not the same, so we can deduce the direction
        AngularVelocitySample beforeLastSample = firstSample;
        for (int i = _velocitySamples.size() - 1; i >= 0; i--) {
            beforeLastSample = _velocitySamples.get(i);
            if (beforeLastSample.angle != lastSample.angle) {
                break;
            }
        }

        // Calculate the sampling time
        float timeDelta = (lastSample.time - firstSample.time) / 1000.f;
        if (timeDelta == 0.f) {
            timeDelta = 0.1f;
        }

        // Calculate clockwise/ccw by choosing two values that should be closest to each other,
        // so if the angles are two far from each other we know they are inverted "for sure"
        boolean clockwise = lastSample.angle >= beforeLastSample.angle;
        if (Math.abs(lastSample.angle - beforeLastSample.angle) > 270.0) {
            clockwise = !clockwise;
        }

        // Now if the "gesture" is over a too big of an angle - then we know the angles are inverted, and we need to move them closer to each other from both sides of the 360.0 wrapping point
        if (lastSample.angle - firstSample.angle > 180.0) {
            firstSample.angle += 360.0;
        } else if (firstSample.angle - lastSample.angle > 180.0) {
            lastSample.angle += 360.0;
        }

        // The velocity
        float velocity = Math.abs((lastSample.angle - firstSample.angle) / timeDelta);

        // Direction?
        if (!clockwise) {
            velocity = -velocity;
        }

        return velocity;
    }

（1）判断正反转

后一次的角度大于前一次的就是顺时针，反之则是逆时针。但是有两个特殊情况，反生在360和0度交界处。

lastAngle与firstAngle,判断结果（如下图）与实际情况相悖。所以就有了下面的逻辑。

（2）角度修正

作者认为两者超过180度以后，换算的速度过大，所以就取∠1的补角∠2如下图:

3 执行滚动

（1）获取当前时间

（2）把计算出来的速度乘以大于0小于1的系数。

（3）计算时间差，换算成秒

（4）设置旋转角

（5）当速度大于0.01继续通知执行computeScroll。这个方法执行完毕会去执行ondraw方法，重新绘制view

    public void computeScroll() {

        if (mDecelerationAngularVelocity == 0.f)
            return; // There's no deceleration in progress

        final long currentTime = AnimationUtils.currentAnimationTimeMillis();

        mDecelerationAngularVelocity *= mChart.getDragDecelerationFrictionCoef();

        final float timeInterval = (float) (currentTime - mDecelerationLastTime) / 1000.f;

        mChart.setRotationAngle(mChart.getRotationAngle() + mDecelerationAngularVelocity * timeInterval);

        mDecelerationLastTime = currentTime;

        if (Math.abs(mDecelerationAngularVelocity) >= 0.001)
            Utils.postInvalidateOnAnimation(mChart); // This causes computeScroll to fire, recommended for this by Google
        else
            stopDeceleration();
    }