javascript “来自纹理的精灵”未采用命中区域多边形

bsxbgnwa 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(82)

我有一个sprite，其纹理定义如下：

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

来源：https://stackoverflow.com/questions/28124554/sprite-from-texture-not-taking-hit-area-polygon

1条答案

按热度按时间

z0qdvdin1#

以下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;
}

加上返回的sprite，命中区域是我所期望的。

赞(0）回复(0）举报 2023-02-02

我来回答

javascript “来自纹理的精灵”未采用命中区域多边形

1条答案

相关问题

热门标签

最新问答