如何在pixi.js多邊形上放置紋理？

Question

我可以在pixi.js中用紋理填充多邊形嗎？

我需要創建一個帶有點的多邊形，並用紋理填充它。 我怎樣才能做到這一點？

謝謝你的幫助！

Answer 1

我認為您不能用“紋理”填充多邊形，但是您可以將多邊形用作Sprite的蒙版，其效果相同。 這樣的事情會起作用：

var stage = new PIXI.Stage(0, true);
var renderer = PIXI.autoDetectRenderer(620, 380);
document.body.appendChild(renderer.view);

//create a texture
var texture = PIXI.Texture.fromImage("/img/logo.png");
var tilingSprite = new PIXI.TilingSprite(texture, 620, 380);
stage.addChild(tilingSprite);

//create a polygon
var graphics = new PIXI.Graphics();
graphics.beginFill(0);
graphics.moveTo(50,50);
graphics.lineTo(300,140);
graphics.lineTo(220, 320);
graphics.lineTo(80, 110);
graphics.lineTo(50,50);
graphics.endFill();
stage.addChild(graphics);

//mask the texture with the polygon
tilingSprite.mask = graphics;

update();
function update()
{    
    requestAnimFrame( update );
    renderer.render(stage);
}

jsfiddle： http : //jsfiddle.net/7asnhk3b/