[javascript] Paper.js로 팔레트 및 색상 관리 도구 제작하기
Paper.js는 강력한 그래픽 라이브러리이며, 웹 환경에서 벡터 그래픽과 애니메이션을 만들 수 있습니다. 이번 예제에서는 Paper.js를 사용하여 팔레트와 색상 관리 도구를 제작하는 방법을 알아보겠습니다.
목표
- 팔레트에 색상 추가하기
- 선택한 색상으로 브러시 도구 사용하기
- 선택한 색상으로 도형 색상 변경하기
시작하기
먼저, HTML 파일에 Paper.js를 추가합니다.
<script src="https://unpkg.com/paper"></script>
그리고 캔버스 엘리먼트를 생성합니다.
<canvas id="canvas" resize></canvas>
이제 JavaScript 코드로 넘어가겠습니다.
// Paper.js 초기화
paper.install(window);
paper.setup('canvas');
// 팔레트 그룹 생성
var colorsGroup = new Group();
// 팔레트에 색상 추가
function addColor(color) {
var circle = new Path.Circle(new Point(0, 0), 20);
circle.fillColor = color;
colorsGroup.addChild(circle);
}
// 팔레트에 색상 추가하기
addColor('red');
addColor('blue');
addColor('green');
// 캔버스 클릭 시 선택한 색상으로 브러시 도구 사용하기
function onMouseDown(event) {
var hitResult = project.hitTest(event.point, {
fill: true,
class: Path
});
if (hitResult) {
hitResult.item.fillColor = 'black';
}
}
// 캔버스 클릭 시 선택한 색상으로 도형 색상 변경하기
function onMouseDown(event) {
var hitResult = project.hitTest(event.point, {
fill: true,
class: Path
});
if (hitResult) {
hitResult.item.fillColor = colorsGroup.firstChild.fillColor;
}
}
동작 테스트
웹 브라우저에서 HTML 파일을 열고 캔버스를 클릭해보세요. 클릭한 위치에 브러시 도구로 선택한 색상이 그려지거나, 클릭한 도형의 색상이 선택한 색상으로 변경될 것입니다.
결론
Paper.js를 사용하면 간단하고 직관적인 방법으로 그래픽 관련 작업을 수행할 수 있습니다. 이번 예제에서는 팔레트와 색상 관리 도구를 만드는 방법에 대해 알아보았습니다. 이를 응용하여 풍부한 그래픽 기능을 가진 웹 애플리케이션을 제작해보세요.