Android - Riempi colore sotto il grafico a linee

Question

Sto costruendo un grafico a linee per una delle nostre applicazioni. La parte della linea nel grafico sta funzionando bene, ma ora devo riempire l'area sotto la linea con un colore, qualcosa di simile a questa immagine qui sotto.

Sto usando questo codice per disegnare la linea a una bitmap utilizzando una tela.

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

Che cosa ho bisogno di sapere è: esiste un modo per trovare facilmente la zona sotto la linea e ne fanno un colore o dovrò per calcolare ogni area compresa tra 3 punti per il grafico e riempirlo con un colore?

non posso usare le librerie grafico esistente come AchartEngine, ChartDroid, aFreeChart ect.

Answer 1

trovato una soluzione

ho dipinto il gradiente, dopo che ho dipinto la linea grafica e cancellato tutta la linea creando un altro percorso che ha seguito la linea grafica e chiuso fino alla fine. Successivamente ho dipinto l'area trasparente per cancellare la parte superiore del gradiente.

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

Il risultato sembrava questo

Un altro modo per farlo è seguire il percorso esattamente e clip intorno ai bordi inferiori e solo dipingere il gradiente all'interno del secondo percorso. Questo darà lo stesso risultato ma tutto il contenuto sopra il grafico verrà mantenuto e nulla verrà cancellato.