| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- var Util = require('../util/common');
- var Container = require('./container');
- var Group = require('./group');
- var _require = require('./util/requestAnimationFrame'),
- requestAnimationFrame = _require.requestAnimationFrame;
- var Canvas =
- /*#__PURE__*/
- function () {
- var _proto = Canvas.prototype;
- _proto.get = function get(name) {
- return this._attrs[name];
- };
- _proto.set = function set(name, value) {
- this._attrs[name] = value;
- };
- function Canvas(cfg) {
- this._attrs = Util.mix({
- type: 'canvas',
- children: []
- }, cfg);
- this._initPixelRatio();
- this._initCanvas();
- }
- _proto._initPixelRatio = function _initPixelRatio() {
- var pixelRatio = this.get('pixelRatio');
- if (!pixelRatio) {
- this.set('pixelRatio', Util.getPixelRatio());
- }
- };
- _proto.beforeDraw = function beforeDraw() {
- var context = this._attrs.context;
- var el = this._attrs.el;
- !Util.isWx && !Util.isMy && context && context.clearRect(0, 0, el.width, el.height);
- };
- _proto._initCanvas = function _initCanvas() {
- var self = this;
- var el = self.get('el');
- var context = self.get('context');
- var canvas;
- if (context) {
- // CanvasRenderingContext2D
- canvas = context.canvas;
- } else if (Util.isString(el)) {
- // HTMLElement's id
- canvas = Util.getDomById(el);
- } else {
- // HTMLElement
- canvas = el;
- }
- if (!canvas) {
- throw new Error('Please specify the id or el of the chart!');
- }
- if (context && canvas && !canvas.getContext) {
- canvas.getContext = function () {
- return context;
- };
- }
- var width = self.get('width');
- if (!width) {
- width = Util.getWidth(canvas);
- }
- var height = self.get('height');
- if (!height) {
- height = Util.getHeight(canvas);
- }
- self.set('canvas', this);
- self.set('el', canvas);
- self.set('context', context || canvas.getContext('2d'));
- self.changeSize(width, height);
- };
- _proto.changeSize = function changeSize(width, height) {
- var pixelRatio = this.get('pixelRatio');
- var canvasDOM = this.get('el');
- if (Util.isBrowser) {
- canvasDOM.style.width = width + 'px';
- canvasDOM.style.height = height + 'px';
- }
- if (!Util.isWx && !Util.isMy) {
- canvasDOM.width = width * pixelRatio;
- canvasDOM.height = height * pixelRatio;
- if (pixelRatio !== 1) {
- var ctx = this.get('context');
- ctx.scale(pixelRatio, pixelRatio);
- }
- }
- this.set('width', width);
- this.set('height', height);
- };
- _proto.getWidth = function getWidth() {
- var pixelRatio = this.get('pixelRatio');
- var width = this.get('width');
- return width * pixelRatio;
- };
- _proto.getHeight = function getHeight() {
- var pixelRatio = this.get('pixelRatio');
- var height = this.get('height');
- return height * pixelRatio;
- };
- _proto.getPointByClient = function getPointByClient(clientX, clientY) {
- var el = this.get('el');
- var bbox = el.getBoundingClientRect();
- var width = bbox.right - bbox.left;
- var height = bbox.bottom - bbox.top;
- return {
- x: (clientX - bbox.left) * (el.width / width),
- y: (clientY - bbox.top) * (el.height / height)
- };
- };
- _proto._beginDraw = function _beginDraw() {
- this._attrs.toDraw = true;
- };
- _proto._endDraw = function _endDraw() {
- this._attrs.toDraw = false;
- };
- _proto.draw = function draw() {
- var self = this;
- function drawInner() {
- self.set('animateHandler', requestAnimationFrame(function () {
- self.set('animateHandler', undefined);
- if (self.get('toDraw')) {
- drawInner();
- }
- }));
- self.beforeDraw();
- try {
- var context = self._attrs.context;
- var children = self._attrs.children;
- for (var i = 0, len = children.length; i < len; i++) {
- var child = children[i];
- child.draw(context);
- }
- if (Util.isWx || Util.isMy) {
- context.draw();
- }
- } catch (ev) {
- console.warn('error in draw canvas, detail as:');
- console.warn(ev);
- self._endDraw();
- }
- self._endDraw();
- }
- if (self.get('destroyed')) {
- return;
- }
- if (self.get('animateHandler')) {
- this._beginDraw();
- } else {
- drawInner();
- }
- };
- _proto.destroy = function destroy() {
- if (this.get('destroyed')) {
- return;
- }
- this.clear();
- this._attrs = {};
- this.set('destroyed', true);
- };
- _proto.isDestroyed = function isDestroyed() {
- return this.get('destroyed');
- };
- return Canvas;
- }();
- Util.mix(Canvas.prototype, Container, {
- getGroupClass: function getGroupClass() {
- return Group;
- }
- });
- module.exports = Canvas;
|