reverse non closed shapes fix
diff --git a/extension/jsx/utils/shapeHelper.jsx b/extension/jsx/utils/shapeHelper.jsx
index fb32f8d..c49ee2b 100644
--- a/extension/jsx/utils/shapeHelper.jsx
+++ b/extension/jsx/utils/shapeHelper.jsx
@@ -37,16 +37,21 @@
}
}
- function reverseShape(ks) {
+ function reverseShape(ks, isClosed) {
var newI = [], newO = [], newV = [];
var i, len;
if (ks.i) {
- newI[0] = ks.o[0];
- newO[0] = ks.i[0];
- newV[0] = ks.v[0];
+ var init = 0;
+ if (isClosed) {
+ newI[0] = ks.o[0];
+ newO[0] = ks.i[0];
+ newV[0] = ks.v[0];
+ init = 1;
+ }
len = ks.i.length;
var cnt = len - 1;
- for (i = 1; i < len; i += 1) {
+
+ for (i = init; i < len; i += 1) {
newI.push(ks.o[cnt]);
newO.push(ks.i[cnt]);
newV.push(ks.v[cnt]);
@@ -59,8 +64,8 @@
} else {
len = ks.length;
for (i = 0; i < len - 1; i += 1) {
- reverseShape(ks[i].s[0]);
- reverseShape(ks[i].e[0]);
+ reverseShape(ks[i].s[0], isClosed);
+ reverseShape(ks[i].e[0], isClosed);
}
}
}
@@ -77,7 +82,7 @@
ob.closed = prop.property('Path').value.closed;
ob.ks = bm_keyframeHelper.exportKeyframes(prop.property('Path'), frameRate);
if (prop.property("Shape Direction").value === 3) {
- reverseShape(ob.ks);
+ reverseShape(ob.ks, ob.closed);
}
array.push(ob);
} else if (itemType === shapeItemTypes.rect) {
diff --git a/player/index.html b/player/index.html
index c90b7fe..35bc255 100644
--- a/player/index.html
+++ b/player/index.html
@@ -40,7 +40,7 @@
<body style="background-color:#ccc; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
<!-- <div style="width:1350px;height:650px;background-color:#faf5d3;display:inline-block;" class="bodymovin" data-bm-path="exports/render/" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div> -->
-<div style="width:1500px;height:700px;background-color:#333;display:inline-block;" id="bodymovin"></div>
+<div style="width:800px;height:800px;background-color:#333;display:inline-block;" id="bodymovin"></div>
<script>
@@ -55,13 +55,13 @@
var animData = {
wrapper: document.getElementById('bodymovin'),
animType: 'svg',
- loop: 1,
+ loop: true,
prerender: false,
autoplay: true,
path: 'exports/render'
};
- bodymovin.setQuality(100);
+ bodymovin.setQuality(50);
var anim = bodymovin.loadAnimation(animData);
anim.addEventListener('bm:config_ready', configReady);
anim.addEventListener('bm:data_ready', dataReady);
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 71c685d..f752f5b 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -203,8 +203,8 @@
this.assets = this.animationData.assets;
this.frameRate = this.animationData.fr;
this.firstFrame = Math.round(this.animationData.ip*this.frameRate);
- this.firstFrame = 39;
- this.totalFrames = 2;
+ /*this.firstFrame = 25;
+ this.totalFrames = 1;*/
this.frameMult = this.animationData.fr / 1000;
this.trigger('bm:config_ready');
this.loadSegments();
diff --git a/player/js/elements/ShapeItemElement.js b/player/js/elements/ShapeItemElement.js
index fff273b..3d38fc5 100644
--- a/player/js/elements/ShapeItemElement.js
+++ b/player/js/elements/ShapeItemElement.js
@@ -180,7 +180,7 @@
}else if(items[i].ty == 'fl'){
this.renderFill(items[i],data[i],num,groupTransform);
}else if(items[i].ty == 'st'){
- this.renderStroke(items[i],data[i],num);
+ this.renderStroke(items[i],data[i],num,groupTransform);
}else if(items[i].ty == 'gr'){
this.renderShape(num,groupTransform,items[i].it,data[i].it);
}else if(items[i].ty == 'tm'){
@@ -213,77 +213,75 @@
if(!viewData.renderedFrames[this.globalData.frameNum]){
var pathNodes = pathData.renderedData[num].path.pathNodes;
- if(!pathNodes.v){
- return;
- }
- len = pathNodes.v.length;
- var stops = pathNodes.s ? pathNodes.s : [];
+ var t = '';
var pathStringTransformed = '';
var pathStringNonTransformed = '';
- for(i=1;i<len;i+=1){
- if(stops[i-1]){
- if(viewData.st){
- pathStringNonTransformed += " M"+bm_rnd(stops[i-1][0])+','+bm_rnd(stops[i-1][1]);
+ if(pathNodes.v){
+ len = pathNodes.v.length;
+ var stops = pathNodes.s ? pathNodes.s : [];
+ for(i=1;i<len;i+=1){
+ if(stops[i-1]){
+ if(viewData.st){
+ pathStringNonTransformed += " M"+bm_rnd(stops[i-1][0])+','+bm_rnd(stops[i-1][1]);
+ }
+ if(viewData.fl) {
+ pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(stops[i - 1][0], stops[i - 1][1]);
+ }
+ }else if(i==1){
+ if(viewData.st) {
+ pathStringNonTransformed += " M" + bm_rnd(pathNodes.v[0][0]) + ',' + bm_rnd(pathNodes.v[0][1]);
+ }
+
+ if(viewData.fl) {
+ pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
+ }
}
- if(viewData.fl) {
- pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(stops[i - 1][0], stops[i - 1][1]);
- }
- }else if(i==1){
if(viewData.st) {
- pathStringNonTransformed += " M" + bm_rnd(pathNodes.v[0][0]) + ',' + bm_rnd(pathNodes.v[0][1]);
+ pathStringNonTransformed += " C" + bm_rnd(pathNodes.o[i - 1][0]) + ',' + bm_rnd(pathNodes.o[i - 1][1]) + " " + bm_rnd(pathNodes.i[i][0]) + ',' + bm_rnd(pathNodes.i[i][1]) + " " + bm_rnd(pathNodes.v[i][0]) + ',' + bm_rnd(pathNodes.v[i][1]);
}
if(viewData.fl) {
- pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
+ pathStringTransformed += " C" + groupTransform.mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.i[i][0], pathNodes.i[i][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.v[i][0], pathNodes.v[i][1]);
+ }
+ }
+ if(len == 1){
+ if(stops[0]){
+ if(viewData.st) {
+ pathStringNonTransformed += " M" + bm_rnd(stops[0][0]) + ',' + bm_rnd(stops[0][1]);
+ }
+
+ if(viewData.fl) {
+ pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(stops[0][0], stops[0][1]);
+ }
+ }else{
+
+ if(viewData.st) {
+ pathStringNonTransformed += " M" + bm_rnd(pathNodes.v[0][0]) + ',' + bm_rnd(pathNodes.v[0][1]);
+ }
+
+ if(viewData.fl) {
+ pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
+ }
+ }
+ }
+ if(pathData.closed && !(pathData.trimmed && !pathNodes.c)){
+ if(viewData.st) {
+ pathStringNonTransformed += " C" + bm_rnd(pathNodes.o[i - 1][0]) + ',' + bm_rnd(pathNodes.o[i - 1][1]) + " " + bm_rnd(pathNodes.i[0][0]) + ',' + bm_rnd(pathNodes.i[0][1]) + " " + bm_rnd(pathNodes.v[0][0]) + ',' + bm_rnd(pathNodes.v[0][1]);
+ }
+
+ if(viewData.fl) {
+ pathStringTransformed += " C" + groupTransform.mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.i[0][0], pathNodes.i[0][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
}
}
if(viewData.st) {
- pathStringNonTransformed += " C" + bm_rnd(pathNodes.o[i - 1][0]) + ',' + bm_rnd(pathNodes.o[i - 1][1]) + " " + bm_rnd(pathNodes.i[i][0]) + ',' + bm_rnd(pathNodes.i[i][1]) + " " + bm_rnd(pathNodes.v[i][0]) + ',' + bm_rnd(pathNodes.v[i][1]);
+ t = 'matrix(' + groupTransform.mat.props.join(',') + ')';
}
-
- if(viewData.fl) {
- pathStringTransformed += " C" + groupTransform.mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.i[i][0], pathNodes.i[i][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.v[i][0], pathNodes.v[i][1]);
- }
- }
- if(len == 1){
- if(stops[0]){
- if(viewData.st) {
- pathStringNonTransformed += " M" + bm_rnd(stops[0][0]) + ',' + bm_rnd(stops[0][1]);
- }
-
- if(viewData.fl) {
- pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(stops[0][0], stops[0][1]);
- }
- }else{
-
- if(viewData.st) {
- pathStringNonTransformed += " M" + bm_rnd(pathNodes.v[0][0]) + ',' + bm_rnd(pathNodes.v[0][1]);
- }
-
- if(viewData.fl) {
- pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
- }
- }
- }
- if(pathData.closed && !(pathData.trimmed && !pathNodes.c)){
- if(viewData.st) {
- pathStringNonTransformed += " C" + bm_rnd(pathNodes.o[i - 1][0]) + ',' + bm_rnd(pathNodes.o[i - 1][1]) + " " + bm_rnd(pathNodes.i[0][0]) + ',' + bm_rnd(pathNodes.i[0][1]) + " " + bm_rnd(pathNodes.v[0][0]) + ',' + bm_rnd(pathNodes.v[0][1]);
- }
-
- if(viewData.fl) {
- pathStringTransformed += " C" + groupTransform.mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.i[0][0], pathNodes.i[0][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
- }
- }
- var t;
- if(viewData.st) {
- t = 'matrix(' + groupTransform.mat.props.join(',') + ')';
}
viewData.renderedFrames[this.globalData.frameNum] = {
dTr: pathStringTransformed,
dNTr: pathStringNonTransformed,
- t: t,
- o: groupTransform.opacity
+ t: t
};
}
var renderedFrameData = viewData.renderedFrames[this.globalData.frameNum];
@@ -298,14 +296,8 @@
viewData.elements[i].el.setAttribute('transform',renderedFrameData.t);
viewData.lt = renderedFrameData.t;
}
- if(viewData.lo != renderedFrameData.o) {
- viewData.elements[i].el.setAttribute('opacity',renderedFrameData.o);
- viewData.lo = renderedFrameData.o;
- }
}else{
- if(renderedFrameData.o !== 0){
- viewData.elements[i].st.d += renderedFrameData.dTr;
- }
+ viewData.elements[i].st.d += renderedFrameData.dTr;
}
}
};
@@ -337,17 +329,17 @@
}
};
-ShapeItemElement.prototype.renderStroke = function(styleData,viewData,num){
+ShapeItemElement.prototype.renderStroke = function(styleData,viewData,num, groupTransform){
var fillData = styleData.renderedData[num];
var styleElem = viewData.style;
if(!viewData.renderedFrames[this.globalData.frameNum]){
- if(viewData._ld && viewData._ld.c === fillData.color && viewData._ld.o === fillData.opacity && viewData._ld.w === fillData.width){
+ if(viewData._ld && viewData._ld.c === fillData.color && viewData._ld.o === fillData.opacity*groupTransform.opacity && viewData._ld.w === fillData.width){
viewData.renderedFrames[this.globalData.frameNum] = viewData._ld;
return;
}else{
viewData._ld = {
c: fillData.color,
- o: fillData.opacity,
+ o: fillData.opacity*groupTransform.opacity,
w: fillData.width
};
viewData.renderedFrames[this.globalData.frameNum] = viewData._ld;
