canvg渲染对齐的textPath不起作用答案

【问题标题】：canvg rendering aligned textPath not workingcanvg渲染对齐的textPath不起作用
【发布时间】：2014-03-07 16:40:57
【问题描述】：

我正在尝试使用 canvg 从生成的（使用 d3js）SVG 对象创建 PNG 图像。所有路径（示例中没有）都完美呈现，但未显示与圆形路径对齐的 textPath（s.jsFiddle 示例）。

哪里出错了？ canvg如何正确渲染textPath？

这是我的例子http://jsfiddle.net/T3AR4/

我在 SVG 中使用该部分来绘制文本：

<def>
<path id="time_path" d="M450 12.5 a437.5 437.5 0 1 1 -1 0"></path>
</def>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="0%">0.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="10%">3.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="20%">7.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="30%">10.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="40%">14.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="50%">17.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="60%">21.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="70%">24.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="80%">28.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="90%">31.50Kb</textPath>
</text>

【问题讨论】：

搜索canvg textPath，你得到的第一个链接是：code.google.com/p/canvg/issues/detail?id=111
@RobertLongson：我看到了。但这个问题是从 2011 年开始的。也许现在有一个解决方案。一种可能性是将 textPath 转换为正常路径..

标签： canvas svg rendering canvg

【解决方案1】：

您不能轻易地在 HTML Canvas 中沿路径绘制文本，因为这样做必须单独绘制每个文本字形。

网络上有几个沿曲线/弧线绘制文本的例子，例如here（JS 代码复制如下）。

但是沿着任意路径绘制它是一个更难的问题，而且因为它不平凡，大多数 SVG 到画布的库从来没有费心去完全解决它。

网页示例中的 JS 代码，以防网站出现故障：

  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();

【讨论】：