Получить изображение в исходное положение

У меня есть следующий 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

перетаскивая кинетическую группу вызовет его х, у, чтобы изменить.

«отменить» перетаскивание, просто сбросить группу обратно в исходное х, у позиции:

В вашем случае, вы создали группу на своей позиции по умолчанию 0,0, так как это сброс:

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

источник

2013-09-26 15:33:56 markE

Получить изображение в исходное положение

ответ

Смежные вопросы