Narysuj obszary nakładające się na jednej ścieżce

Question

Mam Path, która przechodzi przez siebie i chcę zmienić kolor obszarów, które minęły więcej niż raz. Jak poniżej:

Więc skonfigurować farby.

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

Ale gdy zgłoszę canvas.drawPath(mPath1, highlighterPaint) i canvas.drawPath(mPath2, highlighterPaint) otrzymuję poniższy obraz. Na tym zdjęciu są dwie Ścieżki z oznaczonymi punktami końcowymi.

Rysuję na każdą ścieżkę w Canvas.

Oddzielnie Path s poprawnie przyciemnia ich wspólny obszar, ale pojedynczy Path nie. Jak mogę uzyskać efekt podobny do pierwszego obrazu?

Answer 1

Path po prostu nie można tego zrobić. Nigdy się nie bój, jest lepszy sposób!

Sztuką jest podzielenie ścieżki na wiele mniejszych sekcji i narysowanie każdej sekcji osobno.

W moim przypadku tworzyłem ścieżkę z serii punktów (generowanych z wprowadzania dotykiem) i rysowania kwadratowych bezierów w celu połączenia punktów. Oto krótki zarys:

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