fix(line): soft clipping gradient.

[pissang]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

In the cases like #15680. The coordinates range of gradient objects is very large. Which leads to blurry transition when GPU acceleration is enabled in chrome. Only version 5.1 doesn't have this issue because we clamped the data. But it will cause infinite value wrong appearance. So in this PR #15416 we removed the clamping and this blurry issue appears again.

In this PR. I clamp the color stops and recalculate the clamped color in LineView.ts. It should fix both issues mentioned above.

Fixed issues

#15680

Details

Before: What was the problem?

After: How is it fixed in this PR?

Misc

• The API has been changed (apache/echarts-doc#xxx).
• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

NA.

Others

Merging options

• Please squash the commits into a single one when merge.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

[plainheart]

It can solve but doesn't seem to solve perfectly...

[pissang]

@plainheart Yes, the leaking issue is hard to be totally eliminated because of the limitation of the canvas gradient.

[dignfei]

大佬牛逼

[pissang]

@plainheart I did some search on how skia draws the gradient with OpenGL. Seems it will use a 256 width texture(bitmap) to cache the gradient pixels when the color stops is complex(more than 16). The size is much smaller than the canvas width. So it can't be pixel-accurate.

https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/gpu/gradients/GrGradientShader.cpp;l=29;drc=a9641800e0e8f7a2ea9a5f55f831b632e990a0e0;bpv=1;bpt=1

https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/gpu/gradients/GrGradientShader.cpp;l=132;drc=a9641800e0e8f7a2ea9a5f55f831b632e990a0e0;bpv=1;bpt=1

One way to solve this issue I can think of is to split the gradient into multiples and draw them on a full-width canvas. Then use this canvas as a CanvasPattern.

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍