在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移動圖像

回答

相關問題