Pixi.jsで四角形を描画する

pixijs-rectangle.png

Shapeとしては

  • Circle
  • Ellipse
  • Polygon
  • Rectangle
  • RoundedRectangles

が用意されている様子があるが
pixi.js/src/core/math/shapes
これはレンダリング用の図形ではない。
幾何学計算用のクラスである。
四角形を描画するにはPIXI.Graphics()を用いないといけない。

<script src="http://miffysora.wikidot.com/local--files/webgl/pixi.min.js" type="text/javascript"></script>
</script>
<script type='text/javascript' >
// 初期化関数は`new PIXI.WebGLRenderer`か, `new PIXI.CanvasRenderer`, か`PIXI.autoDetectRenderer`です
var renderer = new PIXI.WebGLRenderer(200, 200, {backgroundColor: 0x533E25});
//<canvas>要素をbodyに追加します
document.body.appendChild(renderer.view);
 
//まず、 ルートコンテナを作成しないといけません。描画シーンのコンテナになります。
    var stage = new PIXI.Container();
    var graphics = new PIXI.Graphics();
   graphics.beginFill(0xA5D9DD,0.6);//グリーン、不透明度60%
   graphics.lineStyle(2, 0xFFFFFF);//枠線の太さと色を指定
   graphics.drawRect(20, 20, 40, 60);//x,y,width,height
   stage.addChild(graphics);//作成した四角をシーンに追加
   //描画関数開始
   renderer.render(stage);
</script>
<body>
</body>

わりとラクに書けていいかも♪


rectangle

サポートサイト Wikidot.com rectangle