Question

请参阅下面的代码。使用以下示例：http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

我试图首先在第一层上引入一个看起来过大的图像。这是故意的。使用转换，我希望将图像缩小到适当的大小，以便在页面加载时适合画布。这是我的第一步。我的下一步是添加第二层并为一些文本设置动画。但是，问题可以等待。我只想先关注这个问题。

到目前为止，当我在Firefox中运行此代码时，Firebug调试器告诉我该行上没有 transitionTo 函数： crosshairs.transitionTo 。那里有些东西搞砸了，因为我们知道这个功能确实存在！我没看到它出了什么问题。也许有人可以看到问题是什么？另外，我不确定scale属性的X和Y值以及它们应该是什么。我正在猜测，现在想把图像的大小缩小一半？请指教。

艾伦

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        overflow: hidden;
        width: 312px;
        height: 121px;
        margin: 0px auto;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
      <div id="container"></div>
      <script src="kinetic-v4.4.0.min.js"></script>
      <script defer="defer">

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var crosshairLayer = new Kinetic.Layer();
      var textLayer = new Kinetic.Layer();
      var imageObj1 = new Image();
      imageObj1.src = 'images/crosshairs.png';


      function runAnim(crosshairs)
      {        
        crosshairs.transitionTo({
           scale: {
              x: .5,
              y: .5
            },
          duration: 3,
          easing: 'ease-in'
        });        
      }

    var XHair = new Kinetic.Image({
          image: imageObj1,
          x: stage.getWidth() / 2 - 650 / 2,
          y: stage.getHeight() / 2 - 327 / 2,
          width: 250,
          height: 250,
          draggable: false
        });

    crosshairLayer.add(XHair);
    stage.add(crosshairLayer);

    imageObj1.onload = function() {
        runAnim(this);
      };

    </script>

  </body>
</html>

我已附上图片了。希望你能看到它。

enter image description here

Answer 1

其实你在{strong> html图片对象上请求.transitionTo（当然没有这样的方法）

我将代码的一些部分放在一起来说明。下面代码中的“this”指的是你的html图像对象，而不是kineticJS对象。

  var imageObj1 = new Image();
  imageObj1.onload = function() {
    runAnim(this);
  };
  imageObj1.src = 'yourImage';

KineticJS：在调整图像大小时过渡缓和

1 个答案: