Oof eso es un título aproximado.

Quiero crear un elemento de interfaz de usuario en el que muestre una lista de usuarios alrededor de un círculo. Puedo crear n elementos de usuario en la página y ponerlos todos en un punto fijo (por ejemplo, el origen del círculo). Lo que me gustaría hacer a partir de ahí es agregar una etiqueta de estilo que tome el índice de ese usuario y escupa una traducción x y una traducción ay para colocarlas en dicho círculo (que efectivamente es un polígono de lados n ). Obviamente, se conocería el radio del círculo, supongo que está codificado en algún valor de píxel.

Aquí hay una ilustración de lo que quiero decir:

Logré lo que es efectivamente el mismo resultado final colocando cada elemento en la parte superior del círculo y dándole una altura igual al diámetro del padre/contenedor, creando efectivamente un palo largo con el contenido en la punta, que es luego rotado por un ángulo igual a su index * (360/array.length) , el código para eso (en formato Vue) se ve así:

 <div id='circle'> <div class='user' v-for='user, i in users' :key='i' :style='`transform: rotate(${(360/this.users.length) * i}deg)`'> <div :style='`transform: rotate(${-1 * (360/this.users.length) * i}deg)`'> <span>{{user.displayName}}</span> <img :src='user.image' /> </div> </div> </div> ... <style lang='scss'> #circle { background-color: green; height: 500px; width: 500px; border-radius: 50%; position: relative; .user { position: absolute; width: 100px; height: 100%; top: 0; left: 200px; display: flex; flex-direction: column; color: white; img { height: 100px; } } } </style>

con el resultado de ser (horrible fondo verde para el contexto):

Sin embargo, creo que esta solución es menos elegante y dificultará el reformateo en diferentes tamaños de pantalla. Y, en última instancia, tengo mucha curiosidad por saber si el método original es factible en JavaScript, ya que no pude resolverlo.