Update hitarea after resize #7282
Replies: 3 comments 1 reply
-
There's a shortcut for hitArea/filterArea stuff:
|
Beta Was this translation helpful? Give feedback.
-
Thanks @ivanpopelyshev for reply, but sadly It doesn't solve the problem after resize. |
Beta Was this translation helpful? Give feedback.
-
Your drawing code is too complicated, and that's what's causing your confusion. To start - the hit-area is defined in the local space of the target object. That implies it will move with it. There are three things that depend on the dimensions of the window:
Your code only updates the first dependency. As such, the container "appears" to shift the center rectangle in-step with the screen. Except it doesn't. Let me explain. Shifting of the originThe local space of any DisplayObject, here the (x - px, y - py) // Initialization
container.x = app.screen.width / 2
container.y = app.screen.height / 2
container.pivot.x = window.innerWidth / 2
container.pivot.y = window.innerHeight / 2 You initialize the container so that the origin is equal to (0, 0) in the canvas view. (i.e. app.screen.width / 2 - window.innerWidth / 2 = 0, app.screen.height / 2 - window.innerHeight / 2 = 0) When you resize, however, you aren't updating the pivot. So what happens: container.x = app.screen.width / 2
container.y = app.screen.height / 2 The origin of the container now becomes (newWidth / 2 - oldWidth / 2, newHeight / 2 - oldHeight / 2). You never moved the hitArea. Implicationscontainer.on('pointerdown', (event) => {
let rect = new PIXI.Graphics()
.beginFill(0xff0000)
.drawRect(event.data.global.x, event.data.global.y, 100, 100);
container.addChild(rect)
}) Since you shifted the origin of the container, anything you add as a child in the container will also be shifted by that amount. Since you are using the "global" coordinates of the pointer (which remain same after shifting), adding a graphics with those coordinates will also shift. FixYou need to update your 1. Fix your origin shifting// resize()
container.x = app.screen.width / 2
container.y = app.screen.height / 2
container.pivot.x = window.innerWidth / 2 // or app.screen.width / 2
container.pivot.y = window.innerHeight / 2 // or app.screen.height / 2
// Also redraw the center rect because it needs to redraw in its local space, without shifting its own origin. This
// means the hit-area won't have to be readjusted
center.clear()
.beginFill(0x00FF00)
.drawRect(window.innerWidth / 2 - 50, window.innerHeight / 2 - 50, 100, 100) 2. Transform global pointer coordinates into local spacecontainer.on('pointerdown', (event) => {
// Move into container's local space since we are drawing in an equivalent space
let loc = event.data.getLocalPosition(container);
let rect = new PIXI.Graphics()
.beginFill(0xff0000)
.drawRect(loc.x, loc.y, 100, 100);
container.addChild(rect)
}) NOTE: The hitArea will remain shifted with this solution. This doesn't address the shifting of container, that's why 3. Don't use the 3 degrees of freedom together - position, pivot, and drawRectInstead of tinkering with position + pivot and then a shifted drawRect, make your drawRect centered at the DisplayObject's origin and then set the position only on the center.beginFill(0xff0000)
.drawRect(-50, -50, 100, 100);
// Update this on resize() instead
center.position.set(window.innerWidth / 2, window.innerHeight / 2);
// Never move container!
container.hitArea = new PIXI.Rectangle(0, 0, window.innerWidth, window.innerHeight / 2); |
Beta Was this translation helpful? Give feedback.
-
Hi guys,
I've a problem when I try to catch event on fullscreen hitarea of container after window resize.
In my case, I need to mantain the central stage (in the example initial the green square) always in the center of screen, also after resize) and add other squares around by click.
The stage is ok, the container resize is enought, but after resize the coordinates of the click are wrong.
I've read about moving every single element after resize but in my case could be a problem for the number of elements.
Any idea or suggestion about?
Thanks in advance 🙏
pixi.js
version: 5.3.7Beta Was this translation helpful? Give feedback.
All reactions