var root; var svg; var svgNS = "http://www.w3.org/2000/svg"; // global list of all ongoing touches var currentTouches = []; var CIRCLES_NUM = 5; var CIRCLE_RADIUS = 20; var LINE_WIDTH = 15; var circles = []; var lines = []; function randVal(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function randColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; // sometimes returns 5 letters color return '#' + Math.floor(Math.random() * 16777215).toString(16); } function findCurrentTouchIndex(id) { return currentTouches.findIndex(function(t){ return t.id === id; }); // longer version for (var i=0; i < currentTouches.length; i++) { if (currentTouches[i].id === id) { return i; } } return -1; } function init(){ // initialize a svg element and add it to the root div root = document.getElementById("root"); svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.id = "svg"; root.appendChild(svg); for(var i=0;i= 0) { var currentTouch = currentTouches[currentTouchIndex]; currentTouch.target.setAttributeNS(null,"cx",currentTouch.pageX); currentTouch.target.setAttributeNS(null,"cy",currentTouch.pageY); // Update the touch record. currentTouch.pageX = touch.pageX; currentTouch.pageY = touch.pageY; // Store the record. currentTouches.splice(currentTouchIndex, 1, currentTouch); } else { // console.log('Touch was not found!'); } updateLines(); } }; function touchEnd(e) { var touches = event.changedTouches; for (var i=0; i < touches.length; i++) { var touch = touches[i]; var currentTouchIndex = findCurrentTouchIndex(touch.identifier); if (currentTouchIndex >= 0) { var currentTouch = currentTouches[currentTouchIndex]; // Remove the record. currentTouches.splice(currentTouchIndex, 1); } else { // console.log('Touch was not found!'); } } }; window.onload = init; /** Array.prototype.findIndex() https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex */ if (!Array.prototype.findIndex) { Object.defineProperty(Array.prototype, 'findIndex', { value: function(predicate) { 'use strict'; if (this == null) { throw new TypeError('Array.prototype.findIndex called on null or undefined'); } if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); } var list = Object(this); var length = list.length >>> 0; var thisArg = arguments[1]; var value; for (var i = 0; i < length; i++) { value = list[i]; if (predicate.call(thisArg, value, i, list)) { return i; } } return -1; }, enumerable: false, configurable: false, writable: false });}

SVG Multi-touch test