SK提示知识点:
1.konva 的使用
2.偏移点
3.Konva.Group 切图
4.Animation 动画
5.Konva.Image 使用
6.旋转, 剪切, 镜像, 翻转
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>
