multi-touch-handler

Multi-touch-canvas-handler Version 2.0.2

Hello visitors , this is small script but very interest.

• Get touch coordinates , start/end event etc for 10 fingers.
• If you move all finger's no problem, script will handle all.
• You can get at any time x or y position for ten fingers in canvas 2d surface.
• I implement HUB button - detect when you finger get in rectangle .

Note:

• If you wanna implement it with your own canvas then you no need for visualPresentation

ECMA5 Solution:

var mTouchHandler = new MultiTouchHandler();

mTouchHandler.APP.BODY.ADD_2DCANVAS(
  "canvas_2",
   mTouchHandler.SCREEN.W,
   mTouchHandler.SCREEN.H);
mTouchHandler.APP.BODY.SET_STYLE("margin: 0;padding:0;border:none;");
mTouchHandler.attachEvents();
visualPresentation(mTouchHandler);

ECMA6 Solution:

import { MultiTouchHandler, visualPresentation } from "./multi-touch";

window.onload = () => {
  /* Create instance */
  var mTouchHandler = new MultiTouchHandler();
  var canvas = mTouchHandler.APP.BODY.ADD_2DCANVAS( "canvas_2", window.innerWidth, window.innerHeight );
  mTouchHandler.APP.BODY.SET_STYLE( "margin: 0;padding:0;border:none;" );
  mTouchHandler.attachEvents( canvas );

  visualPresentation(mTouchHandler);
}

Fancy way to catch event listener :

/**
 * @description Create instance in ECMA5 style
 */

var mTouchHandler = new MultiTouchHandler();

mTouchHandler.APP.BODY.ADD_2DCANVAS("canvas_2", mTouchHandler.SCREEN.W, mTouchHandler.SCREEN.H);
mTouchHandler.APP.BODY.SET_STYLE("margin: 0;padding:0;border:none;");

mTouchHandler.attachEvents();

addEventListener("multi.touch.finger.0", function(e) {
  console.log('TOUCH FIRST FINGER')
})

addEventListener("multi.touch.finger.2", function(e) {
  console.log('TOUCH FINGER INDEX 2')
})

addEventListener("multi.touch.moving.finger.0", function(e) {
  console.log('TOUCH MOVE FIRST FINGER')
})

addEventListener("multi.touch.cancel", function(e) {
  console.log('multi.touch.cancel')
})

addEventListener("multi.touch.end", function(e) {
  console.log('multi.touch.end')
})
visualPresentation(mTouchHandler);