Jump to content

Any known issues with hitArea dimensions on iPad orientation change?


andreas_d
 Share

Recommended Posts

Hi everyone,

 

This is a difficult one to describe.  Essentially the hitArea set on a Class that inherits from container acts erratically after an orientation change on the iPad.

 

Maybe I don't understand the relationship of the hitArea rectangle to the parent containers.  I have removed any scaling, the renderer.resize action etc.  I have the following code in a class that extends PIXI.Container

	this.stack = new RenderStack();  // renderStack extends PIXI.Container	this.addChild(this.stack);	// console.log(typeof w)  console.log(typeof h)  are both number and are passed in class instantiation	this.addChild( new PIXI.Graphics().beginFill().drawRect(0,0,w/2,h/2).endFill() );	this.stack.hitArea = new PIXI.Rectangle( 0, 0, w/2, h/2);	

on an iPad.  when changing orientation the hitArea and the PIXI.Graphics do not match.  hitArea is distorted

 

http://www.turnoffthe.tv/tests/pixi/test/

 

Am I missing something obvious? Any input is greatly appreciated

 

Thanks,

Andreas

 

Link to comment
Share on other sites

nope all .height and .width properties are just props on vanilla objects (storing values).  

 

Only place that PIXI values are altered are in last 3 lines of adjustLayout()  in which .position.y is changed and hitAreas are altered with dirty hack  using .refreshHitArea()   : )

 

code's gotten unruly on this at the moment I need to refactor.  I've been scratching my head on this all day. It could be my code somewhere, but i systematically turned everything off until  .hitArea = PIXI.Rectangle() was  being distorted by an orientation change

Link to comment
Share on other sites

But your hit area is defined based on the screen size:

if(bool)scarfs[0].refreshHitArea(screenProps.tmpwidth / screenProps.width, screenProps.tmpheight/screenProps.height);if(bool)scarfs[1].refreshHitArea(screenProps.tmpwidth / screenProps.width, screenProps.tmpheight/screenProps.height);

So it definitely needs to be updated when you change orientation. Is the problem that the hitarea isn't updating properly, or that the shape is wrong?

Link to comment
Share on other sites

those 2 lines of code where my *fix* .  Basically I was getting something like the following: 

Say I set the .hitArea = new PIXI.Rectangle(0, 0, 500, 200)  .

On orientation change it wouldn't update as expected and the hitArea would be something like this hitArea =  new PIXI.Rectangle(0, 0, 200, 500

 

I fixed it by multiplying the Rectangle dimensions by the ratio of pre-orientation-change-width / post-orientation-change-width  and height

Link to comment
Share on other sites

Hi xerver,

 

Your initial suspicion was correct.  It is a problem with the interaction manager.

 

hitArea working on iPad orientation change

http://www.turnoffthe.tv/tests/pixi/test/resize.html

 

hitArea distorted on iPad orientation change interaction delegated to different DOM element using:

renderer.plugins.interaction.setTargetElement(overlay) 

http://www.turnoffthe.tv/tests/pixi/test/resize-int.html

 

 

not entirely sure how to flag this. should I just create a new issue?  or add comments to the one's you pointed out ?

 

https://github.com/p....js/issues/1896

https://github.com/p....js/issues/1848

 

Andreas

Link to comment
Share on other sites

It's not really even a bug but in this method 

InteractionManager.prototype.mapPositionToPoint = function ( point, x, y ){    var rect = this.interactionDOMElement.getBoundingClientRect();    point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width  / rect.width  ) ) / this.resolution;    point.y = ( ( y - rect.top  ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution;};

this.interactionDOMElement.width and this.interactionDOMElement.height are assumed properties that are not actually dom element properties




			
		
Link to comment
Share on other sites

 

It's not really even a bug but in this method 

InteractionManager.prototype.mapPositionToPoint = function ( point, x, y ){    var rect = this.interactionDOMElement.getBoundingClientRect();    point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width  / rect.width  ) ) / this.resolution;    point.y = ( ( y - rect.top  ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution;};

this.interactionDOMElement.width and this.interactionDOMElement.height are assumed properties that are not actually dom element properties

 

Good catch, that method assumes the element is a canvas (which obviously isn't correct). Would you mind sticking that into an issue for me so I don't forget?

 

Thanks for looking into this!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...