PixiJS
(Conda 에코시스템을 위한 패키지 매니저는 pixi를 참조)
The HTML5 Creation Engine.
Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Categories
- PuxiJS - GUI 라이브러리.
- PIXI.TextInput (pixi-text-input) - 텍스트 입력 플러그인.
Installation
Basic Usage Example
import * as PIXI from 'pixi.js';
// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();
// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);
// load the texture we need
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
// This creates a texture from a 'bunny.png' image
const bunny = new PIXI.Sprite(resources.bunny.texture);
// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;
// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// Add the bunny to the scene we are building
app.stage.addChild(bunny);
// Listen for frame updates
app.ticker.add(() => {
// each frame we spin the bunny around a bit
bunny.rotation += 0.01;
});
});
Vue example
<template>
<div class="connections">
<canvas id="pixi"></canvas>
</div>
</template>
<script>
import * as PIXI from 'pixi.js'
export default {
name: 'ConnectionsLayer',
methods: {
drawPixi() {
var canvas = document.getElementById('pixi')
const app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
transparent: true,
view: canvas,
})
let graphics = new PIXI.Graphics()
graphics.lineStyle(8, 0x000000)
//start
graphics.moveTo(300, 250)
//end
graphics.lineTo(500, 250)
app.stage.addChild(graphics)
},
},
mounted() {
this.drawPixi()
},
}
CanvasRenderer
import * as PIXI from "pixi.js-legacy";
const renderer = PIXI.autoDetectRenderer(); // returns PIXI.Renderer or PIXI.CanvasRenderer
Auto Resize
- Stackoverflow - Dynamically resize the pixi stage and it's contents on window resize and window load
PIXI 5.0 부터 resizeTo
옵션이 지원된다.
Graphics animation
var line = new PIXI.Graphics(),
centerY = 0,
increment = 2;
app.stage.addChild(line);
app.ticker.add(() => {
// clear the graphics object ('wipe the blackboard')
line.clear();
// redraw a new line
drawLine(centerY);
// calculate the next position
centerY = (centerY < window.innerHeight) ? centerY = centerY + increment : 0;
});
function drawLine(centerY) {
line.lineStyle(1, 0xff0000);
line.moveTo(0,window.innerHeight/2);
line.lineTo(window.innerWidth/2, centerY);
line.lineTo(window.innerWidth, window.innerHeight/2);
}