Merge branch 'master' of github.com:bodymovin/bodymovin
diff --git a/player/index.html b/player/index.html
index 6cbc59b..4455714 100644
--- a/player/index.html
+++ b/player/index.html
@@ -12,7 +12,7 @@
}
#lottie{
- background-color:#ccc;
+ background-color:#333;
width:100%;
height:100%;
/*width:600px;
@@ -195,10 +195,11 @@
var animData = {
container: elem,
renderer: 'svg',
- loop: true,
+ loop: false,
autoplay: true,
rendererSettings: {
- progressiveLoad:true,
+ progressiveLoad:false,
+ imagePreserveAspectRatio: 'xMidYMid meet'
},
path: 'exports/render/data.json'
};
diff --git a/player/js/elements/ImageElement.js b/player/js/elements/ImageElement.js
index b2e5a43..e19a874 100644
--- a/player/js/elements/ImageElement.js
+++ b/player/js/elements/ImageElement.js
@@ -12,7 +12,7 @@
this.innerElem = createNS('image');
this.innerElem.setAttribute('width',this.assetData.w+"px");
this.innerElem.setAttribute('height',this.assetData.h+"px");
- this.innerElem.setAttribute('preserveAspectRatio','xMidYMid slice');
+ this.innerElem.setAttribute('preserveAspectRatio',this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);
this.layerElement.appendChild(this.innerElem);
diff --git a/player/js/elements/canvasElements/CVImageElement.js b/player/js/elements/canvasElements/CVImageElement.js
index 34be00d..e5b63a8 100644
--- a/player/js/elements/canvasElements/CVImageElement.js
+++ b/player/js/elements/canvasElements/CVImageElement.js
@@ -24,7 +24,8 @@
var imgRel = imgW / imgH;
var canvasRel = this.assetData.w/this.assetData.h;
var widthCrop, heightCrop;
- if(imgRel>canvasRel){
+ var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;
+ if((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) {
heightCrop = imgH;
widthCrop = heightCrop*canvasRel;
} else {
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 64e2e9f..6c273dc 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -5,6 +5,7 @@
context: (config && config.context) || null,
progressiveLoad: (config && config.progressiveLoad) || false,
preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
+ imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
className: (config && config.className) || ''
};
this.renderConfig.dpr = (config && config.dpr) || 1;
diff --git a/player/js/renderers/HybridRenderer.js b/player/js/renderers/HybridRenderer.js
index dc94178..77b2bd8 100644
--- a/player/js/renderers/HybridRenderer.js
+++ b/player/js/renderers/HybridRenderer.js
@@ -4,6 +4,7 @@
this.renderedFrame = -1;
this.renderConfig = {
className: (config && config.className) || '',
+ imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true
};
this.globalData = {
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 3d78834..090efbb 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -10,6 +10,7 @@
this.layerElement = maskElement;
this.renderConfig = {
preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
+ imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
progressiveLoad: (config && config.progressiveLoad) || false,
hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
viewBoxOnly: (config && config.viewBoxOnly) || false,
