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

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

问题是它没有工作，一直敲我的头几个小时到目前为止不能得到它的工作。

<!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>

感谢您的帮助提前。

来源

2014-03-26 Ahmed Saad

你imgObject是不是一个kineticjs图像，尤达是kineticjs图像，下面是一些变化的修正：

http://jsbin.com/miqoxese/1/edit

<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>

现在你需要附上您touchstart touchend等事件尤达，而不是imgObject，它是DOM的一部分，而不是画布。

来源

2014-03-26 15:19:53 SoluableNonagon

非常感谢 –

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

回答

相关问题