Web前端之JavaScript实现图片圆环、圆环元素根据角度指向圆心、translate、rotate

---

前言

代码段创建了一个由6个WiFi图标组成的圆形排列，每个图标均匀分布在圆周上。

---

效果

---

Html

代码

<div class="ring"><div class="item"><img class="img" src="../image/icon/WiFi.png" /></div><div class="item"><img class="img" src="../image/icon/WiFi.png" /></div><div class="item"><img class="img" src="../image/icon/WiFi.png" /></div><div class="item"><img class="img" src="../image/icon/WiFi.png" /></div><div class="item"><img class="img" src="../image/icon/WiFi.png" /></div><div class="item"><img class="img" src="../image/icon/WiFi.png" /></div>
</div><script src="./index.js"></script>

---

解析

外层是一个ring容器，内部包含6个item元素
每个item包含一个WiFi图标图片
最后引入JavaScript文件

---

Style

代码

body {height: 100vh;margin: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #2e2e2e;
}.ring {width: 360px;height: 360px;position: relative;display: flex;justify-content: center;align-items: center;.item {width: 128px;height: 128px;position: absolute;.img {width: 100%;height: 100%;}}
}

---

解析

body样式
设置视口高度（100vh）
移除默认边距
使用flex布局使内容垂直水平居中
设置深灰色背景

---

ring容器
固定宽高360px
相对定位（为绝对定位的子元素提供参考）
flex布局使其内容居中

---

item元素
固定宽高128px
绝对定位（后续通过JavaScript定位）
内部图片填满整个item

---

JavaScript

代码

function init() {let elItem = document.querySelectorAll(".item"),radius = document.querySelector(".ring").clientWidth / 1,itemLen = elItem.length,pieceDeg = 360 / itemLen;for (let i = 0; i < itemLen; i++) {// 角度（度数）let deg = i * pieceDeg,// 角度（弧度）rad = (Math.PI / 180) * deg,x = Math.sin(rad) * radius,y = -Math.cos(rad) * radius;// 同时应用平移和旋转elItem[i].style.transform = `translate(${x}px, ${y}px) rotate(${deg}deg)`;}
}init();

---

解析

初始化变量
elItem: 获取所有item元素
radius: 计算半径(环的宽度除以1，其实就是环的半径)
itemLen: item数量(6个)
pieceDeg: 每个item之间的角度间隔(360°/6=60°)

---

循环处理每个item
1、计算当前item的角度(deg)
2、将角度转换为弧度(rad)
3、使用三角函数计算x和y坐标
3.1、x = sin(rad) * radius
3.2、y = -cos(rad) * radius (负号是因为屏幕坐标系y轴向下为正)
4、应用transform样式
4.1、translate(x, y): 将item移动到圆周上的位置
4.2、rotate(deg): 旋转item使其指向圆心

---

数学原理
代码使用了极坐标到直角坐标的转换公式
1、x = r × sin(θ)
2、y = r × cos(θ)
其中
1、r是半径(180px)
2、θ是角度(转换为弧度)
负的y坐标是因为在计算机屏幕坐标系中，y轴正方向是向下的，与数学中的笛卡尔坐标系相反。

---

效果说明
最终效果是6个WiFi图标均匀分布在一个圆周上，每个图标都指向圆心。这种布局方式常见于菜单或功能项的环形排列。
可以通过修改以下参数调整效果
1、增加/减少item数量
2、调整ring容器的尺寸
3、修改item的尺寸
4、改变旋转或平移的方式