SK提示知识点:
1.konva 的使用
2.偏移点
3.Konva.Group 切图
4.Animation 动画
5.Konva.Image 使用
6.旋转, 剪切, 镜像, 翻转
原图
效果图
左右镜像
上下翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.创建容器-->
<div id="container"></div>
<script src="js/konva.js"></script>
<script>
//2.创建舞台
var stage = new Konva.Stage({
container:'container',
width:window.innerWidth,
height:window.innerHeight
});
//3.创建层
var layer = new Konva.Layer({});
stage.add(layer);
//圆心
var x0 = stage.width() * 0.5;
var y0 = stage.height() * 0.5;
var radius = 200;
//4.创建组
var group = new Konva.Group({
clipFunc: function(ctx) {
ctx.arc(x0, y0, radius, 0, Math.PI * 2, false);
},
draggable: true
});
layer.add(group);
//4.创建演员 图片
var img = new Image();
img.src = 'images/hero.jpg';
//5.图片加载完后
img.onload = function () {
var kImage = new Konva.Image({
image:img,
x:x0,
y:y0,
width:img.width,
height:img.height,
//偏移
offsetX:img.width * 0.5,
offsetY:img.height * 0.5
// offset的设置是使得围绕中心旋转
/* offset:{
x: img.width/2,
y: img.height/2
}*/
});
//添加到组
group.add(kImage);
//6.开启动画
//6.1 旋转
//每秒转60度
var rotateAnglePerSecond = 60;
var anim = new Konva.Animation(function (frame) {
//上一帧到当前帧的时间差 ms -->s
var timeDiff = frame.timeDiff /1000;//距离上一帧的时间差
//一帧转多少度
var rotateAngle = timeDiff * rotateAnglePerSecond;
//旋转
kImage.rotate(rotateAngle);
}, layer);
//开启动画
anim.start();
};
//------------------------------------
var img2 = new Image();
img2.src = 'images/chopper.png';
//5.图片加载完后
img2.onload = function () {
var kImage2 = new Konva.Image({
image:img2,
x:200,
y:200,
width:img2.width,
height:img2.height,
//偏移
offsetX:img2.width * 0.5,
offsetY:img2.height * 0.5
// offset的设置是使得围绕中心旋转
/* offset:{
x: img.width/2,
y: img.height/2
}*/
});
//添加到层
layer.add(kImage2);
//6.开启动画
//6.2 左右镜像 和 上下翻转
var scale = 1; //缩放
var starTime = -1000;//触发事件
var anim = new Konva.Animation(function (frame) {
//判断是否过了1s
if (frame.time - starTime < 1000){
return false;
}
starTime = frame.time;
//左右镜像
scale *=-1;
kImage2.scale({x:scale, y:1});
//上下翻转
// kImage2.scale({x:1, y:scale});
}, layer);
//开启动画
anim.start();
}
</script>
</body>
</html>
