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.

225 lines
6.9 KiB

  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. };
  12. /**
  13. * Draw a square shape
  14. * @param {Number} x horizontal center
  15. * @param {Number} y vertical center
  16. * @param {Number} r size, width and height of the square
  17. */
  18. CanvasRenderingContext2D.prototype.square = function(x, y, r) {
  19. this.beginPath();
  20. this.rect(x - r, y - r, r * 2, r * 2);
  21. };
  22. /**
  23. * Draw a triangle shape
  24. * @param {Number} x horizontal center
  25. * @param {Number} y vertical center
  26. * @param {Number} r radius, half the length of the sides of the triangle
  27. */
  28. CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
  29. // http://en.wikipedia.org/wiki/Equilateral_triangle
  30. this.beginPath();
  31. var s = r * 2;
  32. var s2 = s / 2;
  33. var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
  34. var h = Math.sqrt(s * s - s2 * s2); // height
  35. this.moveTo(x, y - (h - ir));
  36. this.lineTo(x + s2, y + ir);
  37. this.lineTo(x - s2, y + ir);
  38. this.lineTo(x, y - (h - ir));
  39. this.closePath();
  40. };
  41. /**
  42. * Draw a triangle shape in downward orientation
  43. * @param {Number} x horizontal center
  44. * @param {Number} y vertical center
  45. * @param {Number} r radius
  46. */
  47. CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
  48. // http://en.wikipedia.org/wiki/Equilateral_triangle
  49. this.beginPath();
  50. var s = r * 2;
  51. var s2 = s / 2;
  52. var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
  53. var h = Math.sqrt(s * s - s2 * s2); // height
  54. this.moveTo(x, y + (h - ir));
  55. this.lineTo(x + s2, y - ir);
  56. this.lineTo(x - s2, y - ir);
  57. this.lineTo(x, y + (h - ir));
  58. this.closePath();
  59. };
  60. /**
  61. * Draw a star shape, a star with 5 points
  62. * @param {Number} x horizontal center
  63. * @param {Number} y vertical center
  64. * @param {Number} r radius, half the length of the sides of the triangle
  65. */
  66. CanvasRenderingContext2D.prototype.star = function(x, y, r) {
  67. // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
  68. this.beginPath();
  69. for (var n = 0; n < 10; n++) {
  70. var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
  71. this.lineTo(
  72. x + radius * Math.sin(n * 2 * Math.PI / 10),
  73. y - radius * Math.cos(n * 2 * Math.PI / 10)
  74. );
  75. }
  76. this.closePath();
  77. };
  78. /**
  79. * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
  80. */
  81. CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
  82. var r2d = Math.PI/180;
  83. if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
  84. if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
  85. this.beginPath();
  86. this.moveTo(x+r,y);
  87. this.lineTo(x+w-r,y);
  88. this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
  89. this.lineTo(x+w,y+h-r);
  90. this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
  91. this.lineTo(x+r,y+h);
  92. this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
  93. this.lineTo(x,y+r);
  94. this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
  95. };
  96. /**
  97. * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
  98. */
  99. CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
  100. var kappa = .5522848,
  101. ox = (w / 2) * kappa, // control point offset horizontal
  102. oy = (h / 2) * kappa, // control point offset vertical
  103. xe = x + w, // x-end
  104. ye = y + h, // y-end
  105. xm = x + w / 2, // x-middle
  106. ym = y + h / 2; // y-middle
  107. this.beginPath();
  108. this.moveTo(x, ym);
  109. this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  110. this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  111. this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  112. this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  113. };
  114. /**
  115. * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
  116. */
  117. CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
  118. var f = 1/3;
  119. var wEllipse = w;
  120. var hEllipse = h * f;
  121. var kappa = .5522848,
  122. ox = (wEllipse / 2) * kappa, // control point offset horizontal
  123. oy = (hEllipse / 2) * kappa, // control point offset vertical
  124. xe = x + wEllipse, // x-end
  125. ye = y + hEllipse, // y-end
  126. xm = x + wEllipse / 2, // x-middle
  127. ym = y + hEllipse / 2, // y-middle
  128. ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
  129. yeb = y + h; // y-end, bottom ellipse
  130. this.beginPath();
  131. this.moveTo(xe, ym);
  132. this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  133. this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  134. this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  135. this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  136. this.lineTo(xe, ymb);
  137. this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
  138. this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
  139. this.lineTo(x, ym);
  140. };
  141. /**
  142. * Draw an arrow point (no line)
  143. */
  144. CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
  145. // tail
  146. var xt = x - length * Math.cos(angle);
  147. var yt = y - length * Math.sin(angle);
  148. // inner tail
  149. // TODO: allow to customize different shapes
  150. var xi = x - length * 0.9 * Math.cos(angle);
  151. var yi = y - length * 0.9 * Math.sin(angle);
  152. // left
  153. var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
  154. var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
  155. // right
  156. var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
  157. var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
  158. this.beginPath();
  159. this.moveTo(x, y);
  160. this.lineTo(xl, yl);
  161. this.lineTo(xi, yi);
  162. this.lineTo(xr, yr);
  163. this.closePath();
  164. };
  165. /**
  166. * Sets up the dashedLine functionality for drawing
  167. * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
  168. * @author David Jordan
  169. * @date 2012-08-08
  170. */
  171. CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
  172. if (!dashArray) dashArray = [10, 5];
  173. if (dashLength == 0) dashLength = 0.001; // Hack for Safari
  174. var dashCount = dashArray.length;
  175. this.moveTo(x, y);
  176. var dx = (x2 - x), dy = (y2 - y);
  177. var slope = dy / dx;
  178. var distRemaining = Math.sqrt(dx * dx + dy * dy);
  179. var dashIndex = 0, draw = true;
  180. while (distRemaining >= 0.1) {
  181. var dashLength = dashArray[dashIndex++ % dashCount];
  182. if (dashLength > distRemaining) dashLength = distRemaining;
  183. var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
  184. if (dx < 0) xStep = -xStep;
  185. x += xStep;
  186. y += slope * xStep;
  187. this[draw ? 'lineTo' : 'moveTo'](x, y);
  188. distRemaining -= dashLength;
  189. draw = !draw;
  190. }
  191. };
  192. // TODO: add diamond shape
  193. }