我试图使用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>
答案 0 :(得分:0)
您无法在HTML Canvas中沿路径轻松绘制文本,因为必须单独绘制每个文本字形。
有几个沿着网络上的曲线/圆弧绘制文本的示例,例如here(下面复制的JS代码用于后代)。
但是沿着任意路径绘制它是一个更难的问题,因为它是非常重要的,大多数SVG到画布的库从不打扰完全解决它。
来自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();