From fcc792f2d59ca2b7092203aa98ad1d9c8e3d9b80 Mon Sep 17 00:00:00 2001 From: simaQ Date: Sat, 21 Apr 2018 17:16:52 +0800 Subject: [PATCH] feat: add env detect variables, support node-canvas --- src/chart/controller/axis.js | 3 ++- src/graphic/canvas.js | 21 ++++++++++----------- src/graphic/shape/text.js | 5 +++-- src/plugin/tooltip.js | 4 ++-- src/util/dom.js | 21 ++++++++++++--------- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/chart/controller/axis.js b/src/chart/controller/axis.js index c61c670a1..13f775cd4 100644 --- a/src/chart/controller/axis.js +++ b/src/chart/controller/axis.js @@ -174,7 +174,8 @@ class AxisController { }, labelCfg), value: tick.value, textStyle, - top: labelCfg.top + top: labelCfg.top, + context: self.chart.get('canvas').get('context') }); labels.push(axisLabel); const { width, height } = axisLabel.getBBox(); diff --git a/src/graphic/canvas.js b/src/graphic/canvas.js index 577af9a54..5a9b954b6 100644 --- a/src/graphic/canvas.js +++ b/src/graphic/canvas.js @@ -2,10 +2,6 @@ const Util = require('../util/common'); const Container = require('./container'); const Group = require('./group'); -/* global wx, my */ -const isWx = (typeof wx === 'object') && (typeof wx.getSystemInfoSync === 'function'); // weixin miniprogram -const isMy = (typeof my === 'object') && (typeof my.getSystemInfoSync === 'function'); // ant miniprogram - class Canvas { get(name) { return this._attrs[name]; @@ -34,7 +30,7 @@ class Canvas { _beforeDraw() { const context = this._attrs.context; const el = this._attrs.el; - !isWx && !isMy && context && context.clearRect(0, 0, el.width, el.height); + !Util.isWx && !Util.isMy && context && context.clearRect(0, 0, el.width, el.height); } _initCanvas() { @@ -85,12 +81,15 @@ class Canvas { changeSize(width, height) { const pixelRatio = this.get('pixelRatio'); const canvasDOM = this.get('el'); - canvasDOM.style.width = width + 'px'; - canvasDOM.style.height = height + 'px'; - canvasDOM.width = width * pixelRatio; - canvasDOM.height = height * pixelRatio; - if (pixelRatio !== 1 && !isWx && !isMy) { + if (Util.isBrowser) { + canvasDOM.style.width = width + 'px'; + canvasDOM.style.height = height + 'px'; + canvasDOM.width = width * pixelRatio; + canvasDOM.height = height * pixelRatio; + } + + if (pixelRatio !== 1 && !Util.isWx && !Util.isMy) { const ctx = this.get('context'); ctx.scale(pixelRatio, pixelRatio); } @@ -150,7 +149,7 @@ class Canvas { child.draw(context); } - if (isWx || isMy) { + if (Util.isWx || Util.isMy) { context.draw(); } } catch (ev) { // 绘制时异常，中断重绘 diff --git a/src/graphic/shape/text.js b/src/graphic/shape/text.js index 33850bf81..1252f53bc 100644 --- a/src/graphic/shape/text.js +++ b/src/graphic/shape/text.js @@ -178,6 +178,7 @@ class Text extends Shape { _getTextWidth() { const attrs = this._attrs.attrs; const text = attrs.text; + const context = this.get('context'); if (Util.isNil(text)) return undefined; @@ -192,10 +193,10 @@ class Text extends Shape { if (textArr) { for (let i = 0, length = textArr.length; i < length; i++) { const subText = textArr[i]; - width = Math.max(width, Util.measureText(subText, font).width); + width = Math.max(width, Util.measureText(subText, font, context).width); } } else { - width = Util.measureText(text, font).width; + width = Util.measureText(text, font, context).width; } if (textWidthCacheCounter > TEXT_CACHE_MAX) { diff --git a/src/plugin/tooltip.js b/src/plugin/tooltip.js index 4e84996dc..f4ca56d7e 100644 --- a/src/plugin/tooltip.js +++ b/src/plugin/tooltip.js @@ -429,7 +429,7 @@ class TooltipController { triggerOff && this._handleEvent(triggerOff, hideMethod, 'bind'); // TODO: 当用户点击canvas 外的事件时 tooltip 消失 const docMethod = Util.wrapBehavior(this, 'handleDocEvent'); - document && Util.addEventListener(document, 'touchstart', docMethod); + Util.isBrowser && Util.addEventListener(document, 'touchstart', docMethod); } unBindEvents() { @@ -442,7 +442,7 @@ class TooltipController { triggerOff && this._handleEvent(triggerOff, hideMethod, 'unBind'); // TODO: 当用户点击canvas 外的事件时 tooltip 消失 const docMethod = Util.getWrapBehavior(this, 'handleDocEvent'); - document && Util.removeEventListener(document, 'touchstart', docMethod); + Util.isBrowser && Util.removeEventListener(document, 'touchstart', docMethod); } } diff --git a/src/util/dom.js b/src/util/dom.js index a5fd0af3e..3938144b5 100644 --- a/src/util/dom.js +++ b/src/util/dom.js @@ -51,9 +51,12 @@ function fromNativeEvent(event, chart) { // TODO: chart 改成 dom return createEvent(type, chart, pos.x, pos.y, event); } -let _dummyCtx; - DomUtil = { + /* global wx, my, module */ + isWx: (typeof wx === 'object') && (typeof wx.getSystemInfoSync === 'function'), // weixin miniprogram + isMy: (typeof my === 'object') && (typeof my.getSystemInfoSync === 'function'), // ant miniprogram + isNode: (typeof module !== 'undefined') && (typeof module.exports !== 'undefined'), // in node + isBrowser: (typeof window !== 'undefined') && (typeof window.document !== 'undefined'), // in browser getPixelRatio() { return window && window.devicePixelRatio || 1; }, @@ -108,21 +111,21 @@ DomUtil = { }; }, addEventListener(source, type, listener) { - source.addEventListener(type, listener, eventListenerOptions); + DomUtil.isBrowser && source.addEventListener(type, listener, eventListenerOptions); }, removeEventListener(source, type, listener) { - source.removeEventListener(type, listener, eventListenerOptions); + DomUtil.isBrowser && source.removeEventListener(type, listener, eventListenerOptions); }, createEvent(event, chart) { return fromNativeEvent(event, chart); }, - measureText(text, font) { - if (!_dummyCtx) { - _dummyCtx = document.createElement('canvas').getContext('2d'); + measureText(text, font, ctx) { + if (!ctx) { + ctx = document.createElement('canvas').getContext('2d'); } - _dummyCtx.font = font || '12px sans-serif'; - return _dummyCtx.measureText(text); + ctx.font = font || '12px sans-serif'; + return ctx.measureText(text); } };