PIXI.js 사용기 (2) Pixi transformer plugin

설치 방법 npm i pixi-essentials/transformer

 

적용 방법 

Pixi Canvas 인 app.stage에 addchild를 이용하여 transformer를 추가하여 줍니다.

*thickness : line 굵기

*zIndex는 따로 9999를 설정해주어야 Canvas의 최상단에 위치할 수 있습니다.

transLine.group에 리스트형태로 Sprite를 넣어주면 이미지를 transLine으로 조정가능합니다.

*translateEnabled : 이미지의 움직임을 boolean 값으로 설정할 수 있다. 

*scaleEnabled  : 이미지의 Scale을 boolean 값으로 설정할 수 있다. 

*rorateEnabled  : 이미지의 Rotate을 boolean 값으로 설정할 수 있다. 

ex)이미지에 TransLine이 적용된 모습 

조심해야할 부분 : Transfomer를 무분별하게 사용할 경우 해당 웹페이지의 성능이 현저하게 저하될 수 있다.