konva

konva 사용하기

package manager 사용하면

$ npm install konva

온라인 상태이면 그냥 CDN 에 있는거 땡겨 써도 큰 무리 없음.

<script src="https://unpkg.com/konva@3.2.3/konva.min.js"></script>

참고: https://konvajs.org/docs/

konva 구조

Konva.Stage 로 부터 시작한다. Stage 는 여러개의 Konva.Layer 를 갖게 된다. 각각의 Layer 는 두개의 canvas 렌더러를 가지게 된다. scene 렌더러와 hit graph 렌더러 이다. scene 렌더러는 눈으로 보고 있는 것이고 hit graph 렌더러는 성능개선과 이벤트 감지를 위해 숨겨져 있는 캔버스이다.

각각의 레이어는 shapes, groups of shapes, groups of other groups 를 가질수 있다. stage, layers, groups, shapes 는 가상의 노드들이고 HTML 의 DOM 노드와 비슷하다.

참고: https://konvajs.org/docs/overview.html

빨간 동그라미에 까만 테두리 예제

// 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();

기본 모양들 - Basic shapes

  • Rect, Circle, Ellipse, Line, Polygon, Spline, Blob, Image, Text, TextPath, Star, Label, SVG Path, RegularPolygon 지원.

  • custom shape 도 가능

    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 - 체우기. gradients 나 images 도 가능

  • Stroke - 테두리 선

  • Shadow - 그림자

  • 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

  • click, dblclick, mouseover, tap, dbltap, touchstart 등의 이벤트를 처리 할 수 있다.

  • 속성 변경 이벤트 (scaleXChange, fillChange)

  • drag&drop 이벤트 (dragstart, dragmove, dragend)

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');
});

example: https://konvajs.org/docs/events/Binding_Events.html

drag and drop

Filters

  • 여러 필터가 있다. blur, invert, noise 등

  • https://konvajs.org/api/Konva.Filters.html 에서 모든 필터를 확인 할 수 있다.

  • blurRadius

  • brightness

  • contrast

  • emboss

  • enhance

  • grayscale

  • HSL - Hue, Saturation, Luminance (or lighness)

    • luminance

  • HSV - Hue, Saturation, Value

  • invert

  • mask

  • noise

  • posterize

  • rgb

  • rgba

  • sepia

  • solarize

  • threshold

Animation

  • 두 가지 방식으로 애니메이션을 만들 수 있다.

1. Konva.Animation

var anim = new Konva.Animation(function(frame) {
    var time = frame.time,
        timeDiff = frame.timeDiff,
        frameRate = frame.frameRate;
    // update stuff
}, layer);
anim.start();

2. Konva.Tween

var tween = new Konva.Tween({
        node: rect,
        duration: 1,
        x: 140,
        rotation: Math.PI * 2,
        opacity: 1,
        strokeWidth: 6
});
tween.play();

// or new shorter method:
circle.to({
    duration : 1,
    fill : 'green'
});

https://konvajs.org/docs/tweens/Linear_Easing.html

Selectors

  • 큰 애플리케이션을 구성할 때 요소들에서 검색을 이용하면 유용하다. Konva 는 셀렉터로 요소를 찾는데 도움을 준다. find() 나 findOne() 메서드를 사용할 수 있다.

  • 뭔가 번역투라 이상하다.

  • javascript 에서 dom 내부를 검색 할 때 getElement 어쩌구나 jquery 에서 find 를 이용해서 dom 내부를 검색 할 수 있는데, 그런것과 비슷한 걸 제공하고 있다고 보면 된다.

var circle = new Konva.Circle({
        radius: 10,
        fill: 'red',
        id : 'face',
        name : 'red circle'
});
layer.add(circle);

// then try to search

// find by type
layer.find('Circle'); // all circles

// find by id
layer.findOne('#face');

// find by name (like css class)
layer.find('.red')

layer 에 Circle 을 추가 하고 layer.find 로 모든 Circle 을 검색한다. # 은 id, . 은 name 이다. jquery 에서 그냥 find 는 html tag, # 은 아이디, . 은 class 를 검색하는 것과 비슷한다.

Serialisation and Deserialization

  • 생성된 모든 객체들은 json 으로 저장 할 수 있다. 서버나 로컬 스토리지에 저장 해 두면 유용할 것 같다.

    var json = stage.toJSON();

그리고 다시 불러 올 수도 있다.

var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';

var stage = Konva.Node.create(json, 'container');

Performance

  • Konva 는 스피드를 개선할 많은 도구들을 가지고 있다. 가장 중요한 메서드들로

    1. 캐싱은 하나의 엘리먼트를 버퍼 캔버스에 넣어둔다. 그리고 그 캔버스로 부터 엘리먼트를 그린다. 그림자가 선을 가지는 텍스트나 도형들 같은 복잡한 노드들에 성능향상을 줄 수 있다.

    1. Layering. 프레임워크는 여러 엘리먼트들을 지원하므로 개체를 자유롭게 지정할 수 있다.

    2. 예를 들어 애플리케이션은 복잡한 배경과 여러 움직이는 모양으로 구성된다. 하나의 레이어는 배경에 사용하고 다른 레이어는 도형에 사용할 수 있다. 도형을 업데이트하는 동안 배경 캔버스는 업데이트 할 필요 없다.

  • 모든 성능 향상 팁은 다음 링크를 참고 하도록 한다.

download

Last updated

Was this helpful?