Hi all!
I'm having a problem with PIXI.Graphics in a Container or Sprite when interactive property is set to true.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="conteudo/src/libs/pixi.js"></script>
<script>
var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
// create the root of the scene graph
var stage = new PIXI.Container();
var graphics=new PIXI.Graphics();
graphics
//.lineStyle(1,0x000000,1)
.beginFill(0xFF0000,1)
.moveTo(100,100)
.lineTo(200,200)
.lineTo(300,300)
.lineTo(200,400);
var container=new PIXI.Container();
container.addChild(graphics);
stage.addChild(container);
container.interactive=true;
container.buttonMode=true;
container.on('mousedown',function(){console.log('down');},false);
// start animating
animate();
function animate() {
requestAnimationFrame(animate);
// render the container
renderer.render(stage);
}
</script>
</body>
</html>
I draw there a triangle and set the interactive property of the container to true.
In PIXI v3 all went fine, the triangle is drawn to the stage and even the events only fire if i press the mouse inside the red triangle.
In PIXI v4 the triangle appears and disappears instantly. To maintain the triangle on canvas, I have to define a lineStyle to graphics and even so, the events do not fire (unless i use a sprite instead of a container and define a hit Area or a size and height).
I noticed that this only happens if interactive is set to true.
Is this an expected behavior? Is there a solution for this or still in development? Am I doing something wrong here?
Thanks in advance