123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- var util = require("./core/util");
- var _config = require("./config");
- var devicePixelRatio = _config.devicePixelRatio;
- var Style = require("./graphic/Style");
- var Pattern = require("./graphic/Pattern");
- function returnFalse() {
- return false;
- }
- function createDom(id, painter, dpr) {
- var newDom = util.createCanvas();
- var width = painter.getWidth();
- var height = painter.getHeight();
- var newDomStyle = newDom.style;
- if (newDomStyle) {
-
- 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;
- }
- var Layer = function (id, painter, dpr) {
- var dom;
- dpr = dpr || devicePixelRatio;
- if (typeof id === 'string') {
- dom = createDom(id, painter, dpr);
- }
- else if (util.isObject(id)) {
- dom = id;
- id = dom.id;
- }
- this.id = id;
- this.dom = dom;
- var domStyle = dom.style;
- if (domStyle) {
-
- 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;
- domStyle['margin'] = 0;
- domStyle['border-width'] = 0;
- }
- this.domBack = null;
- this.ctxBack = null;
- this.painter = painter;
- this.config = null;
-
- this.clearColor = 0;
-
- this.motionBlur = false;
-
- this.lastFrameAlpha = 0.7;
-
- 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);
- }
- },
-
- 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);
- }
- }
- },
-
- 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;
- if (clearColor.colorStops) {
-
- clearColorGradientOrPattern = clearColor.__canvasGradient || Style.getGradient(ctx, clearColor, {
- x: 0,
- y: 0,
- width: width,
- height: height
- });
- clearColor.__canvasGradient = clearColorGradientOrPattern;
- }
- 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;
|