canvas.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. var Util = require('../util/common');
  2. var Container = require('./container');
  3. var Group = require('./group');
  4. var _require = require('./util/requestAnimationFrame'),
  5. requestAnimationFrame = _require.requestAnimationFrame;
  6. var Canvas =
  7. /*#__PURE__*/
  8. function () {
  9. var _proto = Canvas.prototype;
  10. _proto.get = function get(name) {
  11. return this._attrs[name];
  12. };
  13. _proto.set = function set(name, value) {
  14. this._attrs[name] = value;
  15. };
  16. function Canvas(cfg) {
  17. this._attrs = Util.mix({
  18. type: 'canvas',
  19. children: []
  20. }, cfg);
  21. this._initPixelRatio();
  22. this._initCanvas();
  23. }
  24. _proto._initPixelRatio = function _initPixelRatio() {
  25. var pixelRatio = this.get('pixelRatio');
  26. if (!pixelRatio) {
  27. this.set('pixelRatio', Util.getPixelRatio());
  28. }
  29. };
  30. _proto.beforeDraw = function beforeDraw() {
  31. var context = this._attrs.context;
  32. var el = this._attrs.el;
  33. !Util.isWx && !Util.isMy && context && context.clearRect(0, 0, el.width, el.height);
  34. };
  35. _proto._initCanvas = function _initCanvas() {
  36. var self = this;
  37. var el = self.get('el');
  38. var context = self.get('context');
  39. var canvas;
  40. if (context) {
  41. // CanvasRenderingContext2D
  42. canvas = context.canvas;
  43. } else if (Util.isString(el)) {
  44. // HTMLElement's id
  45. canvas = Util.getDomById(el);
  46. } else {
  47. // HTMLElement
  48. canvas = el;
  49. }
  50. if (!canvas) {
  51. throw new Error('Please specify the id or el of the chart!');
  52. }
  53. if (context && canvas && !canvas.getContext) {
  54. canvas.getContext = function () {
  55. return context;
  56. };
  57. }
  58. var width = self.get('width');
  59. if (!width) {
  60. width = Util.getWidth(canvas);
  61. }
  62. var height = self.get('height');
  63. if (!height) {
  64. height = Util.getHeight(canvas);
  65. }
  66. self.set('canvas', this);
  67. self.set('el', canvas);
  68. self.set('context', context || canvas.getContext('2d'));
  69. self.changeSize(width, height);
  70. };
  71. _proto.changeSize = function changeSize(width, height) {
  72. var pixelRatio = this.get('pixelRatio');
  73. var canvasDOM = this.get('el');
  74. if (Util.isBrowser) {
  75. canvasDOM.style.width = width + 'px';
  76. canvasDOM.style.height = height + 'px';
  77. }
  78. if (!Util.isWx && !Util.isMy) {
  79. canvasDOM.width = width * pixelRatio;
  80. canvasDOM.height = height * pixelRatio;
  81. if (pixelRatio !== 1) {
  82. var ctx = this.get('context');
  83. ctx.scale(pixelRatio, pixelRatio);
  84. }
  85. }
  86. this.set('width', width);
  87. this.set('height', height);
  88. };
  89. _proto.getWidth = function getWidth() {
  90. var pixelRatio = this.get('pixelRatio');
  91. var width = this.get('width');
  92. return width * pixelRatio;
  93. };
  94. _proto.getHeight = function getHeight() {
  95. var pixelRatio = this.get('pixelRatio');
  96. var height = this.get('height');
  97. return height * pixelRatio;
  98. };
  99. _proto.getPointByClient = function getPointByClient(clientX, clientY) {
  100. var el = this.get('el');
  101. var bbox = el.getBoundingClientRect();
  102. var width = bbox.right - bbox.left;
  103. var height = bbox.bottom - bbox.top;
  104. return {
  105. x: (clientX - bbox.left) * (el.width / width),
  106. y: (clientY - bbox.top) * (el.height / height)
  107. };
  108. };
  109. _proto._beginDraw = function _beginDraw() {
  110. this._attrs.toDraw = true;
  111. };
  112. _proto._endDraw = function _endDraw() {
  113. this._attrs.toDraw = false;
  114. };
  115. _proto.draw = function draw() {
  116. var self = this;
  117. function drawInner() {
  118. self.set('animateHandler', requestAnimationFrame(function () {
  119. self.set('animateHandler', undefined);
  120. if (self.get('toDraw')) {
  121. drawInner();
  122. }
  123. }));
  124. self.beforeDraw();
  125. try {
  126. var context = self._attrs.context;
  127. var children = self._attrs.children;
  128. for (var i = 0, len = children.length; i < len; i++) {
  129. var child = children[i];
  130. child.draw(context);
  131. }
  132. if (Util.isWx || Util.isMy) {
  133. context.draw();
  134. }
  135. } catch (ev) {
  136. console.warn('error in draw canvas, detail as:');
  137. console.warn(ev);
  138. self._endDraw();
  139. }
  140. self._endDraw();
  141. }
  142. if (self.get('destroyed')) {
  143. return;
  144. }
  145. if (self.get('animateHandler')) {
  146. this._beginDraw();
  147. } else {
  148. drawInner();
  149. }
  150. };
  151. _proto.destroy = function destroy() {
  152. if (this.get('destroyed')) {
  153. return;
  154. }
  155. this.clear();
  156. this._attrs = {};
  157. this.set('destroyed', true);
  158. };
  159. _proto.isDestroyed = function isDestroyed() {
  160. return this.get('destroyed');
  161. };
  162. return Canvas;
  163. }();
  164. Util.mix(Canvas.prototype, Container, {
  165. getGroupClass: function getGroupClass() {
  166. return Group;
  167. }
  168. });
  169. module.exports = Canvas;