G icon indicating copy to clipboard operation
G copied to clipboard

fix: html element's `getBounds` logic exception (#1743)

Open wang1212 opened this issue 1 year ago β€’ 0 comments

πŸ€” 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

wang1212 avatar Aug 29 '24 09:08 wang1212