터치 이벤트를 사용하여 KineticJS에서 이미지 이동

지도를 만들고 싶습니다. 사용자는 터치 이벤트를 사용하여 스크롤하고 터치 제스처를 사용하여 확대/축소해야합니다. 여기에 터치 시작을 사용하여 끌기 플래그를 true로 설정 한 다음 touchmove를 사용하여 좌표의 델타를 계산하고 이에 따라 레이어 (지도 레이어)를 이동 한 다음 마침내 드래그 플래그를 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 등 이벤트를 연결해야합니다 , 캔버스가 아닌 DOM의 일부인 imgObject가 아닙니다.

출처

2014-03-26 15:19:53 SoluableNonagon

감사합니다. –

터치 이벤트를 사용하여 KineticJS에서 이미지 이동

답변

관련 문제