móviles - manual de programacion android pdf

Android: relleno de color debajo del gráfico de líneas

Question

Estoy construyendo un gráfico de líneas para una de nuestras aplicaciones. La parte de la línea en el gráfico está funcionando bien, pero ahora tengo que llenar el área debajo de la línea con un color, algo así como esta imagen a continuación.

Estoy usando este código para dibujar la línea en un mapa de bits usando un lienzo.

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

Lo que necesito saber es, ¿hay alguna manera de encontrar fácilmente el área debajo de la línea y hacerla de un color o tendré que calcular cada área entre 3 puntos para el gráfico y llenarlo con un color?

No puedo usar las bibliotecas de gráficos existentes como AchartEngine , ChartDroid , aFreeChart ect.

Answer 1

Encontré una solución

Primero pinté el degradado, después de eso pinté el gráfico de líneas y borré todo a lo largo de la línea creando otro camino que seguía el gráfico de líneas y lo cerré al final. Después de eso, pinté el área transparente para borrar la parte superior del degradado.

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

El resultado se veía así

Otra forma de hacerlo es seguir exactamente el camino y recortar los bordes inferiores y simplemente pintar el degradado dentro de la segunda ruta. Esto dará el mismo resultado, pero se mantendrá todo el contenido sobre el gráfico y no se borrará nada.