I want to place buttons in a circle using html, css, and javascript, with the same distance between each button.
There are large and small buttons.
Although it is an image, I want to make the blue arrows in the figure equally spaced.
I have created it referring to the following article, but I do not know how to make the arrangement I want to make.
Link content
If i create with the contents of the article, the red arrows in the following figure will be equal.
Please refer to this article and tell me how to make the blue arrows in the figure equally spaced.
I am sorry that the question is abstract and difficult to communicate, thank you. -List

Description] (4fc1beb78c94d0709e645c65436a76a2. png)

  • Answer # 1

    Consider the following diagram.

    Suppose that there are several circles around, such as

    A is the first center, B is the center circle, and D is the center circle. When considering the circle with the center B, the angle α consisting of B-A-C can be obtained because AB and AC are the radii of the center and BC is the radius of the B circle. Then, the angle that B circle occupies in A circle is 2α. Find the angles in the same way for all the outer circles and get the total. Let β be the sum of 2π minus the total and divided by the number of circles. If you make the width from β to CE like that, the neighbors can all be β at the intersection of the central garden and the outer circle, so it looks like a regular interval.

    This method is approximate. If the radius of each circle is not sufficiently small compared to the radius of A, the error will be noticeable. The distance between individual circles (CE length in the image) is different from the distance between circles (length in the image minus the radius of each BD). If the radius of A is sufficiently large, I think that it is an inconspicuous error. However, if there are circles with a radius close to the radius of A, be careful as they may overlap.


    , I didn't know how to make the real circle distance, the distance of BD minus the radius, equal. Although it seems that it can be obtained from the point where the number of BAD angles added is 2π, I did not know if there was a simple way to find it programmatically. (Please tell me if you are strong in mathematics)