我从fabric js创建了svg。创建卡时,我使用以下代码将text-align应用于对象:
activeObj.set({
textAlign : 'center',
});
canvas.renderAll();
所以我的svg如下所示:
https://codepen.io/dhavalsisodiya/pen/BrRbRG
现在当我用原始值更改我的{company_address}地址变量时,该文本应该对齐居中但不是。
https://codepen.io/dhavalsisodiya/pen/VXbRzy
然后我手动修改了SVG,我在SVG的tspan标签中添加了text-anchor="middle"
(这是放置我的变量)
https://codepen.io/dhavalsisodiya/pen/ZxKPab
添加后我的文字出现在SVG的中心。
那么有没有办法使用结构js,所以当我应用文本对齐时它包含text-anchor="middle"
?
我也应用了textAnchor,但它没有转换为svg。
svgs中的fabric.js中没有text-anchor支持。
你可以很容易地做到......
从fabric.js获取文本类,使用_getSVGLeftTopOffsets
方法进行svg导出。这种方法总是返回-this.width/2
。我认为如果textAnchor是中间的话它可以返回0,如果textAnchor结束则返回this.width/2
,变为:
/**
* @private
*/
_getSVGLeftTopOffsets: function() {
return {
textLeft: this.textAnchor === 'middle' ? 0 : this.textAnchor === 'start' -this.width / 2 : this.width / 2,
textTop: -this.height / 2,
lineTop: this.getHeightOfLine(0)
};
},
现在使用_wrapSVGTextAndBg
方法并将text-anchor属性添加到svg代码:
/**
* @private
*/
_wrapSVGTextAndBg: function(markup, textAndBg) {
var noShadow = true, filter = this.getSvgFilter(),
style = filter === '' ? '' : ' style="' + filter + '"',
textDecoration = this.getSvgTextDecoration(this);
markup.push(
'\t<g ', this.getSvgId(), 'transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '"',
style, '>\n',
textAndBg.textBgRects.join(''),
'\t\t<text xml:space="preserve" ',
'text-anchor="' + this.textAnchor + '" ',
(this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
(this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
(this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
(this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
(textDecoration ? 'text-decoration="' + textDecoration + '" ' : ''),
'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >',
textAndBg.textSpans.join(''),
'</text>\n',
'\t</g>\n'
);
},
此时将textAnchor值的默认值添加到文本类中,该值应该是start
感谢@AndreaBogazzi,我能够使用以下方法解决它:
我用下面修改了fabric js文件:
正如@AndreaBogazzi建议的那样,在'text-anchor="' + this.textAnchor + '" ',
中添加了_wrapSVGTextAndBg: function(markup, textAndBg) {
。
/**
* @private
*/
_wrapSVGTextAndBg: function(markup, textAndBg) {
var noShadow = true, filter = this.getSvgFilter(),
style = filter === '' ? '' : ' style="' + filter + '"',
textDecoration = this.getSvgTextDecoration(this);
markup.push(
'\t<g ', this.getSvgId(), 'transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '"',
style, '>\n',
textAndBg.textBgRects.join(''),
'\t\t<text xml:space="preserve" ',
'text-anchor="' + this.textAnchor + '" ',
(this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
(this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
(this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
(this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
(textDecoration ? 'text-decoration="' + textDecoration + '" ' : ''),
'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >',
textAndBg.textSpans.join(''),
'</text>\n',
'\t</g>\n'
);
},
然后我修改了以下内容:
_createTextCharSpan: function(_char, styleDecl, left, top) {
var styleProps = this.getSvgSpanStyles(styleDecl, _char !== _char.trim()),
fillStyles = styleProps ? 'style="' + styleProps + '"' : '';
//Addded to support text-anhor middle
if(this.textAnchor==='middle')
{
return [
'\t\t\t<tspan ',
fillStyles, '>',
fabric.util.string.escapeXml(_char),
'</tspan>\n'
].join('');
}
else
{
return [
'\t\t\t<tspan x="', toFixed(left, NUM_FRACTION_DIGITS), '" y="',
toFixed(top, NUM_FRACTION_DIGITS), '" ',
fillStyles, '>',
fabric.util.string.escapeXml(_char),
'</tspan>\n'
].join('');
}
},
扩展toObjectTo以在json中添加textAnchor,请参见:extend toObject:
$('.text_alignment').click(function(){
var cur_value = $(this).attr('data-action');
var activeObj = canvas.getActiveObject();
if (cur_value != '' && activeObj) {
activeObj.set({
textAlign : cur_value,
textAnchor : 'middle'
});
//To modify Object
activeObj.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
textAnchor: 'middle'
});
};
})(activeObj.toObject);
//activeObj.textAnchor = cur_value;
canvas.renderAll();
}
else
{
alert('Please select text');
return false;
}
});
通过进行上述更改,即使我修改了文本,现在我的变量也保持中间位置。