Skip to content

Commit 978935d

Browse files
bodymovinbodymovin
committed
fixes #816 supported hindi combined characters with non glyph fonts
1 parent 598fef7 commit 978935d

6 files changed

Lines changed: 62 additions & 19 deletions

File tree

‎player/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155

156156
<script>
157157
var anim;
158-
var elem = document.getElementById('lottie')
158+
var elem = document.getElementById('lottie');
159159
var animData = {
160160
container: elem,
161161
renderer: 'svg',
@@ -164,7 +164,7 @@
164164
rendererSettings: {
165165
progressiveLoad:false,
166166
},
167-
path: 'exports/render/data.json'
167+
path: 'exports/render/title_6.json'
168168
};
169169
anim = lottie.loadAnimation(animData);
170170
</script>

‎player/js/elements/canvasElements/CVTextElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ CVTextElement.prototype.buildNewText = function(){
5252
var xPos = 0, yPos = 0, firstLine = true;
5353
var cnt = 0;
5454
for (i = 0; i < len; i += 1) {
55-
charData = this.globalData.fontManager.getCharData(documentData.finalText.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
55+
charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
5656
shapeData = charData && charData.data || {};
5757
matrixHelper.reset();
5858
if(singleShape && letters[i].n) {

‎player/js/elements/htmlElements/HTextElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ HTextElement.prototype.buildNewText = function(){
104104
}
105105
//tSpan.setAttribute('visibility', 'hidden');
106106
if(this.globalData.fontManager.chars){
107-
var charData = this.globalData.fontManager.getCharData(documentData.finalText.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
107+
var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
108108
var shapeData;
109109
if(charData){
110110
shapeData = charData.data;

‎player/js/elements/svgElements/SVGTextElement.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,22 @@ SVGTextElement.prototype.createContent = function(){
1313
}
1414
};
1515

16+
SVGTextElement.prototype.buildTextContents = function(textArray) {
17+
var i = 0, len = textArray.length;
18+
var textContents = [], currentTextContent = '';
19+
while (i < len) {
20+
if(textArray[i] === String.fromCharCode(13)) {
21+
textContents.push(currentTextContent);
22+
currentTextContent = '';
23+
} else {
24+
currentTextContent += textArray[i];
25+
}
26+
i += 1;
27+
}
28+
textContents.push(currentTextContent);
29+
return textContents;
30+
}
31+
1632
SVGTextElement.prototype.buildNewText = function(){
1733
var i, len;
1834

@@ -62,7 +78,7 @@ SVGTextElement.prototype.buildNewText = function(){
6278
}
6379
tElement.setAttribute('text-anchor',justify);
6480
tElement.setAttribute('letter-spacing',trackingOffset);
65-
var textContent = documentData.finalText.split(String.fromCharCode(13));
81+
var textContent = this.buildTextContents(documentData.finalText);
6682
len = textContent.length;
6783
yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
6884
for ( i = 0; i < len; i += 1) {
@@ -108,7 +124,7 @@ SVGTextElement.prototype.buildNewText = function(){
108124
xPos += trackingOffset;
109125
}
110126
if(usesGlyphs) {
111-
charData = this.globalData.fontManager.getCharData(documentData.finalText.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
127+
charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
112128
shapeData = charData && charData.data || {};
113129
shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
114130
if(!singleShape){

‎player/js/utils/FontManager.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ var FontManager = (function(){
66
size:0,
77
shapes:[]
88
};
9+
var combinedCharacters = [];
10+
//Hindi characters
11+
combinedCharacters = combinedCharacters.concat([2304, 2305, 2306, 2307, 2362, 2363, 2364, 2364, 2366
12+
, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2376, 2377, 2378, 2379
13+
, 2380, 2381, 2382, 2383, 2387, 2388, 2389, 2390, 2391, 2402, 2403]);
914

1015
function setUpNode(font, family){
1116
var parentNode = createTag('span');
@@ -204,13 +209,20 @@ var FontManager = (function(){
204209
return 'sans-serif';
205210
}
206211

212+
function getCombinedCharacterCodes() {
213+
return combinedCharacters;
214+
}
215+
207216
var Font = function(){
208217
this.fonts = [];
209218
this.chars = null;
210219
this.typekitLoaded = 0;
211220
this.loaded = false;
212221
this.initTime = Date.now();
213222
};
223+
//TODO: for now I'm adding these methods to the Class and not the prototype. Think of a better way to implement it.
224+
Font.getCombinedCharacterCodes = getCombinedCharacterCodes;
225+
214226
Font.prototype.addChars = addChars;
215227
Font.prototype.addFonts = addFonts;
216228
Font.prototype.getCharData = getCharData;

‎player/js/utils/text/TextProperty.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function TextProperty(elem, data, dynamicProperties){
3737
yOffset: 0,
3838
__complete: false,
3939
finalSize:0,
40-
finalText:'',
40+
finalText:[],
4141
finalLineHeight: 0
4242

4343
};
@@ -106,14 +106,28 @@ TextProperty.prototype.getValue = function(_forceRender) {
106106
this.completeTextData(textDocumentData);
107107
}
108108
this.setCurrentData(textDocumentData);
109-
//TODO check this
110109
this._mdf = !this._isFirstFrame;
111110
this.pv = this.v = this.currentData.t;
112111
this.keysIndex = i;
113112
}
114113
this._frameId = frameId;
115114
};
116115

116+
TextProperty.prototype.buildFinalText = function(text) {
117+
var combinedCharacters = FontManager.getCombinedCharacterCodes();
118+
var charactersArray = [];
119+
var i = 0, len = text.length;
120+
while (i < len) {
121+
if (combinedCharacters.indexOf(text.charCodeAt(i)) !== -1) {
122+
charactersArray[charactersArray.length - 1] += text.charAt(i);
123+
} else {
124+
charactersArray.push(text.charAt(i));
125+
}
126+
i += 1;
127+
}
128+
return charactersArray;
129+
}
130+
117131
TextProperty.prototype.completeTextData = function(documentData) {
118132
documentData.__complete = true;
119133
var fontManager = this.elem.globalData.fontManager;
@@ -162,7 +176,7 @@ TextProperty.prototype.completeTextData = function(documentData) {
162176
documentData.fStyle = fStyle;
163177
len = documentData.t.length;
164178
documentData.finalSize = documentData.s;
165-
documentData.finalText = documentData.t;
179+
documentData.finalText = this.buildFinalText(documentData.t);
166180
documentData.finalLineHeight = documentData.lh;
167181
var trackingOffset = documentData.tr/1000*documentData.finalSize;
168182
if(documentData.sz){
@@ -171,36 +185,37 @@ TextProperty.prototype.completeTextData = function(documentData) {
171185
var boxHeight = documentData.sz[1];
172186
var currentHeight, finalText;
173187
while(flag) {
174-
finalText = documentData.t;
188+
finalText = this.buildFinalText(documentData.t);
175189
currentHeight = 0;
176190
lineWidth = 0;
177-
len = documentData.t.length;
191+
len = finalText.length;
178192
trackingOffset = documentData.tr/1000*documentData.finalSize;
179193
var lastSpaceIndex = -1;
180194
for(i=0;i<len;i+=1){
181195
newLineFlag = false;
182-
if(finalText.charAt(i) === ' '){
196+
if(finalText[i] === ' '){
183197
lastSpaceIndex = i;
184-
}else if(finalText.charCodeAt(i) === 13){
198+
}else if(finalText[i].charCodeAt(0) === 13){
185199
lineWidth = 0;
186200
newLineFlag = true;
187201
currentHeight += documentData.finalLineHeight || documentData.finalSize*1.2;
188202
}
189203
if(fontManager.chars){
190-
charData = fontManager.getCharData(finalText.charAt(i), fontData.fStyle, fontData.fFamily);
204+
charData = fontManager.getCharData(finalText[i], fontData.fStyle, fontData.fFamily);
191205
cLength = newLineFlag ? 0 : charData.w*documentData.finalSize/100;
192206
}else{
193207
//tCanvasHelper.font = documentData.s + 'px '+ fontData.fFamily;
194-
cLength = fontManager.measureText(finalText.charAt(i), documentData.f, documentData.finalSize);
208+
cLength = fontManager.measureText(finalText[i], documentData.f, documentData.finalSize);
195209
}
196-
if(lineWidth + cLength > boxWidth && finalText.charAt(i) !== ' '){
210+
if(lineWidth + cLength > boxWidth && finalText[i] !== ' '){
197211
if(lastSpaceIndex === -1){
198212
len += 1;
199213
} else {
200214
i = lastSpaceIndex;
201215
}
202216
currentHeight += documentData.finalLineHeight || documentData.finalSize*1.2;
203-
finalText = finalText.substr(0,i) + "\r" + finalText.substr(i === lastSpaceIndex ? i + 1 : i);
217+
finalText.splice(i, lastSpaceIndex === i ? 1 : 0,"\r");
218+
//finalText = finalText.substr(0,i) + "\r" + finalText.substr(i === lastSpaceIndex ? i + 1 : i);
204219
lastSpaceIndex = -1;
205220
lineWidth = 0;
206221
}else {
@@ -226,7 +241,7 @@ TextProperty.prototype.completeTextData = function(documentData) {
226241
var currentChar;
227242
for (i = 0;i < len ;i += 1) {
228243
newLineFlag = false;
229-
currentChar = documentData.finalText.charAt(i);
244+
currentChar = documentData.finalText[i];
230245
if(currentChar === ' '){
231246
val = '\u00A0';
232247
}else if(currentChar.charCodeAt(0) === 13){
@@ -238,7 +253,7 @@ TextProperty.prototype.completeTextData = function(documentData) {
238253
newLineFlag = true;
239254
currentLine += 1;
240255
}else{
241-
val = documentData.finalText.charAt(i);
256+
val = documentData.finalText[i];
242257
}
243258
if(fontManager.chars){
244259
charData = fontManager.getCharData(currentChar, fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily);

0 commit comments

Comments
 (0)