fix: html element's `getBounds` logic exception (#1743)
π€ This is a ...
- [ ] New feature
- [x] Bug fix
- [ ] Site / Document optimization
- [ ] TypeScript definition update
- [ ] Refactoring
- [ ] Performance improvement
- [ ] Code style optimization
- [ ] Test Case
- [ ] Branch merge
- [ ] Other (about what?)
π Related issue link
fixed #1743
π‘ Background and solution
In #1744, the problem was partially solved by removing the camera's transformation matrix from the result of getBoundingClientRect() on the html element, but the problem still occurred when the drawing canvas element was not in the top left corner of the page (i.e. left/top was not equal to 0).
In order to completely solve this problem, we deeply analyzed the logical differences between the same methods of the canvas element and the html element, and found that their calculation logic is opposite. For the canvas element, the calculation of getBoundingClientRect() depends on the result of getBounds(), while for html it is the opposite. At the same time, this leads to a serious problem, that is, the calculation results of getBoundingClientRect() of the canvas element are inconsistent with those of getBoundingClientRect() of dom in some cases.
There are two options to solve this problem. The first option is to make the calculation logic of getBoundingClientRect() of the canvas element consistent with that of the dom. This seems difficult because there are a lot of differences in details between the matrix transformation of the dom and the matrix transformation of the canvas. The second option is to adjust the calculation logic of the html element to be consistent with that of the canvas. Although this will lead to inconsistencies with the calculation results of getBoundingClientRect() of the dom, it at least ensures the consistency between the html element and the canvas element.
π Changelog
| Language | Changelog |
|---|---|
| πΊπΈ English | fix: html element's getBounds logic exception (#1743) |
| π¨π³ Chinese | fix: html ε
η΄ η getBounds ι»θΎεΌεΈΈ |
βοΈ Self Check before Merge
- [x] Doc is updated/provided or not needed
- [x] Demo is updated/provided or not needed
- [x] TypeScript definition is updated/provided or not needed
- [x] Changelog is provided or not needed