-
Notifications
You must be signed in to change notification settings - Fork 199
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: html element's getBounds
logic exception (#1743)
#1764
Conversation
// const { x, y, width, height } = this.parsedStyle; | ||
// return new Rectangle(x, y, width, height); | ||
// } | ||
// } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个函数注释掉是要去掉还是保留?可能有一些库依赖了这个函数,需要确认下
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里的实现原本是覆盖了基类的实现,而且计算结果与 canvas 元素的也不一致,现在注释掉就相当于采用基类的实现了,保持 html 与 canvas 元素的计算结果一致,但在某些情况下会导致与 dom api 的计算结果不一致
const canvasRect = this.ownerDocument?.defaultView | ||
?.getContextService() | ||
.getBoundingClientRect(); | ||
// getBounds() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
同上
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里也一样,采用基类的实现,保证 html 元素与 canvas 元素的实现一致,获取的结果也一致
If you have problems using |
* 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>
🤔 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
getBounds
logic exception (#1743)getBounds
逻辑异常☑️ Self Check before Merge