Unreliable mouse interaction with rope mesh

[aatish]

Hi, I'm trying to modify the 'strip' pixi.js example that demonstrates the rope mesh. I tried adding interactivity to the rope so that when I click it the size changes.

https://codepen.io/aatish/pen/yJPWBx

However, the click behavior seems unreliable for me. It works in some places and not in others, and I'm having trouble understanding where in the image I should be clicking for the interaction to occur. Ideally I would like the interaction behavior to happen whenever I click within the boundaries of the snake. 

Any pointers would be much appreciated.

Best,

Aatish

 

 

[ivan.popelyshev]

wow, thats a real bug

[aatish]

Hmm.. ok, I posted it as an issue as well: https://github.com/pixijs/pixi.js/issues/2717

[ivan.popelyshev]

Actually, thats not a bug. PIXI cant detect what is the size of your canvas, it must be exactly 1:1 with CSS pixel. If you have a way of detecting it, please tell me

[aatish]

I don't understand. Could you suggest what I might try to fix it? Thanks!

[ivan.popelyshev]

resize the canvas/renderer

[aatish]

Do you mean add something like:

var w = window.innerWidth;    
var h = window.innerHeight;
renderer.view.style.width = w + "px";
renderer.view.style.height = h + "px";
renderer.resize(w,h);

after creating the renderer? 

I tried that and it doesn't work. There are still many places I can click on the snake where it doesn't resize.

[ivan.popelyshev]

that's a bit better

[ivan.popelyshev]

https://github.com/pixijs/pixi.js/pull/2718