Android - 填充折线图下方的颜色

Question

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

我正在使用此代码使用 Canvas 将线绘制到位图上。

    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 等。

Answer 1

找到解决方案

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

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

结果是这样的

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