[React] React-konva 이해하기-1 (구조편)

웹 상에 캔버스를 통해서 그림, 도형들을 그리는 동작들을 해주는 KonvaJS를 이해하기 위한 목적이며, 해당 작성글은 초기 구조 이해와 용어에 대해 익히기 위한 목적임.

 

1) KonvaJS 구조 이해

---

1. KonvaJS 정의

---

💡 Konva는 HTML5 2D Context를 확장한 Canvas JavaScript framework입니다. Konva는 또한 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 제공해줍니다

 

2. Konva 구조

---

💡Stage, Layer, Group, Shape는 HTML 페이지 내의 가상의 DOM 노드로 구성이 되어서 화면상에 그려집니다.

💡 대략적인 구조는 Stage안에 각각에 Layer를 가지고, 그 안에 Group이나 Shape(사각형, 원, 이미지, 스프라이트, 텍스트, 선, 다각형, 정다각형, 경로, 별등..)을 그려 넣는 구조입니다.

💡 Shape는 미리 만들어진 모양을 사용할 수 있지만 Shape 클래스를 인스턴스 화하고 그리기 기능을 만들어 사용자 정의 모양을 만들 수도 있습니다.
해당 상세 구조는 아래에서 확인을 해봅니다

 

Konva Framework Overview

 

3. Konva 상세 구조

---

 

Stage

---

💡 화면상에 보이는 캔버스 크기(틀) 및 동작(이벤트)하는 행동들을 관리한다.
💡 이벤트(onMouseLeave, onMouseDown, onMousemove, onMouseup, onTouchStart, onTouchMove, onTouchEnd, onContextMenu 등..)를 등록하여서 사용하는 곳이다.

 

Layor

---

💡 Stage 공간 내에서 지정된 곳에서 Shape, Group이 화면상에 그려지는 공간을 의미한다.

 

 

Shape

---

💡 Layor 공간에 인스턴스 단위로 그려지는 모양을 의미한다
💡 종류는 사각형, 원, 이미지, 스프라이트, 텍스트, 선, 다각형, 정다각형, 경로, 별 등이 있다.

 

 

Group

---

💡 Layor 공간에 Shape를 하나로 묶어둔 형태를 의미한다

2) KonvaJS 설치하기

---

💡 해당 필자는 'react-konva'를 이용 / yarn 패키지 모듈을 이용하여서 예시를 적었습니다.

 

패키지 모듈을 통해서 설치 방법

---

// yarn package manager
yarn add konva
yarn add react-konva

// npm pacakgae manager
npm install konva
npm install react-konva

 

konva / react-konva 차이점

---

konva

💡 스크립트 단에서 처리를 하여서 동작한다.

import Konva from 'konva';

 

react-konva

💡 React에서 사용하며 JSX내에서 Konva를 동작시킨다.

import { Stage, Layer, Line, Image } from 'react-konva';

 

참고사이트

---

참고: Konva.js 공식 사이트

Konva.js - JavaScript 2d canvas library

참고: react-konva 공식 Github

GitHub - konvajs/react-konva: React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

 

오늘의 결론

---

Konva의 구조에 대해서 공부해 보았습니다.
해당 개념을 이해하고 다음 활용 부분에서 각각을 활용해본다면 즐거운 코딩을 할 수 있습니다.

오늘도 감사합니다😀