如何在Pixijs中与形状互动？

Question

I am trying to get the id of the shape my mouse is currently hovering over.

my shapes are in a container

// creating the layers
gridLayer = new PIXI.DisplayObjectContainer ();
gridLayer.setInteractive(true);
stage.addChild(gridLayer);

and i am creating each shape like this;

function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) {
    var shape = new PIXI.Graphics();
    // set a fill and line style
    shape.beginFill(color);
    shape.lineStyle(1, 0xa0a0a0, 1);
    size = size-gap;

    for (i = 0; i < 7; i++) {
        angle = 2 * Math.PI / 6 * (i + 0.5);
        var x_i = x + size * Math.cos(angle);
        var y_i = y + size * Math.sin(angle);


        if (i === 0) { 
            shape.moveTo(x_i, scale *y_i) 
        }
        else {
            shape.lineTo(x_i, scale * y_i)
        }
    };

    shape.endFill();

    // calculate and save the axial coordinates
    var cX = iterJ - (iterI - (iterI&1)) / 2;
    var cZ = iterI;
    var cY = -1*(cX+cZ);

    shape.hexId = cX + "x" + cY + "y" + cZ + "z";
    shape.hexPosX = x;
    shape.hexPosY = y;

    shape.setInteractive(true);
    shape.mouseover = function(mouseData){
       console.log("MOUSE OVER " + shape.hexId);
    }
    shape.click = function(mouseData){
       console.log("MOUSE CLICK " + shape.hexId);
    }
    gridLayer.addChild(shape);
}

However, clicking on any shape or hovering over it is not showing me anything in the console. what am i doing wrong?

i have tried both

shape.setInteractive(true)

and

shape.interactive = true

but neither seems to work for me.

EDIT: i have added a jsfiddle. it doesnt works (i dont know how to link things in jsfiddle) but you can see my entire code in there. http://jsfiddle.net/9aqHz/1/

Answer 1

For a PIXI.Graphics object to be interactive you need to set a hitArea shape (it can be a Rectangle, Circle or a Polygon):

shape.hitArea = new PIXI.Polygon([
   new PIXI.Point(/* first point */),
   new PIXI.Point(/* second point */),
   new PIXI.Point(/* third point */),
   new PIXI.Point(/* fourth point */),
   new PIXI.Point(/* fifth point */)
]);

Another approach would be to generate a texture from the shape and use a Sprite, but the hit area would be the entire rectangular bounds of the hexagon:

var texture = shape.generateTexture();
var sprite = new PIXI.Sprite(texture);
sprite.setInteractive(true);
sprite.anchor.set(0.5, 0.5);

Fiddle with this applied to your example

Answer 2

@imcg I updated your code so it workes with Pixi 3.0.8

- sprite.setInteractive(true);
+ shape.interactive = true;
+ shape.buttonMode = true;

- sprite.setInteractive(true)
+ sprite.interactive = true;
+ sprite.buttonMode = true;

http://jsfiddle.net/LP2j8/56/

Answer 3

I will add a bit of info for anyone who is in the same boat i was in;

When you define a shape as a geom, you have to explicitly state a hitarea.

So adding the following code makes it work;

shape.hitArea = new PIXI.Polygon(vertices);
shape.interactive = true;

shape.click = function(mouseData){
   console.log("MOUSE CLICK " + shape.hexId);
}

But, when you define a shape as a sprite/texture, you dont need to do this. in cases of sprites, just setting shape.interactive = true for the sprite is sufficient. You dont need to set the interactive property for the parent object or the stage.