將圖像恢復到原來的位置

我有以下HTML和JS。當我點擊圖片時，圖片放大。這是行得通的。但是，當我加載時，我想縮小圖像到原始位置。將圖像恢復到原來的位置

考慮將圖像向右拖動一點，然後放大。

我想要的是當它縮小後，它被重新定位到原來的位置，當它被加載。

我在做什麼錯？我需要這個頁面有here的效果。當您拖動圖像並釋放它時，它將會回到原來的位置。

var isZoom=1; 
    var stage=new Kinetic.Stage({ 
       container:'container', 
       width:700, 
       height:700, 
       id:'kineticstage', 
       name:'kineticstage' 
       }); 

    var layer=new Kinetic.Layer({}); 

    var group = new Kinetic.Group({ 
     width:700, 
     height:700, 
     draggable: true 
    }); 
    layer.add(group); 


    // set the images 
    var pages = ["http://197.242.159.63/reader/demo/img/face.jpg"]; 

    var loadedPage = 0; 
    function loadPage(pageno){ 
     var imageObj = new Image(); 
     imageObj.onload = function() { 
      var kimage = new Kinetic.Image({ 
       x: 0, 
       y: 0, 
       image: imageObj, 
       width:700, 
       height:700 
      }); 

      // add to layer 
      group.add(kimage); 
      stage.add(layer); 
     }; 

     // load the page image 
     imageObj.src = pages[pageno - 1]; 
    } 

    // page 1 
    loadPage(1); 


    var tween = new Kinetic.Tween({ 
     node: group, 
     duration: 1.0, 
     rotation:0, 
     scaleX: 1.5, 
     scaleY: 1.5, 
     easing:Kinetic.Easings.EaseInOut 
    }); 

    group.on('dblclick dbltap',function(e){ 
     if(isZoom == 1){ 
      tween.play(); 
     } 
     else{ 
      tween.reverse(); 
     } 
     layer.batchDraw(); 
     isZoom = (isZoom>0) ? -1 : 1; 
    });

HTML

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" > 
    <meta name="apple-mobile-web-app-capable" content="yes" > 
</head> 
<body> 
    <div id="container"><!-- --></div> 
</body> 
    <script type="text/javascript" language="javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> 
</html>

Fiddle

來源

2013-09-26 Divyesh

沒有真正看到任何縮放...你在哪裏點擊？ –

@meewoK：雙擊:) – markE

拖移動組將導致其X，Y改變。

「撤銷」的拖累，只是重置組恢復到原來的x，y位置：

在你的情況，你創建的組在0,0其默認位置，以便重新設置是這樣的：

group.setX(0); 
group.setY(0);

來源

2013-09-26 15:33:56 markE

將圖像恢復到原來的位置

回答

相關問題