javascript - 如何使用文本 anchor : middle in fabric js

Question

我已经从 Fabric JS 创建了 svg。在创建卡片时，我使用以下代码将文本对齐应用于对象:

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 的中心。

那么有没有办法使用 Fabric js 来做到这一点，以便当我应用文本对齐时它包含 text-anchor="middle" ？

更新

我也应用了textAnchor，但它没有转换为svg。

代码笔

https://codepen.io/dhavalsisodiya/pen/gvQooL

Answer 1

fabric.js 中不支持 svgs 的文本 anchor 。

也许你可以很容易地做到......

从fabric.js中获取text类，使用_getSGLeftTopOffsets方法进行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