react-canvas-draw 사용법

최근 학교 팀 프로젝트로 온라인 드로잉 웹 게임을 만들었는데, react-canvas-draw라는 라이브러리가 있기에 사용해보았습니다. 라이브러리 깃 저장소에 공식 튜토리얼은 존재했지만 한국어 자료가 거의 없다시피하여 이후에 사용하실 분들을 위해 간단한 사용법을 남겨봅니다.

React Canvas Draw Git Repository

 

 

설치

npm 또는 yarn을 이용해 모듈을 설치해줍니다.

npm install react-canvas-draw --save

yarn add react-canvas-draw

 

 

사용법

import React from "react";
import ReactDOM from "react-dom";
import CanvasDraw from "react-canvas-draw";

ReactDOM.render(<CanvasDraw />, document.getElementById("root"));

react와 react-dom을 임포트하고, render를 통해 캔버스 컴포넌트를 표시할 수 있습니다.

 

static defaultProps = {
    onChange: null,
    loadTimeOffset: 5,
    lazyRadius: 30,
    brushRadius: 12,
    brushColor: "#444",
    catenaryColor: "#0a0302",
    gridColor: "rgba(150,150,150,0.17)",
    hideGrid: false,
    canvasWidth: 400,
    canvasHeight: 400,
    disabled: false,
    imgSrc: "",
    saveData: null,
    immediateLoading: false,
    hideInterface: false,
    gridSizeX: 25,
    gridSizeY: 25,
    gridLineWidth: 0.5,
    hideGridX: false,
    hideGridY: false,
    enablePanAndZoom: false,
    mouseZoomFactor: 0.01,
    zoomExtents: { min: 0.33, max: 3 },
};

캔버스의 기본 속성들입니다. 필요에 따라 조정할 수 있습니다.

 

여기까진 레포지토리에 적혀있는 내용이고, 실제로 프로젝트에 적용해보겠습니다.

 

 

 

선언

<CanvasDraw
	ref={canvasRef}
	canvasWidth={900}
	canvasHeight={600}
	brushColor={color}
	brushRadius={brushSize}
	style={marginElement}
/>

 

CanvasDraw 컴포넌트를 코드에서 불러온 모습입니다. 위의 props에 적혀있는 다양한 속성을 설정할 수 있는데, useState를 이용해서 바꿀 수 있도록 변수를 값으로 줄 수 있습니다.

 

단 canvasWidth와 canvasHeight의 경우 값으로 정수만 들어올 수 있습니다. 들어온 정수는 자동으로 픽셀 단위로 처리되기 때문에 80vw, 80% 등 정수가 아닌 값들은 사용할 수 없습니다. 메인테이너도 이 문제에 대해 구조적인 결함으로 인지하였고 처리하려고 생각하고는 있지만 (Triage에 낮은 우선순위로 올려져 있습니다) 1년째 별다른 소식이 없는걸 보면... 아마 빠른 시일내로 수정되긴 어려워보이네요. (관련 이슈 : Loading from saveData doesn't work when height/width of original canvas was set to 100%)

 

 

값 변경

캔버스에 변경이 필요한 값들은 상위 컴포넌트에서 내려줍니다. 여기서는 색을 변경할 color 변수로 예시를 들어보겠습니다. color 변수를 색을 변경할 수 있는 팔레트와 상호작용이 가능한 상위 컴포넌트(여기서는 DrawBox) 에서 props로 내려줍니다. 

 

상위 컴포넌트

function DrawBox() {
    const [color, setColor] = useState('black');
    ...
    return (
        <Sketch color={color}/>
    )
}

 

캔버스 컴포넌트

function Sketch({color}) {
    ...
    return (
        <CanvasDraw
            ...
            brushColor={color}
        />
    )
}

 

색 이외에도 브러쉬 크기와 같은 값들은 이런식으로 제어해주시면 되겠습니다.

 

 

 

저장 및 불러오기

캔버스에서 작업한 내역을 저장하고 불러올 수 있습니다. 캔버스에서 toDataURL() 메소드를 사용할 경우 캔버스의 데이터를 Base64 방식으로 반환합니다. 이 데이터를 img태그의 src에 속성에 삽입하면 이미지가 그대로 표시됩니다.

 

여기서는 localStorage에 저장했다가 불러오는 방식으로 예시를 들었지만, 파일로 다운로드 받거나 서버에 전송하는 등 다양하게 응용할 수 있습니다.

 

const canvasRef = useRef(null);

function onSave() {
    const imgValue = canvasRef.current.canvasContainer.childNodes[1].toDataURL();
    localStorage.setItem('imgValue', imgValue);
}

function onLoad() {
    // img 요소를 미리 선언해두어야합니다.
    img.src = getItem('imgValue');
}

 

 

 

여기까지 react-canvas-draw 의 적용법을 간단히 알아보았습니다. 읽어주셔서 감사합니다.

 

 

참고 문서

react-canvas-draw GitHub 레포지토리

Stackoverflow - Draw in react-canvas-draw to image base 64