CODEWITHSUNDEEP
konvajs
gmcerveny
gmcerveny

Reputation: 191

How do I layout elements in a circle without rotating the element?

Currently, I'm using offset and rotation to position elements in KonvaJS in a circle. Is there another method that would still layout the elements in a circle without rotating the text (eg like a clock.)

Output looks like this:

enter image description here

Code looks like this:

function drawNumber(radius, number, step) {
  var segmentDegree = 360/16
  var rotation = -90 + step * segmentDegree
  var label = new Konva.Text({
        x: patternOriginX,
        y: patternOriginY,
        text: number.toString(),
        fontSize: 12,
        fill: '#636363',
        rotation: rotation
      });
  label.offsetX(-radius)
  return label
}

Upvotes: 0

Views: 68

Answers (1)

lavrton
lavrton

Reputation: 20288

You can use trigonometry to find the position of the text on its angle:

var centerX = stage.width() / 2;
var centerY = stage.height() / 2;

var QUANTITY = 10;
var RADIUS = 50;

var dAlhpa = Math.PI * 2 / QUANTITY;


for (var i = 0; i < QUANTITY; i++) {
  var alpha = dAlhpa * i;
  var dx = Math.cos(alpha) * RADIUS;
  var dy = Math.sin(alpha) * RADIUS;

  layer.add(new Konva.Text({
    x: centerX + dx,
    y: centerY + dy,
    text: i.toString()
  }))
}

Demo: https://jsbin.com/fizucotaxe/1/edit?html,js,output

Upvotes: 1

Related Questions