이 글은 konva를 이용한 HTML5 기반 인터렉티브 그래픽 개발 도구를 간략히 이야기한다.
- konvajs 사이트
콘바(Konva)는 웹 기반 인터렉티브 그래픽을 지원하는 HTML5 Canvas JavaScript 프레임워크이다. 콘바는 고성능 애니메이션, 화면 전환, 그래픽 노드 오버레이, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 가능하게 한다. 이를 이용해, 딥러닝 라벨링 도구 같은 웹 기반 그래픽 편집기, 게임 등을 쉽게 개발할 수 있다.
콘바 기반 웹 그래픽 설명 서비스
개념
콘바는 가상 무대에 객체를 그리고, 이벤트 리스너를 추가한 후, 이동하고, 크기를 조정하거나, 다른 모양과 독립적으로 회전하는 등 애니메이션을 지원한다.
콘바는 다음과 같은 계층적 구조를 가진다.
설치
node.js 설치 후 다음 명령을 명령창에서 입력한다.
npm install konva
혹은 html 이나 자바 스크립트 파일에 아래 태그를 포함한다.
<script src="https://unpkg.com/konva@8/konva.min.js"></script>
사용 방법
콘바는 웹 기반 그래픽 처리를 위해 여기와 같은 다양한 API를 제공한다.
이러한 기능을 이용해, 다음 그래픽을 생성하는 예제를 확인해 보자.
다음 스크립트를 html로 저장해 크롬 등에서 실행해보자. 코드 명령 실행 순서는 위에서 소개한 개념도와 같이, 스테이지를 만든 후, 레이어에 툴팁, 라벨 등 도형을 추가한다. 콘바는 이와 같이 매우 직관적으로 동작되므로, 이해가 그리 어렵지 않다.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Label Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
// tooltip
var tooltip = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75,
});
tooltip.add(
new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowOpacity: 0.5,
})
);
tooltip.add(
new Konva.Text({
text: 'Tooltip pointing down',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
// label with left pointer
var labelLeft = new Konva.Label({
x: 20,
y: 130,
opacity: 0.75,
});
labelLeft.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'left',
pointerWidth: 20,
pointerHeight: 28,
lineJoin: 'round',
})
);
labelLeft.add(
new Konva.Text({
text: 'Label pointing left',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
// simple label
var simpleLabel = new Konva.Label({
x: 180,
y: 150,
opacity: 0.75,
});
simpleLabel.add(
new Konva.Tag({
fill: 'yellow',
})
);
simpleLabel.add(
new Konva.Text({
text: 'Simple label',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'black',
})
);
// add the labels to layer
layer.add(tooltip).add(labelLeft).add(simpleLabel);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
Konva 기반 딥러닝 라벨링 도구 개발 사례
콘바를 이용하면, 딥러닝 학습 데이터 생성에 필요한 라벨링 도구를 웹기반으로 쉽게 개발할 수 있다. 다음은 관련 개발 사례이다.
마무리
이 글은 웹기반 인터렉티브 그래픽 에디터, 애니메이션 등 다양한 곳에 사용되는 콘바를 간략히 소개하였다. 콘바는 매우 많은 데모를 제공하여, 개발자가 손쉽게 서비스를 개발할 수 있도록 지원한다. 관심이 있다면, 아래 링크를 참고하길 바란다.
Reference
댓글 없음:
댓글 쓰기