CODEWITHSUNDEEP
konvajs
Lauris
Lauris

Reputation: 13

TextPath inside an Arc

I'm trying to add text (TextPath) inside an Arc shape, that is following the curve of en Arc. Making a curved TextPath is easy, however I'm failing to put it on top on Arc shape.

If I set x and y of both objects to for.ex. 100 and 100, they end up in illogical locations, so I'm obviously failing to understand something here. What I'm trying to achieve is shown in attached screenshot - could someone make demo of putting a TextPath on top of en Arc ? Thanks.

what I'm trying to achieve

Upvotes: 0

Views: 687

Answers (1)

lavrton
lavrton

Reputation: 20363

I slightly modified your demo to remove hardcoded values as much as possible.

You just need to correctly generate an SVG path. You can use some answers from here: How to calculate the SVG Path for an arc (of a circle)

Also, you can use Konva.Path shape to debug the generated 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();

Demo: https://jsbin.com/muwobaxipe/3/edit?js,output

Upvotes: 2

Related Questions