将图像恢复到其原始位置答案

【问题标题】：Get Image back to its original location将图像恢复到其原始位置
【发布时间】：2013-10-02 12:18:52
【问题描述】：

我有以下 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

【问题讨论】：

没有真正看到任何缩放...你点击哪里？
@meewoK: 双击 :)

标签： html image html5-canvas kineticjs

【解决方案1】：

拖动您的动力学组将导致其 x,y 发生变化。

要“撤消”拖动，只需将组重置为其原始 x,y 位置：

在您的情况下，您在默认位置 0,0 创建了组，因此重置如下：

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

【讨论】：