expansion fix
diff --git a/player/index.html b/player/index.html
index 4a97732..7a8076a 100644
--- a/player/index.html
+++ b/player/index.html
@@ -71,7 +71,7 @@
var animData = {
container: document.getElementById('bodymovin'),
- renderer: 'canvas',
+ renderer: 'svg',
loop: false,
prerender: false,
autoplay: true,
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 8d302d2..0200859 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -212,9 +212,9 @@
this.firstFrame = Math.round(this.animationData.ip);
this.frameMult = this.animationData.fr / 1000;
/*
- this.firstFrame = 187;
- this.totalFrames = 2;
- this.animationData.tf = 2;
+ this.firstFrame = 205;
+ this.totalFrames = 1;
+ this.animationData.tf = 1;
//this.frameMult = 10000/1000;
//*/////
this.trigger('config_ready');
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index a14d91b..26b3d20 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -91,3 +91,7 @@
return {w:this.data.width,h:this.data.height};
}
};
+
+BaseElement.prototype.mask = function(nm){
+ return this.maskManager.getMask(nm);
+}
diff --git a/player/js/elements/canvasElements/CVMaskElement.js b/player/js/elements/canvasElements/CVMaskElement.js
index c440cf0..1b58f40 100644
--- a/player/js/elements/canvasElements/CVMaskElement.js
+++ b/player/js/elements/canvasElements/CVMaskElement.js
@@ -59,6 +59,18 @@
}
};
+CVMaskElement.prototype.getMask = function(nm){
+ var i = 0, len = this.masksProperties.length;
+ while(i<len){
+ if(this.masksProperties[i].nm === nm){
+ return {
+ maskPath: this.viewData[i].pv
+ }
+ }
+ i += 1;
+ }
+};
+
CVMaskElement.prototype.destroy = function(){
this.ctx = null;
};
\ No newline at end of file
diff --git a/player/js/mask.js b/player/js/mask.js
index a623bbc..ed7b777 100644
--- a/player/js/mask.js
+++ b/player/js/mask.js
@@ -63,6 +63,9 @@
path.setAttribute('clip-rule','nonzero');
if(properties[i].x.k !== 0){
+ maskType = 'mask';
+ maskRef = 'mask';
+ var x = PropertyFactory.getProp(this.element,properties[i].x,0,null,this.dynamicProperties);
var filterID = 'fi_'+randomString(10);
expansor = document.createElementNS(svgNS,'filter');
expansor.setAttribute('id',filterID);
@@ -84,6 +87,7 @@
this.storedData[i] = {
elem: path,
+ x: x,
expan: feMorph,
lastPath: '',
lastOperator:'',
@@ -147,28 +151,25 @@
MaskElement.prototype.renderFrame = function () {
var i, len = this.masksProperties.length;
for (i = 0; i < len; i++) {
- if(this.masksProperties[i].mode !== 'n' && (this.viewData[i].prop.mdf || this.firstFrame)){
- this.drawPath(this.masksProperties[i],this.viewData[i].prop.v,this.viewData[i]);
- if(this.storedData[i].expan){
- feMorph = this.storedData[i].expan;
- if(this.masksProperties[i].expansion[num] < 0){
+ if(this.masksProperties[i].mode !== 'n'){
+ if(this.viewData[i].prop.mdf || this.firstFrame){
+ this.drawPath(this.masksProperties[i],this.viewData[i].prop.v,this.viewData[i]);
+ }
+ if(this.storedData[i].x && (this.storedData[i].x.mdf || this.firstFrame)){
+ var feMorph = this.storedData[i].expan;
+ if(this.storedData[i].x.v < 0){
if(this.storedData[i].lastOperator !== 'erode'){
this.storedData[i].lastOperator = 'erode';
this.storedData[i].elem.setAttribute('filter','url(#'+this.storedData[i].filterId+')');
}
- if(this.storedData[i].lastRadius !== this.masksProperties[i].expansion[num]){
- feMorph.setAttribute('radius',-this.masksProperties[i].expansion[num]);
- this.storedData[i].lastRadius = this.masksProperties[i].expansion[num];
- }
+ feMorph.setAttribute('radius',-this.storedData[i].x.v);
}else{
if(this.storedData[i].lastOperator !== 'dilate'){
this.storedData[i].lastOperator = 'dilate';
- this.storedData[i].elem.setAttribute('filter',null);;
+ this.storedData[i].elem.setAttribute('filter',null);
}
- if(this.storedData[i].lastRadius !== this.masksProperties[i].expansion[num]){
- this.storedData[i].elem.setAttribute('stroke-width', this.masksProperties[i].expansion[num]*2)
- this.storedData[i].lastRadius = this.masksProperties[i].expansion[num];
- }
+ console.log(this.storedData[i].x.v*2);
+ this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v*2);
}
}
@@ -220,6 +221,18 @@
}
};
+MaskElement.prototype.getMask = function(nm){
+ var i = 0, len = this.masksProperties.length;
+ while(i<len){
+ if(this.masksProperties[i].nm === nm){
+ return {
+ maskPath: this.viewData[i].prop.pv
+ }
+ }
+ i += 1;
+ }
+};
+
MaskElement.prototype.destroy = function(){
this.element = null;
this.globalData = null;
diff --git a/player/js/utils/PropertyFactory.js b/player/js/utils/PropertyFactory.js
index 508566c..49c965e 100644
--- a/player/js/utils/PropertyFactory.js
+++ b/player/js/utils/PropertyFactory.js
@@ -423,8 +423,9 @@
this.closed = type === 3 ? data.cl : data.closed;
this.numNodes = type === 3 ? data.pt.k.v : data.ks.k.v.length;
this.v = type === 3 ? data.pt.k : data.ks.k;
+ var shapeData = type === 3 ? data.pt : data.ks;
this.pv = this.v;
- checkExpressions.bind(this)(elem,data);
+ checkExpressions.bind(this)(elem,shapeData);
}
function KeyframedShapeProperty(elem,data,type){
