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 노드와 비슷하다.
참고:
빨간 동그라미에 까만 테두리 예제
// 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();
drop 이벤트 (drop, dragenter, dragleave, dragover) 는 없지만 쉽게 구현할 수 있다.
drag&drop 을 활성화 하려면 draggable 속성을 true 로 바꿔주면 된다.
shape.draggable('true');
Filters
여러 필터가 있다. blur, invert, noise 등
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'
});
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 는 스피드를 개선할 많은 도구들을 가지고 있다. 가장 중요한 메서드들로
캐싱은 하나의 엘리먼트를 버퍼 캔버스에 넣어둔다. 그리고 그 캔버스로 부터 엘리먼트를 그린다. 그림자가 선을 가지는 텍스트나 도형들 같은 복잡한 노드들에 성능향상을 줄 수 있다.
Layering. 프레임워크는 여러 엘리먼트들을 지원하므로 개체를 자유롭게 지정할 수 있다.
예를 들어 애플리케이션은 복잡한 배경과 여러 움직이는 모양으로 구성된다. 하나의 레이어는 배경에 사용하고 다른 레이어는 도형에 사용할 수 있다. 도형을 업데이트하는 동안 배경 캔버스는 업데이트 할 필요 없다.