lepu-test-platform-web/node_modules/zrender/lib/Layer.js

235 lines
5.4 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;