Jump to content

graphics & interactive set to true


nmiguelmoura
 Share

Recommended Posts

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

Link to comment
Share on other sites

Hi Ivan,

Perhaps it is related, but i see the graphics show up and disappear immediately (if i have a lineStyle defined they don't disappear).

In the particular case i'm working on, I don't care about the graphics being displayed or not. What i really care is the interactivity, and that is not working at all. Is there any other way to accomplish the same results? I mean, is it possible to assign a custom graphic (like the triangle on my code or more complex shapes) to the hitArea of a Sprite or Container (instead of just assign Rectangles and Circles)?

Thanks

 

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...