Konva的使用
2017-06-06 本文已影响0人
郭钰涛
Konva
Konva特点
面向对象方式
- 一切皆对象
- 如何定义对象 ①Object构造函数 ②直接量 {} ③自定义构造函数 再new
- 构造函数 new一个构造函数就可以得到对象（实例）
- this
- 原型 prototype / 原型链
konva概念
- 舞台 stage
- 层 layer
- 组 group
- 图形
基本操作
- 创建舞台
new Konva.Stage({
width:
height
}) - 创建层
new Konval.Layer({})
stage.add(layer) - 图形或组添加到 层
- 图形添加到组
- 绘制 layer.draw()
基本图形
- Konva.Rect() 矩形
- Konva.Circle() 圆形
- Konva.Ellipse() 椭圆
- Konva.Text() 文字
- Konva.Image() 图片
- Konva.Line() 划线
- Konva.star() 星星
- ....
事件
类似于jquery
动画
- tween对象 指定动画持续时间 指定变化的样式 tween.play()
- 简写 图形.to()
- Animation对象
动画缓动效果实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>29 缓动效果演示</title>
<script src="bower_components/konva/konva.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
#buttons {
position: absolute;
top: 10px;
left: 10px;
}
#buttons > input {
padding: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<input type="button" id="play" value="Play">
<input type="button" id="pause" value="Pause">
<input type="button" id="reverse" value="Reverse">
</div>
<script>
var width = window.innerWidth;
var height = 707;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var easings = [
{name: 'Linear', color:'blue'},
{name: 'EaseIn', color:'green'},
{name: 'EaseOut', color:'green'},
{name: 'EaseInOut', color:'green'},
{name: 'BackEaseIn', color:'blue'},
{name: 'BackEaseOut', color:'blue'},
{name: 'BackEaseInOut', color:'blue'},
{name: 'ElasticEaseIn', color:'green'},
{name: 'ElasticEaseOut', color:'green'},
{name: 'ElasticEaseInOut', color:'green'},
{name: 'BounceEaseIn', color:'blue'},
{name: 'BounceEaseOut', color:'blue'},
{name: 'BounceEaseInOut', color:'blue'},
{name: 'StrongEaseIn', color:'green'},
{name: 'StrongEaseOut', color:'green'},
{name: 'StrongEaseInOut', color:'green'}
];
var tweens = [];
for(var n = 0; n < easings.length; n++) {
var num = n + 1;
var ease = easings[n];
var text = new Konva.Text({
x: 10,
y: 60 + (n * 400 / easings.length),
padding: 4,
text: num + ') ' + ease.name,
fontSize: 18,
fontFamily: 'Calibri',
fill: ease.color
});
layer.add(text);
// the tween has to be created after the node has been added to the layer
var tween = new Konva.Tween({
node: text,
x: 280,
easing: Konva.Easings[ease.name],
duration: 2
});
// add tween to tweens array
tweens.push(tween);
}
stage.add(layer);
// play
document.getElementById('play').addEventListener('click', function() {
for (var n=0; n<tweens.length; n++) {
tweens[n].play();
}
}, false);
// pause
document.getElementById('pause').addEventListener('click', function() {
for (var n=0; n<tweens.length; n++) {
tweens[n].pause();
}
}, false);
// reverse
document.getElementById('reverse').addEventListener('click', function() {
for (var n=0; n<tweens.length; n++) {
tweens[n].reverse();
}
}, false);
</script>
</body>
</html>
