Konvajs/Kineticjs图像的旋转、镜像、翻转

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.rawgit.com/konvajs/konva/0.9.5/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva Rotation Animation Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
         width,
        height: height
    });

    var layer = new Konva.Layer();
    stage.add(layer);
    
    var ImageYoda = new Image();
    ImageYoda.onload = function(){
        var kImage1 = new Konva.Image({
            image: ImageYoda,
            x: 200,
            y: 200,
             ImageYoda.width,
            height: ImageYoda.height,
            offset:{    // offset的设置是使得围绕中心旋转
                x: ImageYoda.width/2,   
                y: ImageYoda.height/2
            }
        });
        
        layer.add(kImage1);
        
        var kImage2 = new Konva.Image({
            image: ImageYoda,
            x: 500,
            y: 200,
             ImageYoda.width,
            height: ImageYoda.height,
            offset:{
                x: ImageYoda.width/2,
                y: ImageYoda.height/2
            }
        });
        
        layer.add(kImage2);
        
        var kImage3 = new Konva.Image({
            image: ImageYoda,
            x: 800,
            y: 200,
             ImageYoda.width,
            height: ImageYoda.height,
            offset:{
                x: ImageYoda.width/2,
                y: ImageYoda.height/2
            }
        });
        
        layer.add(kImage3);
        
        // one revolution per 4 seconds
        var triggerTime = -1000;
        var scale = 1;
        var angularSpeed = 190;
        var anim = new Konva.Animation(function(frame) {
            if (frame.time - triggerTime < 1000){
                return false;
            }
            
            triggerTime = frame.time;
            
            var angleDiff = frame.timeDiff * angularSpeed / 1000;
            scale *= -1;
            kImage1.rotate(angleDiff);          // 旋转
            kImage2.scale({x: scale, y: 1});    // 左右镜像
            kImage3.scale({x: 1, y: scale});    // 上下翻转
        }, layer);
    
        anim.start();
    }
    
    ImageYoda.src = 'http://konvajs.github.io/assets/yoda.jpg';
    

</script>

</body>
</html>

直接看代码，复制到本地即可运行。

相关阅读:
修改游标所在的表
 PL/SQL开发中动态SQL的使用方法
 索引学习笔记
 动态SQL和PL/SQL的EXECUTE选项分析
 PL/SQL正确选择游标类型
 oracle字符集
 ext框架下,实现弹出新窗口
 student guide
plsql与.net异常处理
 ASP.NET 2.0 XML 系列（1）： XML介绍
原文地址：https://www.cnblogs.com/Farmer-D/p/4871537.html