1'use strict'; 2//--- draw.hs -- lib for canvas.js 3// draw arrow 4 5 6function l_arrow(ctx, arr) { 7 var c = l_vec(arr, 6); 8 ctx.moveTo(arr[0].x, arr[0].y); 9 ctx.lineTo(arr[1].x, arr[1].y); 10 ctx.lineTo(arr[1].x-c[0].x, arr[1].y-c[0].y); 11 ctx.moveTo(arr[1].x, arr[1].y); 12 ctx.lineTo(arr[1].x-c[1].x, arr[1].y-c[1].y); 13 ctx.stroke(); 14} 15 16// draw double arrow 17function l_darrow(ctx, arr) { 18 var c = l_vec9(arr, 2); 19 var d = l_vec(arr, 8); 20 ctx.moveTo(arr[0].x+c[0].x, arr[0].y+c[0].y); 21 ctx.lineTo(arr[1].x+c[0].x, arr[1].y+c[0].y); 22 ctx.moveTo(arr[0].x+c[1].x, arr[0].y+c[1].y); 23 ctx.lineTo(arr[1].x+c[1].x, arr[1].y+c[1].y); 24 ctx.moveTo(arr[1].x-d[0].x, arr[1].y-d[0].y); 25 ctx.lineTo(arr[1].x, arr[1].y); 26 ctx.lineTo(arr[1].x-d[1].x, arr[1].y-d[1].y); 27 ctx.stroke(); 28} 29 30// draw twin arrow 31function l_tarrow(ctx, arr) { 32 var c = l_vec(arr, 6); 33 ctx.moveTo(arr[0].x, arr[0].y); 34 ctx.lineTo(arr[1].x, arr[1].y); 35 ctx.lineTo(arr[1].x-c[0].x, arr[1].y-c[0].y); 36 ctx.moveTo(arr[1].x, arr[1].y); 37 ctx.lineTo(arr[1].x-c[1].x, arr[1].y-c[1].y); 38 var a = new Array(2); 39 a[0] = arr[1]; 40 a[1] = arr[0]; 41 c = l_vec(a, 6); 42 ctx.moveTo(arr[0].x-c[0].x, arr[0].y-c[0].y); 43 ctx.lineTo(arr[0].x, arr[0].y); 44 ctx.lineTo(arr[0].x-c[1].x, arr[0].y-c[1].y); 45 ctx.stroke(); 46} 47 48function l_hige(ctx, arr) { 49 var c = l_vec(arr, 6); 50 ctx.moveTo(arr[1].x-c[0].x, arr[1].y-c[0].y); 51 ctx.lineTo(arr[1].x, arr[1].y); 52 ctx.lineTo(arr[1].x-c[1].x, arr[1].y-c[1].y); 53 ctx.stroke(); 54} 55 56// draw elipse 57function l_elipse(ctx, arr) { 58 var x0 = Math.min(arr[0].x, arr[1].x); 59 var y0 = Math.min(arr[0].y, arr[1].y); 60 var x1 = Math.max(arr[0].x, arr[1].x); 61 var y1 = Math.max(arr[0].y, arr[1].y); 62 var w = x1 - x0; 63 var h = y1 - y0; 64 if (0 == w || 0 == h) { // line 65 ctx.moveTo(x0, y0); 66 ctx.lineTo(x1, y1); 67 ctx.stroke(); 68 } 69 else { 70 var rate = h / w; 71 var r = w / 2; 72 ctx.scale(1.0, rate); // 縦変形 73 ctx.arc(x0+r, y0/rate+r, r, 0, 2 * Math.PI, false); 74 ctx.stroke(); 75 ctx.scale(1.0, w/h); // 回復 76 } 77} 78 79// draw elipse fill 80function l_elipsef(ctx, arr) { 81 var x0 = Math.min(arr[0].x, arr[1].x); 82 var y0 = Math.min(arr[0].y, arr[1].y); 83 var x1 = Math.max(arr[0].x, arr[1].x); 84 var y1 = Math.max(arr[0].y, arr[1].y); 85 var w = x1 - x0; 86 var h = y1 - y0; 87 if (0 == w || 0 == h) { // line 88 ctx.moveTo(x0, y0); 89 ctx.lineTo(x1, y1); 90 ctx.stroke(); 91 } 92 else { 93 var rate = h / w; 94 var r = w / 2; 95 ctx.scale(1.0, rate); // 縦変形 96 ctx.arc(x0+r, y0/rate+r, r, 0, 2 * Math.PI, false); 97 ctx.fill(); 98 ctx.scale(1.0, w/h); // 回復 99 } 100} 101 102// draw star 103function l_star(ctx, arr) { 104 ctx.moveTo(arr[0].x+8, arr[0].y-3); 105 ctx.lineTo(arr[0].x+14, arr[0].y+13); 106 ctx.lineTo(arr[0].x, arr[0].y+2); 107 ctx.lineTo(arr[0].x+16, arr[0].y+2); 108 ctx.lineTo(arr[0].x+2, arr[0].y+13); 109 ctx.closePath(); 110 ctx.stroke(); 111} 112 113// draw check 114function l_check(ctx, arr) { 115 ctx.moveTo(arr[0].x, arr[0].y); 116 ctx.lineTo(arr[0].x+5, arr[0].y+7); 117 ctx.lineTo(arr[0].x+20, arr[0].y); 118 ctx.stroke(); 119} 120 121// draw complete 122function l_complete(ctx, arr) { 123 ctx.strokeText('済', arr[0].x+3, arr[0].y+10); 124 ctx.arc(arr[0].x+9, arr[0].y+5, 8, 0, 6.28, false); 125 ctx.stroke(); 126} 127 128// 内積45° a:vector b:length 129function l_vec(a, b) { 130 var ax = a[1].x-a[0].x; 131 var ay = a[1].y-a[0].y; 132 var rate = b / Math.sqrt(ax * ax + ay * ay); 133 ax *= rate; 134 ay *= rate; 135 var rad1 = Math.PI / 4.0; // 45° 136 var rad2 = -Math.PI / 4.0; // -45° 137 var a1x = ax * Math.cos(rad1) - ay * Math.sin(rad1); 138 var a1y = ax * Math.sin(rad1) + ay * Math.cos(rad1); 139 var a2x = ax * Math.cos(rad2) - ay * Math.sin(rad2); 140 var a2y = ax * Math.sin(rad2) + ay * Math.cos(rad2); 141 var c = new Array(2); 142 c[0] = { x:a1x, y:a1y }; 143 c[1] = { x:a2x, y:a2y }; 144 return c; 145} 146 147// 内積90° a:vector b:length 148function l_vec9(a, b) { 149 var ax = a[1].x-a[0].x; 150 var ay = a[1].y-a[0].y; 151 var rate = b / Math.sqrt(ax * ax + ay * ay); 152 ax *= rate; 153 ay *= rate; 154 var a1x = -ay; 155 var a1y = ax; 156 var a2x = ay; 157 var a2y = -ax; 158 var c = new Array(2); 159 c[0] = { x:a1x, y:a1y }; 160 c[1] = { x:a2x, y:a2y }; 161 return c; 162} 163