用pixi.js绘制一个矩形

Question

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

- user3350705Ol

Answer 1

您不能渲染几何图形（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);

^源代码

- Daniel Kaplan

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);

- gischer

---

这确实非常不错。 - Ericson Willians

有什么权衡？或者差异？对性能的影响如何？ - Ryan Hamilton

Answer 3

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

来源 @xerver

因此我们必须使用 PIXI.Graphics()。

- user3350705Ol