У меня есть следующий HTML и JS. Когда я нажимаю на изображение, изображение масштабируется. Это работает. Но затем я уменьшаю масштаб. Я хочу вернуть изображение в исходное положение, когда оно было загружено.
Подумайте, что изображение немного перетаскивается вправо, а затем увеличилось.
То, что я хочу, - это то, когда он уменьшил свое перемещение в исходное место, когда он был загружен.
Что я делаю не так? Мне нужен эффект, который имеет здесь эта страница. Когда вы перетащите изображение и отпустите его, он переместится в исходное положение.
JS
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>
Перетаскивание вашей кинетической группы приведет к изменению ее x, y.
Чтобы "отменить" перетаскивание, просто верните группу обратно в ее исходную позицию x, y:
В вашем случае вы создали группу по умолчанию по умолчанию 0,0, поэтому выполните сброс следующим образом:
group.setX(0);
group.setY(0);