Pixi JS - 'Sprite from Texture' 不采用命中区域多边形答案

【问题标题】：Pixi JS - 'Sprite from Texture' not taking Hit Area PolygonPixi JS - 'Sprite from Texture' 不采用命中区域多边形
【发布时间】：2015-01-24 10:33:11
【问题描述】：

为众多 Pixi JS 问题道歉；我目前正在考虑这一切。我有一个纹理定义如下的精灵：

// Create sprite
            spriteObj = new PIXI.Sprite(tileTexture);
            spriteObj.interactive = true;

            spriteObj.anchor = new PIXI.Point(0,0.5);

            spriteObj.click = function(mouseData){
            alert("Clicked Me!");
            };

然后我使用多边形创建一个命中区域，如下所示：

polyCords = new PIXI.Polygon([
                            new PIXI.Point(xPos,yPos),
                            new PIXI.Point(xPos + (tileWidth / 2), yPos + (tileHeight/2)),
                            new PIXI.Point(xPos + tileWidth, tyPos),
                            new PIXI.Point(xPos + tileWidth / 2, this.yPos - (tileHeight/2)),
                    ]);

我将多边形指定为精灵的命中区域：

spriteObj.hitArea = polyCords;

然后将精灵添加到舞台：

stage.addChild(spriteObj);

到目前为止一切顺利。但是，命中区域不正确。为了测试命中区域的坐标是否正确，我使用图形对象绘制了一个代表多边形的彩色形状，如下所示：

testTile = new PIXI.Graphics();
testTile.beginFill(0x21B837);
                testTile.drawShape(polyCords);
testTile.endFill();
stage.addChild(testTile);

形状绘制（完美），我期望的命中区域，但实际命中区域与我绘制的形状不对应！

有什么想法吗？

提前致谢。

【问题讨论】：

标签： javascript collision-detection hittest pixi.js

【解决方案1】：

以下 TypeScript 可与 PIXI v3.0.3 完美配合

SpriteFromPoints(graphics, points /*PIXI.Point[]*/, bounds /*{x, y, width, height}*/, isInteractive) {
    var polygon = graphics.drawPolygon(points);
    var zoneSprite = new PIXI.Sprite(polygon.generateTexture(1, (<any>PIXI).SCALE_MODES.DEFAULT));// no d.ts yet for v3
    zoneSprite.position.x = bounds.x;
    zoneSprite.position.y = bounds.y;
    zoneSprite.interactive = isInteractive || false;
    if (zoneSprite.interactive) {
        // can't assign the polygon from above for whatever reason
        // seems to be a different type and doesn't have the contains method
        zoneSprite.hitArea = new PIXI.Polygon(points); 
    }
    return zoneSprite;
}

添加返回的精灵，命中区域是我所期望的。

【讨论】：