Draw overlapping areas on one path

Question

I have a Path that intersects itself, and I want to change the color of the areas that have passed more than once. As below:

So, I set my paint.

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

But when I call canvas.drawPath(mPath1, highlighterPaint) and canvas.drawPath(mPath2, highlighterPaint) , I get the following image. There are two contours in this image with their end points.

I draw every way on Canvas .

To divide Path correctly darkens the general area, but one Path does not. How can I achieve an effect similar to the first image?

Answer 1

Path just can't do it. Never fear, there is a better way!

The trick is to split the path into several small sections and split each section individually.

In my case, I created a path from a series of points (generated from touch input) and drew quadratic bezier to connect the points. Here is a brief outline:

 int numPoints = 0; for (Point p : points) { p1X = p2X; p1Y = p2Y; p2X = p3X; p2Y = p3Y; p3X = px; p3Y = py; 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); } }