KineticJS：在調整圖像的同時調整過渡寬度

請參閱下面的代碼。使用的例子：http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/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

來源

2013-04-08 Alan

其實你是一個HTML圖像對象（沒有這樣的方法，當然）

上請求.transitionTo我把你的代碼的幾個部分合在一起來說明。下面的代碼中的「this」是指你的html圖像對象，而不是kineticJS對象。

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

來源

2013-04-08 22:55:07 markE

當然！它必須是明顯的東西！其中之一，「不能看到樹木的森林」的東西。我現在開始工作了。謝謝。 – Alan 2013-04-08 23:10:03

KineticJS：在調整圖像的同時調整過渡寬度

回答

相關問題