konva实现图片剪切旋转镜像翻转

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>
konva实现图片剪切 旋转 镜像 翻转

推荐阅读更多精彩内容

konva实现图片剪切旋转镜像翻转
