6

我正在为我们的一个应用程序构建折线图。图表中的线条部分工作正常，但现在我必须用颜色填充线条下方的区域，如下图所示。

在此处输入图像描述

我正在使用此代码使用画布在位图上绘制线条。

    List<Float> xCoordinates = (List<Float>) coordinates[0];
    List<Float> yCoordinates = (List<Float>) coordinates[1];

    for (int i = 0; i < xCoordinates.size(); i++) {
        if (!firstSet) {
            x = xCoordinates.get(i);
            y = yCoordinates.get(i);
            p.moveTo(x, y);
            firstSet = true;
        } else {
            x = xCoordinates.get(i);
            y = yCoordinates.get(i);
            p.lineTo(x, y);
        }
    }

    textureCanvas.drawPath(p, pG);

我需要知道的是，有没有一种方法可以轻松找到线条下方的区域并将其设为颜色，或者我是否必须计算图表 3 个点之间的每个区域并用颜色填充？

我不能使用现有的图表库，如AchartEngine、ChartDroid、aFreeChart等。

4

1 回答 1

6

找到了解决方案

我首先绘制了渐变，然后绘制了折线图并通过创建另一条跟随折线图并在最后将其关闭的路径沿线擦除。之后，我将该区域涂成透明以擦除渐变的顶部。

    List<Float> xCoordinates = coordinates.first;
    List<Float> yCoordinates = coordinates.second;
    for (int i = 0; i < xCoordinates.size(); i++) {
        if (!firstSet) {
            x = xCoordinates.get(i);
            y = yCoordinates.get(i);
            linePath.moveTo(x, y);

            erasePath.moveTo(x, 0);
            erasePath.lineTo(x, y);

            firstSet = true;
        } else {
            x = xCoordinates.get(i);
            y = yCoordinates.get(i);
            linePath.lineTo(x, y);
            erasePath.lineTo(x, y);
        }
    }

    erasePath.lineTo(getWidth(), y);
    erasePath.lineTo(getWidth(), 0);
    erasePath.lineTo(0, 0);

    getTextureCanvas().drawPath(erasePath, clear);
    getTextureCanvas().drawPath(linePath, pG);

结果看起来像这样

在此处输入图像描述

另一种方法是完全遵循路径并围绕底部边缘进行剪辑，然后在第二条路径内绘制渐变。这将给出相同的结果，但图表上方的所有内容都将被保留，并且不会删除任何内容。

于 2013-04-24T09:23:12.377 回答