为众多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);
形状绘制(完美),我期望的命中区域,但实际命中区域与我绘制的形状不对应!
这里有什么想法?
提前致谢。
答案 0 :(得分: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;
}
添加返回的精灵,命中区域就是我所期望的。