fix(clip): add an extra space to the clip-path width to prevent unexpected clip. close #19051

[RexSkz]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Add an extra space to the clip-path width. This will prevent the unexpected clip.

Fixed issues

• [Bug] Series-line is clipped incorrectly at the rightmost position #19051

Details

Before: What was the problem?

As the example https://codepen.io/rexskz/pen/WNLweyw shows, the rightmost position of the line that has cap: 'round' is clipped incorrectly, while the leftmost part is okay.

This issue only happens on the device with devicePixelRatio >= 3, and the chart canvas must have a special width.

After: How does it behave after the fixing?

The rightmost position of the line should not be clipped.

This is caused by a round-off error.

Let's see if the rect is:

x = 80.8;      // float
y = 100;
width = 500.4; // float
height = 100;
// x + width = 581.2

Browsers will render the clip-path using rect but handle the value as integers, so the original code converts x and width to integers:

x = Math.floor(x);         // 80
width = Math.round(width); // 500
// x + width = 580

The result is 1.2 less, meaning the graph's rightmost 1.2px will be clipped.

To make sure the clip-path wraps the whole graph, the x should keep floored, but the width should be ceiled (not rounded), and if x is floored, width should be add an extra 1px.

P.S. During the visual test, I found that some cases may also be clipped incorrectly before, and will be corrected in this PR, for example:

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

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

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.

[RexSkz]

@Ovilia Done; please take a look and notify me if there are other suggestions :)

[RexSkz]

How about triggering the workflow? I'll quickly fix the raised issue if there is one :)

[github-actions]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-19056@a57202d

[RexSkz]

It looks good :)

https://echarts.apache.org/examples/en/editor.html?version=PR-19056%405491cb3&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdPqVgAjYJaFcA4oxBEAZowA2eFR2sAC-weQ4-ESo9hTUdABu_kq0JGEkgUZUhLCi_MT2gsJiAIwArAAMPLAATADMVbU1ACzVNSUAHNUldWXdzQDs3ZW2-ehxNLJ-ENDKwfZ42sAA7ibkALZOfj7-gfOk07MmFH6TMYXoyxACYNpEfWOkTF6yHM7Qmvvo6fY_sKMhADcQA

[Ovilia]

Hi, I checked the demo with 5.4.3 and it seems not to be clipped. Did I miss anything here?

[RexSkz]

Hi, I checked the demo with 5.4.3 and it seems not to be clipped. Did I miss anything here?

Slightly resize the page to a specific width (e.g. 1346px ~ 1348px in my Mac) and you'll see the clipping issue at the right:

The correct behaviour should be:

[RexSkz]

Oh, it seems that using Math.ceil is enough, no need to consider DPR... (The line width is 50px but the error is 1px, it must be a round-off error only.)

I'll change my code and see if it works well.

[RexSkz]

Hi @Ovilia, I've made changes to my code and the content of this PR. Please have a look, it should be a lot simpler than the previous version~

[Ovilia]

Thanks for your contribution. Please don't use force push in your next PR because we'd like to record every commit changes. Don't worry if there are too many commits. The reviewer will use squash push when necessary.

[echarts-bot]

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