scaling comps on resizing
diff --git a/player/index.html b/player/index.html
index e4b8ea0..3c98412 100644
--- a/player/index.html
+++ b/player/index.html
@@ -10,8 +10,8 @@
}
#bodymovin{
background-color:#000;
- width:1820px;
- height:275px;
+ width:909px;
+ height:500px;
/*width:800px;
height:500px;*/
display:block;
@@ -111,20 +111,16 @@
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'canvas',
- loop: true,
- prerender: false,
- autoplay: false,
+ loop: false,
+ autoplay: true,
autoloadSegments: true,
//animationData: anim2
- path: 'exports/bm/data.json'
+ path: 'exports/render/data.json'
};
var anim;
anim = bodymovin.loadAnimation(animData);
- setTimeout(function(){
- anim.play();
- },1000);
diff --git a/player/js/elements/canvasElements/CVCompElement.js b/player/js/elements/canvasElements/CVCompElement.js
index 3f392a9..a64a524 100644
--- a/player/js/elements/canvasElements/CVCompElement.js
+++ b/player/js/elements/canvasElements/CVCompElement.js
@@ -26,6 +26,7 @@
this.transformMat = new Matrix();
this.parentGlobalData = this.globalData;
var cv = document.createElement('canvas');
+ //document.body.appendChild(cv);
compGlobalData.canvasContext = cv.getContext('2d');
this.canvasContext = compGlobalData.canvasContext;
cv.width = this.data.w;
@@ -43,6 +44,28 @@
CVCompElement.prototype.ctxOpacity = CanvasRenderer.prototype.ctxOpacity;
CVCompElement.prototype.save = CanvasRenderer.prototype.save;
CVCompElement.prototype.restore = CanvasRenderer.prototype.restore;
+CVCompElement.prototype.reset = function(){
+ this.contextData.cArrPos = 0;
+ this.contextData.cTr.reset();
+ this.contextData.cO = 1;
+};
+CVCompElement.prototype.resize = function(transformCanvas){
+ var maxScale = Math.max(transformCanvas.sx,transformCanvas.sy);
+ this.canvas.width = this.data.w*maxScale;
+ this.canvas.height = this.data.h*maxScale;
+ this.transformCanvas = {
+ sc:maxScale,
+ w:this.data.w*maxScale,
+ h:this.data.h*maxScale,
+ props:[maxScale,0,0,0,0,maxScale,0,0,0,0,1,0,0,0,0,1]
+ }
+ var i,len = this.elements.length;
+ for( i = 0; i < len; i+=1 ){
+ if(this.elements[i].data.ty === 0){
+ this.elements[i].resize(transformCanvas);
+ }
+ }
+};
CVCompElement.prototype.prepareFrame = function(num){
this.globalData.frameId = this.parentGlobalData.frameId;
@@ -68,6 +91,7 @@
}
if(this.globalData.mdf){
this.canvasContext.clearRect(0, 0, this.data.w, this.data.h);
+ this.ctxTransform(this.transformCanvas.props);
}
};
@@ -80,18 +104,22 @@
for( i = len - 1; i >= 0; i -= 1 ){
this.elements[i].renderFrame();
}
- if(this.data.hasMask){
- this.globalData.renderer.restore(true);
- }
+ }
+ if(this.data.hasMask){
+ this.globalData.renderer.restore(true);
}
if(this.firstFrame){
this.firstFrame = false;
}
- this.parentGlobalData.renderer.save(true);
+ this.parentGlobalData.renderer.save();
this.parentGlobalData.renderer.ctxTransform(this.finalTransform.mat.props);
this.parentGlobalData.renderer.ctxOpacity(this.finalTransform.opacity);
- this.parentGlobalData.renderer.canvasContext.drawImage(this.canvas,0,0);
- this.parentGlobalData.renderer.restore(true);
+ this.parentGlobalData.renderer.canvasContext.drawImage(this.canvas,0,0,this.data.w,this.data.h);
+ this.parentGlobalData.renderer.restore();
+
+ if(this.globalData.mdf){
+ this.reset();
+ }
};
CVCompElement.prototype.setElements = function(elems){
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index d23d663..04d283e 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -224,7 +224,6 @@
this.transformCanvas = {};
this.transformCanvas.w = animData.w;
this.transformCanvas.h = animData.h;
- this.updateContainerSize();
this.globalData.fontManager = new FontManager();
this.globalData.fontManager.addChars(animData.chars);
this.globalData.fontManager.addFonts(animData.fonts,document);
@@ -262,6 +261,12 @@
this.transformCanvas.ty = 0;
}
this.transformCanvas.props = [this.transformCanvas.sx,0,0,0,0,this.transformCanvas.sy,0,0,0,0,1,0,this.transformCanvas.tx,this.transformCanvas.ty,0,1];
+ var i, len = this.elements.length;
+ for(i=0;i<len;i+=1){
+ if(this.elements[i].data.ty === 0){
+ this.elements[i].resize(this.transformCanvas);
+ }
+ }
};
CanvasRenderer.prototype.buildStage = function (container, layers, elements) {
@@ -278,6 +283,7 @@
this.buildStage(null, layerData.layers, elements[i].getElements());
}
}
+ this.updateContainerSize();
};
CanvasRenderer.prototype.buildItemHierarchy = function (data,element, layers, parentName,elements,resetHierarchyFlag) {
@@ -321,7 +327,7 @@
this.reset();
this.canvasContext.save();
//this.canvasContext.canvas.width = this.canvasContext.canvas.width;
- this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
+ this.canvasContext.clearRect(this.transformCanvas.tx, this.transformCanvas.ty, this.transformCanvas.w*this.transformCanvas.sx, this.transformCanvas.h*this.transformCanvas.sy);
}else{
this.save();
}
diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index bb37759..1c7b562 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js
@@ -1,4 +1,4 @@
-var subframeEnabled = true;
+var subframeEnabled = false;
var expressionsPlugin;
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var cachedColors = {};
