Paper.js는 HTML5 캔버스에서 도형을 그리고 조작하는 데 사용되는 JavaScript 벡터 그래픽 라이브러리입니다. 이 라이브러리는 도형을 만들고, 이동시키고, 회전시키고, 조작하는 등의 다양한 변형 및 변환 기능을 제공합니다.

도형 생성하기

먼저 Paper.js를 이용해 도형을 생성하는 방법을 알아보겠습니다. 다음은 Paper.js를 사용하여 사각형과 원을 생성하는 예제 코드입니다.

// Paper.js 캔버스 생성
var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

// 사각형 생성
var rect = new paper.Path.Rectangle({
  point: [50, 50],
  size: [100, 100],
  fillColor: 'red'
});

// 원 생성
var circle = new paper.Path.Circle({
  center: [200, 200],
  radius: 50,
  fillColor: 'blue'
});

도형 변형하기

Paper.js를 통해 생성된 도형을 변형하기 위해 position 속성을 사용할 수 있습니다. 이를 통해 도형의 위치를 이동시킬 수 있습니다. 다음은 사각형을 이동시키는 예제 코드입니다.

rect.position.x += 50;
rect.position.y += 50;

위 코드는 사각형의 위치를 현재 위치에서 (50, 50) 만큼 이동시킵니다.

도형 회전하기

Paper.js로 생성된 도형을 회전시키기 위해서는 rotation 속성을 사용할 수 있습니다. 다음은 원을 회전시키는 예제 코드입니다.

circle.rotation += 45;

위 코드는 원을 현재 각도에서 45도만큼 시계 방향으로 회전시킵니다.

도형 크기 조절하기

Paper.js를 사용하여 생성된 도형의 크기를 조절하는 방법은 여러 가지가 있습니다. 예를 들어, scaling 속성을 사용하여 도형을 확대 또는 축소할 수 있습니다. 다음은 사각형을 2배로 확대하는 예제 코드입니다.

rect.scaling = 2;

위 코드는 사각형의 크기를 현재 크기의 2배로 조절합니다.

요약

Paper.js는 HTML5 캔버스를 통해 도형을 생성하고 조작하는 기능을 제공하는 JavaScript 벡터 그래픽 라이브러리입니다. 도형을 생성하고 이동시키고, 회전시키고, 크기를 조절하는 등의 변형 및 변환 기능을 사용할 수 있습니다.

Paper.js 공식 문서에서 자세한 내용을 확인할 수 있습니다: Paper.js 공식 문서

위에서 언급된 기능 외에도 Paper.js에는 다양한 도형 변형 및 변환 기능이 더 있으니 공식 문서를 참고하시기 바랍니다.