Canvas canvg呈现对齐的文本路径不工作

Canvas canvg呈现对齐的文本路径不工作,canvas,svg,rendering,canvg,Canvas,Svg,Rendering,Canvg,我正在尝试使用canvg从生成的(使用d3js)SVG对象创建PNG图像。 所有路径(示例中没有)都被完美地渲染,但没有显示与圆形路径对齐的textPath(s.JSFIDLE示例) 哪里出了问题?canvg如何正确呈现文本路径? 这是我的例子 我正在使用SVG中的该部分绘制文本: 0.00Kb 3.50Kb 7.00Kb 10.50Kb 14.00Kb 17.50Kb 21.00Kb 24.50Kb 28.00Kb 31.50Kb 您无法在HTML画布中沿路径轻松绘制文本,因为要这样做,必须

我正在尝试使用canvg从生成的(使用d3js)SVG对象创建PNG图像。 所有路径(示例中没有)都被完美地渲染,但没有显示与圆形路径对齐的textPath(s.JSFIDLE示例)

哪里出了问题?canvg如何正确呈现文本路径?

这是我的例子

我正在使用SVG中的该部分绘制文本:


0.00Kb
3.50Kb
7.00Kb
10.50Kb
14.00Kb
17.50Kb
21.00Kb
24.50Kb
28.00Kb
31.50Kb

您无法在HTML画布中沿路径轻松绘制文本,因为要这样做,必须单独绘制每个文本图示符

例如,在web上有几个沿曲线/圆弧绘制文本的示例(下面复制的JS代码供后人使用)

但是,沿着任意路径绘制它是一个困难得多的问题,因为它不平凡,大多数SVG-to-canvas库从未费心完全解决它


如果该站点出现故障,则来自web示例的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();
函数drawTextAlongArc(上下文、str、centerX、centerY、半径、角度){
var len=str.length,s;
context.save();
上下文。翻译(centerX、centerY);
旋转(-1*角度/2);
旋转(-1*(角度/透镜)/2);
对于(变量n=0;n
搜索canvg textPath,你得到的第一个链接是:@RobertLongson:我看到了。但这个问题是从2011年开始的。也许现在有一个解决办法。一种可能是将textPath转换为普通路径。。