Javascript 使用触摸事件在KineticJS中移动图像_Javascript_Cordova_Kineticjs

Javascript 使用触摸事件在KineticJS中移动图像

javascript cordova

Javascript 使用触摸事件在KineticJS中移动图像,javascript,cordova,kineticjs,Javascript,Cordova,Kineticjs,我想制作一张地图，用户应该使用触摸事件滚动地图，使用触摸手势放大和缩小地图。这里我使用touchstart将拖动标志设置为true，然后使用touchmove计算坐标中的增量并相应地移动图层（地图图层），最后使用touchend将拖动标志设置为false 问题是它不起作用了，我的头撞了几个小时，到目前为止都没法工作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title&g

我想制作一张地图，用户应该使用触摸事件滚动地图，使用触摸手势放大和缩小地图。这里我使用touchstart将拖动标志设置为true，然后使用touchmove计算坐标中的增量并相应地移动图层（地图图层），最后使用touchend将拖动标志设置为false

问题是它不起作用了，我的头撞了几个小时，到目前为止都没法工作

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="core/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="core/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="core/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/map.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="main" data-role="page">
    <div data-role="header">
        <h1>Header of #main</h1>
    </div>
    <div id="content" data-role="content">
        <script type="text/javascript" src="core/kinetic-v5.0.1.min.js">      </script>

        <script defer="defer">
            var stage = new Kinetic.Stage({
                container: 'content',
                width: 300,
                height: 200
            });

            var layer = new Kinetic.Layer();

            var imageObj = new Image();
            imageObj.onload = function() {
                var yoda = new Kinetic.Image({
                x: 0,
                y: 0,
                image: imageObj,
                width: 106,
                height: 118
                });
            layer.add(yoda);
            stage.add(layer);
            };
            imageObj.src = 'image/map-04.png'

            var dragging = false,
            lastX = 0,
        lastY = 0;

            imageObj.on('touchstart', function() {
                var touchPos = stage.getPointerPosition();
                dragging = true;
                lastX = touchPos.x;
                lastY= touchPos.y;
            });

            imageObj.on('touchmove', function() {
                var touchPos = stage.getPointerPosition();
                if(dragging){
                var dx = touchPos.x - lastX;
                var dy = touchPos.y - lastY;
                layer.translate(dx,dy);
                lastX = touchPos.x;
                lastY = touchPos.y;
                }
            });

            imageObj.on('touchend', function() {
                dragging = false;
            });
            stage.add(layer);
</script>
    </div>
<div data-role="footer">
    <h4>Footer of #main Page</h4>
</div>
</div>
</body>
</html>


#总管
var阶段=新的动力学阶段({
容器：“内容”，
宽度：300，
身高：200
});
var layer=新的动能层（）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
var yoda=新的动力学图像({
x:0,，
y:0，
图片：imageObj，
宽度：106，
身高：118
});
图层添加（yoda）；
阶段。添加（层）；
};
imageObj.src='image/map-04.png'
var=false，
lastX=0，
lastY=0；
imageObj.on（'touchstart'，函数（）{
var touchPos=stage.getPointerPosition（）；
拖动=真；
lastX=触摸位置x；
lastY=触摸位置y；
});
imageObj.on（'touchmove'，function（）{
var touchPos=stage.getPointerPosition（）；
如果（拖动）{
var dx=触摸位置x-最后x；
var dy=触摸位置y-最后一次；
层转换（dx，dy）；
lastX=触摸位置x；
lastY=触摸位置y；
}
});
imageObj.on（'touchend'，function（）{
拖动=假；
});
阶段。添加（层）；
#主页的页脚

提前感谢您的帮助。

您的imgObject不是kineticjs图像，yoda是kineticjs图像，以下是一些更改的修复：


var阶段=新的动力学阶段({
容器：“内容”，
宽度：300，
身高：200
});
var layer=新的动能层（）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
var yoda=新的动力学图像({
x:0,，
y:0，
图片：imageObj，
宽度：106，
身高：118，
德拉格布尔：是的
});
yoda.on（'dragstart'，function（））{
console.log（“拖动”）；//有关结果，请参见控制台
});
图层添加（yoda）；
阶段。添加（层）；
};
imageObj.src=http://www.clker.com/cliparts/8/9/9/d/11949855741697952186small_house_01.svg.med.png';
//阶段。添加（层）；//无需再次添加

现在，您需要将touchstart touchend等事件附加到yoda，而不是作为DOM一部分的imgObject，而不是画布

    <script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.js"></script>

    <script defer="defer">
        var stage = new Kinetic.Stage({
            container: 'content',
            width: 300,
            height: 200
        });

        var layer = new Kinetic.Layer();

        var imageObj = new Image();
        imageObj.onload = function() {
            var yoda = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
            width: 106,
            height: 118,
              draggable: true
            });
          yoda.on('dragstart', function(){
            console.log("dragging"); // see console for result
          });
        layer.add(yoda);
        stage.add(layer);
        };
        imageObj.src = 'http://www.clker.com/cliparts/8/9/9/d/11949855741697952186small_house_01.svg.med.png';

       // stage.add(layer); // no need to add again
    </script>