使用觸摸事件在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中移動圖像

回答

相關問題