在KineticJS中使用touchmove移动图像

我想使用'touchmove'事件来移动图像，我知道我可以将拖动设置为true并使用它，但需要使用'touchmove'，以便稍后添加更多内容（缩放，旋转等）。在KineticJS中使用touchmove移动图像

问题是： - 1-它不响应，它只是在几次尝试后随机出现。 2-当图像大于50x50时，根本没有任何反应。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta name="viewport" content="width=device-width"/> 
<style> 
    body { 
    margin: 0px; 
    padding: 0px; 
    } 
</style> 
</head> 
<body onmousedown="return false;"> 
<div id="container"></div> 
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js" > </script> 
<script defer="defer"> 
    var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 250, 
    height: 400 
    }); 
    var layer = new Kinetic.Layer(); 
    function writeMessage(message) { 
    text.setText(message); 
    layer.draw(); 
    } 

    var text = new Kinetic.Text({ 
    x: 10, 
    y: 10, 
    fontFamily: 'Calibri', 
    fontSize: 24, 
    text: '', 
    fill: 'black' 
    });  

    image=new Image(); 
    image.onload=function(){ 
    var map = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: image, 
     width: 50, 
     height: 50 
    }); 

    map.on('touchstart',function() { 
    writeMessage('Touchstart'); 
    }); 

    map.on('touchmove',function() { 
    var touchPos = stage.getPointerPosition(); 
    var x = touchPos.x; 
    var y = touchPos.y; 
    var pos= {x:x,y:y}; 
    map.move(pos); 
    writeMessage('x: ' + x + ', y: ' + y); 
    }); 

    layer.add(map); 
    stage.add(layer); 

    }; 
    image.src='img/map-04.png'; 

    layer.add(text); 
</script> 
</body> 
</html>

在此先感谢。

来源

2014-04-01 Ahmed Saad

如果您使用的是move函数，则必须传递dx和dy，也不能传递绝对位置。在你的情况，你可以使用这个：

map.on('touchmove', function() { 
    var pos = stage.getPointerPosition(); 
    map.position(pos); 
    writeMessage('x: ' + pos.x + ', y: ' + pos.y); 
});

来源

2014-04-01 00:37:12 lavrton

感谢这解决了第一个问题，第二个是还在那里当图像填充整层不会移动。 –

你能提供任何jsfiddle吗？ – lavrton

这意味着Phonegap，所以不知道jsfiddle是否可以工作。反正我会弄明白，谢谢你的帮助。 –

在KineticJS中使用touchmove移动图像

回答

相关问题