FabricJS iText
by codingdude
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<canvas width="300" height="300" id="c"></canvas>
JavaScript
fabric.StyledText = fabric.util.createClass(fabric.IText, {
type : 'styledText',
initialize : function(element, options) {
var self = this;
this.callSuper('initialize', element, options);
options && this.set('textID', options.textID);
this.on("editing:entered",this.editingEntered);
this.on("editing:exited",this.editingExited);
},
editingEntered:function(){
//alert(this.type);
},
editingExited:function(){
},
_getCursorBoundariesOffsets: function(position) {
if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) {
return this.cursorOffsetCache;
}
var lineLeftOffset,
lineIndex,
charIndex,
topOffset = 0,
leftOffset = 0,
boundaries,
cursorPosition = this.get2DCursorLocation(position);
charIndex = cursorPosition.charIndex;
lineIndex = cursorPosition.lineIndex;
for (var i = 0; i < lineIndex; i++) {
topOffset += this.getHeightOfLine(i);
}
lineLeftOffset = this._getLineLeftOffset(lineIndex);
var bound = this.__charBounds[lineIndex][charIndex];
console.log(bound);
bound && (leftOffset = bound.left);
if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) {
leftOffset -= this._getWidthOfCharSpacing();
}
boundaries = {
top: topOffset,
left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0),
};
this.cursorOffsetCache = boundaries;
return this.cursorOffsetCache;
},
_measureChar: function(_char, charStyle, previousChar, prevCharStyle) {
// first i try to return from cache
var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle),
previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char,
stylesAreEqual = fontDeclaration === previousFontDeclaration,...