copy context methods to renderer
diff --git a/player/js/elements/canvasElements/CVContextData.js b/player/js/elements/canvasElements/CVContextData.js
index 8ade4e0..88df6fa 100644
--- a/player/js/elements/canvasElements/CVContextData.js
+++ b/player/js/elements/canvasElements/CVContextData.js
@@ -74,6 +74,7 @@
arr[i] = transform[i];
}
if (forceRestore) {
+ this.nativeContext.restore();
var prevStack = this.stack[this.cArrPos + 1];
this.appliedFillStyle = prevStack.fillStyle;
this.appliedStrokeStyle = prevStack.strokeStyle;
@@ -95,7 +96,10 @@
this.currentMiterLimit = currentContext.miterLimit;
};
-CVContextData.prototype.save = function () {
+CVContextData.prototype.save = function (saveOnNativeFlag) {
+ if (saveOnNativeFlag) {
+ this.nativeContext.save();
+ }
var props = this.cTr.props;
if (this._length <= this.cArrPos) {
this.duplicate();
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 231d06f..0a7c988 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -36,6 +36,20 @@
this.transformMat = new Matrix();
this.completeLayers = false;
this.rendererType = 'canvas';
+ if (this.renderConfig.clearCanvas) {
+ this.ctxTransform = this.contextData.transform.bind(this.contextData);
+ this.ctxOpacity = this.contextData.opacity.bind(this.contextData);
+ this.ctxFillStyle = this.contextData.fillStyle.bind(this.contextData);
+ this.ctxStrokeStyle = this.contextData.strokeStyle.bind(this.contextData);
+ this.ctxLineWidth = this.contextData.lineWidth.bind(this.contextData);
+ this.ctxLineCap = this.contextData.lineCap.bind(this.contextData);
+ this.ctxLineJoin = this.contextData.lineJoin.bind(this.contextData);
+ this.ctxMiterLimit = this.contextData.miterLimit.bind(this.contextData);
+ this.ctxFill = this.contextData.fill.bind(this.contextData);
+ this.ctxFillRect = this.contextData.fillRect.bind(this.contextData);
+ this.ctxStroke = this.contextData.stroke.bind(this.contextData);
+ this.save = this.contextData.save.bind(this.contextData);
+ }
}
extendPrototype([CanvasRendererBase], CanvasRenderer);
diff --git a/player/js/renderers/CanvasRendererBase.js b/player/js/renderers/CanvasRendererBase.js
index 0b2f99c..dd199f5 100644
--- a/player/js/renderers/CanvasRendererBase.js
+++ b/player/js/renderers/CanvasRendererBase.js
@@ -6,43 +6,13 @@
} from '../utils/helpers/arrays';
import createTag from '../utils/helpers/html_elements';
import SVGRenderer from './SVGRenderer';
-import Matrix from '../3rd_party/transformation-matrix';
import BaseRenderer from './BaseRenderer';
-import CVContextData from '../elements/canvasElements/CVContextData';
import CVShapeElement from '../elements/canvasElements/CVShapeElement';
import CVTextElement from '../elements/canvasElements/CVTextElement';
import CVImageElement from '../elements/canvasElements/CVImageElement';
import CVSolidElement from '../elements/canvasElements/CVSolidElement';
-function CanvasRendererBase(animationItem, config) {
- this.animationItem = animationItem;
- this.renderConfig = {
- clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
- context: (config && config.context) || null,
- progressiveLoad: (config && config.progressiveLoad) || false,
- preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
- imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
- contentVisibility: (config && config.contentVisibility) || 'visible',
- className: (config && config.className) || '',
- id: (config && config.id) || '',
- };
- this.renderConfig.dpr = (config && config.dpr) || 1;
- if (this.animationItem.wrapper) {
- this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
- }
- this.renderedFrame = -1;
- this.globalData = {
- frameNum: -1,
- _mdf: false,
- renderConfig: this.renderConfig,
- currentGlobalAlpha: -1,
- };
- this.contextData = new CVContextData();
- this.elements = [];
- this.pendingElements = [];
- this.transformMat = new Matrix();
- this.completeLayers = false;
- this.rendererType = 'canvas';
+function CanvasRendererBase() {
}
extendPrototype([BaseRenderer], CanvasRendererBase);
@@ -68,94 +38,47 @@
if (props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0) {
return;
}
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);
- return;
- }
- this.contextData.transform(props);
+ this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);
};
CanvasRendererBase.prototype.ctxOpacity = function (op) {
- /* if(op === 1){
- return;
- } */
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
- return;
- }
- this.contextData.opacity(op);
+ this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
};
CanvasRendererBase.prototype.ctxFillStyle = function (value) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.fillStyle = value;
- return;
- }
- this.contextData.fillStyle(value);
+ this.canvasContext.fillStyle = value;
};
CanvasRendererBase.prototype.ctxStrokeStyle = function (value) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.strokeStyle = value;
- return;
- }
- this.contextData.strokeStyle(value);
+ this.canvasContext.strokeStyle = value;
};
CanvasRendererBase.prototype.ctxLineWidth = function (value) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.lineWidth = value;
- return;
- }
- this.contextData.lineWidth(value);
+ this.canvasContext.lineWidth = value;
};
CanvasRendererBase.prototype.ctxLineCap = function (value) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.lineCap = value;
- return;
- }
- this.contextData.lineCap(value);
+ this.canvasContext.lineCap = value;
};
CanvasRendererBase.prototype.ctxLineJoin = function (value) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.lineJoin = value;
- return;
- }
- this.contextData.lineJoin(value);
+ this.canvasContext.lineJoin = value;
};
CanvasRendererBase.prototype.ctxMiterLimit = function (value) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.miterLimit = value;
- return;
- }
- this.contextData.miterLimit(value);
+ this.canvasContext.miterLimit = value;
};
CanvasRendererBase.prototype.ctxFill = function (rule) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.fill(rule);
- return;
- }
- this.contextData.fill(rule);
+ this.canvasContext.fill(rule);
};
CanvasRendererBase.prototype.ctxFillRect = function (x, y, w, h) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.fillRect(x, y, w, h);
- return;
- }
- this.contextData.fillRect(x, y, w, h);
+ this.canvasContext.fillRect(x, y, w, h);
};
CanvasRendererBase.prototype.ctxStroke = function () {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.stroke();
- return;
- }
- this.contextData.stroke();
+ this.canvasContext.stroke();
};
CanvasRendererBase.prototype.reset = function () {
@@ -166,15 +89,8 @@
this.contextData.reset();
};
-CanvasRendererBase.prototype.save = function (actionFlag) {
- if (!this.renderConfig.clearCanvas) {
- this.canvasContext.save();
- return;
- }
- if (actionFlag) {
- this.canvasContext.save();
- }
- this.contextData.save();
+CanvasRendererBase.prototype.save = function () {
+ this.canvasContext.save();
};
CanvasRendererBase.prototype.restore = function (actionFlag) {
@@ -183,7 +99,6 @@
return;
}
if (actionFlag) {
- this.canvasContext.restore();
this.globalData.blendMode = 'source-over';
}
this.contextData.restore(actionFlag);
