www.webdeveloper.com
Results 1 to 5 of 5

Thread: Populating an array with touchmove

  1. #1
    Join Date
    Jan 2013
    Posts
    3

    Populating an array with touchmove

    Is is possible to populate an array with touchmove x (and another one with y) coordinates? As far as I've seen, touchmove only fires "one" event when the movement starts (unlike mousemove). Is there any workaround for this?

    Thanks.

  2. #2
    Join Date
    Dec 2012
    Posts
    170
    The touchmove event should fire every time you move, you get back an array of touch objects for every "touch" on the page, so the array you get back looks a little like this

    Code:
    changedTouches = [
       {
          pageX: 10,
          pageY: 30
       },
       {
          pageX: 40,
          pageY:60
       }
    ]
    So to create an array of all the positions that occur during a touch event you do something like this

    Code:
    var xTouches = [];
    var yTouches = [];
    function touchMoveHndl(e) {
       //get the object representing the first touch
       var touch = e.changedTouches[0];
       //add the x position to the array
       xTouches.push(touch.pageX);
       //add the y position to the array
       yTouches.push(touch.pageY);
    }
    
    function touchEndHndl(e) {
       console.log(xTouches);
       console.log(yTouches);
    }

  3. #3
    Join Date
    Jan 2013
    Posts
    3
    Thanks for the reply and sorry if I didn't expalin myself well. The thing is I need the event to keep firing while I keep moving my finger. If I move it in a circle, I want all the coordinates that describe the whole circumference (as if I had to draw).

  4. #4
    Join Date
    Dec 2012
    Posts
    170
    The event does keep firing while you move you're finger, every time the browser detects you moving your finger the "touchmove" event fires, for example this code will add every x and every y coordinate to an array then when you've finished moving it'll print them all out onto the page

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8"/>
    		<title></title>
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<style type="text/css">
    			body {
    				margin: 0;
    				padding: 0;
    			}
    			#toucharea {
    				width: 100%;
    				background: #333;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="toucharea"></div>
    		<script type="text/javascript">
    			var toucharea = document.getElementById('toucharea');
    			toucharea.style.height = document.documentElement.clientHeight+"px";
    			toucharea.addEventListener('touchstart',touchStartHndl);
    			toucharea.addEventListener('touchmove',touchMoveHndl);
    			toucharea.addEventListener('touchend',touchEndHndl);
    			var xTouches;
    			var yTouches;
    			function touchStartHndl(e) {
    				xTouches = [];
    				yTouches = [];
    				e.preventDefault();
    			}
    			function touchMoveHndl(e) {
    				e.preventDefault();
    				var touch = e.changedTouches[0];
    				xTouches.push(touch.pageX);
    				yTouches.push(touch.pageY);
    			}
    			function touchEndHndl(e) {
    				toucharea.innerHTML = "";
    				for(var i = 0, l = xTouches.length; i < l; i++) {
    					toucharea.innerHTML += xTouches[i]+" - "+yTouches[i]+"<br/>";
    				}
    			}
    		</script>
    	</body>
    </html>

  5. #5
    Join Date
    Jan 2013
    Posts
    3
    Thank you very much. It had failed on my previous attempt because I'd made a silly mistake, but now it works great. Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles