fix(handleIcon): unexpected aspect ratio of handleIcon

[zzc6332]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

The issue #18444 mentioned that when the handleIcon is customized as an image dataUrl, it becomes stretched when setOption or resize is called again. This issue was closed by author because the phenomenon did not occur when the custom handleIcon had equal width and height. However, I believe it's important to support images with an aspect ratio other than 1:1, so I made some modifications to handle that.

Fixed issues

Details

Before: What was the problem?

This is a link to minimal reproduction:
https://stackblitz.com/edit/stackblitz-starters-whzflubq?file=index.html
In this example, the handleIcon is customized using a dataURL, and its aspect ratio is not 1:1.

1. Observe the aspect ratio of handleIcon when setOption is called for the first time:
   
2. Two seconds later, when setOption is called again, it is easy to observe that the aspect ratio of the handleIcon has changed:
   

After: How does it behave after the fixing?

In /src/graphic.ts, an onload callback is passed when creating a ZRImage, which calibrates the image's aspect ratio and is triggered only during the first rendering of the chart. Therefore, I appended an additional calibration step after creating ZRImage. I used a new Image object to load the dataURL and obtain the accurate dimensions of the image. Normally, the image dimensions are obtained via the onload callback, but this will cause the rendered image size to fluctuate:

I discovered that if the dataURL has been loaded before, the image dimensions can often be retrieved synchronously from cache. In such cases, I perform the aspect ratio calibration synchronously. However, since I'm not certain all browsers support this caching behavior reliably, I repeated the calibration within the onload callback to ensure that the obtained dimensions are ultimately accurate.

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.

[Ovilia]

This doesn't seem like the correct position to fix this problem. It seems moveHandleIcon already passes true for keepAspect. You may step into the code around here to find more.