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

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