当前位置：网站首页>Using simple JS to realize arc layout

Using simple JS to realize arc layout

2022-07-22 21:01:00 【checkMa】

Easy to use js Realize arc layout

As shown in the figure, the effect
Insert picture description here

The code is as follows 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style> #circle{
      width: 300px; height: 300px; border-radius: 50%; border: 1px solid #000; position: relative; margin: 0 auto; margin-top: 100px; } #circle span{
      position: absolute; width: 20px; height: 20px; background-color: red; } </style>
	</head>
	<body>
		<div id="circle" ></div>
		<script> /** *  Get circular coordinates  *  Calculate the circular layout coordinate points according to the center of the circle  *  The standard equation of a known circle  (x - a) ² + (y - b) ² = r ² *  We can know the coordinates of the current circle through the relevant formula  x , y Is the center of the current circle ,α Is the current point angle ,r As the radius of  *  Circular arc coordinate formula ： x1 = x + r * Math.cos( α * Math.PI / 180 ), y1 = y + r * Math.sin( α * Math.PI / 180) * @param {Number} x  center of a circle x coordinate  * @param {Number} y  center of a circle y coordinate  * @param {Number} r  Circle radius  * @param {Number} nodeNum  Total number of nodes  * @param {Number} nodeIndex  Current node subscript  * @param {Number} changeAngle  Change the initial angle , Initial angle ：x The positive direction of the axis is the starting angle of the circle 0°, Calculated by clockwise rotation  * @return {Object} {x_,y_}  The coordinates of the target point x_,y_ */ function getCirclePosition({
      x, y, r, nodeNum, nodeIndex, changeAngle}){
      //  Get the angle of bisection  let angle = 360 / nodeNum; //  Get the current angle value  let currentAngle = angle * nodeIndex; //  Adjust this angle , You can change the initial angle  if(changeAngle){
      currentAngle = currentAngle + changeAngle; } //  Dot on circle x_ let x_ = x + r * Math.cos((currentAngle * Math.PI) / 180); //  Dot on circle y_ let y_ = y + r * Math.sin((currentAngle * Math.PI) / 180); return {
      x_, y_ } } //  Number of points on arc  let len = 6; for(let i = 1; i <= len; i++){
      let position = getCirclePosition({
      x: 150, y: 150, r: 150, nodeNum: len, nodeIndex: i }) let span = document.createElement("span"); span.style.left = (position.x_ - 10) + 'px'; span.style.top = (position.y_ - 10) + 'px'; span.innerHTML = i; document.getElementById('circle').appendChild(span); } </script>
	</body>
</html>
原网站

版权声明
本文为[checkMa]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207221051513995.html

边栏推荐

猜你喜欢

随机推荐