[KonvaJS]기본 사용법

개요

• knovaJS는 canvas API를 보다 쉽게 쓸 수 있도록 도와주는 라이브러리이다.
• Stage, Layer, Group, Shape으로 이루어져 있다.

stage

• 화면상에 보이는 캔버스 크기 및 이벤트를 관리

layer

• shape, group등이 그려지는 공간

group

• layer내에서 shape들을 묶은 공간

shape

• Layer에 그려지는 다양한 모양
• ex) 사각형, 원, 이미지, 스프라이트, 텍스트, 선, 다각형, 정다각형, 경로, 별 등

example

• setting

const {innerWidth: width, innerHeight: height} = window;

// Stage는 HTML 페이지내의 가상의 DOM 노드로 구성이 되어서 화면상에 그려집니다.
const stage = new Konva.Stage({
  container: 'container',
  width,
  height,
});

// layer를 stage위에 붙인다.
const layer = new Konva.Layer();
stage.add(layer);

• shape 그리기

// 네모 그리기
const greenRectOption = {
  x: 20,
  y: 20,
  width: 100,
  height: 50,
  fill: 'green',
  stroke: '#3a3a3a',
  strokeWidth: 4,
  cornerRadius: [0, 0, 40, 40],
  shadowBlur: 10,
}
const greenRect = new Konva.Rect(greenRectOption);
layer.add(greenRect);

// 동그라미 그리기
const redCircleOption = {
  x: 170,
  y: 60,
  radius: 25,
  fill: 'red',
}
const redCircle = new Konva.Circle(redCircleOption);
layer.add(redCircle);

// 타원 그리기
const yellowOvalOption = {
  x: 250,
  y: 150,
  radiusX: 100,
  radiusY: 50,
  fill: 'yellow',
}
const yellowOval = new Konva.Ellipse(yellowOvalOption);
layer.add(yellowOval);

// 라인 그리기
const redLineOption = {
  points: [5, 70, 140, 23, 250, 60, 300, 20],
  stroke: 'red',
  strokeWidth: 15,
  lineCap: 'round',
  lineJoin: 'round',
}
const redLine = new Konva.Line(redLineOption);
redLine.move({
  x: 0,
  y: 5,
});
layer.add(redLine);

• 이벤트 다루기

// 텍스트 쓰기
const textOption = {
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black',
}
const text = new Konva.Text(textOption);
layer.add(text);
function writeMessage(message) {
  text.text(message);
}

// 이벤트 확인하기
const triangleOption = {
  x: 80,
  y: 120,
  sides: 3,
  radius: 80,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
}
const triangle = new Konva.RegularPolygon(triangleOption);
layer.add(triangle);

// 마우스 좌표
triangle.on('mousemove', function () {
  var mousePos = stage.getPointerPosition();
  var x = mousePos.x - 190;
  var y = mousePos.y - 40;
  writeMessage('x: ' + x + ', y: ' + y);
});
triangle.on('mouseout', function () {
  writeMessage('Mouseout triangle');
});

// 터치 이벤트 좌표
triangle.on('touchmove', function () {
  var touchPos = stage.getPointerPosition();
  var x = touchPos.x - 190;
  var y = touchPos.y - 40;
  writeMessage('x: ' + x + ', y: ' + y);
});

• shape 옮기기

// drag and drop -> draggable true
let rectX = stage.width() / 2 - 50;
let rectY = stage.height() / 2 - 25;

const rectOption = {
  x: rectX,
  y: rectY,
  width: 100,
  height: 50,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true,
}
const box = new Konva.Rect(rectOption);
layer.add(box);

• 그룹짓기

// 그룹으로 
const group = new Konva.Group({
  draggable: true,
});
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

for (var i = 0; i < 6; i++) {
  const box = new Konva.Rect({
    x: i * 30 + 100,
    y: i * 18 + 400,
    width: 100,
    height: 50,
    name: colors[i],
    fill: colors[i],
    stroke: 'black',
    strokeWidth: 4,
  });
  group.add(box);
}

layer.add(group);

• transformer(move, resize, rotate등)

// transform select
const tr = new Konva.Transformer({});
tr.nodes([group]);
layer.add(tr);

• 랜덤으로 만들기

// random
const randomGroup = new Konva.Group({
  x: 500,
  y: 500,
  draggable: true,
});
layer.add(randomGroup);

const transformer = new Konva.Transformer();
layer.add(transformer);
transformer.nodes([randomGroup]);

document.getElementById('button').addEventListener('click', addShape);

function addShape() {
  randomGroup.add(
    new Konva.Circle({
      x: Math.random() * 100,
      y: Math.random() * 100,
      radius: Math.random() * 100,
      fill: Konva.Util.getRandomColor(),
      stroke: 'black',
      strokeWidth: Math.random() * 10,
    })
  );
  // force update manually
  transformer.forceUpdate();
}

참고자료

https://adjh54.tistory.com/m/14