Skip to content
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 bounding box calculation logic #1743 #1744

Merged
merged 1 commit into from
Aug 5, 2024
Merged

Conversation

wang1212
Copy link
Member

@wang1212 wang1212 commented Aug 5, 2024

Subtract the camera's transformation from the bounding box calculation logic of the HTML element to keep the result consistent with the native canvas element

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / Document optimization
  • TypeScript definition update
  • Refactoring
  • Performance improvement
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

Detailed questions can be found #1743 .

The root cause is that the camera transformation and element transformation of G are independent, which means that if only the camera is adjusted, the transformation of the canvas element will not change.

However, the implementation of getBoundingClientRect() of HTML type elements simply calls the DOM API, because the transformation of the camera div element as the parent element is also included, which is inconsistent with the calculation logic of the canvas element.

Therefore, the camera transformation needs to be eliminated in the implementation of getBoundingClientRect() of HTML type elements.

📝 Changelog

Language Changelog
🇺🇸 English fix: subtract the camera's transformation from the bounding box calculation logic of the HTML element to keep the result consistent with the native canvas element (#1743)
🇨🇳 Chinese fix: HTML 元素包围盒计算逻辑中减去相机的变换,保持和原生 canvas 元素的结果一致 (#1743)

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Subtract the camera's transformation from the bounding box calculation logic of the `HTML` element to keep the result consistent with the native canvas element.
@wang1212 wang1212 changed the base branch from next to release August 5, 2024 06:44
@wang1212 wang1212 requested a review from Aarebecca August 5, 2024 06:45
/**
* will return a new rect instance
*/
static applyTransform(rect: Rectangle, matrix: mat4) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个放到工具方法会不会好些

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个参考了其它 shape 的实现,发现大部分变换相关的都是在 class 里面直接实现的,目前用途相对单一,后续如果有其它模块的依赖,可以考虑重构一下作为工具函数实现

@wang1212 wang1212 requested a review from Aarebecca August 5, 2024 07:50
@wang1212 wang1212 merged commit 8832fb0 into release Aug 5, 2024
5 checks passed
@wang1212 wang1212 deleted the fix-1743 branch August 5, 2024 09:48
wang1212 added a commit that referenced this pull request Aug 5, 2024
* fix: `HTML` element bounding box calculation logic #1743 (#1744)

Subtract the camera's transformation from the bounding box calculation logic of the `HTML` element to keep the result consistent with the native canvas element.

* Version Packages (#1745)

* chore(release): bump version

* chore: update g-lite changelog

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: wang1212 <mrwang1212@126.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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The bounding box information obtained by the canvas element and the html element is inconsistent
2 participants