star and polygon
diff --git a/build/player/bodymovin.js b/build/player/bodymovin.js index 3080706..3c9880b 100644 --- a/build/player/bodymovin.js +++ b/build/player/bodymovin.js Binary files differ
diff --git a/extension/jsx/utils/PropertyFactory.jsx b/extension/jsx/utils/PropertyFactory.jsx index 0629e7b..8f03301 100644 --- a/extension/jsx/utils/PropertyFactory.jsx +++ b/extension/jsx/utils/PropertyFactory.jsx
@@ -79,7 +79,7 @@ } } break; - } else if (distanceInLine > addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) { + } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) { segmentPerc = (distanceInLine - addedLength) / (bezierData.points[j + 1].partialLength); kLen = bezierData.points[j].point.length; for (k = 0; k < kLen; k += 1) { @@ -690,6 +690,139 @@ } } }()); + + var StarShapeProperty = (function() { + + function convertPolygonToPath(){ + var numPts = Math.floor(this.pt.v); + var angle = Math.PI*2/numPts; + this.v.v.length = numPts; + this.v.i.length = numPts; + this.v.o.length = numPts; + var rad = this.or.v; + var roundness = this.os.v; + var perimSegment = 2*Math.PI*rad/(numPts*4); + var i, currentAng = -Math.PI/ 2; + var dir = this.data.d === 3 ? -1 : 1; + currentAng += this.r.v; + for(i=0;i<numPts;i+=1){ + var x = rad * Math.cos(currentAng); + var y = rad * Math.sin(currentAng); + var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y); + var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y); + x += + this.p.v[0]; + y += + this.p.v[1]; + this.v.v[i] = [x,y]; + this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir]; + this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir]; + currentAng += angle*dir; + } + this.numNodes = numPts; + } + + function convertStarToPath() { + var numPts = Math.floor(this.pt.v)*2; + var angle = Math.PI*2/numPts; + this.v.v.length = numPts; + this.v.i.length = numPts; + this.v.o.length = numPts; + var longFlag = true; + var longRad = this.or.v; + var shortRad = this.ir.v; + var longRound = this.os.v; + var shortRound = this.is.v; + var longPerimSegment = 2*Math.PI*longRad/(numPts*2); + var shortPerimSegment = 2*Math.PI*shortRad/(numPts*2); + var i, rad,roundness,perimSegment, currentAng = -Math.PI/ 2; + currentAng += this.r.v; + var dir = this.data.d === 3 ? -1 : 1; + for(i=0;i<numPts;i+=1){ + rad = longFlag ? longRad : shortRad; + roundness = longFlag ? longRound : shortRound; + perimSegment = longFlag ? longPerimSegment : shortPerimSegment; + var x = rad * Math.cos(currentAng); + var y = rad * Math.sin(currentAng); + var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y); + var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y); + x += + this.p.v[0]; + y += + this.p.v[1]; + this.v.v[i] = [x,y]; + this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir]; + this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir]; + longFlag = !longFlag; + currentAng += angle*dir; + } + this.numNodes = numPts; + } + + function processKeys() { + if(this.elem.globalData.frameId === this.frameId){ + return; + } + this.mdf = false; + this.frameId = this.elem.globalData.frameId; + var i, len = this.dynamicProperties.length; + + for(i=0;i<len;i+=1){ + this.dynamicProperties[i].getValue(); + if(this.dynamicProperties[i].mdf){ + this.mdf = true; + } + } + if(this.mdf){ + this.convertToPath(); + } + } + + function getKeys(arr){ + this.pt.getKeys(arr); + this.p.getKeys(arr); + this.r.getKeys(arr); + this.or.getKeys(arr); + this.os.getKeys(arr); + if(this.data.sy === 1){ + this.ir.getKeys(arr); + this.is.getKeys(arr); + } + } + + return function StarShapeProperty(elem,data) { + this.v = { + v: [], + i: [], + o: [], + c: true + }; + this.elem = elem; + this.comp = elem.comp; + this.data = data; + this.frameId = -1; + this.d = data.d; + this.dynamicProperties = []; + this.mdf = false; + data.closed = true; + this.closed = true; + this.getValue = processKeys; + if(data.sy === 1){ + this.ir = getProp(elem,data.ir,0,0,this.dynamicProperties); + this.is = getProp(elem,data.is,0,0.01,this.dynamicProperties); + this.convertToPath = convertStarToPath; + } else { + this.convertToPath = convertPolygonToPath; + } + this.getKeys = getKeys; + this.pt = getProp(elem,data.pt,0,0,this.dynamicProperties); + this.p = getProp(elem,data.p,1,0,this.dynamicProperties); + this.r = getProp(elem,data.r,0,degToRads,this.dynamicProperties); + this.or = getProp(elem,data.or,0,0,this.dynamicProperties); + this.os = getProp(elem,data.os,0,0.01,this.dynamicProperties); + if(this.dynamicProperties.length){ + this.k = true; + }else{ + this.convertToPath(); + } + } + }()); function getShapeProp(elem,data,type, arr, trims){ var prop; @@ -704,6 +837,8 @@ prop = new RectShapeProperty(elem, data); }else if(type === 6){ prop = new EllShapeProperty(elem, data); + }else if(type === 7){ + prop = new StarShapeProperty(elem, data); } var hasTrims = false; if(trims){
diff --git a/extension/jsx/utils/shapeHelper.jsx b/extension/jsx/utils/shapeHelper.jsx index 73d15e4..05125c0 100644 --- a/extension/jsx/utils/shapeHelper.jsx +++ b/extension/jsx/utils/shapeHelper.jsx
@@ -6,6 +6,7 @@ shape: 'sh', rect: 'rc', ellipse: 'el', + star: 'sr', fill: 'fl', stroke: 'st', merge: 'mm', @@ -14,9 +15,12 @@ }; function getItemType(matchName) { + bm_eventDispatcher.log(matchName); switch (matchName) { case 'ADBE Vector Shape - Group': return shapeItemTypes.shape; + case 'ADBE Vector Shape - Star': + return shapeItemTypes.star; case 'ADBE Vector Shape - Rect': return shapeItemTypes.rect; case 'ADBE Vector Shape - Ellipse': @@ -97,6 +101,21 @@ ob.s = bm_keyframeHelper.exportKeyframes(prop.property('Size'), frameRate); ob.p = bm_keyframeHelper.exportKeyframes(prop.property('Position'), frameRate); ob.r = bm_keyframeHelper.exportKeyframes(prop.property('Roundness'), frameRate); + } else if(itemType === shapeItemTypes.star && !isText) { + ob = {}; + bm_generalUtils.iterateProperty(prop); + ob.ty = itemType; + ob.sy = prop.property("Type").value; + ob.d = prop.property("Shape Direction").value; + ob.pt = bm_keyframeHelper.exportKeyframes(prop.property('Points'), frameRate); + ob.p = bm_keyframeHelper.exportKeyframes(prop.property('Position'), frameRate); + ob.r = bm_keyframeHelper.exportKeyframes(prop.property('Rotation'), frameRate); + if(ob.sy === 1) { + ob.ir = bm_keyframeHelper.exportKeyframes(prop.property('Inner Radius'), frameRate); + ob.is = bm_keyframeHelper.exportKeyframes(prop.property('Inner Roundness'), frameRate); + } + ob.or = bm_keyframeHelper.exportKeyframes(prop.property('Outer Radius'), frameRate); + ob.os = bm_keyframeHelper.exportKeyframes(prop.property('Outer Roundness'), frameRate); } else if (itemType === shapeItemTypes.ellipse) { ob = {}; ob.d = prop.property("Shape Direction").value; @@ -262,6 +281,8 @@ shapeProp = PropertyFactory.getShapeProp(data, shapeData, 5, [], []); } else if (shapeData.ty === 'el') { shapeProp = PropertyFactory.getShapeProp(data, shapeData, 6, [], []); + } else if (shapeData.ty === 'sr') { + shapeProp = PropertyFactory.getShapeProp(data, shapeData, 7, [], []); } shapeProp.getKeys(arr); var j, jLen = arr.length, matr = new Matrix(); @@ -321,7 +342,7 @@ matr = matr.concat(matrices); strk = strk.concat(strokes); for (i = len - 1; i >= 0; i -= 1) { - if (arr[i].ty === 'sh' || arr[i].ty === 'el' || arr[i].ty === 'rc') { + if (arr[i].ty === 'sh' || arr[i].ty === 'el' || arr[i].ty === 'rc' || arr[i].ty === 'sr') { setBounds(arr[i], bounds, matr, strk, data); } else if (arr[i].ty === 'gr') { completeShapes(arr[i].it, bounds, matr, strk, data);
diff --git a/player/index.html b/player/index.html index 4c6f63b..7ccadeb 100644 --- a/player/index.html +++ b/player/index.html
@@ -60,14 +60,12 @@ <script src="js/elements/CompElement.js"></script> <script src="js/elements/ImageElement.js"></script> <script src="js/elements/ShapeElement.js"></script> - <script src="js/elements/ShapeItemElement.js"></script> <script src="js/elements/SolidElement.js"></script> <script src="js/elements/canvasElements/CVBaseElement.js"></script> <script src="js/elements/canvasElements/CVCompElement.js"></script> <script src="js/elements/canvasElements/CVImageElement.js"></script> <script src="js/elements/canvasElements/CVMaskElement.js"></script> <script src="js/elements/canvasElements/CVShapeElement.js"></script> - <script src="js/elements/canvasElements/CVShapeItemElement.js"></script> <script src="js/elements/canvasElements/CVSolidElement.js"></script> <script src="js/elements/canvasElements/CVTextElement.js"></script> <script src="js/elements/htmlElements/HBaseElement.js"></script>
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js index 7998cf5..2f65571 100644 --- a/player/js/animation/AnimationItem.js +++ b/player/js/animation/AnimationItem.js
@@ -219,7 +219,7 @@ this.firstFrame = Math.round(this.animationData.ip); this.frameMult = this.animationData.fr / 1000; /* - this.firstFrame = 0; + this.firstFrame = 25; this.totalFrames = 1; this.animationData.tf = 1; //this.frameMult = 1/100;
diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js index f172e3d..cc02e8b 100644 --- a/player/js/elements/ShapeElement.js +++ b/player/js/elements/ShapeElement.js
@@ -118,7 +118,7 @@ }, elements: [] }; - }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el'){ + }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){ data[i] = { elements : [], styles : [], @@ -129,6 +129,8 @@ ty = 5; }else if(arr[i].ty == 'el'){ ty = 6; + }else if(arr[i].ty == 'sr'){ + ty = 7; } if(addedTrims.length){ arr[i].trimmed = true; @@ -247,7 +249,7 @@ }else{ groupTransform.opacity = groupTransform.op.o; } - }else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc'){ + }else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr'){ this.renderPath(items[i],data[i],groupTransform); }else if(items[i].ty == 'fl'){ this.renderFill(items[i],data[i],groupTransform);
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js index 8040b99..d5da054 100644 --- a/player/js/elements/canvasElements/CVShapeElement.js +++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -84,7 +84,7 @@ }, elements: [] }; - }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el'){ + }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){ data[i] = { nodes:[], trNodes:[], @@ -95,6 +95,8 @@ ty = 5; }else if(arr[i].ty == 'el'){ ty = 6; + }else if(arr[i].ty == 'sr'){ + ty = 7; } if(addedTrims.length){ arr[i].trimmed = true; @@ -179,7 +181,7 @@ }else{ groupTransform.opacity = groupTransform.op.o; } - }else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc'){ + }else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr'){ this.renderPath(items[i],data[i],groupTransform); }else if(items[i].ty == 'fl'){ this.renderFill(items[i],data[i],groupTransform);
diff --git a/player/js/utils/PropertyFactory.js b/player/js/utils/PropertyFactory.js index feb334c..30a97ea 100644 --- a/player/js/utils/PropertyFactory.js +++ b/player/js/utils/PropertyFactory.js
@@ -80,7 +80,7 @@ } } break; - }else if(distanceInLine > addedLength && distanceInLine < addedLength + bezierData.points[j+1].partialLength){ + }else if(distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j+1].partialLength){ segmentPerc = (distanceInLine-addedLength)/(bezierData.points[j+1].partialLength); kLen = bezierData.points[j].point.length; for(k=0;k<kLen;k+=1){ @@ -103,10 +103,6 @@ } }else{ var outX,outY,inX,inY, isArray = false, keyValue; - if(!keyData.s){ - console.log(this.keyframes); - console.log(keyData); - } len = keyData.s.length; for(i=0;i<len;i+=1){ if(keyData.h !== 1){ @@ -328,7 +324,6 @@ } function KeyframedMultidimensionalProperty(elem, data, mult){ - console.log(data); var i, len = data.k.length; var s, e,to,ti; for(i=0;i<len-1;i+=1){ @@ -337,7 +332,8 @@ e = data.k[i].e; to = data.k[i].to; ti = data.k[i].ti; - if(bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],s[0] + to[0],s[1] + to[1],s[2] + to[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],e[0] + ti[0],e[1] + ti[1],e[2] + ti[2])){ + if((s.length == 2 && bez.pointOnLine2D(s[0],s[1],e[0],e[1],s[0] + to[0],s[1] + to[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],e[0] + ti[0],e[1] + ti[1])) || (bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],s[0] + to[0],s[1] + to[1],s[2] + to[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],e[0] + ti[0],e[1] + ti[1],e[2] + ti[2]))){ + data.k[i].to = null; data.k[i].ti = null; } @@ -544,6 +540,10 @@ return p; } + function getShapeValue(){ + return this.v; + } + function ShapeProperty(elem, data, type){ this.comp = elem.comp; this.k = false; @@ -552,6 +552,7 @@ this.numNodes = type === 3 ? data.pt.k.v.length : data.ks.k.v.length; this.v = type === 3 ? data.pt.k : data.ks.k; var shapeData = type === 3 ? data.pt : data.ks; + this.getValue = getShapeValue; this.pv = this.v; checkExpressions.bind(this)(elem,shapeData); } @@ -643,7 +644,7 @@ } } - return function(elem,data) { + return function EllShapeProperty(elem,data) { this.v = { v: new Array(4), i: new Array(4), @@ -671,6 +672,126 @@ } }()); + var StarShapeProperty = (function() { + + function convertPolygonToPath(){ + var numPts = Math.floor(this.pt.v); + var angle = Math.PI*2/numPts; + this.v.v.length = numPts; + this.v.i.length = numPts; + this.v.o.length = numPts; + var rad = this.or.v; + var roundness = this.os.v; + var perimSegment = 2*Math.PI*rad/(numPts*4); + var i, currentAng = -Math.PI/ 2; + var dir = this.data.d === 3 ? -1 : 1; + currentAng += this.r.v; + for(i=0;i<numPts;i+=1){ + var x = rad * Math.cos(currentAng); + var y = rad * Math.sin(currentAng); + var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y); + var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y); + x += + this.p.v[0]; + y += + this.p.v[1]; + this.v.v[i] = [x,y]; + this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir]; + this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir]; + currentAng += angle*dir; + } + this.numNodes = numPts; + } + + function convertStarToPath() { + var numPts = Math.floor(this.pt.v)*2; + var angle = Math.PI*2/numPts; + this.v.v.length = numPts; + this.v.i.length = numPts; + this.v.o.length = numPts; + var longFlag = true; + var longRad = this.or.v; + var shortRad = this.ir.v; + var longRound = this.os.v; + var shortRound = this.is.v; + var longPerimSegment = 2*Math.PI*longRad/(numPts*2); + var shortPerimSegment = 2*Math.PI*shortRad/(numPts*2); + var i, rad,roundness,perimSegment, currentAng = -Math.PI/ 2; + currentAng += this.r.v; + var dir = this.data.d === 3 ? -1 : 1; + for(i=0;i<numPts;i+=1){ + rad = longFlag ? longRad : shortRad; + roundness = longFlag ? longRound : shortRound; + perimSegment = longFlag ? longPerimSegment : shortPerimSegment; + var x = rad * Math.cos(currentAng); + var y = rad * Math.sin(currentAng); + var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y); + var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y); + x += + this.p.v[0]; + y += + this.p.v[1]; + this.v.v[i] = [x,y]; + this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir]; + this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir]; + longFlag = !longFlag; + currentAng += angle*dir; + } + this.numNodes = numPts; + } + + function processKeys() { + if(this.elem.globalData.frameId === this.frameId){ + return; + } + this.mdf = false; + this.frameId = this.elem.globalData.frameId; + var i, len = this.dynamicProperties.length; + + for(i=0;i<len;i+=1){ + this.dynamicProperties[i].getValue(); + if(this.dynamicProperties[i].mdf){ + this.mdf = true; + } + } + if(this.mdf){ + this.convertToPath(); + } + } + + return function StarShapeProperty(elem,data) { + this.v = { + v: [], + i: [], + o: [], + c: true + }; + this.elem = elem; + this.comp = elem.comp; + this.data = data; + this.frameId = -1; + this.d = data.d; + this.dynamicProperties = []; + this.mdf = false; + data.closed = true; + this.closed = true; + this.getValue = processKeys; + if(data.sy === 1){ + this.ir = getProp(elem,data.ir,0,0,this.dynamicProperties); + this.is = getProp(elem,data.is,0,0.01,this.dynamicProperties); + this.convertToPath = convertStarToPath; + } else { + this.convertToPath = convertPolygonToPath; + } + this.pt = getProp(elem,data.pt,0,0,this.dynamicProperties); + this.p = getProp(elem,data.p,1,0,this.dynamicProperties); + this.r = getProp(elem,data.r,0,degToRads,this.dynamicProperties); + this.or = getProp(elem,data.or,0,0,this.dynamicProperties); + this.os = getProp(elem,data.os,0,0.01,this.dynamicProperties); + if(this.dynamicProperties.length){ + this.k = true; + }else{ + this.convertToPath(); + } + } + }()); + var RectShapeProperty = (function() { function processKeys(frameNum){ if(this.elem.globalData.frameId === this.frameId){ @@ -766,7 +887,7 @@ } } - return function(elem,data) { + return function RectShapeProperty(elem,data) { this.v = { v: new Array(8), i: new Array(8), @@ -835,7 +956,7 @@ this.oValue = o; } } - return function(elem,data){ + return function TrimProperty(elem,data){ this.elem = elem; this.frameId = -1; this.dynamicProperties = []; @@ -1056,6 +1177,8 @@ prop = new RectShapeProperty(elem, data); }else if(type === 6){ prop = new EllShapeProperty(elem, data); + }else if(type === 7){ + prop = new StarShapeProperty(elem, data); } var hasTrims = false; if(trims){
diff --git a/player/js/utils/bez.js b/player/js/utils/bez.js index ad04cbb..a48abce 100644 --- a/player/js/utils/bez.js +++ b/player/js/utils/bez.js
@@ -4,22 +4,12 @@ var math = Math; function pointOnLine2D(x1,y1, x2,y2, x3,y3){ - return bm_abs(((x2 - x1) * (y3 - y1)) - ((x3 - x1) * (y2 - y1))) < 0.00001; + var det1 = (x1*y2) + (y1*x3) + (x2*y3) - (x3*y2) - (y3*x1) - (x2*y1); + return det1 > -0.0001 && det1 < 0.0001; } function pointOnLine3D(x1,y1,z1, x2,y2,z2, x3,y3,z3){ - /* x1 y1 1 x1 y1 - x2 y2 1 x2 y2 - x3 y3 1 x3 y3 - - x1 z1 1 - x2 z2 1 - x3 z3 1 - - */ - var det1 = (x1*y2) + (y1*x3) + (x2*y3) - (x3*y2) - (y3*x1) - (x2*y1); - var det2 = (x1*z2) + (z1*x3) + (x2*z3) - (x3*z2) - (z3*x1) - (x2*z1); - return det1 > -0.0001 && det1 < 0.00001 && det2 > -0.00001 && det2 < 0.00001; + return pointOnLine2D(x1,y1, x2,y2, x3,y3) && pointOnLine2D(x1,z1, x2,z2, x3,z3); } function getEasingCurve(aa,bb,cc,dd,encodedFuncName) { @@ -75,6 +65,7 @@ segments: [] }; if((pt1[0] != pt2[0] || pt1[1] != pt2[1]) && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt3[0],pt3[1]) && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt4[0],pt4[1])){ + console.log('asdasd'); curveSegments = 2; } len = pt3.length;