123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035 |
- var _config = require("./config");
- var devicePixelRatio = _config.devicePixelRatio;
- var util = require("./core/util");
- var logError = require("./core/log");
- var BoundingRect = require("./core/BoundingRect");
- var timsort = require("./core/timsort");
- var Layer = require("./Layer");
- var requestAnimationFrame = require("./animation/requestAnimationFrame");
- var Image = require("./graphic/Image");
- var env = require("./core/env");
- var HOVER_LAYER_ZLEVEL = 1e5;
- var CANVAS_ZLEVEL = 314159;
- var EL_AFTER_INCREMENTAL_INC = 0.01;
- var INCREMENTAL_INC = 0.001;
- function parseInt10(val) {
- return parseInt(val, 10);
- }
- function isLayerValid(layer) {
- if (!layer) {
- return false;
- }
- if (layer.__builtin__) {
- return true;
- }
- if (typeof layer.resize !== 'function' || typeof layer.refresh !== 'function') {
- return false;
- }
- return true;
- }
- var tmpRect = new BoundingRect(0, 0, 0, 0);
- var viewRect = new BoundingRect(0, 0, 0, 0);
- function isDisplayableCulled(el, width, height) {
- tmpRect.copy(el.getBoundingRect());
- if (el.transform) {
- tmpRect.applyTransform(el.transform);
- }
- viewRect.width = width;
- viewRect.height = height;
- return !tmpRect.intersect(viewRect);
- }
- function isClipPathChanged(clipPaths, prevClipPaths) {
-
- if (clipPaths === prevClipPaths) {
- return false;
- }
- if (!clipPaths || !prevClipPaths || clipPaths.length !== prevClipPaths.length) {
- return true;
- }
- for (var i = 0; i < clipPaths.length; i++) {
- if (clipPaths[i] !== prevClipPaths[i]) {
- return true;
- }
- }
- return false;
- }
- function doClip(clipPaths, ctx) {
- for (var i = 0; i < clipPaths.length; i++) {
- var clipPath = clipPaths[i];
- clipPath.setTransform(ctx);
- ctx.beginPath();
- clipPath.buildPath(ctx, clipPath.shape);
- ctx.clip();
- clipPath.restoreTransform(ctx);
- }
- }
- function createRoot(width, height) {
- var domRoot = document.createElement('div');
- domRoot.style.cssText = ['position:relative',
-
-
-
-
-
-
- 'width:' + width + 'px', 'height:' + height + 'px', 'padding:0', 'margin:0', 'border-width:0'].join(';') + ';';
- return domRoot;
- }
- var Painter = function (root, storage, opts) {
- this.type = 'canvas';
- var singleCanvas = !root.nodeName
- || root.nodeName.toUpperCase() === 'CANVAS';
- this._opts = opts = util.extend({}, opts || {});
-
- this.dpr = opts.devicePixelRatio || devicePixelRatio;
-
- this._singleCanvas = singleCanvas;
-
- this.root = root;
- var rootStyle = root.style;
- if (rootStyle) {
- rootStyle['-webkit-tap-highlight-color'] = 'transparent';
- rootStyle['-webkit-user-select'] = rootStyle['user-select'] = rootStyle['-webkit-touch-callout'] = 'none';
- root.innerHTML = '';
- }
-
- this.storage = storage;
-
- var zlevelList = this._zlevelList = [];
-
- var layers = this._layers = {};
-
- this._layerConfig = {};
-
- this._needsManuallyCompositing = false;
- if (!singleCanvas) {
- this._width = this._getSize(0);
- this._height = this._getSize(1);
- var domRoot = this._domRoot = createRoot(this._width, this._height);
- root.appendChild(domRoot);
- } else {
- var width = root.width;
- var height = root.height;
- if (opts.width != null) {
- width = opts.width;
- }
- if (opts.height != null) {
- height = opts.height;
- }
- this.dpr = opts.devicePixelRatio || 1;
- root.width = width * this.dpr;
- root.height = height * this.dpr;
- this._width = width;
- this._height = height;
-
- var mainLayer = new Layer(root, this, this.dpr);
- mainLayer.__builtin__ = true;
- mainLayer.initContext();
-
- layers[CANVAS_ZLEVEL] = mainLayer;
- mainLayer.zlevel = CANVAS_ZLEVEL;
- zlevelList.push(CANVAS_ZLEVEL);
- this._domRoot = root;
- }
-
- this._hoverlayer = null;
- this._hoverElements = [];
- };
- Painter.prototype = {
- constructor: Painter,
- getType: function () {
- return 'canvas';
- },
-
- isSingleCanvas: function () {
- return this._singleCanvas;
- },
-
- getViewportRoot: function () {
- return this._domRoot;
- },
- getViewportRootOffset: function () {
- var viewportRoot = this.getViewportRoot();
- if (viewportRoot) {
- return {
- offsetLeft: viewportRoot.offsetLeft || 0,
- offsetTop: viewportRoot.offsetTop || 0
- };
- }
- },
-
- refresh: function (paintAll) {
- var list = this.storage.getDisplayList(true);
- var zlevelList = this._zlevelList;
- this._redrawId = Math.random();
- this._paintList(list, paintAll, this._redrawId);
- for (var i = 0; i < zlevelList.length; i++) {
- var z = zlevelList[i];
- var layer = this._layers[z];
- if (!layer.__builtin__ && layer.refresh) {
- var clearColor = i === 0 ? this._backgroundColor : null;
- layer.refresh(clearColor);
- }
- }
- this.refreshHover();
- return this;
- },
- addHover: function (el, hoverStyle) {
- if (el.__hoverMir) {
- return;
- }
- var elMirror = new el.constructor({
- style: el.style,
- shape: el.shape,
- z: el.z,
- z2: el.z2,
- silent: el.silent
- });
- elMirror.__from = el;
- el.__hoverMir = elMirror;
- hoverStyle && elMirror.setStyle(hoverStyle);
- this._hoverElements.push(elMirror);
- return elMirror;
- },
- removeHover: function (el) {
- var elMirror = el.__hoverMir;
- var hoverElements = this._hoverElements;
- var idx = util.indexOf(hoverElements, elMirror);
- if (idx >= 0) {
- hoverElements.splice(idx, 1);
- }
- el.__hoverMir = null;
- },
- clearHover: function (el) {
- var hoverElements = this._hoverElements;
- for (var i = 0; i < hoverElements.length; i++) {
- var from = hoverElements[i].__from;
- if (from) {
- from.__hoverMir = null;
- }
- }
- hoverElements.length = 0;
- },
- refreshHover: function () {
- var hoverElements = this._hoverElements;
- var len = hoverElements.length;
- var hoverLayer = this._hoverlayer;
- hoverLayer && hoverLayer.clear();
- if (!len) {
- return;
- }
- timsort(hoverElements, this.storage.displayableSortFunc);
-
- if (!hoverLayer) {
- hoverLayer = this._hoverlayer = this.getLayer(HOVER_LAYER_ZLEVEL);
- }
- var scope = {};
- hoverLayer.ctx.save();
- for (var i = 0; i < len;) {
- var el = hoverElements[i];
- var originalEl = el.__from;
-
- if (!(originalEl && originalEl.__zr)) {
- hoverElements.splice(i, 1);
- originalEl.__hoverMir = null;
- len--;
- continue;
- }
- i++;
-
- if (!originalEl.invisible) {
- el.transform = originalEl.transform;
- el.invTransform = originalEl.invTransform;
- el.__clipPaths = originalEl.__clipPaths;
- this._doPaintEl(el, hoverLayer, true, scope);
- }
- }
- hoverLayer.ctx.restore();
- },
- getHoverLayer: function () {
- return this.getLayer(HOVER_LAYER_ZLEVEL);
- },
- _paintList: function (list, paintAll, redrawId) {
- if (this._redrawId !== redrawId) {
- return;
- }
- paintAll = paintAll || false;
- this._updateLayerStatus(list);
- var finished = this._doPaintList(list, paintAll);
- if (this._needsManuallyCompositing) {
- this._compositeManually();
- }
- if (!finished) {
- var self = this;
- requestAnimationFrame(function () {
- self._paintList(list, paintAll, redrawId);
- });
- }
- },
- _compositeManually: function () {
- var ctx = this.getLayer(CANVAS_ZLEVEL).ctx;
- var width = this._domRoot.width;
- var height = this._domRoot.height;
- ctx.clearRect(0, 0, width, height);
- this.eachBuiltinLayer(function (layer) {
- if (layer.virtual) {
- ctx.drawImage(layer.dom, 0, 0, width, height);
- }
- });
- },
- _doPaintList: function (list, paintAll) {
- var layerList = [];
- for (var zi = 0; zi < this._zlevelList.length; zi++) {
- var zlevel = this._zlevelList[zi];
- var layer = this._layers[zlevel];
- if (layer.__builtin__ && layer !== this._hoverlayer && (layer.__dirty || paintAll)) {
- layerList.push(layer);
- }
- }
- var finished = true;
- for (var k = 0; k < layerList.length; k++) {
- var layer = layerList[k];
- var ctx = layer.ctx;
- var scope = {};
- ctx.save();
- var start = paintAll ? layer.__startIndex : layer.__drawIndex;
- var useTimer = !paintAll && layer.incremental && Date.now;
- var startTime = useTimer && Date.now();
- var clearColor = layer.zlevel === this._zlevelList[0] ? this._backgroundColor : null;
- if (layer.__startIndex === layer.__endIndex) {
- layer.clear(false, clearColor);
- } else if (start === layer.__startIndex) {
- var firstEl = list[start];
- if (!firstEl.incremental || !firstEl.notClear || paintAll) {
- layer.clear(false, clearColor);
- }
- }
- if (start === -1) {
- console.error('For some unknown reason. drawIndex is -1');
- start = layer.__startIndex;
- }
- for (var i = start; i < layer.__endIndex; i++) {
- var el = list[i];
- this._doPaintEl(el, layer, paintAll, scope);
- el.__dirty = el.__dirtyText = false;
- if (useTimer) {
-
- var dTime = Date.now() - startTime;
-
- if (dTime > 15) {
- break;
- }
- }
- }
- layer.__drawIndex = i;
- if (layer.__drawIndex < layer.__endIndex) {
- finished = false;
- }
- if (scope.prevElClipPaths) {
-
- ctx.restore();
- }
- ctx.restore();
- }
- if (env.wxa) {
-
- util.each(this._layers, function (layer) {
- if (layer && layer.ctx && layer.ctx.draw) {
- layer.ctx.draw();
- }
- });
- }
- return finished;
- },
- _doPaintEl: function (el, currentLayer, forcePaint, scope) {
- var ctx = currentLayer.ctx;
- var m = el.transform;
- if ((currentLayer.__dirty || forcePaint) &&
- !el.invisible
- && el.style.opacity !== 0
-
-
- && !(m && !m[0] && !m[3])
- && !(el.culling && isDisplayableCulled(el, this._width, this._height))) {
- var clipPaths = el.__clipPaths;
- var prevElClipPaths = scope.prevElClipPaths;
- if (!prevElClipPaths || isClipPathChanged(clipPaths, prevElClipPaths)) {
-
- if (prevElClipPaths) {
- ctx.restore();
- scope.prevElClipPaths = null;
- scope.prevEl = null;
- }
- if (clipPaths) {
- ctx.save();
- doClip(clipPaths, ctx);
- scope.prevElClipPaths = clipPaths;
- }
- }
- el.beforeBrush && el.beforeBrush(ctx);
- el.brush(ctx, scope.prevEl || null);
- scope.prevEl = el;
- el.afterBrush && el.afterBrush(ctx);
- }
- },
-
- getLayer: function (zlevel, virtual) {
- if (this._singleCanvas && !this._needsManuallyCompositing) {
- zlevel = CANVAS_ZLEVEL;
- }
- var layer = this._layers[zlevel];
- if (!layer) {
-
- layer = new Layer('zr_' + zlevel, this, this.dpr);
- layer.zlevel = zlevel;
- layer.__builtin__ = true;
- if (this._layerConfig[zlevel]) {
- util.merge(layer, this._layerConfig[zlevel], true);
- }
- else if (this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC]) {
- util.merge(layer, this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC], true);
- }
- if (virtual) {
- layer.virtual = virtual;
- }
- this.insertLayer(zlevel, layer);
-
- layer.initContext();
- }
- return layer;
- },
- insertLayer: function (zlevel, layer) {
- var layersMap = this._layers;
- var zlevelList = this._zlevelList;
- var len = zlevelList.length;
- var prevLayer = null;
- var i = -1;
- var domRoot = this._domRoot;
- if (layersMap[zlevel]) {
- logError('ZLevel ' + zlevel + ' has been used already');
- return;
- }
- if (!isLayerValid(layer)) {
- logError('Layer of zlevel ' + zlevel + ' is not valid');
- return;
- }
- if (len > 0 && zlevel > zlevelList[0]) {
- for (i = 0; i < len - 1; i++) {
- if (zlevelList[i] < zlevel && zlevelList[i + 1] > zlevel) {
- break;
- }
- }
- prevLayer = layersMap[zlevelList[i]];
- }
- zlevelList.splice(i + 1, 0, zlevel);
- layersMap[zlevel] = layer;
-
-
- if (!layer.virtual) {
- if (prevLayer) {
- var prevDom = prevLayer.dom;
- if (prevDom.nextSibling) {
- domRoot.insertBefore(layer.dom, prevDom.nextSibling);
- } else {
- domRoot.appendChild(layer.dom);
- }
- } else {
- if (domRoot.firstChild) {
- domRoot.insertBefore(layer.dom, domRoot.firstChild);
- } else {
- domRoot.appendChild(layer.dom);
- }
- }
- }
- },
-
- eachLayer: function (cb, context) {
- var zlevelList = this._zlevelList;
- var z;
- var i;
- for (i = 0; i < zlevelList.length; i++) {
- z = zlevelList[i];
- cb.call(context, this._layers[z], z);
- }
- },
-
- eachBuiltinLayer: function (cb, context) {
- var zlevelList = this._zlevelList;
- var layer;
- var z;
- var i;
- for (i = 0; i < zlevelList.length; i++) {
- z = zlevelList[i];
- layer = this._layers[z];
- if (layer.__builtin__) {
- cb.call(context, layer, z);
- }
- }
- },
-
- eachOtherLayer: function (cb, context) {
- var zlevelList = this._zlevelList;
- var layer;
- var z;
- var i;
- for (i = 0; i < zlevelList.length; i++) {
- z = zlevelList[i];
- layer = this._layers[z];
- if (!layer.__builtin__) {
- cb.call(context, layer, z);
- }
- }
- },
-
- getLayers: function () {
- return this._layers;
- },
- _updateLayerStatus: function (list) {
- this.eachBuiltinLayer(function (layer, z) {
- layer.__dirty = layer.__used = false;
- });
- function updatePrevLayer(idx) {
- if (prevLayer) {
- if (prevLayer.__endIndex !== idx) {
- prevLayer.__dirty = true;
- }
- prevLayer.__endIndex = idx;
- }
- }
- if (this._singleCanvas) {
- for (var i = 1; i < list.length; i++) {
- var el = list[i];
- if (el.zlevel !== list[i - 1].zlevel || el.incremental) {
- this._needsManuallyCompositing = true;
- break;
- }
- }
- }
- var prevLayer = null;
- var incrementalLayerCount = 0;
- var prevZlevel;
- for (var i = 0; i < list.length; i++) {
- var el = list[i];
- var zlevel = el.zlevel;
- var layer;
- if (prevZlevel !== zlevel) {
- prevZlevel = zlevel;
- incrementalLayerCount = 0;
- }
-
-
-
-
-
-
-
- if (el.incremental) {
- layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
- layer.incremental = true;
- incrementalLayerCount = 1;
- } else {
- layer = this.getLayer(zlevel + (incrementalLayerCount > 0 ? EL_AFTER_INCREMENTAL_INC : 0), this._needsManuallyCompositing);
- }
- if (!layer.__builtin__) {
- logError('ZLevel ' + zlevel + ' has been used by unkown layer ' + layer.id);
- }
- if (layer !== prevLayer) {
- layer.__used = true;
- if (layer.__startIndex !== i) {
- layer.__dirty = true;
- }
- layer.__startIndex = i;
- if (!layer.incremental) {
- layer.__drawIndex = i;
- } else {
-
- layer.__drawIndex = -1;
- }
- updatePrevLayer(i);
- prevLayer = layer;
- }
- if (el.__dirty) {
- layer.__dirty = true;
- if (layer.incremental && layer.__drawIndex < 0) {
-
- layer.__drawIndex = i;
- }
- }
- }
- updatePrevLayer(i);
- this.eachBuiltinLayer(function (layer, z) {
-
- if (!layer.__used && layer.getElementCount() > 0) {
- layer.__dirty = true;
- layer.__startIndex = layer.__endIndex = layer.__drawIndex = 0;
- }
- if (layer.__dirty && layer.__drawIndex < 0) {
- layer.__drawIndex = layer.__startIndex;
- }
- });
- },
-
- clear: function () {
- this.eachBuiltinLayer(this._clearLayer);
- return this;
- },
- _clearLayer: function (layer) {
- layer.clear();
- },
- setBackgroundColor: function (backgroundColor) {
- this._backgroundColor = backgroundColor;
- },
-
- configLayer: function (zlevel, config) {
- if (config) {
- var layerConfig = this._layerConfig;
- if (!layerConfig[zlevel]) {
- layerConfig[zlevel] = config;
- } else {
- util.merge(layerConfig[zlevel], config, true);
- }
- for (var i = 0; i < this._zlevelList.length; i++) {
- var _zlevel = this._zlevelList[i];
- if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {
- var layer = this._layers[_zlevel];
- util.merge(layer, layerConfig[zlevel], true);
- }
- }
- }
- },
-
- delLayer: function (zlevel) {
- var layers = this._layers;
- var zlevelList = this._zlevelList;
- var layer = layers[zlevel];
- if (!layer) {
- return;
- }
- layer.dom.parentNode.removeChild(layer.dom);
- delete layers[zlevel];
- zlevelList.splice(util.indexOf(zlevelList, zlevel), 1);
- },
-
- resize: function (width, height) {
- if (!this._domRoot.style) {
-
- if (width == null || height == null) {
- return;
- }
- this._width = width;
- this._height = height;
- this.getLayer(CANVAS_ZLEVEL).resize(width, height);
- } else {
- var domRoot = this._domRoot;
- domRoot.style.display = 'none';
- var opts = this._opts;
- width != null && (opts.width = width);
- height != null && (opts.height = height);
- width = this._getSize(0);
- height = this._getSize(1);
- domRoot.style.display = '';
- if (this._width !== width || height !== this._height) {
- domRoot.style.width = width + 'px';
- domRoot.style.height = height + 'px';
- for (var id in this._layers) {
- if (this._layers.hasOwnProperty(id)) {
- this._layers[id].resize(width, height);
- }
- }
- util.each(this._progressiveLayers, function (layer) {
- layer.resize(width, height);
- });
- this.refresh(true);
- }
- this._width = width;
- this._height = height;
- }
- return this;
- },
-
- clearLayer: function (zlevel) {
- var layer = this._layers[zlevel];
- if (layer) {
- layer.clear();
- }
- },
-
- dispose: function () {
- this.root.innerHTML = '';
- this.root = this.storage = this._domRoot = this._layers = null;
- },
-
- getRenderedCanvas: function (opts) {
- opts = opts || {};
- if (this._singleCanvas && !this._compositeManually) {
- return this._layers[CANVAS_ZLEVEL].dom;
- }
- var imageLayer = new Layer('image', this, opts.pixelRatio || this.dpr);
- imageLayer.initContext();
- imageLayer.clear(false, opts.backgroundColor || this._backgroundColor);
- if (opts.pixelRatio <= this.dpr) {
- this.refresh();
- var width = imageLayer.dom.width;
- var height = imageLayer.dom.height;
- var ctx = imageLayer.ctx;
- this.eachLayer(function (layer) {
- if (layer.__builtin__) {
- ctx.drawImage(layer.dom, 0, 0, width, height);
- } else if (layer.renderToCanvas) {
- imageLayer.ctx.save();
- layer.renderToCanvas(imageLayer.ctx);
- imageLayer.ctx.restore();
- }
- });
- } else {
-
- var scope = {};
- var displayList = this.storage.getDisplayList(true);
- for (var i = 0; i < displayList.length; i++) {
- var el = displayList[i];
- this._doPaintEl(el, imageLayer, true, scope);
- }
- }
- return imageLayer.dom;
- },
-
- getWidth: function () {
- return this._width;
- },
-
- getHeight: function () {
- return this._height;
- },
- _getSize: function (whIdx) {
- var opts = this._opts;
- var wh = ['width', 'height'][whIdx];
- var cwh = ['clientWidth', 'clientHeight'][whIdx];
- var plt = ['paddingLeft', 'paddingTop'][whIdx];
- var prb = ['paddingRight', 'paddingBottom'][whIdx];
- if (opts[wh] != null && opts[wh] !== 'auto') {
- return parseFloat(opts[wh]);
- }
- var root = this.root;
- var stl = document.defaultView.getComputedStyle(root);
- return (root[cwh] || parseInt10(stl[wh]) || parseInt10(root.style[wh])) - (parseInt10(stl[plt]) || 0) - (parseInt10(stl[prb]) || 0) | 0;
- },
- pathToImage: function (path, dpr) {
- dpr = dpr || this.dpr;
- var canvas = document.createElement('canvas');
- var ctx = canvas.getContext('2d');
- var rect = path.getBoundingRect();
- var style = path.style;
- var shadowBlurSize = style.shadowBlur * dpr;
- var shadowOffsetX = style.shadowOffsetX * dpr;
- var shadowOffsetY = style.shadowOffsetY * dpr;
- var lineWidth = style.hasStroke() ? style.lineWidth : 0;
- var leftMargin = Math.max(lineWidth / 2, -shadowOffsetX + shadowBlurSize);
- var rightMargin = Math.max(lineWidth / 2, shadowOffsetX + shadowBlurSize);
- var topMargin = Math.max(lineWidth / 2, -shadowOffsetY + shadowBlurSize);
- var bottomMargin = Math.max(lineWidth / 2, shadowOffsetY + shadowBlurSize);
- var width = rect.width + leftMargin + rightMargin;
- var height = rect.height + topMargin + bottomMargin;
- canvas.width = width * dpr;
- canvas.height = height * dpr;
- ctx.scale(dpr, dpr);
- ctx.clearRect(0, 0, width, height);
- ctx.dpr = dpr;
- var pathTransform = {
- position: path.position,
- rotation: path.rotation,
- scale: path.scale
- };
- path.position = [leftMargin - rect.x, topMargin - rect.y];
- path.rotation = 0;
- path.scale = [1, 1];
- path.updateTransform();
- if (path) {
- path.brush(ctx);
- }
- var ImageShape = Image;
- var imgShape = new ImageShape({
- style: {
- x: 0,
- y: 0,
- image: canvas
- }
- });
- if (pathTransform.position != null) {
- imgShape.position = path.position = pathTransform.position;
- }
- if (pathTransform.rotation != null) {
- imgShape.rotation = path.rotation = pathTransform.rotation;
- }
- if (pathTransform.scale != null) {
- imgShape.scale = path.scale = pathTransform.scale;
- }
- return imgShape;
- }
- };
- var _default = Painter;
- module.exports = _default;
|