弧形内的文本路径

Question

我正试图在弧形形状中添加文本(TextPath(，即沿着en-Arc的曲线。创建弯曲的TextPath很容易，但我没能将其放在弧形形状的顶部。

如果我将两个对象的x和y分别设置为100和100，它们最终会出现在不合逻辑的位置，所以我显然无法理解这里的内容。我试图实现的目标显示在所附的屏幕截图中——有人能做一个将TextPath放在弧形顶部的演示吗？谢谢

我正在努力实现

Answer 1

我稍微修改了您的演示，以尽可能多地删除硬编码的值。

您只需要正确地生成一个SVG路径。你可以从这里得到一些答案：如何计算(圆的(的弧的SVG路径

此外，您还可以使用Konva.Path形状调试生成的路径。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var endAngleOriginal = endAngle;
if(endAngleOriginal - startAngle === 360){
endAngle = 359;
}
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
if(endAngleOriginal - startAngle === 360){
var d = [
"M", start.x, start.y, 
"A", radius, radius, 0, arcSweep, 0, end.x, end.y, "z"
].join(" ");
}
else{
var d = [
"M", start.x, start.y, 
"A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");
}
return d;       
}

var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
var arc = new Konva.Arc({
x: 250,
y: 250,
innerRadius: 100,
outerRadius: 170,
angle: 260,
rotation: 0,
draggable: true,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: 0,
});
layer.add(arc);
var tr1 = new Konva.Transformer({
node: arc,
resizeEnabled: false
});
layer.add(tr1);
var txt = new Konva.TextPath({
x: arc.x(),
y: arc.y(),
draggable: true,
fill: '#333',
fontSize: 22,
fontFamily: 'Arial',
text: "Hello world !",
align: 'center',
data: describeArc(0, 0, (arc.innerRadius() + arc.outerRadius()) / 2, 90, 90 + arc.getAttr("angle")),
});
layer.add(txt);
var tr2 = new Konva.Transformer({
node: txt,
resizeEnabled: false,
});
layer.add(tr2);

const path = new Konva.Path({
x: txt.x(),
y: txt.y(),
data: txt.data(),
stroke: 'red'
});
layer.add(path);
layer.draw();

演示：https://jsbin.com/muwobaxipe/3/edit?js，输出