[javascript] Paper.js로 기하학적 도형 그리기

01 Dec 2023

javascript

이번 포스팅에서는 JavaScript 라이브러리인 Paper.js를 사용하여 기하학적 도형을 그리는 방법에 대해 알아보겠습니다.

Paper.js 소개

Paper.js는 HTML5 캔버스 기반의 그래픽 및 도형 생성을 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 강력하고 유연한 그래픽 처리 기능을 구현할 수 있습니다. 또한, SVG와 호환되어 다양한 형식의 그래픽을 지원합니다.

기본 설정

Paper.js를 사용하기 위해 HTML 파일에 다음과 같이 스크립트를 추가합니다.

<script src="https://unpkg.com/paper"></script>

Paper.js에서는 PaperScope를 생성하여 도형을 그리고 조작합니다. 아래의 코드를 사용하여 기본 세팅을 해보겠습니다.

// 캔버스 생성
var canvas = document.getElementById('myCanvas');
// PaperScope 생성
var paper = new paper.PaperScope();
// PaperScope에 캔버스 연결
paper.setup(canvas);

도형 그리기

Paper.js를 사용하면 다양한 도형을 생성하고 스타일링할 수 있습니다. 아래의 예제 코드를 통해 원과 삼각형을 그려보겠습니다.

// 원 그리기
var circle = new paper.Path.Circle(new paper.Point(100, 100), 50);
circle.fillColor = 'red';

// 삼각형 그리기
var triangle = new paper.Path.RegularPolygon(new paper.Point(300, 200), 3, 50);
triangle.fillColor = 'blue';

위의 코드를 실행하면 캔버스에 빨간색으로 채워진 원과 파란색으로 채워진 삼각형이 그려집니다.

도형 조작

Paper.js를 사용하면 그려진 도형을 조작할 수 있습니다. 예를 들어, 원을 드래그하여 이동하거나 크기를 조절할 수 있습니다. 아래의 코드를 추가하여 도형 조작을 해보세요.

// 원을 드래그하여 이동
circle.onMouseDrag = function(event) {
    this.position = event.point;
};

// 삼각형 크기 조절
triangle.onMouseDrag = function(event) {
    this.scale(1.1, event.point);
};

위의 코드를 실행하고 캔버스에서 도형을 드래그 해보면 원이 이동하고, 삼각형이 크기가 조절되는 것을 확인할 수 있습니다.

마치며

이번 포스팅에서는 Paper.js를 사용하여 기하학적 도형을 그리고 조작하는 방법에 대해 알아보았습니다. Paper.js의 다양한 기능을 활용하여 풍부한 그래픽 효과를 구현할 수 있으니, 관심있는 개발자들은 Paper.js를 공부하고 활용해보시기 바랍니다. Paper.js의 자세한 사용법 및 API 문서는 공식 사이트를 참고하시기 바랍니다.

공식 사이트: http://paperjs.org/