bodymovin
Version:
After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript
274 lines (253 loc) • 11 kB
JavaScript
function HTextElement(data,parentContainer,globalData,comp, placeholder){
this.textSpans = [];
this.textPaths = [];
this.currentBBox = {
x:999999,
y: -999999,
h: 0,
w: 0
}
this.renderType = 'svg';
this.isMasked = false;
this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
}
createElement(HBaseElement, HTextElement);
extendPrototype(ITextElement, HTextElement);
HTextElement.prototype.createElements = function(){
this.isMasked = this.checkMasks();
var parent = document.createElement('div');
styleDiv(parent);
this.layerElement = parent;
this.transformedElement = parent;
if(this.isMasked){
this.renderType = 'svg';
var cont = document.createElementNS(svgNS,'svg');
styleDiv(cont);
this.cont = cont;
this.compW = this.comp.data.w;
this.compH = this.comp.data.h;
cont.setAttribute('width',this.compW);
cont.setAttribute('height',this.compH);
var g = document.createElementNS(svgNS,'g');
cont.appendChild(g);
parent.appendChild(cont);
this.maskedElement = g;
this.innerElem = g;
} else {
this.renderType = 'html';
this.innerElem = parent;
}
this.baseElement = parent;
this.checkParenting();
};
HTextElement.prototype.buildNewText = function(){
var documentData = this.textProperty.currentData;
this.renderedLetters = Array.apply(null,{length:this.textProperty.currentData.l ? this.textProperty.currentData.l.length : 0});
var innerElemStyle = this.innerElem.style;
innerElemStyle.color = innerElemStyle.fill = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)';
if(documentData.sc){
innerElemStyle.stroke = this.buildColor(documentData.sc);
innerElemStyle.strokeWidth = documentData.sw+'px';
}
var fontData = this.globalData.fontManager.getFontByName(documentData.f);
if(!this.globalData.fontManager.chars){
innerElemStyle.fontSize = documentData.s+'px';
innerElemStyle.lineHeight = documentData.s+'px';
if(fontData.fClass){
this.innerElem.className = fontData.fClass;
} else {
innerElemStyle.fontFamily = fontData.fFamily;
var fWeight = documentData.fWeight, fStyle = documentData.fStyle;
innerElemStyle.fontStyle = fStyle;
innerElemStyle.fontWeight = fWeight;
}
}
var i, len;
var letters = documentData.l;
len = letters.length;
var tSpan,tParent,tCont;
var matrixHelper = this.mHelper;
var shapes, shapeStr = '';
var cnt = 0;
for (i = 0;i < len ;i += 1) {
if(this.globalData.fontManager.chars){
if(!this.textPaths[cnt]){
tSpan = document.createElementNS(svgNS,'path');
tSpan.setAttribute('stroke-linecap', 'butt');
tSpan.setAttribute('stroke-linejoin','round');
tSpan.setAttribute('stroke-miterlimit','4');
} else {
tSpan = this.textPaths[cnt];
}
if(!this.isMasked){
if(this.textSpans[cnt]){
tParent = this.textSpans[cnt];
tCont = tParent.children[0];
} else {
tParent = document.createElement('div');
tCont = document.createElementNS(svgNS,'svg');
tCont.appendChild(tSpan);
styleDiv(tParent);
}
}
}else{
if(!this.isMasked){
if(this.textSpans[cnt]){
tParent = this.textSpans[cnt];
tSpan = this.textPaths[cnt];
} else {
tParent = document.createElement('span');
styleDiv(tParent);
tSpan = document.createElement('span');
styleDiv(tSpan);
tParent.appendChild(tSpan);
}
} else {
tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : document.createElementNS(svgNS,'text');
}
}
//tSpan.setAttribute('visibility', 'hidden');
if(this.globalData.fontManager.chars){
var charData = this.globalData.fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
var shapeData;
if(charData){
shapeData = charData.data;
} else {
shapeData = null;
}
matrixHelper.reset();
if(shapeData && shapeData.shapes){
shapes = shapeData.shapes[0].it;
matrixHelper.scale(documentData.s/100,documentData.s/100);
shapeStr = this.createPathShape(matrixHelper,shapes);
tSpan.setAttribute('d',shapeStr);
}
if(!this.isMasked){
this.innerElem.appendChild(tParent);
if(shapeData && shapeData.shapes){
document.body.appendChild(tCont);
var boundingBox = tCont.getBBox();
tCont.setAttribute('width',boundingBox.width + 2);
tCont.setAttribute('height',boundingBox.height + 2);
tCont.setAttribute('viewBox',(boundingBox.x-1)+' '+ (boundingBox.y-1)+' '+ (boundingBox.width+2)+' '+ (boundingBox.height+2));
tCont.style.transform = tCont.style.webkitTransform = 'translate(' + (boundingBox.x-1) + 'px,' + (boundingBox.y-1) + 'px)';
letters[i].yOffset = boundingBox.y-1;
tParent.appendChild(tCont);
} else{
tCont.setAttribute('width',1);
tCont.setAttribute('height',1);
}
}else{
this.innerElem.appendChild(tSpan);
}
}else{
tSpan.textContent = letters[i].val;
tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
if(!this.isMasked){
this.innerElem.appendChild(tParent);
//
tSpan.style.transform = tSpan.style.webkitTransform = 'translate3d(0,'+ -documentData.s/1.2+'px,0)';
} else {
this.innerElem.appendChild(tSpan);
}
}
//
if(!this.isMasked){
this.textSpans[cnt] = tParent;
}else{
this.textSpans[cnt] = tSpan;
}
this.textSpans[cnt].style.display = 'block';
this.textPaths[cnt] = tSpan;
cnt += 1;
}
while(cnt < this.textSpans.length){
this.textSpans[cnt].style.display = 'none';
cnt += 1;
}
}
HTextElement.prototype.hide = SVGTextElement.prototype.hide;
HTextElement.prototype.renderFrame = function(parentMatrix){
var renderParent = this._parent.renderFrame.call(this,parentMatrix);
if(renderParent===false){
this.hide();
return;
}
if(this.hidden){
this.hidden = false;
this.innerElem.style.display = 'block';
this.layerElement.style.display = 'block';
}
if(this.data.singleShape){
if(!this.firstFrame && !this.lettersChangedFlag){
return;
} else {
// Todo Benchmark if using this is better than getBBox
if(this.isMasked && this.finalTransform.matMdf){
this.cont.setAttribute('viewBox',-this.finalTransform.mProp.p.v[0]+' '+ -this.finalTransform.mProp.p.v[1]+' '+this.compW+' '+this.compH);
this.cont.style.transform = this.cont.style.webkitTransform = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
}
}
}
this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
if(!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag){
return;
}
var i,len, count = 0;
var renderedLetters = this.textAnimator.renderedLetters;
var letters = this.textProperty.currentData.l;
len = letters.length;
var renderedLetter, textSpan, textPath;
for(i=0;i<len;i+=1){
if(letters[i].n){
count += 1;
continue;
}
textSpan = this.textSpans[i];
textPath = this.textPaths[i];
renderedLetter = renderedLetters[count];
count += 1;
if(!this.isMasked){
textSpan.style.transform = textSpan.style.webkitTransform = renderedLetter.m;
}else{
textSpan.setAttribute('transform',renderedLetter.m);
}
////textSpan.setAttribute('opacity',renderedLetter.o);
textSpan.style.opacity = renderedLetter.o;
if(renderedLetter.sw){
textPath.setAttribute('stroke-width',renderedLetter.sw);
}
if(renderedLetter.sc){
textPath.setAttribute('stroke',renderedLetter.sc);
}
if(renderedLetter.fc){
textPath.setAttribute('fill',renderedLetter.fc);
textPath.style.color = renderedLetter.fc;
}
}
if(this.isVisible && (this.elemMdf || this.firstFrame)){
if(this.innerElem.getBBox){
var boundingBox = this.innerElem.getBBox();
if(this.currentBBox.w !== boundingBox.width){
this.currentBBox.w = boundingBox.width;
this.cont.setAttribute('width',boundingBox.width);
}
if(this.currentBBox.h !== boundingBox.height){
this.currentBBox.h = boundingBox.height;
this.cont.setAttribute('height',boundingBox.height);
}
var margin = 1;
if(this.currentBBox.w !== (boundingBox.width + margin*2) || this.currentBBox.h !== (boundingBox.height + margin*2) || this.currentBBox.x !== (boundingBox.x - margin) || this.currentBBox.y !== (boundingBox.y - margin)){
this.currentBBox.w = boundingBox.width + margin*2;
this.currentBBox.h = boundingBox.height + margin*2;
this.currentBBox.x = boundingBox.x - margin;
this.currentBBox.y = boundingBox.y - margin;
this.cont.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h);
this.cont.style.transform = this.cont.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
}
}
}
if(this.firstFrame){
this.firstFrame = false;
}
}