mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-27 19:20:25 +00:00
Refactor itext.class.js
This commit is contained in:
kangax
parent
967d79fba3
commit
fa800d3c45
5 changed files with 231 additions and 138 deletions
121
dist/all.js
vendored
121
dist/all.js
vendored
|
|
@ -10834,7 +10834,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
|
|||
|
||||
var activeGroup = this.getActiveGroup();
|
||||
if (activeGroup) {
|
||||
activeGroup.setObjectsCoords();
|
||||
activeGroup.setObjectsCoords().setCoords();
|
||||
activeGroup.isMoving = false;
|
||||
this._setCursor(this.defaultCursor);
|
||||
}
|
||||
|
|
@ -20968,64 +20968,95 @@ fabric.util.object.extend(fabric.Text.prototype, {
|
|||
*/
|
||||
_setSVGTextLineChars: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {
|
||||
|
||||
var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy';
|
||||
var chars = textLine.split('');
|
||||
var charOffset = 0;
|
||||
var lineLeftOffset = (this._boundaries && this._boundaries[lineIndex])
|
||||
? toFixed(this._boundaries[lineIndex].left, 2)
|
||||
: 0;
|
||||
|
||||
var heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
||||
|
||||
var lineTopOffset = 0;
|
||||
for (var j = 0; j <= lineIndex; j++) {
|
||||
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
||||
}
|
||||
lineTopOffset -= this.height / 2;
|
||||
var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy',
|
||||
chars = textLine.split(''),
|
||||
charOffset = 0,
|
||||
lineLeftOffset = this._getSVGLineLeftOffset(lineIndex),
|
||||
lineTopOffset = this._getSVGLineTopOffset(lineIndex),
|
||||
heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
||||
|
||||
for (var i = 0, len = chars.length; i < len; i++) {
|
||||
var styleDecl = this.styles[lineIndex][i] || { };
|
||||
|
||||
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
||||
visible: true,
|
||||
fill: this.fill,
|
||||
stroke: this.stroke,
|
||||
type: 'text'
|
||||
}, styleDecl));
|
||||
|
||||
textSpans.push(
|
||||
'<tspan x="', lineLeftOffset + charOffset, '" ',
|
||||
yProp, '="', lineTopOffset, '" ',
|
||||
|
||||
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g,'\'') + '" ': ''),
|
||||
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
|
||||
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
|
||||
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
|
||||
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
|
||||
'style="', fillStyles, '">',
|
||||
|
||||
fabric.util.string.escapeXml(chars[i]),
|
||||
'</tspan>'
|
||||
);
|
||||
this._createTextCharSpan(
|
||||
chars[i], styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset));
|
||||
|
||||
var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
|
||||
|
||||
if (styleDecl.textBackgroundColor) {
|
||||
textBgRects.push(
|
||||
'<rect fill="', styleDecl.textBackgroundColor,
|
||||
'" transform="translate(',
|
||||
-this.width / 2, ' ',
|
||||
-this.height + heightOfLine, ')',
|
||||
'" x="', lineLeftOffset + charOffset,
|
||||
'" y="', lineTopOffset + heightOfLine,
|
||||
'" width="', charWidth,
|
||||
'" height="', heightOfLine,
|
||||
'"></rect>'
|
||||
);
|
||||
this._createTextCharBg(
|
||||
styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset));
|
||||
}
|
||||
|
||||
charOffset += charWidth;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getSVGLineLeftOffset: function(lineIndex) {
|
||||
return (this._boundaries && this._boundaries[lineIndex])
|
||||
? toFixed(this._boundaries[lineIndex].left, 2)
|
||||
: 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getSVGLineTopOffset: function(lineIndex) {
|
||||
var lineTopOffset = 0;
|
||||
for (var j = 0; j <= lineIndex; j++) {
|
||||
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
||||
}
|
||||
return lineTopOffset - this.height / 2;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
|
||||
return [
|
||||
'<rect fill="', styleDecl.textBackgroundColor,
|
||||
'" transform="translate(',
|
||||
-this.width / 2, ' ',
|
||||
-this.height + heightOfLine, ')',
|
||||
'" x="', lineLeftOffset + charOffset,
|
||||
'" y="', lineTopOffset + heightOfLine,
|
||||
'" width="', charWidth,
|
||||
'" height="', heightOfLine,
|
||||
'"></rect>'
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset) {
|
||||
|
||||
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
||||
visible: true,
|
||||
fill: this.fill,
|
||||
stroke: this.stroke,
|
||||
type: 'text'
|
||||
}, styleDecl));
|
||||
|
||||
return [
|
||||
'<tspan x="', lineLeftOffset + charOffset, '" ',
|
||||
yProp, '="', lineTopOffset, '" ',
|
||||
|
||||
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g,'\'') + '" ': ''),
|
||||
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
|
||||
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
|
||||
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
|
||||
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
|
||||
'style="', fillStyles, '">',
|
||||
|
||||
fabric.util.string.escapeXml(_char),
|
||||
'</tspan>'
|
||||
].join('');
|
||||
}
|
||||
/* _TO_SVG_END_ */
|
||||
});
|
||||
|
|
|
|||
8
dist/all.min.js
vendored
8
dist/all.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/all.min.js.gz
vendored
BIN
dist/all.min.js.gz
vendored
Binary file not shown.
121
dist/all.require.js
vendored
121
dist/all.require.js
vendored
|
|
@ -10834,7 +10834,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
|
|||
|
||||
var activeGroup = this.getActiveGroup();
|
||||
if (activeGroup) {
|
||||
activeGroup.setObjectsCoords();
|
||||
activeGroup.setObjectsCoords().setCoords();
|
||||
activeGroup.isMoving = false;
|
||||
this._setCursor(this.defaultCursor);
|
||||
}
|
||||
|
|
@ -20968,64 +20968,95 @@ fabric.util.object.extend(fabric.Text.prototype, {
|
|||
*/
|
||||
_setSVGTextLineChars: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {
|
||||
|
||||
var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy';
|
||||
var chars = textLine.split('');
|
||||
var charOffset = 0;
|
||||
var lineLeftOffset = (this._boundaries && this._boundaries[lineIndex])
|
||||
? toFixed(this._boundaries[lineIndex].left, 2)
|
||||
: 0;
|
||||
|
||||
var heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
||||
|
||||
var lineTopOffset = 0;
|
||||
for (var j = 0; j <= lineIndex; j++) {
|
||||
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
||||
}
|
||||
lineTopOffset -= this.height / 2;
|
||||
var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy',
|
||||
chars = textLine.split(''),
|
||||
charOffset = 0,
|
||||
lineLeftOffset = this._getSVGLineLeftOffset(lineIndex),
|
||||
lineTopOffset = this._getSVGLineTopOffset(lineIndex),
|
||||
heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
||||
|
||||
for (var i = 0, len = chars.length; i < len; i++) {
|
||||
var styleDecl = this.styles[lineIndex][i] || { };
|
||||
|
||||
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
||||
visible: true,
|
||||
fill: this.fill,
|
||||
stroke: this.stroke,
|
||||
type: 'text'
|
||||
}, styleDecl));
|
||||
|
||||
textSpans.push(
|
||||
'<tspan x="', lineLeftOffset + charOffset, '" ',
|
||||
yProp, '="', lineTopOffset, '" ',
|
||||
|
||||
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g,'\'') + '" ': ''),
|
||||
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
|
||||
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
|
||||
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
|
||||
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
|
||||
'style="', fillStyles, '">',
|
||||
|
||||
fabric.util.string.escapeXml(chars[i]),
|
||||
'</tspan>'
|
||||
);
|
||||
this._createTextCharSpan(
|
||||
chars[i], styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset));
|
||||
|
||||
var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
|
||||
|
||||
if (styleDecl.textBackgroundColor) {
|
||||
textBgRects.push(
|
||||
'<rect fill="', styleDecl.textBackgroundColor,
|
||||
'" transform="translate(',
|
||||
-this.width / 2, ' ',
|
||||
-this.height + heightOfLine, ')',
|
||||
'" x="', lineLeftOffset + charOffset,
|
||||
'" y="', lineTopOffset + heightOfLine,
|
||||
'" width="', charWidth,
|
||||
'" height="', heightOfLine,
|
||||
'"></rect>'
|
||||
);
|
||||
this._createTextCharBg(
|
||||
styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset));
|
||||
}
|
||||
|
||||
charOffset += charWidth;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getSVGLineLeftOffset: function(lineIndex) {
|
||||
return (this._boundaries && this._boundaries[lineIndex])
|
||||
? toFixed(this._boundaries[lineIndex].left, 2)
|
||||
: 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getSVGLineTopOffset: function(lineIndex) {
|
||||
var lineTopOffset = 0;
|
||||
for (var j = 0; j <= lineIndex; j++) {
|
||||
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
||||
}
|
||||
return lineTopOffset - this.height / 2;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
|
||||
return [
|
||||
'<rect fill="', styleDecl.textBackgroundColor,
|
||||
'" transform="translate(',
|
||||
-this.width / 2, ' ',
|
||||
-this.height + heightOfLine, ')',
|
||||
'" x="', lineLeftOffset + charOffset,
|
||||
'" y="', lineTopOffset + heightOfLine,
|
||||
'" width="', charWidth,
|
||||
'" height="', heightOfLine,
|
||||
'"></rect>'
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset) {
|
||||
|
||||
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
||||
visible: true,
|
||||
fill: this.fill,
|
||||
stroke: this.stroke,
|
||||
type: 'text'
|
||||
}, styleDecl));
|
||||
|
||||
return [
|
||||
'<tspan x="', lineLeftOffset + charOffset, '" ',
|
||||
yProp, '="', lineTopOffset, '" ',
|
||||
|
||||
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g,'\'') + '" ': ''),
|
||||
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
|
||||
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
|
||||
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
|
||||
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
|
||||
'style="', fillStyles, '">',
|
||||
|
||||
fabric.util.string.escapeXml(_char),
|
||||
'</tspan>'
|
||||
].join('');
|
||||
}
|
||||
/* _TO_SVG_END_ */
|
||||
});
|
||||
|
|
|
|||
|
|
@ -950,64 +950,95 @@
|
|||
*/
|
||||
_setSVGTextLineChars: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {
|
||||
|
||||
var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy';
|
||||
var chars = textLine.split('');
|
||||
var charOffset = 0;
|
||||
var lineLeftOffset = (this._boundaries && this._boundaries[lineIndex])
|
||||
? toFixed(this._boundaries[lineIndex].left, 2)
|
||||
: 0;
|
||||
|
||||
var heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
||||
|
||||
var lineTopOffset = 0;
|
||||
for (var j = 0; j <= lineIndex; j++) {
|
||||
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
||||
}
|
||||
lineTopOffset -= this.height / 2;
|
||||
var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy',
|
||||
chars = textLine.split(''),
|
||||
charOffset = 0,
|
||||
lineLeftOffset = this._getSVGLineLeftOffset(lineIndex),
|
||||
lineTopOffset = this._getSVGLineTopOffset(lineIndex),
|
||||
heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
|
||||
|
||||
for (var i = 0, len = chars.length; i < len; i++) {
|
||||
var styleDecl = this.styles[lineIndex][i] || { };
|
||||
|
||||
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
||||
visible: true,
|
||||
fill: this.fill,
|
||||
stroke: this.stroke,
|
||||
type: 'text'
|
||||
}, styleDecl));
|
||||
|
||||
textSpans.push(
|
||||
'<tspan x="', lineLeftOffset + charOffset, '" ',
|
||||
yProp, '="', lineTopOffset, '" ',
|
||||
|
||||
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g,'\'') + '" ': ''),
|
||||
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
|
||||
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
|
||||
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
|
||||
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
|
||||
'style="', fillStyles, '">',
|
||||
|
||||
fabric.util.string.escapeXml(chars[i]),
|
||||
'</tspan>'
|
||||
);
|
||||
this._createTextCharSpan(
|
||||
chars[i], styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset));
|
||||
|
||||
var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
|
||||
|
||||
if (styleDecl.textBackgroundColor) {
|
||||
textBgRects.push(
|
||||
'<rect fill="', styleDecl.textBackgroundColor,
|
||||
'" transform="translate(',
|
||||
-this.width / 2, ' ',
|
||||
-this.height + heightOfLine, ')',
|
||||
'" x="', lineLeftOffset + charOffset,
|
||||
'" y="', lineTopOffset + heightOfLine,
|
||||
'" width="', charWidth,
|
||||
'" height="', heightOfLine,
|
||||
'"></rect>'
|
||||
);
|
||||
this._createTextCharBg(
|
||||
styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset));
|
||||
}
|
||||
|
||||
charOffset += charWidth;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getSVGLineLeftOffset: function(lineIndex) {
|
||||
return (this._boundaries && this._boundaries[lineIndex])
|
||||
? toFixed(this._boundaries[lineIndex].left, 2)
|
||||
: 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getSVGLineTopOffset: function(lineIndex) {
|
||||
var lineTopOffset = 0;
|
||||
for (var j = 0; j <= lineIndex; j++) {
|
||||
lineTopOffset += this._getHeightOfLine(this.ctx, j);
|
||||
}
|
||||
return lineTopOffset - this.height / 2;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
|
||||
return [
|
||||
'<rect fill="', styleDecl.textBackgroundColor,
|
||||
'" transform="translate(',
|
||||
-this.width / 2, ' ',
|
||||
-this.height + heightOfLine, ')',
|
||||
'" x="', lineLeftOffset + charOffset,
|
||||
'" y="', lineTopOffset + heightOfLine,
|
||||
'" width="', charWidth,
|
||||
'" height="', heightOfLine,
|
||||
'"></rect>'
|
||||
].join('');
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset) {
|
||||
|
||||
var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
|
||||
visible: true,
|
||||
fill: this.fill,
|
||||
stroke: this.stroke,
|
||||
type: 'text'
|
||||
}, styleDecl));
|
||||
|
||||
return [
|
||||
'<tspan x="', lineLeftOffset + charOffset, '" ',
|
||||
yProp, '="', lineTopOffset, '" ',
|
||||
|
||||
(styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g,'\'') + '" ': ''),
|
||||
(styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
|
||||
(styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
|
||||
(styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
|
||||
(styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
|
||||
'style="', fillStyles, '">',
|
||||
|
||||
fabric.util.string.escapeXml(_char),
|
||||
'</tspan>'
|
||||
].join('');
|
||||
}
|
||||
/* _TO_SVG_END_ */
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue