Disegna aree sovrapposte su un solo percorso

Question

Ho uno Path che attraversa se stesso e voglio cambiare il colore delle aree che sono state superate più di una volta. Come di seguito:

Così ho creato la mia pittura.

highlighterPaint = new Paint(); 
    highlighterPaint.setAntiAlias(true); 
    strokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, 
      displayMetrics); 
    highlighterPaint.setStrokeWidth(strokeWidth); 
    highlighterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN)); 
    highlighterPaint.setAlpha(200); 
    highlighterPaint.setStyle(Paint.Style.STROKE); 
    highlighterPaint.setStrokeJoin(Paint.Join.ROUND); 

Ma quando chiamo canvas.drawPath(mPath1, highlighterPaint) e canvas.drawPath(mPath2, highlighterPaint) ottengo l'immagine qui sotto. Ci sono due percorsi in questa immagine con i loro endpoint etichettati.

sto disegnando ogni percorso su un Canvas.

Separato Path s scurire correttamente la loro area condivisa, ma un singolo Path no. Come posso ottenere un effetto simile alla prima immagine?

Answer 1

Path semplicemente non può farlo. Non aver paura, c'è un modo migliore!

Il trucco è dividere il percorso in molte sezioni più piccole e disegnare ogni sezione separatamente.

Nel mio caso, stavo creando un percorso da una serie di punti (generato da input tattile) e disegno beziers quadratici per collegare i punti. Ecco un breve profilo:

int numPoints = 0; 
for (Point p : points) { 
    p1X = p2X; 
    p1Y = p2Y; 
    p2X = p3X; 
    p2Y = p3Y; 
    p3X = p.x; 
    p3Y = p.y; 

    numPoints++; 
    if (numPoints >= 3) { 
     startX = (p1X + p2X)/2.0f; 
     startY = (p1Y + p2Y)/2.0f; 
     controlX = p2X; 
     controlY = p2Y; 
     endX = (p2X + p3X)/2.0f; 
     endY = (p2Y + p3Y)/2.0f; 
     path.rewind(); 
     path.moveTo(startX, startY); 
     path.quadTo(controlX, controlY, endX, endY); 
     canvas.drawPath(path, paint); 
    } 
}