Repolode
제출하기
paperjs

paperjs/paper.js

Paper.js는 브라우저나 Node.js의 HTML5 Canvas에서 경로를 그리고 조작하는 JavaScript 벡터 그래픽 스크립팅 라이브러리입니다.

GitHub에서 보기웹사이트
스타
15,190
포크
1,261
열린 이슈
27
마지막 커밋
16시간 전

어떤 프로젝트인가요?

Paper.js는 벡터 그래픽 스크립팅 도구인 Scriptographer를 JavaScript로 포팅한 라이브러리입니다. 경로, 도형, 텍스트, 그룹, 심볼로 구성된 씬 그래프를 제공하며, HTML5 Canvas 요소에서 이를 코드로 생성하고 변형할 수 있습니다.

이 라이브러리는 브라우저와 번들러용 `paper` 패키지로 NPM에 배포되며, PaperScript 지원을 제외한 코어 빌드도 제공됩니다. 함께 제공되는 `paper-jsdom`과 `paper-jsdom-canvas` 패키지를 사용하면 Node.js에서 헤드리스로 이용할 수 있습니다. jsdom을 통해 SVG를 가져오고 내보낼 수 있으며, node-canvas로 Canvas 렌더링을 할 수 있습니다. node-canvas를 사용하려면 Cairo와 Pango가 필요합니다.

프로젝트는 Gulp와 pnpm으로 빌드하며, 테스트에는 Vitest와 Playwright를 사용합니다. develop 브랜치의 사전 빌드된 개발 버전은 전용 브랜치에 게시됩니다.

핵심 기능

  • 01Canvas에서 경로, 도형, 텍스트, 그룹, 심볼을 다루는 씬 그래프.
  • 02불리언 결합과 변형 등 경로 편집 작업.
  • 03전체 브라우저 빌드에서 PaperScript 지원.
  • 04jsdom을 통한 Node.js의 SVG 가져오기 및 내보내기.
  • 05node-canvas를 통한 Node.js의 Canvas 렌더링.

활용 사례

  • 브라우저에서 인터랙티브한 벡터 드로잉이나 애니메이션 제작.
  • Node.js 서버 스크립트에서 SVG 그래픽 생성 또는 처리.
  • Canvas 기반 편집기나 다이어그램 도구 제작.

빠른 시작

  1. 1

    프로젝트 폴더에서 NPM으로 Paper.js를 설치합니다

    npm install paper
  2. 2

    번들러로 가져온 다음 canvas 요소에 paper.setup()을 호출합니다

사용 전 알아둘 점

  • 프로젝트 메타데이터에서 라이선스를 확인할 수 없습니다. 사용하기 전에 저장소의 라이선스를 확인하세요.
  • Node.js에서 canvas를 렌더링하려면(paper-jsdom-canvas) 먼저 네이티브 Cairo 및 Pango 라이브러리를 설치해야 합니다.

토픽

#graphics#canvas#vector-graphics#svg#javascript#animation

자주 묻는 질문

paper.js은(는) 무엇인가요?
Paper.js는 브라우저나 Node.js의 HTML5 Canvas에서 경로를 그리고 조작하는 JavaScript 벡터 그래픽 스크립팅 라이브러리입니다. Paper.js는 벡터 그래픽 스크립팅 도구인 Scriptographer를 JavaScript로 포팅한 라이브러리입니다. 경로, 도형, 텍스트, 그룹, 심볼로 구성된 씬 그래프를 제공하며, HTML5 Canvas 요소에서 이를 코드로 생성하고 변형할 수 있습니다.
paper.js은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
paper.js은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
paper.js은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. paper.js의 마지막 커밋은 2026년 11월 6일입니다.
paper.js은(는) 어디에 사용할 수 있나요?
브라우저에서 인터랙티브한 벡터 드로잉이나 애니메이션 제작. Node.js 서버 스크립트에서 SVG 그래픽 생성 또는 처리. Canvas 기반 편집기나 다이어그램 도구 제작.
paper.js는 어떻게 설치하나요?
프로젝트 폴더에서 NPM으로 Paper.js를 설치합니다: npm install paper 번들러로 가져온 다음 canvas 요소에 paper.setup()을 호출합니다
paper.js은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/paperjs/paper.js

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트