Vẽ các khu vực chồng lên nhau trên một đường dẫn

Question

Tôi có một số Path vượt qua chính nó và tôi muốn thay đổi màu của các khu vực đã bị mất nhiều lần. Như dưới đây:

Vì vậy, tôi thiết lập sơn của tôi.

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

Nhưng khi tôi gọi canvas.drawPath(mPath1, highlighterPaint) và canvas.drawPath(mPath2, highlighterPaint) Tôi nhận được hình ảnh bên dưới. Có hai đường dẫn trong ảnh này với các điểm cuối được gắn nhãn.

Tôi đang vẽ từng đường lên một Canvas.

Riêng biệt Path s làm tối chính xác vùng chia sẻ của họ, nhưng một đơn Path thì không. Làm thế nào tôi có thể đạt được một hiệu ứng tương tự như hình ảnh đầu tiên?

Answer 1

Path không thể thực hiện việc này. Không bao giờ sợ hãi, có một cách tốt hơn!

Bí quyết là chia đường dẫn thành nhiều phần nhỏ hơn và vẽ riêng từng phần.

Trong trường hợp của tôi, tôi đã tạo một đường dẫn từ một loạt các điểm (được tạo từ đầu vào cảm ứng) và vẽ các beziers bậc hai để kết nối các điểm. Dưới đây là một phác thảo nhanh:

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