/******************************************************************************** Canvas Setup and Click Handling Code Handles both Touch and Mouse/Keyboard input at the same time and executes handler callbacks. Also declares canvas globals *********************************************************************************/ function setupcanvas() { acanvas=document.getElementById('a'); context=acanvas.getContext("2d"); setTimeout("foo();",20); setupClickHandling(); } function setupClickHandling() { // Mouse and Keyboard Events acanvas.addEventListener('mousemove', ev_mousemove, false); acanvas.addEventListener('mouseup', ev_mouseup, false); acanvas.addEventListener('mousedown', ev_mousedown, false); // Touch Events acanvas.addEventListener('touchstart', ev_touchstart, false); acanvas.addEventListener('touchend', ev_touchend, false); acanvas.addEventListener('touchmove', ev_touchmove, false); } // Keyboard/Mouse Mouse Up Handler function ev_mouseup(ev) { handler_mouseup(); } // Keyboard/Mouse Mouse Down Handler function ev_mousedown(ev) { handler_mousedown(); } // Keyboard/Mouse Mouse Move Handler function ev_mousemove (ev) { var cx,cy=0; if (ev.layerX||ev.layerX==0) { // Firefox cx=ev.layerX-acanvas.offsetLeft; cy=ev.layerY-acanvas.offsetTop; } else if (ev.offsetX || ev.offsetX == 0) { // Opera cx=ev.offsetX-acanvas.offsetLeft; cy=ev.offsetY-acanvas.offsetTop; } coord=findPos(acanvas); cx=cx-coord.x; cy=cy-coord.y; handler_mousemove(cx,cy); } // Touch start event function ev_touchstart(event){ event.preventDefault(); var numtouch = event.touches.length; targetEvent = event.touches.item(0); var cx = targetEvent.pageX; var cy = targetEvent.pageY; gridx=cx; gridy=cy; handler_mousedown(); }; // Touch end event function ev_touchend(event){ event.preventDefault(); var numtouch = event.touches.length; handler_mouseup(); }; // Touch move event function ev_touchmove(event){ event.preventDefault(); var numtouch = event.touches.length; targetEvent = event.touches.item(0); var cx = targetEvent.pageX; var cy = targetEvent.pageY; handler_mousemove(cx,cy); }; // Fix scrolling on touch devices var ScrollFix = function(elem) { // Variables to track inputs var startY, startTopScroll; elem = elem || document.querySelector(elem); // If there is no element, then do nothing if(!elem) return; // Handle the start of interactions elem.addEventListener('touchstart', function(event){ startY = event.touches[0].pageY; startTopScroll = elem.scrollTop; if(startTopScroll <= 0) elem.scrollTop = 1; if(startTopScroll + elem.offsetHeight >= elem.scrollHeight) elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1; }, false); }; /******************************************************************************** Canvas Diagram Drawing Code *********************************************************************************/ // Draws 90 degree arc function drawellipse(x1,y1,x2,y2) { var rx=(x2-x1)/2.0; var ry=(y2-y1)/2.0; var x3=x1+rx; var y3=y1+ry; context.beginPath(); context.moveTo(x1,y1+ry); context.quadraticCurveTo(x1,y1,x1+rx,y1); context.quadraticCurveTo(x2,y1,x2,y1+ry); context.quadraticCurveTo(x2,y2,x2-rx,y2); context.quadraticCurveTo(x1,y2,x1,y1+ry); context.stroke(); } // Draw a point function point(col,x,y) { context.strokeStyle="#000"; context.lineWidth = 1; context.fillStyle=col; context.fillRect(x-4,y-4,8,8); context.strokeRect(x-4,y-4,8,8); } // Draw a box around a point to indicate highlight function highlight(px,py) { context.strokeStyle="#aaa"; context.lineWidth = 1; context.strokeRect(px-8,py-8,16,16); } // Draw a line using current context function drawline(x1,y1,x2,y2,strokestyle,linewidth) { context.strokeStyle = strokestyle; context.lineWidth = linewidth; context.beginPath(); context.moveTo(x1,y1); context.lineTo(x2,y2); context.stroke(); } function fourpoints(x1,y1,x2,y2,x3,y3,x4,y4,col) { point(col,x1,y1); point(col,x2,y2); point(col,x3,y3); point(col,x4,y4); } function drawdiamond(x1,y1,rx,ry,expand) { context.beginPath(); context.moveTo(x1-expand,y1+ry); context.lineTo(x1+rx,y2+expand); context.lineTo(x2+expand,y1+ry); context.lineTo(x1+rx,y1-expand); context.lineTo(x1-expand,y1+ry); context.stroke(); } // Recursive Pos of div in document - should work in most browsers function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return { x:curleft, y:curtop } } // Make side coordinates for drawing Model function makeside(side,x1,y1,x2,y2,perc){ var xk=0; var yk=0; if(side==1){ xk=x1; yk=y1+((y2-y1)*perc); }else if(side==2){ xk=x1+((x2-x1)*perc); yk=y2; }else if(side==3){ xk=x2; yk=y1+((y2-y1)*perc); }else if(side==4){ xk=x1+((x2-x1)*perc) yk=y1; } return { x:xk, y:yk } } // Computes side identifier for a mouse coordinate and object coordinates function computeside(x,y,x1,y1,x2,y2,sidetol){ var obj_sidentifier="None"; var obj_sideperc=0; var obj_centerdist=0; // Left Side if(x>x1-sidetol&&xy1-sidetol&&yx1+sidetol&&xy2-sidetol&&yx2-sidetol&&xy1-sidetol&&yx1+sidetol&&xy1-sidetol&&y1.0) perc=1.0; if(perc<0.0) perc=0.0; return perc; } function centerdist(x,x1,x2){ r=x1+((x2-x1)*0.5); return (x-r); } // Euclidian distance - Yo! function distance(x1,y1,x2,y2){ var dist=Math.sqrt(((y2-y1)*(y2-y1))+((x2-x1)*(x2-x1))); return dist; } // Dashed Line in Segments of given size function dashedline(sx,sy,ex,ey,dashlen,linewidth,col) { var dx=ex-sx; var dy=ey-sy; len=Math.sqrt((dx*dx)+(dy*dy)); notimes=Math.round(len/dashlen); dx=dx/notimes; dy=dy/notimes; context.lineWidth = linewidth; context.strokeStyle=col; context.beginPath(); var xk,yk; xk=sx; yk=sy; xh=dx/2.0; yh=dy/2.0; for(var i=0;i=y1){ if(yk>=y2){ context.lineTo(x1+(Math.sin(((Math.PI/96.0)*-i)+(Math.PI*1.0))*rx),y3+(Math.cos(((Math.PI/96.0)*-i)+(Math.PI*1.0))*ry)); }else{ context.lineTo(x3+(Math.sin(((Math.PI/96.0)*i)+(Math.PI*1.5))*rx),y1+(Math.cos(((Math.PI/96.0)*i)+(Math.PI*1.5))*ry)); } }else{ if(yk<=y2){ context.lineTo(x1+(Math.sin(((Math.PI/96.0)*-i)+(Math.PI*1.0))*rx),y3+(Math.cos(((Math.PI/96.0)*-i)+(Math.PI*1.0))*ry)); }else{ context.lineTo(x3+(Math.sin(((Math.PI/96.0)*i)+(Math.PI*1.5))*rx),y1+(Math.cos(((Math.PI/96.0)*i)+(Math.PI*1.5))*ry)); } } } context.stroke(); }