aspikmoi Posted October 20, 2016 Share Posted October 20, 2016 Hi everyone, the interaction in Pixi confuses me. I have the following simple structure: <div> <canvas id='pixi-container'></canvas> <div id='event-catcher'></div> </div> Both the canvas and the event-catcher have the same width/height and are positionned on top of each other: event-catcher on top of pixi-container. I then use the setTargetElement to tell pixi that I want event-catcher to catch the events. myRenderer.plugins.interaction.setTargetElement(document.getElementById('event-catcher')); However in my stage I have some sprites and DisplayObjectContainers that have onclick events that are not being fired. If I remove the event-catcher div it will work properly and click events are fired. Do I misunderstand the use of setTargetElement in Pixi? Thank you for any help. Quote Link to comment Share on other sites More sharing options...
xerver Posted October 20, 2016 Share Posted October 20, 2016 Can you create a running example that reproduces the behavior please? Also, include what version of pixi you are using. Quote Link to comment Share on other sites More sharing options...
aspikmoi Posted October 24, 2016 Author Share Posted October 24, 2016 Hi, sorry I did not see your reply. I am using pixi 4.1.0. I found what the problem was in this function: InteractionManager.prototype.mapPositionToPoint = function mapPositionToPoint(point, x, y) { var rect = void 0; // IE 11 fix if (!this.interactionDOMElement.parentElement) { rect = { x: 0, y: 0, width: 0, height: 0 }; } else { 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; }; the width and height of the interactionDOMElement are undefined, unless it is a canvas (and maybe some other elements such as images, I am not sure). I have replaced width and height by clientWidth and clientHeight and it works (at least the mousedown is at the good place and my sprite is being selected). Another solution is to set the width and height attributes of the DOMelement before setting the target and it works too. point.x = (x - rect.left) * (this.interactionDOMElement.clientWidth / rect.width) / this.resolution; point.y = (y - rect.top) * (this.interactionDOMElement.clientHeight / rect.height) / this.resolution; Or var eventCatcher = document.getElementById('event-catcher'); eventCatcher.width = XXX; eventCatcher.height = YYY; myRenderer.plugins.interaction.setTargetElement(eventCatcher); I don't know if it is a bug or not given the differences between clientWidth and width (no difference in my case for my DOMelement), so let me know what you think. Quote Link to comment Share on other sites More sharing options...
xerver Posted October 24, 2016 Share Posted October 24, 2016 Oh thats right, we only support a canvas as the interaction element currently. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.