Paper.js는 HTML5 Canvas를 기반으로 한 벡터 그래픽 라이브러리로, 그래픽 작업을 보다 쉽게 할 수 있도록 도와줍니다. 이번 포스트에서는 Paper.js를 사용하여 그래픽 주석 및 정보 표시 작업에 대해 알아보겠습니다.

1. 주석 추가하기

Paper.js에서 주석을 추가하는 가장 간단한 방법은 Path.Text를 사용하는 것입니다. 아래 예제는 캔버스에 “Hello, World!”라는 주석을 표시하는 방법을 보여줍니다.

// 주석을 추가할 캔버스 생성
var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

// 주석을 생성하고 위치 및 내용 설정
var text = new paper.PointText(new paper.Point(50, 50));
text.justification = 'left';
text.fillColor = 'black';
text.content = 'Hello, World!';

// 캔버스에 주석 추가
paper.view.draw();

위 예제에서 PointText를 이용하여 위치를 지정하고, justification 속성을 사용하여 텍스트를 왼쪽 정렬하였습니다. 마지막으로 fillColor 속성으로 텍스트의 색상을 지정하고, content 속성으로 내용을 설정합니다.

2. 정보 표시하기

Paper.js를 사용하여 그래픽 요소에 정보를 표시할 수도 있습니다. 예를 들어, 마우스를 클릭하면 그 위치에 정보를 표시하는 예제를 살펴보겠습니다.

// 그래픽 요소에 정보를 표시할 캔버스 생성
var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

// 캔버스를 클릭했을 때 정보 표시
canvas.addEventListener('click', function(event) {
  // 클릭한 위치를 포인트로 변환
  var point = new paper.Point(event.offsetX, event.offsetY);
  
  // 정보를 담을 주석 생성
  var text = new paper.PointText(point);
  text.justification = 'center';
  text.fillColor = 'black';
  text.content = 'Clicked at (' + point.x + ', ' + point.y + ')';
  
  // 캔버스에 주석 추가
  paper.view.draw();
});

위 예제에서 click 이벤트를 사용하여 마우스 클릭 이벤트를 감지하고, 클릭한 위치를 Point로 변환하여 PointText를 생성합니다. 생성한 PointText의 내용으로 클릭한 위치의 x좌표와 y좌표를 표시하고 있습니다.

결론

Paper.js를 사용하면 그래픽 주석 및 정보 표시 작업을 간단하게 처리할 수 있습니다. Path.Text를 사용하여 주석을 추가하거나, 이벤트를 이용하여 그래픽 요소에 정보를 표시할 수 있습니다. Paper.js의 다양한 기능을 활용하여 원하는 그래픽 작업을 수행해보세요!

참고 자료

• Paper.js 공식 문서: https://paperjs.org/documentation/
• Paper.js GitHub 저장소: https://github.com/paperjs/paper.js