0

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

我试图首先在第一层上引入一个看起来超大的图像。这是故意的。使用过渡，我想将图像缩小到适当的大小，以便它在页面加载时适合画布。这是我的第一步。我的下一步将是添加第二层并为一些文本设置动画。但是，对此的问题可以等待。我只想先集中精力解决这个问题。

到目前为止，当我在 Firefox 中运行此代码时，Firebug 调试器告诉我在显示为crosshairs.transitionTo的行上没有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>

我已经附上了图像本身。希望你能看到。

在此处输入图像描述

4

1 回答 1

0

实际上你是在请求.transitionTo一个html 图像对象（当然没有这样的方法）

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

  var imageObj1 = new Image();
  imageObj1.onload = function() {
    runAnim(this);
  };
  imageObj1.src = 'yourImage';
于 2013-04-08T22:55:07.677 回答