Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(line): soft clipping gradient. #15711

merged 1 commit into from
Sep 14, 2021

fix(line): soft clipping gradient. #15711

merged 1 commit into from
Sep 14, 2021


Copy link

@pissang pissang commented Sep 13, 2021

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



Before: What was the problem?


After: How is it fixed in this PR?



  • 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



Merging options

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

Other information

Copy link

echarts-bot bot commented Sep 13, 2021

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.

Copy link

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

Copy link
Contributor Author

pissang commented Sep 13, 2021

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

Copy link

dignfei commented Sep 14, 2021


Copy link
Contributor Author

pissang commented Sep 14, 2021

@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.;l=29;drc=a9641800e0e8f7a2ea9a5f55f831b632e990a0e0;bpv=1;bpt=1;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.

@pissang pissang merged commit bdafcbc into master Sep 14, 2021
Copy link

echarts-bot bot commented Sep 14, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

3 participants