用 pixi.js 画一个矩形答案

【问题标题】：Draw a rectangle with pixi.js用 pixi.js 画一个矩形
【发布时间】：2014-03-31 04:01:33
【问题描述】：

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

错误：

Uncaught TypeError: Object [object Object] has no method 'setStageReference'

【问题讨论】：

标签： pixi.js

【解决方案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);

^source

【讨论】：

【解决方案2】：

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

Source@xerver

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

【讨论】：

【解决方案3】：

使用PIXI.Texture.WHITE 有一个很好的方法。

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

【讨论】：