Javascript 如何在fabric js中使用文本锚定：中间

我已经从fabric js创建了svg。创建卡片时，我使用以下代码将文本对齐应用于对象：

activeObj.set({
    textAlign : 'center',
});
canvas.renderAll();

因此，我的svg如下所示：

现在，当我用原始值更改我的{company_address}address变量时，该文本应该是align center，但它不是

然后我手动修改了SVG，在SVG的tspan标记中添加了文本anchor=middle，这是我变量的位置

添加后，我的文本显示在SVG的中心

那么，有没有一种方法可以使用fabric js来实现这一点，以便在应用文本对齐时包含text anchor=middle

使现代化 我也应用了textAnchor，但它没有转换为svg

代码笔

---

fabric.js中没有SVG的文本锚支持

你可以做得很容易也许

从fabric.js获取文本类，获取svg导出的_getSVGLeftTopOffsets方法。 此方法始终返回-This.width/2。 如果textAnchor位于中间位置，则可能返回0；如果textAnchor位于末尾，则返回此.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方法，将文本锚属性添加到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文件，如下所示：

在_wrapSVGTextAndBg:functionmarkup，textAndBg{as@AndreaBogazzi建议的那样，添加了'text-anchor='+this.textAnchor+''

/**
 * @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'
  );
},

---

通过进行上述更改，现在即使我修改了文本，我的变量仍保持中间状态。

textObj.textAnchor=middle请尝试此操作。@Durga我应该在哪里尝试此操作？在为text对象设置textAlign？时，我不确定转换为svg时是否会使用它，请尝试一下。@Durga请检查此操作是否正确？是否有效？我可以激活它使用您的答案。但现在的问题是，我无法在json上应用该更改意味着json.stringify canvas1.toJSON['id']，有没有办法做到这一点？这样用户就不必在每次编辑卡片模板时应用文本对齐。我想将该属性存储在json中，用于在编辑时渲染画布。我在用户首次创建卡片模板时存储json，然后将该json存储在数据库中。@DS9检查，您可以使用textAnchor prop扩展到对象艾尔蒂。

_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('');
    }
},

$('.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;
    }
});