bodymovin
Version:
After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript
213 lines (200 loc) • 8.99 kB
JavaScript
function CVTextElement(data, comp, globalData){
this.textSpans = [];
this.yOffset = 0;
this.fillColorAnim = false;
this.strokeColorAnim = false;
this.strokeWidthAnim = false;
this.stroke = false;
this.fill = false;
this.justifyOffset = 0;
this.currentRender = null;
this.renderType = 'canvas';
this.values = {
fill: 'rgba(0,0,0,0)',
stroke: 'rgba(0,0,0,0)',
sWidth: 0,
fValue: ''
}
this._parent.constructor.call(this,data,comp, globalData);
}
createElement(CVBaseElement, CVTextElement);
extendPrototype(ITextElement, CVTextElement);
CVTextElement.prototype.tHelper = document.createElement('canvas').getContext('2d');
CVTextElement.prototype.createElements = function(){
this._parent.createElements.call(this);
//console.log('this.data: ',this.data);
};
CVTextElement.prototype.buildNewText = function(){
var documentData = this.textProperty.currentData;
this.renderedLetters = Array.apply(null,{length:documentData.l ? documentData.l.length : 0});
var hasFill = false;
if(documentData.fc) {
hasFill = true;
this.values.fill = this.buildColor(documentData.fc);
}else{
this.values.fill = 'rgba(0,0,0,0)';
}
this.fill = hasFill;
var hasStroke = false;
if(documentData.sc){
hasStroke = true;
this.values.stroke = this.buildColor(documentData.sc);
this.values.sWidth = documentData.sw;
}
var fontData = this.globalData.fontManager.getFontByName(documentData.f);
var i, len;
var letters = documentData.l;
var matrixHelper = this.mHelper;
this.stroke = hasStroke;
this.values.fValue = documentData.s + 'px '+ this.globalData.fontManager.getFontByName(documentData.f).fFamily;
len = documentData.t.length;
//this.tHelper.font = this.values.fValue;
var charData, shapeData, k, kLen, shapes, j, jLen, pathNodes, commands, pathArr, singleShape = this.data.singleShape;
var trackingOffset = documentData.tr/1000*documentData.s;
var xPos = 0, yPos = 0, firstLine = true;
var cnt = 0;
for (i = 0; i < len; i += 1) {
charData = this.globalData.fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
shapeData = charData && charData.data || {};
matrixHelper.reset();
if(singleShape && letters[i].n) {
xPos = -trackingOffset;
yPos += documentData.yOffset;
yPos += firstLine ? 1 : 0;
firstLine = false;
}
shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
jLen = shapes.length;
matrixHelper.scale(documentData.s/100,documentData.s/100);
if(singleShape){
this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
}
commands = Array.apply(null,{length:jLen})
for(j=0;j<jLen;j+=1){
kLen = shapes[j].ks.k.i.length;
pathNodes = shapes[j].ks.k;
pathArr = [];
for(k=1;k<kLen;k+=1){
if(k==1){
pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0],pathNodes.v[0][1],0),matrixHelper.applyToY(pathNodes.v[0][0],pathNodes.v[0][1],0));
}
pathArr.push(matrixHelper.applyToX(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToY(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToX(pathNodes.i[k][0],pathNodes.i[k][1],0),matrixHelper.applyToY(pathNodes.i[k][0],pathNodes.i[k][1],0),matrixHelper.applyToX(pathNodes.v[k][0],pathNodes.v[k][1],0),matrixHelper.applyToY(pathNodes.v[k][0],pathNodes.v[k][1],0));
}
pathArr.push(matrixHelper.applyToX(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToY(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToX(pathNodes.i[0][0],pathNodes.i[0][1],0),matrixHelper.applyToY(pathNodes.i[0][0],pathNodes.i[0][1],0),matrixHelper.applyToX(pathNodes.v[0][0],pathNodes.v[0][1],0),matrixHelper.applyToY(pathNodes.v[0][0],pathNodes.v[0][1],0));
commands[j] = pathArr;
}
if(singleShape){
xPos += letters[i].l;
xPos += trackingOffset;
}
if(this.textSpans[cnt]){
this.textSpans[cnt].elem = commands;
} else {
this.textSpans[cnt] = {elem: commands};
}
cnt +=1;
}
}
CVTextElement.prototype.renderFrame = function(parentMatrix){
if(this._parent.renderFrame.call(this, parentMatrix)===false){
return;
}
var ctx = this.canvasContext;
var finalMat = this.finalTransform.mat.props;
this.globalData.renderer.save();
this.globalData.renderer.ctxTransform(finalMat);
this.globalData.renderer.ctxOpacity(this.finalTransform.opacity);
ctx.font = this.values.fValue;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
if(!this.data.singleShape){
this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
}
var i,len, j, jLen, k, kLen;
var renderedLetters = this.textAnimator.renderedLetters;
var letters = this.textProperty.currentData.l;
len = letters.length;
var renderedLetter;
var lastFill = null, lastStroke = null, lastStrokeW = null, commands, pathArr;
for(i=0;i<len;i+=1){
if(letters[i].n){
continue;
}
renderedLetter = renderedLetters[i];
if(renderedLetter){
this.globalData.renderer.save();
this.globalData.renderer.ctxTransform(renderedLetter.p);
this.globalData.renderer.ctxOpacity(renderedLetter.o);
}
if(this.fill){
if(renderedLetter && renderedLetter.fc){
if(lastFill !== renderedLetter.fc){
lastFill = renderedLetter.fc;
ctx.fillStyle = renderedLetter.fc;
}
}else if(lastFill !== this.values.fill){
lastFill = this.values.fill;
ctx.fillStyle = this.values.fill;
}
commands = this.textSpans[i].elem;
jLen = commands.length;
this.globalData.canvasContext.beginPath();
for(j=0;j<jLen;j+=1) {
pathArr = commands[j];
kLen = pathArr.length;
this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
for (k = 2; k < kLen; k += 6) {
this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
}
}
this.globalData.canvasContext.closePath();
this.globalData.canvasContext.fill();
///ctx.fillText(this.textSpans[i].val,0,0);
}
if(this.stroke){
if(renderedLetter && renderedLetter.sw){
if(lastStrokeW !== renderedLetter.sw){
lastStrokeW = renderedLetter.sw;
ctx.lineWidth = renderedLetter.sw;
}
}else if(lastStrokeW !== this.values.sWidth){
lastStrokeW = this.values.sWidth;
ctx.lineWidth = this.values.sWidth;
}
if(renderedLetter && renderedLetter.sc){
if(lastStroke !== renderedLetter.sc){
lastStroke = renderedLetter.sc;
ctx.strokeStyle = renderedLetter.sc;
}
}else if(lastStroke !== this.values.stroke){
lastStroke = this.values.stroke;
ctx.strokeStyle = this.values.stroke;
}
commands = this.textSpans[i].elem;
jLen = commands.length;
this.globalData.canvasContext.beginPath();
for(j=0;j<jLen;j+=1) {
pathArr = commands[j];
kLen = pathArr.length;
this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
for (k = 2; k < kLen; k += 6) {
this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
}
}
this.globalData.canvasContext.closePath();
this.globalData.canvasContext.stroke();
///ctx.strokeText(letters[i].val,0,0);
}
if(renderedLetter) {
this.globalData.renderer.restore();
}
}
/*if(this.data.hasMask){
this.globalData.renderer.restore(true);
}*/
this.globalData.renderer.restore(this.data.hasMask);
if(this.firstFrame){
this.firstFrame = false;
}
};