用js实现圆弧布局


<!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>
			/**
			 * 获取环形坐标 
			 * 根据圆心计算圆形布局坐标点
			 * 已知圆的标准方程 (x - a) ² + (y - b) ² = r ²
			 * 通过相关公式可知当前圆的坐标 x , y为当前圆圆心，α为当前点角度，r为半径
			 * 圆弧坐标公式： x1 = x + r * Math.cos( α * Math.PI / 180 )， y1 = y + r * Math.sin( α * Math.PI / 180)
			 * @param {Number} x 圆心x坐标
			 * @param {Number} y 圆心y坐标
			 * @param {Number} r 圆半径
			 * @param {Number} nodeNum 节点总的数量
			 * @param {Number} nodeIndex 当前节点下标
			 * @param {Number} changeAngle 改变初始角度，初始角度：x轴正方向为圆的起始角度0°，以顺时针旋转计算
			 * @return {Object} {x_,y_} 目标点的坐标x_,y_
			 */
			function getCirclePosition({ x, y, r,  nodeNum, nodeIndex, changeAngle}){
				// 获取平分的角度
				let angle = 360 / nodeNum;
				// 获取当前角度值
				let currentAngle = angle * nodeIndex;
				// 调整这个角度，即可变换初始角度
				if(changeAngle){
					currentAngle = currentAngle + changeAngle;
				}
				// 圆上点的x_
				let x_ = x + r * Math.cos((currentAngle * Math.PI) / 180);
				// 圆上点的y_
				let y_ = y + r * Math.sin((currentAngle * Math.PI) / 180);
				
				return { x_, y_ }
			}
			
			// 圆弧上点的个数
			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>
用js实现圆弧布局

猜你喜欢
