jquery - Fabric.js 元素中的 flex 文本

Question

如何在 Fabric.js 元素的上下文中应用“沿弧形路径的 HTML5 Canvas 文本”？

http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/使用上面的链接我们可以显示 flex 的文本，我如何在 fabric.js 中实现这一点？？

JS fiddle ::http://jsfiddle.net/E5vnU/

      function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
    var len = str.length, s;
    context.save();
    context.translate(centerX, centerY);
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / len) / 2);
    for(var n = 0; n < len; n++) {
      context.rotate(angle / len);
      context.save();
      context.translate(0, -1 * radius);
      s = str[n];
      context.fillText(s, 0, 0);
      context.restore();
    }
    context.restore();
  }
  var canvas = document.getElementById('myCanvas'), 
    context = canvas.getContext('2d'),
    centerX = canvas.width / 2,
    centerY = canvas.height - 30,
    angle = Math.PI * 0.8,
    radius = 150;

  context.font = '30pt Calibri';
  context.textAlign = 'center';
  context.fillStyle = 'blue';
  context.strokeStyle = 'blue';
  context.lineWidth = 4;
  drawTextAlongArc(context, 'Text along arc path', centerX, centerY, radius, angle);

  // draw circle underneath text
  context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);
  context.stroke();

Answer 1

我刚刚完成了 flex 文本的实现。

https://github.com/EffEPi/fabric.curvedText

您可以像使用任何其他 fabric.Text 对象一样使用它。