abstract.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. import { mix, each, isFunction } from '../../util/common';
  2. import Global from '../../global';
  3. import Vector2 from '../../graphic/util/vector2';
  4. class Abastract {
  5. _initDefaultCfg() {
  6. /**
  7. * ticks
  8. * @type {Array}
  9. */
  10. this.ticks = [];
  11. /**
  12. * the configuration for tickLine
  13. * @type {Object}
  14. */
  15. this.tickLine = {};
  16. /**
  17. * the direction of ticks, 1 means clockwise
  18. * @type {Number}
  19. */
  20. this.offsetFactor = 1;
  21. /**
  22. * the top container
  23. * @type {container}
  24. */
  25. this.frontContainer = null;
  26. /**
  27. * the back container
  28. * @type {[type]}
  29. */
  30. this.backContainer = null;
  31. /**
  32. * points for draw grid line
  33. * @type {Array}
  34. */
  35. this.gridPoints = [];
  36. }
  37. constructor(cfg) {
  38. this._initDefaultCfg();
  39. mix(this, cfg);
  40. this.draw();
  41. }
  42. draw() {
  43. var {
  44. line,
  45. tickLine,
  46. label,
  47. grid
  48. } = this;
  49. grid && this.drawGrid(grid); // draw the grid lines
  50. tickLine && this.drawTicks(tickLine); // draw the tickLine
  51. line && this.drawLine(line); // draw axis line
  52. label && this.drawLabels(); // draw ticks
  53. }
  54. drawTicks(tickCfg) {
  55. var self = this;
  56. var ticks = self.ticks;
  57. var length = tickCfg.length;
  58. var container = self.getContainer(tickCfg.top);
  59. each(ticks, function (tick) {
  60. var start = self.getOffsetPoint(tick.value);
  61. var end = self.getSidePoint(start, length);
  62. var shape = container.addShape('line', {
  63. className: 'axis-tick',
  64. attrs: mix({
  65. x1: start.x,
  66. y1: start.y,
  67. x2: end.x,
  68. y2: end.y
  69. }, tickCfg)
  70. });
  71. shape._id = self._id + '-ticks';
  72. });
  73. }
  74. drawLabels() {
  75. var self = this;
  76. var labelOffset = self.labelOffset;
  77. var labels = self.labels;
  78. each(labels, function (labelShape) {
  79. var container = self.getContainer(labelShape.get('top'));
  80. var start = self.getOffsetPoint(labelShape.get('value'));
  81. var {
  82. x,
  83. y
  84. } = self.getSidePoint(start, labelOffset);
  85. labelShape.attr(mix({
  86. x,
  87. y
  88. }, self.getTextAlignInfo(start, labelOffset), labelShape.get('textStyle')));
  89. labelShape._id = self._id + '-' + labelShape.attr('text');
  90. container.add(labelShape);
  91. });
  92. }
  93. drawLine() {}
  94. drawGrid(grid) {
  95. var self = this;
  96. var {
  97. gridPoints,
  98. ticks
  99. } = self;
  100. var gridCfg = grid;
  101. var count = gridPoints.length;
  102. each(gridPoints, function (subPoints, index) {
  103. if (isFunction(grid)) {
  104. var tick = ticks[index] || {};
  105. var executedGrid = grid(tick.text, index, count);
  106. gridCfg = executedGrid ? mix({}, Global._defaultAxis.grid, executedGrid) : null;
  107. }
  108. if (gridCfg) {
  109. var type = gridCfg.type; // has two types: 'line' and 'arc'
  110. var points = subPoints.points;
  111. var container = self.getContainer(gridCfg.top);
  112. var shape;
  113. if (type === 'arc') {
  114. var {
  115. center,
  116. startAngle,
  117. endAngle
  118. } = self;
  119. var radius = Vector2.length([points[0].x - center.x, points[0].y - center.y]);
  120. shape = container.addShape('Arc', {
  121. className: 'axis-grid',
  122. attrs: mix({
  123. x: center.x,
  124. y: center.y,
  125. startAngle,
  126. endAngle,
  127. r: radius
  128. }, gridCfg)
  129. });
  130. } else {
  131. shape = container.addShape('Polyline', {
  132. className: 'axis-grid',
  133. attrs: mix({
  134. points
  135. }, gridCfg)
  136. });
  137. }
  138. shape._id = subPoints._id;
  139. }
  140. });
  141. }
  142. getOffsetPoint() {}
  143. getAxisVector() {}
  144. getOffsetVector(point, offset) {
  145. var self = this;
  146. var axisVector = self.getAxisVector(point);
  147. var normal = Vector2.normalize([], axisVector);
  148. var factor = self.offsetFactor;
  149. var verticalVector = [normal[1] * -1 * factor, normal[0] * factor];
  150. return Vector2.scale([], verticalVector, offset);
  151. }
  152. getSidePoint(point, offset) {
  153. var self = this;
  154. var offsetVector = self.getOffsetVector(point, offset);
  155. return {
  156. x: point.x + offsetVector[0],
  157. y: point.y + offsetVector[1]
  158. };
  159. }
  160. getTextAlignInfo(point, offset) {
  161. var self = this;
  162. var offsetVector = self.getOffsetVector(point, offset);
  163. var align;
  164. var baseLine;
  165. if (offsetVector[0] > 0) {
  166. align = 'left';
  167. } else if (offsetVector[0] < 0) {
  168. align = 'right';
  169. } else {
  170. align = 'center';
  171. }
  172. if (offsetVector[1] > 0) {
  173. baseLine = 'top';
  174. } else if (offsetVector[1] < 0) {
  175. baseLine = 'bottom';
  176. } else {
  177. baseLine = 'middle';
  178. }
  179. return {
  180. textAlign: align,
  181. textBaseline: baseLine
  182. };
  183. }
  184. getContainer(isTop) {
  185. var {
  186. frontContainer,
  187. backContainer
  188. } = this;
  189. return isTop ? frontContainer : backContainer;
  190. }
  191. }
  192. export default Abastract;