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;
