Feature Request: HTML Annotations #451
Comments
|
something like this https://codesandbox.io/s/react-pixi-annotation-txfflh?file=/src/App.js ? |
|
It would be super useful to have first-party support for this scenario also for me. My use-case would be to to display interactors (buttons/etc.) which re-use the same styling/components of the rest of the app on top of the Pixi canvas. I played a bit with the CodeSanbox link and it's 90% there. I had to futz with the calculation of the left/top coordinates and ended up with something like this to display the HTML annotation at a given x/y in the Pixi coordinate system: const HTML = forwardRef(function Html(
{ coords = { x: 0, y: 0 }, as = "div", className, children, ...props },
ref
) {
// ...
useTick(() => {
// ...
htmlRef.current.style.left = `${globalPosition.x + coords.x}px`;
htmlRef.current.style.top = `${globalPosition.y + coords.y}px`;
});
// ...I suspect that this implementation doesn't handle all the edge-cases, so it would be super useful to have this solved properly in the library itself. If a maintainer can provide me with some direction, I may be able to open a pull request for this. Thanks in advance for any input! |
|
One issue I came across is with clipping. If the html element goes out of bounds of canvas it doesn't get clipped, we need "overflow hidden" kinda behaviour apart from that I'm not sure how it will break. Also I don't think it should be part of react pixi, it should be different package itself considering this lib is more about pixi binding with react so won't make sense to have such component as part of lib. Even if you look at react three community Html component it is not part of fiber but comes out of react three drei which makes more sense to me. |
Description
When using pixi-react to create Sprites, I would like to get the position of those sprites in order to place HTML annotations / hotspots on top of them.
By position, I am referring to the position from the top-left of the browser's viewport in px, not the position within the canvas element. Such that, I can then use those px values to position my HTML annotation element via CSS.
Does Pixi.js and/or pixi-react provide any functionality for this? I am looking for either a simple way to get the position of a sprite as described above, or - even better - an
<HTML>Pixi Component that allows me to straightforwardly add HTML to a Sprite and that keeps the positions in sync when the Sprite or its Container or Viewport (plugin) is moved around.React-Three-Fibre offers this functionality in a very convenient way, see HTML Annotations: https://codesandbox.io/s/zu2wo
Could pixi-react do something similar?
The text was updated successfully, but these errors were encountered: