[D3.js] Pixi.js의 이미지 랜더링

Pixi.js 홈페이지 : http://www.pixijs.com/

오늘은 Pixi.js를 좀 더 실험을 하고 싶어서 Pixi.js에 나와 있는 예제 중 하나를 더 실험해 보았습니다.

1. Pixi.js 예제

어제 간단히 소개만 했는데 각 예제들을 다시 한번씩 살펴 보았는데 재밌는 것들이 많더군요.

alt

예제 항목을 누르면 위와 같은 창이 뜨는데 왼쪽 항목에 선택된 결과를 오른쪽 창의 이미지가 출력된 결과창이 보여지고 결과창 아래 코딩 소스를 보여줍니다. 단순히 소스와 결과 창만 보여주는 줄 알았는데 수정이 가능하더군요.

alt

위 그림처럼 아래 소스창은 코딩 수정이 가능하고 수정한 뒤에 갱신 버턴을 누르면 위 결과창에 결과가 수정되어 랜더링을 하게 됩니다.

2. Basics 예제를 수정 하기

이미지는 좀 예쁜 걸로 랜더링을 하고 싶어서 무료 이미지 사이트에서 이쁜 인어공주을 다운 받아서 랜더링을 해보았네요.

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<script>

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); //랜더링 창
document.body.appendChild(app.view);

var bunny = PIXI.Sprite.fromImage('mermaid-2093673_640.png') //이미지 가져오기
bunny.anchor.set(0.5); //이미지는 bunny 객체 세팅을 하는데 중앙 중심점을 기준
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

app.ticker.add(function(delta) { //회전
    bunny.rotation -= 0.01 * delta;
});
</script>
</body>

app객체 변수는 랜더링 창을 지정하고 html 문서에 추가하게 됩니다. 그리고 나서 bunny 이미지 객체변수에 랜더링 할 이미지를 읽고 랜더링 위치를 지정하여 추가하게 됩니다. 그리고 bunny 객체에 회전(rotation)의 값을 주어 랜더링 할 때 0.01xdelta값으로 회전하게 됩니다.

[결과]