用pixi.js绘制一个矩形

Question

[Chrome v32]

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

我试过这个(不工作)

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:对象[object Object]没有方法'setStageReference'

Answer 1

您无法渲染geometry(Pixi.Rectangle),它们仅用于计算.您可以执行以下操作:

var graphics = new PIXI.Graphics();

graphics.beginFill(0xFFFF00);

// set the line style to have a width of 5 and set the color to red
graphics.lineStyle(5, 0xFF0000);

// draw a rectangle
graphics.drawRect(0, 0, 300, 200);

stage.addChild(graphics);

^资源

Answer 2

几何图形不可渲染,它们用于进行几何计算.

来源 @xerver

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

Answer 3

有一种很好的方法可以使用PIXI.Texture.WHITE.

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