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

时间:2013-04-22 06:15:42

标签: android canvas charts bitmap paint

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

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

我需要知道的是,有没有办法轻松找到线下面的区域并使其成为一种颜色,或者我必须计算图形的3个点之间的每个区域并用颜色填充它?

我无法使用现有的图表库,例如 AchartEngine ChartDroid aFreeChart 等。

1 个答案:

答案 0 :(得分: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);

结果看起来像这样

enter image description here

另一种方法是严格遵循路径并剪切底部边缘,然后在第二条路径内绘制渐变。这将得到相同的结果,但图表上方的所有内容都将保留,不会删除任何内容。