109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
|
var Class = require('../../core/class');
|
||
|
|
var Base = require('./base');
|
||
|
|
var Path = require('./path');
|
||
|
|
var Surface = require('./surface');
|
||
|
|
var Group = require('./group');
|
||
|
|
var DOM = require('./dom');
|
||
|
|
|
||
|
|
var fontAnchors = { start: 'left', middle: 'center', end: 'right' };
|
||
|
|
|
||
|
|
module.exports = Class(Base, {
|
||
|
|
|
||
|
|
base_initialize: Base.prototype.initialize,
|
||
|
|
|
||
|
|
initialize: function(text, font, alignment, path){
|
||
|
|
this.base_initialize('shape');
|
||
|
|
|
||
|
|
var p = this.pathElement = DOM.createElement('path');
|
||
|
|
p.textpathok = true;
|
||
|
|
this.element.appendChild(p);
|
||
|
|
|
||
|
|
p = this.textPathElement = DOM.createElement("textpath");
|
||
|
|
p.on = true;
|
||
|
|
p.style['v-text-align'] = 'left';
|
||
|
|
this.element.appendChild(p);
|
||
|
|
|
||
|
|
this.draw.apply(this, arguments);
|
||
|
|
},
|
||
|
|
|
||
|
|
draw: function(text, font, alignment, path){
|
||
|
|
var element = this.element,
|
||
|
|
textPath = this.textPathElement,
|
||
|
|
style = textPath.style;
|
||
|
|
|
||
|
|
textPath.string = text;
|
||
|
|
|
||
|
|
if (font){
|
||
|
|
if (typeof font == 'string'){
|
||
|
|
style.font = font;
|
||
|
|
} else {
|
||
|
|
for (var key in font){
|
||
|
|
var ckey = key.camelCase ? key.camelCase() : key;
|
||
|
|
if (ckey == 'fontFamily') style[ckey] = "'" + font[key] + "'";
|
||
|
|
// NOT UNIVERSALLY SUPPORTED OPTIONS
|
||
|
|
// else if (ckey == 'kerning') style['v-text-kern'] = !!font[key];
|
||
|
|
// else if (ckey == 'rotateGlyphs') style['v-rotate-letters'] = !!font[key];
|
||
|
|
// else if (ckey == 'letterSpacing') style['v-text-spacing'] = Number(font[key]) + '';
|
||
|
|
else style[ckey] = font[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (alignment) style['v-text-align'] = fontAnchors[alignment] || alignment;
|
||
|
|
|
||
|
|
if (path){
|
||
|
|
this.currentPath = path = new Path(path);
|
||
|
|
this.element.path = path.toVML();
|
||
|
|
} else if (!this.currentPath){
|
||
|
|
var i = -1, offsetRows = '\n';
|
||
|
|
while ((i = text.indexOf('\n', i + 1)) > -1) offsetRows += '\n';
|
||
|
|
textPath.string = offsetRows + textPath.string;
|
||
|
|
this.element.path = 'm0,0l1,0';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Measuring the bounding box is currently necessary for gradients etc.
|
||
|
|
|
||
|
|
// Clone element because the element is dead once it has been in the DOM
|
||
|
|
element = element.cloneNode(true);
|
||
|
|
style = element.style;
|
||
|
|
|
||
|
|
// Reset coordinates while measuring
|
||
|
|
element.coordorigin = '0,0';
|
||
|
|
element.coordsize = '10000,10000';
|
||
|
|
style.left = '0px';
|
||
|
|
style.top = '0px';
|
||
|
|
style.width = '10000px';
|
||
|
|
style.height = '10000px';
|
||
|
|
style.rotation = 0;
|
||
|
|
element.removeChild(element.firstChild); // Remove skew
|
||
|
|
|
||
|
|
// Inject the clone into the document
|
||
|
|
|
||
|
|
var canvas = new Surface(1, 1),
|
||
|
|
group = new Group(), // Wrapping it in a group seems to alleviate some client rect weirdness
|
||
|
|
body = element.ownerDocument.body;
|
||
|
|
|
||
|
|
canvas.inject(body);
|
||
|
|
group.element.appendChild(element);
|
||
|
|
group.inject(canvas);
|
||
|
|
|
||
|
|
var ebb = element.getBoundingClientRect(),
|
||
|
|
cbb = canvas.toElement().getBoundingClientRect();
|
||
|
|
|
||
|
|
canvas.eject();
|
||
|
|
|
||
|
|
this.left = ebb.left - cbb.left;
|
||
|
|
this.top = ebb.top - cbb.top;
|
||
|
|
this.width = ebb.right - ebb.left;
|
||
|
|
this.height = ebb.bottom - ebb.top;
|
||
|
|
this.right = ebb.right - cbb.left;
|
||
|
|
this.bottom = ebb.bottom - cbb.top;
|
||
|
|
|
||
|
|
this._transform();
|
||
|
|
|
||
|
|
//this._size = { left: this.left, top: this.top, width: this.width, height: this.height};
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|