Paper.js는 HTML5 캔버스에서 그래픽 및 애니메이션 작업을 위한 자바스크립트 라이브러리입니다. 이 라이브러리는 다양한 그림 요소를 생성하고 효율적으로 관리할 수 있는 레이어와 그룹 관리 기능을 제공합니다.
레이어 관리
Paper.js에서는 여러 개의 레이어를 사용하여 그래픽 요소를 겹치게 배치할 수 있습니다. 각 레이어는 하나의 캔버스 계층을 나타내며, 각각의 레이어는 다른 레이어와 겹치거나 독립적으로 그래픽 요소를 가질 수 있습니다.
레이어를 생성하려면 paper.Layer 클래스의 인스턴스를 생성하고, new Layer() 형태로 사용합니다. 예를 들어, 다음 코드에서는 backgroundLayer와 foregroundLayer라는 두 개의 레이어를 생성합니다.
var backgroundLayer = new paper.Layer();
var foregroundLayer = new paper.Layer();
레이어의 순서는 그래픽 요소의 겹치는 우선 순위를 결정합니다. 가장 앞에 있는 레이어가 가장 위에 그려지며, 가장 뒤에 있는 레이어가 가장 아래에 그려집니다. 따라서 레이어를 원하는 순서대로 배치하여 그래픽 요소를 정확히 제어할 수 있습니다.
그룹 관리
Paper.js는 그래픽 요소를 논리적으로 그룹화할 수 있는 기능을 제공합니다. 그룹은 레이어와 마찬가지로 독립적으로 그래픽 요소를 가질 수 있으며, 캔버스 상에서 하나의 개체로 간주됩니다. 그룹을 사용하여 그래픽 요소를 일괄적으로 이동, 회전 또는 변형할 수 있습니다.
그룹을 생성하려면 paper.Group 클래스의 인스턴스를 생성하고, new Group() 형태로 사용합니다. 예를 들어, 다음 코드에서는 circleGroup이라는 그룹을 생성하고, circle1과 circle2를 해당 그룹에 추가합니다.
var circleGroup = new paper.Group();
var circle1 = new paper.Path.Circle(new paper.Point(100, 100), 50);
var circle2 = new paper.Path.Circle(new paper.Point(200, 200), 50);
circleGroup.addChild(circle1);
circleGroup.addChild(circle2);
이제 circleGroup을 이동, 회전 또는 스케일링할 때, 그룹에 속한 모든 요소가 동시에 변환됩니다. 이를 통해 효율적인 그래픽 관리를 할 수 있습니다.
Paper.js의 레이어 및 그룹 관리 기능은 그래픽 작업을 보다 편리하고 효율적으로 만들어 줍니다. 그림 요소를 겹치게 배치하거나 논리적으로 그룹화하여 원하는 디자인을 구현할 수 있습니다. Paper.js 공식 문서에서 자세한 내용을 확인할 수 있으며, 다양한 예제 코드를 참고하여 활용할 수 있습니다.