用pixi.js绘制矩形

Question

铬v32

如何用PIXI.js库绘制一个基本的红色矩形？

我试过这个(不起作用)

var stage = new PIXI.Stage(0xFFFFFF);
var renderer = PIXI.autoDetectRenderer(400, 300);
document.body.appendChild(renderer.view);
renderer.render(stage);
var rect = new PIXI.Rectangle(100, 150, 50, 50);
stage.addChild(rect);

错误：

TypeError:对象对象没有方法“setStageReference”

Answer 1

几何是不可渲染的，它们是用来做几何计算的。

来源 @xerver

所以我们必须使用PIXI.Graphics()

Answer 2

使用PIXI.Texture.WHITE有一种很好的方法来实现这一点。

const rectangle = PIXI.Sprite.from(PIXI.Texture.WHITE);
rectangle.width = 300;
rectangle.height = 200;
rectangle.tint = 0xFF0000;
stage.addChild(rectangle);