Creating Web Apps - The Touch API
Creating Web Apps - The Touch API
Written by Mike James   
Article Index
Creating Web Apps - The Touch API
Touch in motion
Touch with color
Complete listing

Listing

The complete listing of the final version of the program is:

<!DOCTYPE html>
 <html>
  <head>
   <title>Touch</title>
   <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8">
   <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0,
    user-scalable=no">
  </head>
  <body>
   <canvas id="myCanvas"
        width="800" height="800"
        style="border:1px solid #000000;" >
   </canvas>
  <script>
   var ctx = myCanvas.getContext('2d');
   myCanvas.addEventListener("touchstart",
                       handleStart, false);
   myCanvas.addEventListener("touchmove",
                       handleMove, false);
   myCanvas.addEventListener("touchend",
                       handleEnd, false);
   document.body.addEventListener('touchmove',
      function(event) {
        event.preventDefault();
      }, false);

var colors=["#FF0000","#00FF00","#0000FF"];
var colorId = [];

function handleStart(evt) {
 for(var i=0;
       i<evt.changedTouches.length;i++)
 {
  if (colors.length === 0) continue;
  var touch = evt.changedTouches[i];
  colorId[touch.identifier] = colors.pop();
  drawCircle(touch.pageX, touch.pageY,
        20, colorId[touch.identifier],ctx);
 }
}

function handleMove(evt) {
 for(var i=0;i<evt.changedTouches.length;
                                    i++){
  var touch = evt.changedTouches[i];
  if (colorId[touch.identifier] ===
                      undefined) continue;
  drawCircle(touch.pageX, touch.pageY,
       20, colorId[touch.identifier], ctx);
 }
}

function handleEnd(evt) {
 for (var i=0;i<evt.changedTouches.length;
                                      i++){
  var touch = evt.changedTouches[i];
  if (colorId[touch.identifier] ===
                       undefined) continue;
  colors.push(colorId[touch.identifier]);
 }
}

function drawCircle(x, y, r, c, ctx) {
 ctx.beginPath();
 ctx.arc(x, y, r, 0, 2 * Math.PI, true);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.stroke();
}
  </script>
 </body>
</html>

 

move

What's left

There are lots of small topcs we haven't covered. In particular we have ignored the touchenter, touchleave and touchcancel events, but these are fairly easy to work with.

It is worth pointing out that there is additional information in the touch object that you can use to make your apps more sophisticated. For example, the radiusX, radiusY and rotationAngle can be used to fit an ellipse to the point of contact. The force property can also be used to work out how hard the user is pressing on the screen. Again, once you know they exist they are easy enough to use. The TouchList object also has the identifiedTouch method which can be used to return a touch object corresponding to a particular touch identifier.

Perhaps another article on touch is needed?

If you would like the code for this article register with I Programmer and visit the CodeBin.

Getting Started with Box2D in JavaScript

 

 
 

 

blog comments powered by Disqus

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

 

 

Banner


Getting Started With jQuery - Advanced Ajax Characters & Encoding

One of the biggest problems you encounter in using Ajax is the dreaded character encoding. No matter what data format you select, the data is actually transmitted as text. But it isn't as simple as th [ ... ]



Speed dating - The Art of the JavaScript Date Object

JavaScript's way of working with dates is simple but perhaps this is part of the problem. The Date object is so simple that it can be difficult to work out how to do things like date arithmetic. Find  [ ... ]


Other Articles



Last Updated ( Monday, 21 January 2013 )
 
 

   
Banner
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.