KineticJS中的約束/比例縮放

Question

當拖動圖像的4個角部手柄中的任何一個時，圖像應按比例向上或向下縮放。

問題：用我當前的嘗試如示於下面的鏈接的的jsfiddle，當topLeft手柄被成比例地垂直拖動，則圖像再縮放，但其他處理的閃爍。當相同的topLeft手柄水平拖動時，圖像只是移動而不調整大小。

如何用KineticJS實現比例縮放？謝謝！！！

的jsfiddle：http://jsfiddle.net/zb3Km/

Answer 1

由這是怎麼回事.....
math/algorithm Fit image to screen retain aspect ratio

我得到這個.....

function update(group, activeAnchor) { 
    var topLeft  = group.get(".topLeft")[0]; 
    var topRight  = group.get(".topRight")[0]; 
    var bottomRight = group.get(".bottomRight")[0]; 
    var bottomLeft  = group.get(".bottomLeft")[0]; 
    var image   = group.get(".image")[0]; 

    // update anchor positions 
    switch(activeAnchor.getName()) { 
     case "topLeft": 

      topRight.attrs.y = activeAnchor.attrs.y; 
      //topRight.attrs.x = activeAnchor.attrs.x + image.getWidth(); 
      bottomLeft.attrs.x = activeAnchor.attrs.x; 
      // bottomRight.attrs.x = activeAnchor.attrs.x + image.getWidth(); 

      break; 
     case "topRight": 
      topLeft.attrs.y = activeAnchor.attrs.y; 
      bottomRight.attrs.x = activeAnchor.attrs.x; 
      break; 
     case "bottomRight": 
      bottomLeft.attrs.y = activeAnchor.attrs.y; 
      topRight.attrs.x = activeAnchor.attrs.x; 
      break; 
     case "bottomLeft": 
      bottomRight.attrs.y = activeAnchor.attrs.y; 
      topLeft.attrs.x = activeAnchor.attrs.x; 
      break; 
    } 

    //https://stackoverflow.com/questions/6565703/math-algorithm-fit-image-to-screen-retain-aspect-ratio 

    var ws= topRight.attrs.x - topLeft.attrs.x; 
    var hs = bottomLeft.attrs.y - topLeft.attrs.y; 
    var wi = image.getWidth(); 
    var hi = image.getHeight(); 
    var rs = ws/hs; 
    var ri = wi/hi; 
    if (rs>ri){ 
     var width =wi * hs/hi; 
     image.setSize(width, hs); 
     image.setPosition(topLeft.attrs.x+((ws-width)/2), bottomLeft.attrs.y-((hi))); 

    } else { 
     var height=hi * ws/wi; 
     image.setSize(ws, height); 
     image.setPosition(topRight.attrs.x-wi, topLeft.attrs.y+((hs-height)/2)); 
    } 


} 

http://jsfiddle.net/zb3Km/2/
編輯：
http://jsfiddle.net/zb3Km/3/
在完成調整大小後使錨點回彈

編輯2： 現在將調整大小定位到對角。
http://jsfiddle.net/jdA3y/