text baseline shift
diff --git a/player/index.html b/player/index.html
index e62da68..678651e 100644
--- a/player/index.html
+++ b/player/index.html
@@ -119,8 +119,8 @@
var elem = document.getElementById('bodymovin')
var animData = {
container: elem,
- renderer: 'svg',
- loop: true,
+ renderer: 'canvas',
+ loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
diff --git a/player/js/elements/TextElement.js b/player/js/elements/TextElement.js
index be6fda2..e39239e 100644
--- a/player/js/elements/TextElement.js
+++ b/player/js/elements/TextElement.js
@@ -280,6 +280,16 @@
}
}
+ if ('a' in animatorProps) {
+ animatorSelector = renderedData.a[j].s;
+ mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
+ if(mult.length){
+ animatorOffset += animatorProps.a.v[0] * mult[0];
+ } else{
+ animatorOffset += animatorProps.a.v[0] * mult;
+ }
+
+ }
}
flag = true;
while (flag) {
@@ -287,7 +297,7 @@
perc = (currentLength + animatorOffset - segmentLength) / currentPoint.partialLength;
xPathPos = prevPoint.point[0] + (currentPoint.point[0] - prevPoint.point[0]) * perc;
yPathPos = prevPoint.point[1] + (currentPoint.point[1] - prevPoint.point[1]) * perc;
- matrixHelper.translate(0, -(renderedData.m.a.v[1] * yOff / 100) + yPos);
+ matrixHelper.translate(-renderedData.m.a.v[0]*letters[i].an/200, -(renderedData.m.a.v[1] * yOff / 100));
flag = false;
} else if (points) {
segmentLength += currentPoint.partialLength;
@@ -490,7 +500,6 @@
matrixHelper.translate(0, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
}
}else{
-
if(mult.length) {
matrixHelper.translate(animatorProps.p.v[0] * mult[0], animatorProps.p.v[1] * mult[1], -animatorProps.p.v[2] * mult[2]);
} else {
@@ -510,6 +519,9 @@
}
if(this.maskPath) {
+ matrixHelper.translate(0,-documentData.ls);
+
+ matrixHelper.translate(0, renderedData.m.a.v[1]*yOff/100 + yPos,0);
if (data.t.p.p) {
tanAngle = (currentPoint.point[1] - prevPoint.point[1]) / (currentPoint.point[0] - prevPoint.point[0]);
var rot = Math.atan(tanAngle) * 180 / Math.PI;
@@ -519,7 +531,6 @@
matrixHelper.rotate(-rot * Math.PI / 180);
}
matrixHelper.translate(xPathPos, yPathPos, 0);
- matrixHelper.translate(renderedData.m.a.v[0]*letters[i].an/200, renderedData.m.a.v[1]*yOff/100,0);
currentLength -= renderedData.m.a.v[0]*letters[i].an/200;
if(letters[i+1] && ind !== letters[i+1].ind){
currentLength += letters[i].an / 2;
@@ -541,6 +552,7 @@
matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line])/2,0,0);
break;
}
+ matrixHelper.translate(0,-documentData.ls);
matrixHelper.translate(offf,0,0);
matrixHelper.translate(renderedData.m.a.v[0]*letters[i].an/200,renderedData.m.a.v[1]*yOff/100,0);
xPos += letters[i].l + documentData.tr/1000*documentData.s;
diff --git a/player/js/elements/canvasElements/CVTextElement.js b/player/js/elements/canvasElements/CVTextElement.js
index bdcf4fa..3be7267 100644
--- a/player/js/elements/canvasElements/CVTextElement.js
+++ b/player/js/elements/canvasElements/CVTextElement.js
@@ -88,6 +88,7 @@
if(documentData.ps){
matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
}
+ matrixHelper.translate(0,-documentData.ls,0);
switch(documentData.j){
case 1:
matrixHelper.translate(documentData.justifyOffset + (boxWidth - lineWidths[letters[i].line]),0,0);
diff --git a/player/js/elements/svgElements/SVGTextElement.js b/player/js/elements/svgElements/SVGTextElement.js
index 97df530..8b3c408 100644
--- a/player/js/elements/svgElements/SVGTextElement.js
+++ b/player/js/elements/svgElements/SVGTextElement.js
@@ -89,6 +89,7 @@
if(documentData.ps){
matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
}
+ matrixHelper.translate(0,-documentData.ls,0);
switch(documentData.j){
case 1:
matrixHelper.translate(documentData.justifyOffset + (boxWidth - lineWidths[letters[i].line]),0,0);
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index daab3c4..0cc7b79 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -665,6 +665,7 @@
data.singleShape = true;
}
documentData.yOffset = documentData.lh || documentData.s*1.2;
+ documentData.ls = documentData.ls || 0;
documentData.ascent = fontData.ascent*documentData.s/100;
}
