弧内的TextPath

Question

我正在尝试在en曲线之后的Arc形状内添加文本（TextPath）。制作弯曲的TextPath很容易，但是我无法将其放在Arc形状的顶部。

如果我将两个对象的x和y都设置为for.ex。 100和100，它们最终处于不合逻辑的位置，因此，我显然无法理解这里的内容。我要实现的目标显示在所附的屏幕截图中-有人可以演示将TextPath放在en Arc之上吗？谢谢。

what I'm trying to achieve

Answer 1

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

您只需要正确生成SVG路径。您可以从此处使用一些答案：How to calculate the SVG Path for an arc (of a circle)

此外，您也可以使用Konva.Path shape调试生成的路径。

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,output