Paths rendering issue

[Nohus]

When using the Paths feature, the paths are drawn with artifacts / empty spaces at each connecting point:

For comparison, the same path drawn with the Google Maps Compose library. Notice how the line is fully solid throughout:

[p-lr]

This due to how path are drawn. MapCompose uses Canvas.drawLines which is hardware accelerated, but rendering isn't as pretty as Canvas.drawPath as your image shows. Historically, I chose to ditch drawPath because the performance difference can clearly be felt when rendering long paths. I was ok with it since in this case I value performance more than aesthetics. Now a few years later I gave drawPath another try. It's in the very experimental drawpath branch.

While the demo performs well, my testing on a real app shows a noticeable performance difference. Also, I've seen paths blinks under some circumstances (but this is probably unrelated to drawPath).

It would be nice to investigate this performance issue and see if there's a way to use drawPath while not hindering performance. In the end, I agree paths could look nicer. However I will be careful about performance.

[p-lr]

The only idea I have for now is to implement path simplification. When zooming out, a path with 10k points can be simplified to a few dozen lines. This should have impact on performance. However this isn't easy to implement.

EDIT: I've implemented the Ramer–Douglas–Peucker algorithm. The result is amazing. Looks like this fixes the performance issue.

[p-lr]

@Nohus Could you test the branch drawpath and give me your feedback? It should render path like Google Maps Compose library, plus with a path decimation algorithm to fix performance on zoom out.

[Nohus]

Impressive work! I can confirm it works well.

I noticed a small issue: the paths seem to be drawn without anti-aliasing and have jagged edges, especially visible at particular angles. I tried setting isAntiAlias = true on the Paint object but it didn't seem to help.

The path simplification is really good, but I think it's a little bit too aggressive, I can see my paths jumping around as I zoom in and out. I think it may work better for you (and be more required) because you are using paths made of a lot of points. My points are not very dense already.

Updating the epsilon argument from 2.dp to 1.dp made it more sensible, at least on my path data.

val epsilon = with(LocalDensity.current) {
    (1.dp / zoomPRState.scale).toPx().toDouble()
}

[p-lr]

Ok for reducing the epsilon. I'm surprised you have an anti-aliasing issue. On my device it renders perfectly. Did you have the issue with previous paths? I'll double check.

[Nohus]

I rechecked on a physical device and the paths render correctly, it seems the anti-aliasing issue was emulator-specific, maybe the emulator I used lacks hardware acceleration. False alarm!

[p-lr]

I'm relieved!