[PIXI] Graphic 클래스 활용하여 도형그리기

app.renderer vs app.view

app.renderer는 내부 매커니즘이라면,(캔버스 요소 조정)

app.view는 이미 만들어진 캔버스 자체

//배경색 변경
app.renderer.backgroundColor = 0x23395D;
//css
app.renderer.view.style.position = 'absolute';

 

Graphic 클래스

- 사각형

app.stage는 포토샵에서 레이어를 위로 계속 쌓아가는 느낌을 생각하면 쉽다.

const graphics = PIXI.Graphics;
const rect = new graphics();
rect.beginFill(0x00ff00)
	.drawRect(40, 40, 200, 250)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(rect);

- 자유로운 폴리

const poly = new graphics();
rect.beginFill(0x00ff00)
	.lineStyle(4, 0xFFEAA00, 1)
	.drawPolygon(
		[600, 50,
			800, 150,
			900, 300,
			400, 300]
	)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(poly);

- 원

const circle = new graphics();
circle.beginFill(0x00ff00)
	.lineStyle(4, 0xFFEAA00, 1)
	.drawCircle(440, 400, 80)//x좌표 y좌표 반지름
	.endFill()
app.stage.addChild(circle);

- 선

const line = new graphics();
line.lineStyle(4, 0xFFEAA00, 1)
	.moveTo(1500, 100)
	.lineTo(1500, 800)
app.stage.addChild(line);

- 가운데가 뚫린 원

-그래픽 엑스트라 모듈 설치

npm  install @pixi/graphics-extras

<script src="./node_modules/@pixi/graphics-extras/dist/graphics-extras.min.js"></script>

const torus = new graphics();
rect.beginFill(0x00ff00)
	.drawTorus(440, 440, 200, 250)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(torus);

const torus = new graphics();
rect.beginFill(0x00ff00)
	.drawTorus(440, 440, 200, 250, 0, Math.PI / 2)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(torus);

 

- 별

const star = new graphics();
star.beginFill(0x00ff00)
	.drawStar(860, 740, 30, 80)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(star);

 

전체 코드

const Application = PIXI.Application;
const app = new Application({
	//객체를 전달하여 수행할 수 있다.
	width: window.innerWidth,
	height: window.innerHeight,
	transparent: false,
	antialias: true,
	backgroundColor: 0xAAAAAA
	//이미지 및 모양의 픽셀화된 가장자리를 기본적으로 매끄럽게 하고 수정하는 속성
	//위와 같이 객체의 설정할 수 있는 속성 중 일부는 캔버스의 너비와 높이, 투명도 등이 있다.
});
//배경색 변경
app.renderer.backgroundColor = 0x23395D;
//생성자가 아니더라도 이와 같이 크기 조정 가능
app.renderer.view.style.position = 'absolute';
document.body.appendChild(app.view);


const graphics = PIXI.Graphics;
const rect = new graphics();
rect.beginFill(0x00ff00)
	.lineStyle(4, 0xFFEAA00, 1)
	.drawRect(40, 40, 200, 250)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(rect);

const poly = new graphics();
rect.beginFill(0x00ff00)
	.lineStyle(4, 0xFFEAA00, 1)
	.drawPolygon(
		[600, 50,
			800, 150,
			900, 300,
			400, 300]
	)
	.endFill()
app.stage.addChild(poly);

const circle = new graphics();
circle.beginFill(0x00ff00)
	.lineStyle(4, 0xFFEAA00, 1)
	.drawCircle(440, 400, 80)//x좌표 y좌표 반지름
	.endFill()
app.stage.addChild(circle);

const line = new graphics();
line.lineStyle(4, 0xFFEAA00, 1)
	.moveTo(1500, 100)
	.lineTo(1500, 800)
app.stage.addChild(line);

const torus = new graphics();
torus.beginFill(0x00ff00)
	.drawTorus(440, 440, 200, 250, 0, Math.PI / 2)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(torus);


const star = new graphics();
star.beginFill(0x00ff00)
	.drawStar(860, 740, 30, 80)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(star);