Question

使用Kinetic / html5 - 我尝试通过“offset”使图像旋转到其中心，但它不起作用。下面是小代码片段..（它只是拒绝围绕img1的中心旋转！）非常感谢！

<!DOCTYPE HTML>
<html>
  <head>
      <!--
        Kinetic Tutorials:
            Image       http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
            Rotation    http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/
                        http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/
      -->
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container" style="position:fixed;top:0px;left:0px;"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 200,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var img1 = new Image();
      img1.onload = function() {
        var Gear1 = new Kinetic.Image({
          x: 0,
          y: 0,
          image: img1,
          width: 50,
          height: 50,
          offset: [25,25]   /* This is supposed to shift center of rotation to middle of img1, but it's not working!? */
        });

        layer.add(Gear1);
        stage.add(layer);

        var angularSpeed = 360 / 3;
        var anim = new Kinetic.Animation(function(frame) {
          var angleDiff = frame.timeDiff * angularSpeed / 1000;
          Gear1.rotate(angleDiff);
        }, layer);

        anim.start();
      };

      img1.src = 'Gear.jpg';

    </script>
  </body>
</html>

Answer 1

您的代码适用于KineticJS v4.7。

KineticJS v5使用一个对象来定义偏移而不是数组：

offset: {x:25,y:25}

第5版演示：http://jsfiddle.net/m1erickson/UbdW2/

Kinetic.js / HTML5通过“偏移”无法正常旋转中心图像

1 个答案: