jqplot.shapeRenderer.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /**
  2. * jqPlot
  3. * Pure JavaScript plotting plugin using jQuery
  4. *
  5. * Version: @VERSION
  6. * Revision: @REVISION
  7. *
  8. * Copyright (c) 2009-2013 Chris Leonello
  9. * jqPlot is currently available for use in all personal or commercial projects
  10. * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
  11. * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
  12. * choose the license that best suits your project and use it accordingly.
  13. *
  14. * Although not required, the author would appreciate an email letting him
  15. * know of any substantial use of jqPlot. You can reach the author at:
  16. * chris at jqplot dot com or see http://www.jqplot.com/info.php .
  17. *
  18. * If you are feeling kind and generous, consider supporting the project by
  19. * making a donation at: http://www.jqplot.com/donate.php .
  20. *
  21. * sprintf functions contained in jqplot.sprintf.js by Ash Searle:
  22. *
  23. * version 2007.04.27
  24. * author Ash Searle
  25. * http://hexmen.com/blog/2007/03/printf-sprintf/
  26. * http://hexmen.com/js/sprintf.js
  27. * The author (Ash Searle) has placed this code in the public domain:
  28. * "This code is unrestricted: you are free to use it however you like."
  29. *
  30. */
  31. (function($) {
  32. // class: $.jqplot.shapeRenderer
  33. // The default jqPlot shape renderer. Given a set of points will
  34. // plot them and either stroke a line (fill = false) or fill them (fill = true).
  35. // If a filled shape is desired, closePath = true must also be set to close
  36. // the shape.
  37. $.jqplot.ShapeRenderer = function(options){
  38. this.lineWidth = 1.5;
  39. // prop: linePattern
  40. // line pattern 'dashed', 'dotted', 'solid', some combination
  41. // of '-' and '.' characters such as '.-.' or a numerical array like
  42. // [draw, skip, draw, skip, ...] such as [1, 10] to draw a dotted line,
  43. // [1, 10, 20, 10] to draw a dot-dash line, and so on.
  44. this.linePattern = 'solid';
  45. // prop: lineJoin
  46. // How line segments of the shadow are joined.
  47. this.lineJoin = 'miter';
  48. // prop: lineCap
  49. // how ends of the shadow line are rendered.
  50. this.lineCap = 'round';
  51. // prop; closePath
  52. // whether line path segment is closed upon itself.
  53. this.closePath = false;
  54. // prop: fill
  55. // whether to fill the shape.
  56. this.fill = false;
  57. // prop: isarc
  58. // whether the shadow is an arc or not.
  59. this.isarc = false;
  60. // prop: fillRect
  61. // true to draw shape as a filled rectangle.
  62. this.fillRect = false;
  63. // prop: strokeRect
  64. // true to draw shape as a stroked rectangle.
  65. this.strokeRect = false;
  66. // prop: clearRect
  67. // true to cear a rectangle.
  68. this.clearRect = false;
  69. // prop: strokeStyle
  70. // css color spec for the stoke style
  71. this.strokeStyle = '#999999';
  72. // prop: fillStyle
  73. // css color spec for the fill style.
  74. this.fillStyle = '#999999';
  75. $.extend(true, this, options);
  76. };
  77. $.jqplot.ShapeRenderer.prototype.init = function(options) {
  78. $.extend(true, this, options);
  79. };
  80. // function: draw
  81. // draws the shape.
  82. //
  83. // ctx - canvas drawing context
  84. // points - array of points for shapes or
  85. // [x, y, width, height] for rectangles or
  86. // [x, y, radius, start angle (rad), end angle (rad)] for circles and arcs.
  87. $.jqplot.ShapeRenderer.prototype.draw = function(ctx, points, options) {
  88. ctx.save();
  89. var opts = (options != null) ? options : {};
  90. var fill = (opts.fill != null) ? opts.fill : this.fill;
  91. var closePath = (opts.closePath != null) ? opts.closePath : this.closePath;
  92. var fillRect = (opts.fillRect != null) ? opts.fillRect : this.fillRect;
  93. var strokeRect = (opts.strokeRect != null) ? opts.strokeRect : this.strokeRect;
  94. var clearRect = (opts.clearRect != null) ? opts.clearRect : this.clearRect;
  95. var isarc = (opts.isarc != null) ? opts.isarc : this.isarc;
  96. var linePattern = (opts.linePattern != null) ? opts.linePattern : this.linePattern;
  97. var ctxPattern = $.jqplot.LinePattern(ctx, linePattern);
  98. ctx.lineWidth = opts.lineWidth || this.lineWidth;
  99. ctx.lineJoin = opts.lineJoin || this.lineJoin;
  100. ctx.lineCap = opts.lineCap || this.lineCap;
  101. ctx.strokeStyle = (opts.strokeStyle || opts.color) || this.strokeStyle;
  102. ctx.fillStyle = opts.fillStyle || this.fillStyle;
  103. ctx.beginPath();
  104. if (isarc) {
  105. ctx.arc(points[0], points[1], points[2], points[3], points[4], true);
  106. if (closePath) {
  107. ctx.closePath();
  108. }
  109. if (fill) {
  110. ctx.fill();
  111. }
  112. else {
  113. ctx.stroke();
  114. }
  115. ctx.restore();
  116. return;
  117. }
  118. else if (clearRect) {
  119. ctx.clearRect(points[0], points[1], points[2], points[3]);
  120. ctx.restore();
  121. return;
  122. }
  123. else if (fillRect || strokeRect) {
  124. if (fillRect) {
  125. ctx.fillRect(points[0], points[1], points[2], points[3]);
  126. }
  127. if (strokeRect) {
  128. ctx.strokeRect(points[0], points[1], points[2], points[3]);
  129. ctx.restore();
  130. return;
  131. }
  132. }
  133. else if (points && points.length){
  134. var move = true;
  135. for (var i=0; i<points.length; i++) {
  136. // skip to the first non-null point and move to it.
  137. if (points[i][0] != null && points[i][1] != null) {
  138. if (move) {
  139. ctxPattern.moveTo(points[i][0], points[i][1]);
  140. move = false;
  141. }
  142. else {
  143. ctxPattern.lineTo(points[i][0], points[i][1]);
  144. }
  145. }
  146. else {
  147. move = true;
  148. }
  149. }
  150. if (closePath) {
  151. ctxPattern.closePath();
  152. }
  153. if (fill) {
  154. ctx.fill();
  155. }
  156. else {
  157. ctx.stroke();
  158. }
  159. }
  160. ctx.restore();
  161. };
  162. })(jQuery);