TextPath внутри дуги - PullRequest
Новая
       21

TextPath внутри дуги

0 голосов
/ 31 октября 2019

Я пытаюсь добавить текст (TextPath) внутри фигуры дуги, которая соответствует кривой en Arc. Сделать изогнутый TextPath очень просто, однако мне не удается поместить его сверху на форму дуги.

Если я задаю x и y обоих объектов для for.ex. 100 и 100, они оказываются в нелогичных местах, поэтому я явно не понимаю что-то здесь. То, чего я пытаюсь достичь, показано на прикрепленном скриншоте - может кто-нибудь сделать демонстрацию размещения TextPath поверх en Arc? Спасибо.

что я пытаюсь достичь

1 Ответ

0 голосов
/ 06 ноября 2019

Я немного изменил вашу демонстрацию, чтобы максимально убрать жестко закодированные значения.

Вам просто нужно правильно сгенерировать путь SVG. Вы можете использовать некоторые ответы здесь: Как рассчитать SVG-путь для дуги (круга)

Также вы можете использовать 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

...