Home>
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
Related articles
- javascript - how to get the closest distance from a specific part among multiple elements with jquery
- javascript - i want to arrange books using repetitive sentences
- javascript - buttons that scale the entire page do not work
- javascript - i want to identify which of the multiple buttons was pressed and save the data in firebase
- javascript rails pushes irrelevant buttons
- javascript - how to get multiple radio buttons with js
- [javascript] i want to sound an ok alert when three buttons are clicked
- javascript - i want to get the values of radio buttons and checkboxes at the same time
- javascript - how to arrange lists and shapes side by side in html
- javascript - i want to measure the buttons in the iframe with google analytics installed on the parent page
- javascript - i want to arrange photos of different sizes with the same margins and lazy loading
- javascript - how to arrange the array hierarchy
- about inactivity of buttons by javascript
Related questions
- javascript : How to display random blocks
- javascript : Swiper js dynamic pagination
- javascript : How do I make a regular div block work like input range?
- JavaScript Create a form using forms, compose a search program using a data structure -an array (simple and binary search)
- javascript : I want to arrange images without HTML and CSS grid
- javascript : Display the 1st column of the dropdown menu [duplicate]
- javascript : How can I reverse the previous condition in an if?
- javascript : Loading an image depending on the width of the screen
- javascript : How do I split a word into letters if they are in the same div?
- javascript : Changing the execution delay in a loop
Consider the following diagram.
Suppose that there are several circles around, such asA 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.
In, 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)