1
/********************************************************************************
3
Mouse coordinate and canvas globals
5
Handles both Touch and Mouse/Keyboard input at the same time
7
*********************************************************************************/
9
// Mouse coordinate globals
16
/********************************************************************************
18
Canvas Setup and Click Handling Code
20
Handles both Touch and Mouse/Keyboard input at the same time and executes
22
Also declares canvas globals
24
*********************************************************************************/
26
function setupcanvas()
28
acanvas=document.getElementById('a');
29
context=acanvas.getContext("2d");
31
setTimeout("foo();",50);
36
function setupClickHandling()
38
// Mouse and Keyboard Events
39
acanvas.addEventListener('mousemove', ev_mousemove, false);
40
acanvas.addEventListener('mouseup', ev_mouseup, false);
41
acanvas.addEventListener('mousedown', ev_mousedown, false);
44
acanvas.addEventListener('touchstart', ev_touchstart, false);
45
acanvas.addEventListener('touchend', ev_touchend, false);
46
acanvas.addEventListener('touchmove', ev_touchmove, false);
49
// Keyboard/Mouse Mouse Up Handler
50
function ev_mouseup(ev)
55
// Keyboard/Mouse Mouse Down Handler
56
function ev_mousedown(ev)
61
// Keyboard/Mouse Mouse Move Handler
62
function ev_mousemove (ev)
65
if (ev.layerX||ev.layerX==0) { // Firefox
66
cx=ev.layerX-acanvas.offsetLeft;
67
cy=ev.layerY-acanvas.offsetTop;
68
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
69
cx=ev.offsetX-acanvas.offsetLeft;
70
cy=ev.offsetY-acanvas.offsetTop;
73
coord=findPos(acanvas);
77
handler_mousemove(cx,cy);
81
function ev_touchstart(event){
82
event.preventDefault();
83
var numtouch = event.touches.length;
85
targetEvent = event.touches.item(0);
87
var cx = targetEvent.pageX;
88
var cy = targetEvent.pageY;
98
function ev_touchend(event){
99
event.preventDefault();
100
var numtouch = event.touches.length;
106
function ev_touchmove(event){
107
event.preventDefault();
108
var numtouch = event.touches.length;
110
targetEvent = event.touches.item(0);
112
var cx = targetEvent.pageX;
113
var cy = targetEvent.pageY;
115
handler_mousemove(cx,cy);
118
// Fix scrolling on touch devices
119
var ScrollFix = function(elem) {
120
// Variables to track inputs
121
var startY, startTopScroll;
123
elem = elem || document.querySelector(elem);
125
// If there is no element, then do nothing
129
// Handle the start of interactions
130
elem.addEventListener('touchstart', function(event){
131
startY = event.touches[0].pageY;
132
startTopScroll = elem.scrollTop;
134
if(startTopScroll <= 0)
137
if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
138
elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
142
/********************************************************************************
144
Canvas Diagram Drawing Code
146
*********************************************************************************/
150
// Draws a perfect round circle
152
function drawcircle(radius,color)
154
context.lineWidth = 1.5;
155
context.strokeStyle = color;
156
context.arc(0, 0, radius, 0 , 2 * Math.PI, false);
159
// Draws 90 degree arc
161
function drawellipse(x1,y1,x2,y2)
172
context.moveTo(x1,y1+ry);
173
context.quadraticCurveTo(x1,y1,x1+rx,y1);
174
context.quadraticCurveTo(x2,y1,x2,y1+ry);
175
context.quadraticCurveTo(x2,y2,x2-rx,y2);
176
context.quadraticCurveTo(x1,y2,x1,y1+ry);
183
function point(x,y,col)
185
context.strokeStyle="#000";
186
context.lineWidth = 1;
188
context.fillStyle=col;
189
context.fillRect(x-4,y-4,8,8);
190
context.strokeRect(x-4,y-4,8,8);
193
// Draw a box around a point to indicate highlight
195
function highlight(px,py)
197
context.strokeStyle="#aaa";
198
context.lineWidth = 1;
200
context.strokeRect(px-8,py-8,16,16);
204
// Draw a line using current context
206
function drawline(x1,y1,x2,y2,strokestyle,linewidth)
208
context.strokeStyle = strokestyle;
209
context.lineWidth = linewidth;
211
context.moveTo(x1,y1);
212
context.lineTo(x2,y2);
216
function fourpoints(x1,y1,x2,y2,x3,y3,x4,y4,col)
224
function drawdiamond(x1,y1,rx,ry,expand)
227
context.moveTo(x1-expand,y1+ry);
228
context.lineTo(x1+rx,y2+expand);
229
context.lineTo(x2+expand,y1+ry);
230
context.lineTo(x1+rx,y1-expand);
231
context.lineTo(x1-expand,y1+ry);
235
// Dashed Line in Segments of given size
237
function dashedline(sx,sy,ex,ey,dashlen,linewidth,col)
243
len=Math.sqrt((dx*dx)+(dy*dy));
244
notimes=Math.round(len/dashlen);
249
context.lineWidth = linewidth;
250
context.strokeStyle=col;
259
for(var i=0;i<notimes;i++){
261
context.moveTo(xk,yk);
262
context.lineTo(xk+xh,yk+yh);
272
// Arcto only works if both x1 and y2 are on circle border
274
function arcto(x0,y0,x1,y1,x2,y2)
277
var r = Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0));
280
var startAngle = (180/Math.PI*Math.atan2(y1-y0, x1-x0));
281
var endAngle = (180/Math.PI*Math.atan2(y2-y0, x2-x0));
283
context.arc(x0, y0, r, 0, Math.PI*2.0, 1.0);
287
// Draws 90 degree arc
289
function arcdeg(x1,y1,x2,y2,x3,y3)
293
// First quadrant positive positive
294
dashedline(x1,y1,x2,y2,8,1.0,"#999");
295
dashedline(x3,y3,x2,y2,8,1.0,"#999");
310
context.strokeStyle = '#49f';
311
context.lineWidth = 1.0;
313
context.moveTo(x1,y1);
317
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));
319
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));
323
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));
325
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));
333
// function that draws one part of the sun
335
function sundial(radius,angle,scale)
338
cosv=Math.cos(angle);
339
sinv=Math.sin(angle);
350
context.bezierCurveTo((-1.5*xaddx)+(yaddx*1.5)+xk,(-1.5*xaddy)+(yaddy*1.5)+yk,xaddx+(yaddx*2.0)+xk,xaddy+(yaddy*2.0)+yk,xaddx+(yaddx*3.0)+xk,xaddy+(yaddy*3.0)+yk);
351
context.bezierCurveTo(xaddx+yaddx+xk,xaddy+yaddy+yk,(1.5*xaddx)+yaddx+xk,(1.5*xaddy)+yaddy+yk,(3.0*xaddx)+xk,(3.0*xaddy)+yk);
354
// function that daws the sun
358
context.fillStyle = "#fe9";
359
context.strokeStyle = "#d82";
360
context.lineWidth = 1.5;
363
context.moveTo(30,0);
364
for(i=0.0;i<360.0;i+=22.5){
365
angle=(i/360.0)*2*Math.PI;
372
// Draws the ball (used in various examples)
374
function drawball(cx,cy,radie,innerradie,ballradie,col1,inangle,inangleadd)
377
angleadd=(inangleadd/360.0)*2*Math.PI;
379
context.fillStyle = col1;
381
for(i=0;i<360;i+=inangle){
383
angle=(i/360.0)*2*Math.PI;
384
angle2=angle+angleadd;
385
angle3=angle+(angleadd*2.0);
386
angle4=angle-angleadd;
388
cosv=Math.cos(angle);
389
sinv=Math.sin(angle);
391
cosv2=Math.cos(angle2);
392
sinv2=Math.sin(angle2);
394
cosv4=Math.cos(angle4);
395
sinv4=Math.sin(angle4);
399
context.moveTo(cx,cy);
400
context.quadraticCurveTo(cx+(cosv*innerradie),cy+(sinv*innerradie),cx+(cosv2*radie),cy+(sinv2*radie));
401
context.arc(cx,cy,radie,angle2,angle,1.0);
402
context.quadraticCurveTo(cx+(cosv4*innerradie),cy+(sinv4*innerradie),cx,cy);
410
context.lineWidth = 1.5;
411
context.fillStyle = "#fff";
412
context.arc(0, 0, ballradie, 0 , 2 * Math.PI, false);
416
context.arc(cx,cy,radie,0,Math.PI*2.0,1.0);
422
/********************************************************************************
424
Canvas and Diagram Measuring Functions
426
These functions allow us to measure pixels in diagram and other apps
428
*********************************************************************************/
431
// Recursive Pos of div in document - should work in most browsers
433
function findPos(obj) {
434
var curleft = curtop = 0;
435
if (obj.offsetParent) {
436
curleft = obj.offsetLeft
437
curtop = obj.offsetTop
438
while (obj = obj.offsetParent) {
439
curleft += obj.offsetLeft
440
curtop += obj.offsetTop
449
// Make side coordinates for drawing Model
451
function makeside(side,x1,y1,x2,y2,perc){
458
yk=y1+((y2-y1)*perc);
460
xk=x1+((x2-x1)*perc);
464
yk=y1+((y2-y1)*perc);
477
// Computes side identifier for a mouse coordinate and object coordinates
479
function computeside(x,y,x1,y1,x2,y2,sidetol){
481
var obj_sidentifier="None";
483
var obj_centerdist=0;
486
if(x>x1-sidetol&&x<x1+sidetol&&y>y1-sidetol&&y<y2+sidetol){
488
obj_sideperc=makesideperc(y,y1,y2);
489
obj_centerdist=centerdist(y,y1,y2);
492
// Bottom Not Including Left Side or Right Side
493
if(x>x1+sidetol&&x<x2-sidetol&&y>y2-sidetol&&y<y2+sidetol){
495
obj_sideperc=makesideperc(x,x1,x2);
496
obj_centerdist=centerdist(x,x1,x2);
500
if(x>x2-sidetol&&x<x2+sidetol&&y>y1-sidetol&&y<y2+sidetol){
502
obj_sideperc=makesideperc(y,y1,y2);
503
obj_centerdist=centerdist(y,y1,y2);
506
// Top Not Including Left Side or Right Side
507
if(x>x1+sidetol&&x<x2-sidetol&&y>y1-sidetol&&y<y1+sidetol){
509
obj_sideperc=makesideperc(x,x1,x2);
510
obj_centerdist=centerdist(x,x1,x2);
514
side:obj_sidentifier,
521
// Make side perc for ER model
523
function makesideperc(x,x1,x2){
527
if(perc>1.0) perc=1.0;
528
if(perc<0.0) perc=0.0;
533
function centerdist(x,x1,x2){
539
// Euclidian distance - Yo!
541
function distance(x1,y1,x2,y2){
543
var dist=Math.sqrt(((y2-y1)*(y2-y1))+((x2-x1)*(x2-x1)));
548
// Are we over a line or not.
550
function overline(x,y,x1,y1,x2,y2,tolerance)
558
straighttolerance=2.0;
560
// Straight X, Straight Y or Positive or Negative Incline
561
if(Math.abs(dx)<straighttolerance){
563
if(y>y1-tolerance&&y<y2+tolerance){
564
distance=Math.abs(x1-x);
567
if(y>y2-tolerance&&y<y1+tolerance){
568
distance=Math.abs(x1-x);
572
drawline(x1,y1,x2,y2,"#ff0",2.0);
574
}else if(Math.abs(dy)<straighttolerance){
576
if(x>x1-tolerance&&x<x2+tolerance){
577
distance=Math.abs(y1-y);
580
if(x>x2-tolerance&&x<x1+tolerance){
581
distance=Math.abs(y1-y);
584
drawline(x1,y1,x2,y2,"#ff0",2.0);
585
}else if(Math.abs(dx)>=Math.abs(dy)){
589
distance=Math.abs(yk-y);
595
drawline(x1,y1,x2,y2,"#f00",2.0);
596
}else if(Math.abs(dx)>=Math.abs(dy)){
600
distance=Math.abs(yk-y);
606
drawline(x1,y1,x2,y2,"#0f0",2.0);
b'\\ No newline at end of file'