Brief Information
This pull request is in the type of:
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.
- Observe the aspect ratio of handleIcon when setOption is called for the first time:
image
- Two seconds later, when setOption is called again, it is easy to observe that the aspect ratio of the handleIcon has changed:
image
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:
001
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.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
N.A.
Others
Merging options
Other information
Uh oh!
There was an error while loading. Please reload this page.
Brief Information
This pull request is in the type of:
What does this PR do?
The issue #18444 mentioned that when the handleIcon is customized as an image dataUrl, it becomes stretched when
setOptionorresizeis 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.
image
image
After: How does it behave after the fixing?
In
/src/graphic.ts, anonloadcallback is passed when creating aZRImage, 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 creatingZRImage. I used a newImageobject to load the dataURL and obtain the accurate dimensions of the image. Normally, the image dimensions are obtained via theonloadcallback, but this will cause the rendered image size to fluctuate:001
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.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
N.A.
Others
Merging options
Other information