$(function(){ alert("Paint program that lets you draw shapes by using multiple fingers at the same tine. Adujusting the size changes the radius of the brush and width of the lines. Spacing is adjusted dynamically. Press the eraser button twice to clear the print area. SurfaceEvents Object 1.0 Wraps touch and mouse events into surfaceEvents for the Paint object to capture. Tracks multiple touches."); // alert("Paint App that uses multiple touches to draw shapes. Also includes fully adjustable rgba and eraser function(Click again for clear).SurfaceEvents Object 1.0 Wraps touch and mouse events into surfaceEvents for the Paint object to capture. Tracks multiple touches. Can be locked to a touch to ignore other touches.Enjoy"); var paintTool = new Paint(); }); /* reference for basic touch interface https://developer.mozilla.org/en-US/docs/Web/API/Touch_events */ /**************************************** * Wraps the Touch API and Mouse API to * handle touch and drag events for multiple * touches or mouse. Raises its own * surfaceEvents with relaive coordinates to * be caught and handled by higher level * framework. Note can be locked to a touch * to ignore other touches. This is to * make drag and drop easily handled by a * Parent Object. *****************************************/ function SurfaceEvents (element,spacing){ this.activeTouches = []; this.singleTouch = false; this.lockTouch = null; this.surface = element; this.spacing=spacing; this.mouseX = 0; this.mouseY = 0; this.touchStart = this.touchStart.bind(this); this.touchMove = this.touchMove.bind(this); this.touchEnd = this.touchEnd.bind(this); this.mouseStart = this.mouseStart.bind(this); this.mouseMoved = this.mouseMoved.bind(this); this.mouseEnd = this.mouseEnd.bind(this); this.updateSpacing = this.updateSpacing.bind(this); this.rect = this.surface.getBoundingClientRect(); this.setSurface(); } SurfaceEvents.prototype ={ setSurface: function(){ this.surface.addEventListener("touchstart",this.touchStart,false); this.surface.addEventListener("touchmove",this.touchMove,false); this.surface.addEventListener("touchend",this.touchEnd,false); this.surface.addEventListener("touchcancel",this.touchEnd,false); //this.surface.addEventListener("updateSpacing",this.updateSpacing,false); $(this.surface).on('updateSpacing',this.updateSpacing); $(this.surface).mousedown(this.mouseStart); }, updateSpacing: function(evt,spacing){ this.spacing = spacing; }, //Throws an startSurface event with all //the current touches. This gets around //each touchStart event only containing //one of the new touches touchStart: function(evt){ evt.preventDefault(); var newTouches = evt.changedTouches; var drawPositions = []; for (var i=0;i=0){ newX=touches[i].clientX; newY=touches[i].clientY; oldX=this.activeTouches[index].clientX; oldY=this.activeTouches[index].clientY; if ((Math.abs(newX-oldX)>=this.spacing)||(Math.abs(newY-oldY)>=this.spacing)){ this.activeTouches.splice(index,1,copyTouch(touches[i])); drawPositions.push(touchElement(touches[i],this.rect.left,this.rect.top)); } } } if (drawPositions.length > 0){ $(this.surface).trigger('moveSurface',[drawPositions]); } }, //Generates endSurface events for all //touch end events touchEnd: function(evt){ var touches = evt.changedTouches; var index; var drawPositions = []; for (var i=0;i= 0){ this.activeTouches.splice(index,1); if(!this.singleTouch||this.lockTouch.identifier==touches[i].identifier){ drawPositions.push(touchElement(touches[i],this.rect.left,this.rect.top)); this.singleTouch=false; this.lockTouch=null; } } } if (drawPositions.length > 0){ $(this.surface).trigger('endSurface',[drawPositions]); } }, //get the touch corresponding to the //reference id active array index getTouchIndexById: function(idToFind) { var id; for (var i = 0; i < this.activeTouches.length; i++) { id = this.activeTouches[i].identifier; if (id == idToFind) { return i; } } return -1; }, //Generate a startSurface event and //set listeners for mouseMove and //mouse up events mouseStart: function(evt){ this.setPosition(evt); var drawPositions = []; drawPositions.push(mouseElement(evt,this.rect.left,this.rect.top)); //alert(this.rect.left); $(this.surface).mousemove(this.mouseMoved); $(this.surface).mouseup(this.mouseEnd); $(this.surface).trigger('startSurface',[drawPositions]); }, //Generate a moveSurface event if the //mouse moved by a set amount mouseMoved: function(evt){ var xNew = evt.clientX; var yNew = evt.clientY; var drawPositions = []; if ((Math.abs(this.mouseX-xNew) > this.spacing) || (Math.abs(this.MouseY-yNew) > this.spacing)){ this.setPosition(evt); drawPositions.push(mouseElement(evt,this.rect.left,this.rect.top)); $(this.surface).trigger('moveSurface',[drawPositions]); } }, //Generate an endSurface event mouseEnd: function(evt){ var drawPositions = []; this.setPosition(evt); $(this.surface).off("mousemove"); $(this.surface).off("mouseup"); drawPositions.push(mouseElement(evt,this.rect.left,this.rect.top)); $(this.surface).trigger('endSurface',[drawPositions]); }, setPosition: function(event){ this.mouseX =event.clientX; this.mouseY =event.clientY; }, setLock: function(touchPosition){ this.lockTouch = touchPosition; this.singleTouch = true; } }; /****************************************** * Handles color selection. Eraser clicks * and drawing on the canvas. Listens for * surface events for draw positions. When * multiple touches are detected draw a * shape at the release point. ******************************************* * Planning on introducing a color wheel to * replace the sliders. ******************************************/ function Paint(){ this.surface = document.getElementById('canvas'); this.redSel = document.getElementById('redSel'); this.rValue = document.getElementById('redVal'); this.redVal = this.rValue.value; this.greenSel = document.getElementById('greenSel'); this.gValue = document.getElementById('greenVal'); this.greenVal = this.gValue.value; this.blueSel = document.getElementById('blueSel'); this.bValue = document.getElementById('blueVal'); this.blueVal = this.bValue.value; this.alphaSel = document.getElementById('alphaSel'); this.aValue = document.getElementById('alphaVal'); this.alphaVal = this.aValue.value; this.sizeSel = document.getElementById('sizeSel'); this.sValue = document.getElementById('sizeVal'); this.radius = this.sValue.value; this.eraserElement = document.getElementById('Eraser'); this.saveElement = document.getElementById('Save'); this.dataURL = this.surface.toDataURL('image/png',1); this.filename = 'untitled.png'; this.saveElement.setAttribute( 'href',this.dataURL); this.colorElement=document.getElementById('colorDisplay'); this.color = "rgba("+this.redVal+","+this.greenVal+","+this.blueVal+","+this.alphaVal+")" this.drawShape = 0; this.shapeRem = 0; this.shapePositions = []; this.resize(); this.ctx = this.surface.getContext('2d'); this. surfaceControl = new SurfaceEvents (this.surface,this.radius/2); this.redUpdate = this.redUpdate.bind(this); this.greenUpdate = this.greenUpdate.bind(this); this.blueUpdate = this.blueUpdate.bind(this); this.alphaUpdate = this.alphaUpdate.bind(this); this.sizeUpdate = this.sizeUpdate.bind(this); this.eraserUpdate = this.eraserUpdate.bind(this); // this.saveUpdate = this.saveUpdate.bind(this); this.multiTouch = this.multiTouch.bind(this); this.drawCircles = this.drawCircles.bind(this); this.drawShapes = this.drawShapes.bind(this); this.testLock = this.testLock.bind(this); this.resize = this.resize.bind(this); $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 500); }); $(window).on('resizeEnd',this.resize); $(this.surface).on('startSurface', this.multiTouch); //$(this.surface).on('startSurface', this.testLock); $(this.surface).on('moveSurface', this.drawCircles); $(this.surface).on('endSurface',this.drawShapes); $(this.redSel).on('input change',this.redUpdate); $(this.greenSel).on('input change',this.greenUpdate); $(this.blueSel).on('input change',this.blueUpdate); $(this.alphaSel).on('input change',this.alphaUpdate); $(this.sizeSel).on('input change',this.sizeUpdate); $(this.eraserElement).click(this.eraserUpdate); //$(this.saveElement).click(this.saveUpdate); } Paint.prototype = { resize: function(){ this.surface.width = window.innerWidth*.98-10; this.surface.height = window.innerHeight*0.95 -170; //alert("Resize"); }, //captures all the touches on start and //sets the number of touches active multiTouch: function(evt,drawPositions){ var length = drawPositions.length; this.drawShape = this.drawShape + length; this.shapeRem = this.shapeRem + length; for(var i=0;idrawPositions[0].relX){ index=1; } this.surfaceControl.setLock(drawPositions[index]); //this.multiTouch(evt,drawPositions[index]); this.drawCircles(evt,drawPositions[index]); }else{ this.multiTouch(evt,drawPositions); } }, //draws all the move positions //draws the start position if there is //only the one touch active drawCircles: function(evt,drawPositions){ var relX; var relY; if(this.drawShape<=1){ for (var i=0; i < drawPositions.length; i++){ this.ctx.beginPath(); this.ctx.arc(drawPositions[i].relX, drawPositions[i].relY, this.radius, 0, 2 * Math.PI, false); this.ctx.fillStyle = this.color; this.ctx.fill(); //alert("x: "+ relX + "y: " + relY); } } if(this.drawShape==1){ this.drawShape=0; this.shapeRem=0; this.ctx.beginPath(); this.ctx.arc(this.shapePositions[0].relX, this.shapePositions[0].relY, this.radius, 0, 2 * Math.PI, false); this.ctx.fillStyle = this.color; this.ctx.fill(); this.shapePositions = []; } }, //Counts the touches that have ended //Uses the end positions to draw a //shape drawShapes: function(evt,drawPositions){ var index; if (this.drawShape > 1){ for (var i=0;i=0){ this.shapePositions.splice(index,1,drawPositions[i]); this.shapeRem--; } } }else{ this.shapeRem--; } if (this.shapeRem<=0){ if (this.drawShape==1){ this.drawCircles(evt,this.shapePositions); }else if (this.drawShape==2){this.drawLine(this.shapePositions); }else if (this.drawShape==3){this.drawTriangle(this.shapePositions); }else if (this.drawShape>3){ this.drawPolygon(this.shapePositions); //alert('polygon'); } this.drawShape = 0; this.shapeRem = 0; this.shapePositions = []; } }, //get the touch corresponding to the //reference id active array index getShapeIndexById: function(idToFind) { var id; for (var i = 0; i < this.shapePositions.length; i++) { id = this.shapePositions[i].identifier; if (id == idToFind) { return i; } } return -1; }, drawLine: function(drawPositions){ this.ctx.beginPath(); this.ctx.moveTo( drawPositions[0].relX,drawPositions[0].relY); this.ctx.lineTo( drawPositions[1].relX,drawPositions[1].relY); this.ctx.strokeStyle = this.color; this.ctx.lineWidth = this.radius; this.ctx.stroke(); }, drawTriangle: function(drawPositions){ this.ctx.beginPath(); this.ctx.moveTo( drawPositions[0].relX,drawPositions[0].relY); this.ctx.lineTo( drawPositions[1].relX,drawPositions[1].relY); this.ctx.lineTo ( drawPositions[2].relX,drawPositions[2].relY); this.ctx.closePath(); this.ctx.fillStyle = this.color; this.ctx.fill(); }, //sorts draw positions from left to //right. Then sorts the first half in //ascending order and the rest in desc //Iterates through the order positions //to draw the shape. drawPolygon: function(drawPositions){ var pLength=drawPositions.length; var sorted = [drawPositions[0]]; var sLength = 1; var pStart = 0; var halfDone = false; //alert(sorted[0].relX); for (var p = 1; p drawPositions[p].relY && halfDone){ drawPositions.splice(p,0,sorted[s]); break; }else if(p==pLength-1){ drawPositions .push(sorted[s]); } } pLength++; //alert(s+':'+sLength/2); if (s+1>=Math.floor(sLength/2) && !halfDone){ halfDone = true; s++; drawPositions.push(sorted[s]); pStart = pLength; pLength++; } //alert(pLength+':'+drawPositions.length) } this.ctx.beginPath(); this.ctx.moveTo( drawPositions[0].relX,drawPositions[0].relY); for (p=1;p

Paint Shapes (wrapper object)