我可以用pixi.js中的纹理填充多边形吗?
我需要创建一个带点的多边形并用纹理填充它。我怎么能这样做?
感谢您的帮助!
答案 0 :(得分:4)
我不认为你可以使用纹理填充多边形,但是你可以使用多边形作为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/