当前位置：网站首页>使用简单的js实现圆弧布局

使用简单的js实现圆弧布局

2022-07-22 10:52:00 【checkMa】

使用简单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>
原网站

版权声明
本文为[checkMa]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_36990322/article/details/107541234

边栏推荐

猜你喜欢

随机推荐