웹에디터 기능 구현을 위한 konva 파보기

웹에디터 기능 구현을 위해서 konva 라이브러리를 공부해보려고 한다.

Konva가 뭐임 그래서?

Konva는 HTML5 캔버스 자바스크립트 프레임워크로, 2D 컨텍스트를 확장하여
데스크톱 및 모바일 애플리케이션에 캔버스 상호 작용을 가능하게 합니다.
Konva는 고성능 애니메이션, 트랜지션, 노드 중첩, 레이어링, 필터링,
캐싱, 데스크톱 및 모바일 애플리케이션을 위한 이벤트 처리 등 다양한 기능을 지원합니다.
스테이지에 사물을 그리고, 이벤트 리스너를 추가하고, 이동하고,
스케일링하고 다른 도형과 독립적으로 회전하여 고성능을 지원할 수 있습니다.
애니메이션을 지원할 수 있습니다.

번역해서 확인해보니 위와 같은 기능을 제공한다고 한다.

어떻게 동작하는 거지?

Konva.stage에서 시작된다. 이것은 여러 사용자의 레이어가 포함되어있으며 각 레이어마다 2개의<canvas>가 존재하며 scene renderer(장면렌더러) 와 hit graph renderer(히트그래프 렌더러)가 존재한다고 한다. 장면 렌더러는 눈에 보이는 렌더링이고 히트 그래프 렌더러는 고성능 이벤트 감지에서 사용되는 특수 캔버스이며 고성능 이벤트 감지에 사용된다.

각 레이어에는 도형, 도령 그룹, 또는 다른 그룹이 포함될 수 있다. 스테이지, 레이저, 도형은 html페이지의 DOM노드와 유사한 가상 노드이다.

모든 노드에 스타일을 지정하고 변경할수 있고, Konva에는 미리 만들어진 도형이 존재하지만 shape 클래스를 인스턴스화 해서 그리기 함수를 생성하여 사용자 정의 도형도 제작이 가능하다.

예시

도형을 제작하는 코드

// first we need to create a stage
var stage = new Konva.Stage({
  container: 'container',   // id of container <div>
  width: 500,
  height: 500
});

// then create layer
var layer = new Konva.Layer();

// create our shape
var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);

// draw the image
layer.draw();

직접 정의한 도형 코드 예시

var triangle = new Konva.Shape({
      sceneFunc: function(context) {
        context.beginPath();
        context.moveTo(20, 50);
        context.lineTo(220, 80);
        context.quadraticCurveTo(150, 100, 260, 170);
        context.closePath();

        // special Konva.js method
        context.fillStrokeShape(this);
      },
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 4
});

Styles

도형에 스타일 속성을 부여할수 있는 목록은 아래와 같다

• fill, Solid color, gradients or images
• roke (color, width)
• shadow (color, offset, opacity, blur)
• Opacity

var pentagon = new Konva.RegularPolygon({
    x: stage.width() / 2,
    y: stage.height() / 2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    shadowOffsetX : 20,
    shadowOffsetY : 25,
    shadowBlur : 40,
    opacity : 0.5
});

Events

Konva를 사용하면 사용자가 입력한 이벤트를 쉽게 수신할수 있다. (클릭, 더블클릭, 마우스오버, 등등)
여기에 드래그 앤 드롭과 크기 변경도 포함된다.

circle.on('mouseout touchend', function() {
    console.log('user input');
});

circle.on('xChange', function() {
    console.log('position change');
});

circle.on('dragend', function() {
    console.log('drag stopped');
});

자 그렇다면 이런 엄청난 기능들을 가진 라이브러리를 사용해서 과연 현재 서비스를 제공하는 웹에디터 사이트를 어디까지 구현할 수 있을까?