var util = require("./core/util"); var _config = require("./config"); var devicePixelRatio = _config.devicePixelRatio; var Style = require("./graphic/Style"); var Pattern = require("./graphic/Pattern"); /** * @module zrender/Layer * @author pissang(https://www.github.com/pissang) */ function returnFalse() { return false; } /** * 创建dom * * @inner * @param {string} id dom id 待用 * @param {Painter} painter painter instance * @param {number} number */ function createDom(id, painter, dpr) { var newDom = util.createCanvas(); var width = painter.getWidth(); var height = painter.getHeight(); var newDomStyle = newDom.style; if (newDomStyle) { // In node or some other non-browser environment newDomStyle.position = 'absolute'; newDomStyle.left = 0; newDomStyle.top = 0; newDomStyle.width = width + 'px'; newDomStyle.height = height + 'px'; newDom.setAttribute('data-zr-dom-id', id); } newDom.width = width * dpr; newDom.height = height * dpr; return newDom; } /** * @alias module:zrender/Layer * @constructor * @extends module:zrender/mixin/Transformable * @param {string} id * @param {module:zrender/Painter} painter * @param {number} [dpr] */ var Layer = function (id, painter, dpr) { var dom; dpr = dpr || devicePixelRatio; if (typeof id === 'string') { dom = createDom(id, painter, dpr); } // Not using isDom because in node it will return false else if (util.isObject(id)) { dom = id; id = dom.id; } this.id = id; this.dom = dom; var domStyle = dom.style; if (domStyle) { // Not in node dom.onselectstart = returnFalse; // 避免页面选中的尴尬 domStyle['-webkit-user-select'] = 'none'; domStyle['user-select'] = 'none'; domStyle['-webkit-touch-callout'] = 'none'; domStyle['-webkit-tap-highlight-color'] = 'rgba(0,0,0,0)'; domStyle['padding'] = 0; // eslint-disable-line dot-notation domStyle['margin'] = 0; // eslint-disable-line dot-notation domStyle['border-width'] = 0; } this.domBack = null; this.ctxBack = null; this.painter = painter; this.config = null; // Configs /** * 每次清空画布的颜色 * @type {string} * @default 0 */ this.clearColor = 0; /** * 是否开启动态模糊 * @type {boolean} * @default false */ this.motionBlur = false; /** * 在开启动态模糊的时候使用,与上一帧混合的alpha值,值越大尾迹越明显 * @type {number} * @default 0.7 */ this.lastFrameAlpha = 0.7; /** * Layer dpr * @type {number} */ this.dpr = dpr; }; Layer.prototype = { constructor: Layer, __dirty: true, __used: false, __drawIndex: 0, __startIndex: 0, __endIndex: 0, incremental: false, getElementCount: function () { return this.__endIndex - this.__startIndex; }, initContext: function () { this.ctx = this.dom.getContext('2d'); this.ctx.dpr = this.dpr; }, createBackBuffer: function () { var dpr = this.dpr; this.domBack = createDom('back-' + this.id, this.painter, dpr); this.ctxBack = this.domBack.getContext('2d'); if (dpr !== 1) { this.ctxBack.scale(dpr, dpr); } }, /** * @param {number} width * @param {number} height */ resize: function (width, height) { var dpr = this.dpr; var dom = this.dom; var domStyle = dom.style; var domBack = this.domBack; if (domStyle) { domStyle.width = width + 'px'; domStyle.height = height + 'px'; } dom.width = width * dpr; dom.height = height * dpr; if (domBack) { domBack.width = width * dpr; domBack.height = height * dpr; if (dpr !== 1) { this.ctxBack.scale(dpr, dpr); } } }, /** * 清空该层画布 * @param {boolean} [clearAll]=false Clear all with out motion blur * @param {Color} [clearColor] */ clear: function (clearAll, clearColor) { var dom = this.dom; var ctx = this.ctx; var width = dom.width; var height = dom.height; var clearColor = clearColor || this.clearColor; var haveMotionBLur = this.motionBlur && !clearAll; var lastFrameAlpha = this.lastFrameAlpha; var dpr = this.dpr; if (haveMotionBLur) { if (!this.domBack) { this.createBackBuffer(); } this.ctxBack.globalCompositeOperation = 'copy'; this.ctxBack.drawImage(dom, 0, 0, width / dpr, height / dpr); } ctx.clearRect(0, 0, width, height); if (clearColor && clearColor !== 'transparent') { var clearColorGradientOrPattern; // Gradient if (clearColor.colorStops) { // Cache canvas gradient clearColorGradientOrPattern = clearColor.__canvasGradient || Style.getGradient(ctx, clearColor, { x: 0, y: 0, width: width, height: height }); clearColor.__canvasGradient = clearColorGradientOrPattern; } // Pattern else if (clearColor.image) { clearColorGradientOrPattern = Pattern.prototype.getCanvasPattern.call(clearColor, ctx); } ctx.save(); ctx.fillStyle = clearColorGradientOrPattern || clearColor; ctx.fillRect(0, 0, width, height); ctx.restore(); } if (haveMotionBLur) { var domBack = this.domBack; ctx.save(); ctx.globalAlpha = lastFrameAlpha; ctx.drawImage(domBack, 0, 0, width, height); ctx.restore(); } } }; var _default = Layer; module.exports = _default;