Javascript 在KineticJS中使用touchmove移动图像_Javascript_Kineticjs

Javascript 在KineticJS中使用touchmove移动图像

javascript

Javascript 在KineticJS中使用touchmove移动图像,javascript,kineticjs,Javascript,Kineticjs,我想使用“touchmove”事件移动图像，我知道我可以将拖动设置为true并使用它，但需要使用“touchmove”，以便以后可以添加更多内容（缩放、旋转等）问题是：- 1-它没有响应，只是在几次尝试后随机出现。 2-当图像大于50x50时，根本不会发生任何事情 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width"/> <style

我想使用“touchmove”事件移动图像，我知道我可以将拖动设置为true并使用它，但需要使用“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>


身体{
边际：0px；
填充：0px；
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：250，
身高：400
});
var layer=新的动能层（）；
函数writeMessage（消息）{
text.setText（消息）；
layer.draw（）；
}
var text=新的dynamic.text({
x:10，
y:10，
fontFamily：“Calibri”，
尺寸：24，
文本：“”，
填充：“黑色”
});       
图像=新图像（）；
image.onload=function（）{
var map=新的动力学图像({
x:0,，
y:0，
图像：图像，
宽度：50，
身高：50
});
map.on（'touchstart'，function（））{
writeMessage（“Touchstart”）；
});
map.on（'touchmove'，function（）{
var touchPos=stage.getPointerPosition（）；
var x=触摸位置x；
变量y=触摸位置y；
var pos={x:x，y:y}；
地图移动（pos）；
写消息（'x:'+x+'，y:'+y）；
});
图层添加（地图）；
阶段。添加（层）；
};
image.src='img/map-04.png'；
图层。添加（文本）；

提前感谢。

如果您使用的是

移动

功能，您必须通过dx和dy，也不能通过绝对位置。在您的情况下，您可以使用：

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

感谢这解决了第一个问题，第二个问题仍然存在，当图像填充整个层时，它不会移动。你能提供任何JSFIDLE吗？它是为Phonegap设计的，所以不知道JSFIDLE是否可以工作。不管怎么说，我会弄明白的，谢谢你的帮助。问题是，带有网络视图的android bug“在等待WebCore对触地的响应时错过了一次拖拉”。