如何在不旋转元素的情况下将元素布置成圆形？

Question

目前，我正在使用偏移和旋转将 KonvaJS 中的元素定位在一个圆圈中。是否有另一种方法仍然可以在不旋转文本的情况下将元素布置在一个圆圈中（例如像时钟一样。）

输出如下所示：

代码如下所示：

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
}

Answer 1

您可以使用三角函数找到文本在其角度上的位置：

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()
  }))
}

演示：https://jsbin.com/fizucotaxe/1/edit?html,js,output

如何在不旋转元素的情况下将元素布置成圆形？

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

konvajs