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

The bounding box information obtained by the canvas element and the html element is inconsistent #1743

Closed
wang1212 opened this issue Aug 2, 2024 · 0 comments · Fixed by #1744
Labels

Comments

@wang1212
Copy link
Member

wang1212 commented Aug 2, 2024

Create a canvas element and an html element and make them completely overlap:

const circle = new Circle({
  style: {
    cx: 200,
    cy: 200,
    r: 50,
    fill: 'red',
  },
});

const html = new HTML({
  style: {
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    innerHTML:
      '<h1 style="width: 100px; height: 100px;">This is Title</h1>',
  },
});

Measure the bounding box information in three situations:

  • initial state
  • camera translation
  • camera zoom

and compare them.

image

As shown in the figure above, the bounding box information of the html element will change, while that of the canvas element (circle) will not change.


The inconsistency between the canvas element and the html element behavior results in some incorrect visual effects when the two are used together, such as antvis/G6#5781


@wang1212 wang1212 added the bug label Aug 2, 2024
wang1212 added a commit that referenced this issue 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
wang1212 added a commit that referenced this issue 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.
wang1212 added a commit that referenced this issue 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.
wang1212 added a commit that referenced this issue 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>
@wang1212 wang1212 closed this as completed Aug 6, 2024
@wang1212 wang1212 reopened this Aug 28, 2024
wang1212 added a commit that referenced this issue 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>
@wang1212 wang1212 closed this as completed Sep 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant