如何在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/