Überlappende Bereiche auf einem Pfad zeichnen

Question

Ich habe eine Path, die sich kreuzt und ich möchte die Farbe der Bereiche ändern, die mehr als einmal durchlaufen wurden. Wie unten:

Also habe ich meine Farbe auf.

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

Aber wenn ich canvas.drawPath(mPath1, highlighterPaint) und canvas.drawPath(mPath2, highlighterPaint) nennen bekomme ich das Bild unten. Es gibt zwei Pfade in diesem Bild mit ihren Endpunkten.

Ich zeichne jeden Pfad auf einen Canvas.

Separate Path s verdunkeln ihren gemeinsamen Bereich korrekt, aber eine einzige Path nicht. Wie erreiche ich einen ähnlichen Effekt wie beim ersten Bild?

Answer 1

Path kann einfach nicht tun. Keine Angst, es gibt einen besseren Weg!

Der Trick besteht darin, den Pfad in viele kleinere Abschnitte aufzuteilen und jeden Abschnitt separat zu zeichnen.

In meinem Fall erstellte ich einen Pfad aus einer Reihe von Punkten (generiert aus Touch-Eingabe) und zeichne quadratische Beziers, um die Punkte zu verbinden. Hier ist ein kurzer Umriss:

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