konvajs/konva

어떤 프로젝트인가요?

핵심 기능

• 01각 도형이 자체 이벤트와 드래그 동작을 갖는 씬 그래프.
• 02HTML5 Canvas에서 변환, 애니메이션, 레이어 기반 렌더링 지원.
• 03스테이지와 도형 내보내기 및 복잡한 노드 캐싱.
• 04React, Vue, Svelte, Angular용 공식 래퍼.
• 05필요한 도형과 필터만 포함할 수 있는 모듈식 빌드.
• 06node-canvas 또는 skia-canvas를 사용한 Node.js 서버 측 렌더링.

활용 사례

• 선택하고 변환할 수 있는 객체를 갖춘 브라우저 기반 디자인 또는 이미지 편집기 구축.
• 이미지 위에서 협업하는 화이트보드 또는 주석 도구 제작.
• 드래그할 수 있는 노드를 사용해 대화형 다이어그램, 순서도 또는 지도 그리기.
• Node.js 서버에서 캔버스 드로잉으로 이미지 생성.

빠른 시작

1. 1

   npm에서 Konva를 설치합니다

   npm install konva
2. 2

   Konva를 가져와 프로젝트에서 stage, layer, shape를 생성합니다

3. 3

   Node.js에서 서버 사이드 렌더링을 하려면 canvas 백엔드도 설치합니다

   npm install konva canvas

사용 전 알아둘 점

• !Node.js 렌더링에는 canvas 또는 skia-canvas 패키지를 별도로 수동 설치해야 합니다.
• !DOM 이벤트는 브라우저에서만 작동하며, canvas 기능 지원 여부는 선택한 백엔드에 따라 달라집니다.

포함된 컬렉션

토픽

자주 묻는 질문

konva은(는) 무엇인가요?

대화형 2D 그래픽, 디자인 편집기, 화이트보드, 다이어그램을 만들기 위한 HTML5 Canvas JavaScript 프레임워크입니다. Konva는 JavaScript와 TypeScript용 2D 캔버스 프레임워크입니다. 씬 그래프 모델을 사용하므로 개발자가 픽셀을 직접 다시 그릴 필요 없이, 각 도형을 고유한 이벤트, 드래그 동작, 변환, 애니메이션, 캐싱 및 내보내기 옵션을 갖춘 객체로 다룰 수 있습니다.

konva은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

konva은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

konva은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. konva의 마지막 커밋은 2026년 11월 5일입니다.

konva은(는) 어디에 사용할 수 있나요?

선택하고 변환할 수 있는 객체를 갖춘 브라우저 기반 디자인 또는 이미지 편집기 구축. 이미지 위에서 협업하는 화이트보드 또는 주석 도구 제작. 드래그할 수 있는 노드를 사용해 대화형 다이어그램, 순서도 또는 지도 그리기. Node.js 서버에서 캔버스 드로잉으로 이미지 생성.

konva는 어떻게 설치하나요?

npm에서 Konva를 설치합니다: npm install konva Konva를 가져와 프로젝트에서 stage, layer, shape를 생성합니다 Node.js에서 서버 사이드 렌더링을 하려면 canvas 백엔드도 설치합니다: npm install konva canvas

konva은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/konvajs/konva