konva
Konva.js - HTML5 2d canvas library for desktop and mobile applications.
2019.03 24K 해커톤에서 만든 툴도 konva 를 이용해서 만들었음.
konva 사용하기
package manager 사용하면
온라인 상태이면 그냥 CDN 에 있는거 땡겨 써도 큰 무리 없음.
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
빨간 동그라미에 까만 테두리 예제
기본 모양들 - Basic shapes
Rect, Circle, Ellipse, Line, Polygon, Spline, Blob, Image, Text, TextPath, Star, Label, SVG Path, RegularPolygon 지원.
custom shape 도 가능
Styles
Fill - 체우기. gradients 나 images 도 가능
Stroke - 테두리 선
Shadow - 그림자
Opacity - 투명도
Events
click, dblclick, mouseover, tap, dbltap, touchstart 등의 이벤트를 처리 할 수 있다.
속성 변경 이벤트 (scaleXChange, fillChange)
drag&drop 이벤트 (dragstart, dragmove, dragend)
example: https://konvajs.org/docs/events/Binding_Events.html
drag and drop
내장된 drag 를 지원한다.
drop 이벤트 (drop, dragenter, dragleave, dragover) 는 없지만 쉽게 구현할 수 있다.
drag&drop 을 활성화 하려면 draggable 속성을 true 로 바꿔주면 된다.
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
2. Konva.Tween
https://konvajs.org/docs/tweens/Linear_Easing.html
Selectors
큰 애플리케이션을 구성할 때 요소들에서 검색을 이용하면 유용하다. Konva 는 셀렉터로 요소를 찾는데 도움을 준다. find() 나 findOne() 메서드를 사용할 수 있다.
뭔가 번역투라 이상하다.
javascript 에서 dom 내부를 검색 할 때 getElement 어쩌구나 jquery 에서 find 를 이용해서 dom 내부를 검색 할 수 있는데, 그런것과 비슷한 걸 제공하고 있다고 보면 된다.
layer 에 Circle 을 추가 하고 layer.find 로 모든 Circle 을 검색한다. # 은 id, . 은 name 이다. jquery 에서 그냥 find 는 html tag, # 은 아이디, . 은 class 를 검색하는 것과 비슷한다.
Serialisation and Deserialization
생성된 모든 객체들은 json 으로 저장 할 수 있다. 서버나 로컬 스토리지에 저장 해 두면 유용할 것 같다.
그리고 다시 불러 올 수도 있다.
Performance
Konva 는 스피드를 개선할 많은 도구들을 가지고 있다. 가장 중요한 메서드들로
캐싱은 하나의 엘리먼트를 버퍼 캔버스에 넣어둔다. 그리고 그 캔버스로 부터 엘리먼트를 그린다. 그림자가 선을 가지는 텍스트나 도형들 같은 복잡한 노드들에 성능향상을 줄 수 있다.
Layering. 프레임워크는 여러 엘리먼트들을 지원하므로 개체를 자유롭게 지정할 수 있다.
예를 들어 애플리케이션은 복잡한 배경과 여러 움직이는 모양으로 구성된다. 하나의 레이어는 배경에 사용하고 다른 레이어는 도형에 사용할 수 있다. 도형을 업데이트하는 동안 배경 캔버스는 업데이트 할 필요 없다.
모든 성능 향상 팁은 다음 링크를 참고 하도록 한다.
download
Last updated
Was this helpful?