fix: html element's getBounds logic exception (#1743)
#1764
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Aarebecca
reviewed
Aug 30, 2024
| // const { x, y, width, height } = this.parsedStyle; | ||
| // return new Rectangle(x, y, width, height); | ||
| // } | ||
| // } |
There was a problem hiding this comment.
这个函数注释掉是要去掉还是保留？可能有一些库依赖了这个函数，需要确认下
There was a problem hiding this comment.
这里的实现原本是覆盖了基类的实现，而且计算结果与 canvas 元素的也不一致，现在注释掉就相当于采用基类的实现了，保持 html 与 canvas 元素的计算结果一致，但在某些情况下会导致与 dom api 的计算结果不一致
| const canvasRect = this.ownerDocument?.defaultView | ||
| ?.getContextService() | ||
| .getBoundingClientRect(); | ||
| // getBounds() { |
There was a problem hiding this comment.
这里也一样，采用基类的实现，保证 html 元素与 canvas 元素的实现一致，获取的结果也一致
|
If you have problems using |
hustcc
approved these changes
Aug 30, 2024
wang1212
added a commit
that referenced
this pull request
Aug 30, 2024
* chore: add preview demo npm script * fix: `path` elements are drawn incorrectly (#1761) * fix: `path` elements are drawn incorrectly after using `markerStartOffset` (#1760) * chore: revert package.json * fix: html element's `getBounds` logic exception (#1743) (#1764) * Version Packages (#1762) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 This is a ...
🔗 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 ofgetBounds(), while for html it is the opposite. At the same time, this leads to a serious problem, that is, the calculation results ofgetBoundingClientRect()of the canvas element are inconsistent with those ofgetBoundingClientRect()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 ofgetBoundingClientRect()of the dom, it at least ensures the consistency between the html element and the canvas element.📝 Changelog
getBoundslogic exception (#1743)getBounds逻辑异常☑️ Self Check before Merge