image.png
最简单的一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="konva.js"></script>
<script>
// 创建stage
var stage=new Konva.Stage({
container:'container',//id值
width:500,height:500
});
// 创建图层
var layer=new Konva.Layer();
// 创建形状
var circle=new Konva.Circle({
x:200,y:200,
radius:70,fill:'red',stroke:'black',strokeWidth:4
});
// 形状添加到图层
layer.add(circle);
// 图层添加到画布
stage.add(layer);
// 显示
layer.draw();
</script>
</body>
</html>
image.png
基本形状
矩形，圆，椭圆，直线，多边形，曲线，不规则图形，图片，文字等
样式
填充`纯色、渐变色或图像
描边（颜色、宽度）
阴影（颜色、偏移、不透明度、模糊）
不透明度
事件
Konva支持mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、wheel、click、dblclick、dragstart、dragmove和dragend桌面事件。
用户事件 click, dblclick, mouseover, tap, dbltap, touchstart etc
circle.on('mouseout',function () {
console.log("mouseout")
})
拖放
shape.draggable('true');
开启拖放
circle.draggable('true');
滤镜
略
动画
1 通过Konva.Animation
var anim = new Konva.Animation(function(frame) {
circle.x(
100 * Math.sin((frame.time * 2 * Math.PI) / 2000) + 100
);
}, layer);
anim.start();
1 通过Konva.Tween
var tween = new Konva.Tween({
node: circle,
duration: 1,
x: 140,
opacity: 1,
strokeWidth: 6
});
tween.play();
简写形式
circle.to({
duration : 1,
fill : 'green'
})
选择器
find()或者findOne()
var circle = new Konva.Circle({
radius: 10,
fill: 'red',
id : 'face',
name : 'red circle'
});
layer.add(circle);
// 按类型寻找
layer.find('Circle'); // all circles
// 按id寻找
layer.findOne('#face');
// 按name寻找
layer.find('.red')
序列化和反序列化
略
性能
略
网友评论