dashed lines partial
diff --git a/player/index.html b/player/index.html index 192279d..d5cc685 100644 --- a/player/index.html +++ b/player/index.html
@@ -36,6 +36,6 @@ <!-- endbuild --> </head> <body style="background-color:#666; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px"> -<div style="width:500px;height:500px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/letters/o2" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div> +<div style="width:500px;height:500px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/trim" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div> </body> </html>
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js index 3a350dc..eaf06a4 100644 --- a/player/js/animation/AnimationItem.js +++ b/player/js/animation/AnimationItem.js
@@ -124,8 +124,8 @@ this.totalFrames = this.animationData.animation.totalFrames; this.frameRate = this.animationData.animation.frameRate; this.firstFrame = Math.round(this.animationData.animation.ff*this.frameRate); - this.firstFrame = 40; - this.totalFrames = 1; + /*this.firstFrame = 40; + this.totalFrames = 1;*/ this.frameMult = this.animationData.animation.frameRate / 1000; dataManager.completeData(this.animationData); this.renderer.buildItems(this.animationData.animation.layers,this.container);
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js index e1f1e98..6d401ce 100644 --- a/player/js/elements/canvasElements/CVShapeItemElement.js +++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -56,6 +56,13 @@ ctx.globalAlpha *= stylesList[i].opacity; ctx.strokeStyle = stylesList[i].value; ctx.lineWidth = stylesList[i].width; + if(stylesList[i].dasharray){ + ctx.setLineDash(stylesList[i].dasharray); + ctx.lineDashOffset = stylesList[i].dashoffset; + }else{ + ctx.setLineDash([]); + ctx.lineDashOffset = 0; + } ctx.stroke(stylesList[i].path); //this.renderer.canvasContext.restore(); if(cacheFlag){ @@ -65,7 +72,11 @@ value: stylesList[i].value, width: stylesList[i].width, path: stylesList[i].path - }) + }); + if(stylesList[i].dasharray){ + cache[cache.length-1].dasharray = stylesList[i].dasharray; + cache[cache.length-1].dashoffset = stylesList[i].dashoffset; + } } }else if(stylesList[i].type == 'fill'){ //this.renderer.canvasContext.save(); @@ -288,6 +299,22 @@ this.stylesPool[this.currentStylePoolPos].width = stroke.width; this.stylesPool[this.currentStylePoolPos].opacity = this.opacityMultiplier; this.stylesPool[this.currentStylePoolPos].value = stroke.opacity < 1 ? fillColorToString(stroke.color, stroke.opacity) : fillColorToString(stroke.color); + + if(stroke.dashes){ + var d = stroke.dashes; + var j, jLen = d.length; + var dasharray = []; + var dashoffset = ''; + for(j=0;j<jLen;j+=1){ + if(d[j].n != 'o'){ + dasharray.push(d[j].v); + }else{ + dashoffset = d[j].v; + } + } + this.stylesPool[this.currentStylePoolPos].dasharray = dasharray; + this.stylesPool[this.currentStylePoolPos].dashoffset = dashoffset; + } this.stylesList.push(this.stylesPool[this.currentStylePoolPos]); this.ownStylesList.push(this.stylesList[this.stylesList.length -1]); this.currentStylePoolPos += 1;