vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

288 lines
8.3 KiB

8 years ago
  1. /**
  2. * Canvas shapes used by Network
  3. */
  4. if (typeof CanvasRenderingContext2D !== 'undefined') {
  5. /**
  6. * Draw a circle shape
  7. */
  8. CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
  9. this.beginPath();
  10. this.arc(x, y, r, 0, 2 * Math.PI, false);
  11. this.closePath();
  12. };
  13. /**
  14. * Draw a square shape
  15. * @param {Number} x horizontal center
  16. * @param {Number} y vertical center
  17. * @param {Number} r size, width and height of the square
  18. */
  19. CanvasRenderingContext2D.prototype.square = function (x, y, r) {
  20. this.beginPath();
  21. this.rect(x - r, y - r, r * 2, r * 2);
  22. this.closePath();
  23. };
  24. /**
  25. * Draw a triangle shape
  26. * @param {Number} x horizontal center
  27. * @param {Number} y vertical center
  28. * @param {Number} r radius, half the length of the sides of the triangle
  29. */
  30. CanvasRenderingContext2D.prototype.triangle = function (x, y, r) {
  31. // http://en.wikipedia.org/wiki/Equilateral_triangle
  32. this.beginPath();
  33. // the change in radius and the offset is here to center the shape
  34. r *= 1.15;
  35. y += 0.275 * r;
  36. var s = r * 2;
  37. var s2 = s / 2;
  38. var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
  39. var h = Math.sqrt(s * s - s2 * s2); // height
  40. this.moveTo(x, y - (h - ir));
  41. this.lineTo(x + s2, y + ir);
  42. this.lineTo(x - s2, y + ir);
  43. this.lineTo(x, y - (h - ir));
  44. this.closePath();
  45. };
  46. /**
  47. * Draw a triangle shape in downward orientation
  48. * @param {Number} x horizontal center
  49. * @param {Number} y vertical center
  50. * @param {Number} r radius
  51. */
  52. CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) {
  53. // http://en.wikipedia.org/wiki/Equilateral_triangle
  54. this.beginPath();
  55. // the change in radius and the offset is here to center the shape
  56. r *= 1.15;
  57. y -= 0.275 * r;
  58. var s = r * 2;
  59. var s2 = s / 2;
  60. var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
  61. var h = Math.sqrt(s * s - s2 * s2); // height
  62. this.moveTo(x, y + (h - ir));
  63. this.lineTo(x + s2, y - ir);
  64. this.lineTo(x - s2, y - ir);
  65. this.lineTo(x, y + (h - ir));
  66. this.closePath();
  67. };
  68. /**
  69. * Draw a star shape, a star with 5 points
  70. * @param {Number} x horizontal center
  71. * @param {Number} y vertical center
  72. * @param {Number} r radius, half the length of the sides of the triangle
  73. */
  74. CanvasRenderingContext2D.prototype.star = function (x, y, r) {
  75. // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
  76. this.beginPath();
  77. // the change in radius and the offset is here to center the shape
  78. r *= 0.82;
  79. y += 0.1 * r;
  80. for (var n = 0; n < 10; n++) {
  81. var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
  82. this.lineTo(
  83. x + radius * Math.sin(n * 2 * Math.PI / 10),
  84. y - radius * Math.cos(n * 2 * Math.PI / 10)
  85. );
  86. }
  87. this.closePath();
  88. };
  89. /**
  90. * Draw a Diamond shape
  91. * @param {Number} x horizontal center
  92. * @param {Number} y vertical center
  93. * @param {Number} r radius, half the length of the sides of the triangle
  94. */
  95. CanvasRenderingContext2D.prototype.diamond = function (x, y, r) {
  96. // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
  97. this.beginPath();
  98. this.lineTo(x, y + r);
  99. this.lineTo(x + r, y);
  100. this.lineTo(x, y - r);
  101. this.lineTo(x - r, y);
  102. this.closePath();
  103. };
  104. /**
  105. * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
  106. */
  107. CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
  108. var r2d = Math.PI / 180;
  109. if (w - ( 2 * r ) < 0) {
  110. r = ( w / 2 );
  111. } //ensure that the radius isn't too large for x
  112. if (h - ( 2 * r ) < 0) {
  113. r = ( h / 2 );
  114. } //ensure that the radius isn't too large for y
  115. this.beginPath();
  116. this.moveTo(x + r, y);
  117. this.lineTo(x + w - r, y);
  118. this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false);
  119. this.lineTo(x + w, y + h - r);
  120. this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false);
  121. this.lineTo(x + r, y + h);
  122. this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false);
  123. this.lineTo(x, y + r);
  124. this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false);
  125. this.closePath();
  126. };
  127. /**
  128. * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
  129. *
  130. * Postfix '_vis' added to discern it from standard method ellipse().
  131. */
  132. CanvasRenderingContext2D.prototype.ellipse_vis = function (x, y, w, h) {
  133. var kappa = .5522848,
  134. ox = (w / 2) * kappa, // control point offset horizontal
  135. oy = (h / 2) * kappa, // control point offset vertical
  136. xe = x + w, // x-end
  137. ye = y + h, // y-end
  138. xm = x + w / 2, // x-middle
  139. ym = y + h / 2; // y-middle
  140. this.beginPath();
  141. this.moveTo(x, ym);
  142. this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  143. this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  144. this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  145. this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  146. this.closePath();
  147. };
  148. /**
  149. * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
  150. */
  151. CanvasRenderingContext2D.prototype.database = function (x, y, w, h) {
  152. var f = 1 / 3;
  153. var wEllipse = w;
  154. var hEllipse = h * f;
  155. var kappa = .5522848,
  156. ox = (wEllipse / 2) * kappa, // control point offset horizontal
  157. oy = (hEllipse / 2) * kappa, // control point offset vertical
  158. xe = x + wEllipse, // x-end
  159. ye = y + hEllipse, // y-end
  160. xm = x + wEllipse / 2, // x-middle
  161. ym = y + hEllipse / 2, // y-middle
  162. ymb = y + (h - hEllipse / 2), // y-midlle, bottom ellipse
  163. yeb = y + h; // y-end, bottom ellipse
  164. this.beginPath();
  165. this.moveTo(xe, ym);
  166. this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  167. this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  168. this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  169. this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  170. this.lineTo(xe, ymb);
  171. this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
  172. this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
  173. this.lineTo(x, ym);
  174. };
  175. /**
  176. * Draw an arrow at the end of a line with the given angle.
  177. */
  178. CanvasRenderingContext2D.prototype.arrowEndpoint = function (x, y, angle, length) {
  179. // tail
  180. var xt = x - length * Math.cos(angle);
  181. var yt = y - length * Math.sin(angle);
  182. // inner tail
  183. var xi = x - length * 0.9 * Math.cos(angle);
  184. var yi = y - length * 0.9 * Math.sin(angle);
  185. // left
  186. var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
  187. var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
  188. // right
  189. var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
  190. var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
  191. this.beginPath();
  192. this.moveTo(x, y);
  193. this.lineTo(xl, yl);
  194. this.lineTo(xi, yi);
  195. this.lineTo(xr, yr);
  196. this.closePath();
  197. };
  198. /**
  199. * Draw an circle an the end of an line with the given angle.
  200. */
  201. CanvasRenderingContext2D.prototype.circleEndpoint = function (x, y, angle, length) {
  202. var radius = length * 0.4;
  203. var xc = x - radius * Math.cos(angle);
  204. var yc = y - radius * Math.sin(angle);
  205. this.circle(xc, yc, radius);
  206. };
  207. /**
  208. * Sets up the dashedLine functionality for drawing
  209. * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
  210. * @author David Jordan
  211. * @date 2012-08-08
  212. */
  213. CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, pattern) {
  214. this.beginPath();
  215. this.moveTo(x, y);
  216. var patternLength = pattern.length;
  217. var dx = (x2 - x);
  218. var dy = (y2 - y);
  219. var slope = dy / dx;
  220. var distRemaining = Math.sqrt(dx * dx + dy * dy);
  221. var patternIndex = 0;
  222. var draw = true;
  223. var xStep = 0;
  224. var dashLength = pattern[0];
  225. while (distRemaining >= 0.1) {
  226. dashLength = pattern[patternIndex++ % patternLength];
  227. if (dashLength > distRemaining) {
  228. dashLength = distRemaining;
  229. }
  230. xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
  231. xStep = dx < 0 ? -xStep : xStep;
  232. x += xStep;
  233. y += slope * xStep;
  234. if (draw === true) {this.lineTo(x,y);}
  235. else {this.moveTo(x,y);}
  236. distRemaining -= dashLength;
  237. draw = !draw;
  238. }
  239. };
  240. }