安卓 - 填充线图下方颜色

Question

安卓 - 填充线图下方颜色

7

我正在为我们的一个应用程序构建一条折线图。图表中的线部分运作正常，但现在我需要用颜色填充线下的区域，类似于下面这个图片。 enter image description here

我正在使用以下代码利用画布将线绘制到位图上。

    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);

我需要知道的是，是否有一种简单的方法来查找线下方的区域并将其变成颜色，还是我必须计算图表上每个点之间的区域并填充颜色？无法使用现有的图表库，如AchartEngine、ChartDroid、aFreeChart等。

- the-ginger-geek

我不熟悉那个图表引擎，但是了解其他的。它是否有面积图作为一种图表类型？如果是这样，只需使用面积图，并且如果可能的话，用不同的颜色格式化上边框，以给您线条和线下填充的外观。 - teylyn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- the-ginger-geek · Accepted Answer

找到了解决方案

我首先绘制了渐变，然后绘制了折线图，并通过创建另一条路径沿着折线图擦除了整条线。接下来，我使用透明颜色绘制区域以擦除渐变的顶部部分。

    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);

结果如下所示：

结果看起来像这样

输入图像描述

另一种方法是按照路径精确裁剪底部边缘，并在第二个路径内部绘制渐变。这将产生相同的结果，但图表上方的所有内容都将被保留，不会被擦除。