本帖最后由 马黑黑 于 2025-8-7 11:23 编辑 <br /><br /><h2>测试 linenumber 模块</h2>
<div class="codebox" data-prev="1">
<style>
.ma {
margin: 30px auto;
width: 400px;
height: 400px;
background: tan;
}
</style>
<div class="ma"></div>
<p>
<label for="pointsNum">顶点数：</lable>
<input id="pointsNum" type="range" max="20" min="3" value="3" />
<output id="pointsMsg">3</output>
</p>
<p id="pathData"></p>
<script>
const ma = document.querySelector('.ma'); // 待操作元素
let total = 3; // 顶点数（多边形的边总数）
const clipBox = (total) => {
// 获取顶点坐标值 ：参数 r 为多边形外接圆半径
const getPoints = (r) => {
const a = 360 / total; // 平均角度
const R = ma.clientWidth / 2; // 外接圆半径
let res = []; // 坐标值数组
// 遍历所有顶点计算其坐标值
Array.from({length: total}).forEach((_,k) => {
const x = R + r * Math.cos(Math.PI / 180 * a * k);
const y = R + r * Math.sin(Math.PI / 180 * a * k);
res.push({x: x, y: y});
});
res.push(res); //回到原点
return res; // 返回数组
};
const ar1 = getPoints(200); // 外层坐标集 半径要大于里层半径
const ar2 = getPoints(180).reverse(); // 里层坐标集(反转) 半径要小于外层半径
let path = 'M'; // 路径
ar1.forEach((ar, key) => path += `${ar.x}, ${ar.y} `); // 加入外层路径
ar2.forEach((ar, key) => path += `${ar.x}, ${ar.y} `); // 加入里层路径
ma.style.clipPath = `path('${path}')`; // 切割
pathData.textContent = 'clip-path: ' + ma.style.clipPath + ';'; // clip-path属性
};
pointsNum.onchange = () => {
pointsMsg.value = pointsNum.value;
total = pointsNum.value * 1;
clipBox(total);
};
clipBox(total);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>
南无月 发表于 2024-5-19 22:28
管不管没关系，问问还可以
也是，她是中华民族的根，就算不理其他人，故乡人肯定理的{:4_173:}
马黑黑 发表于 2024-5-19 22:57
必须有
直接就上天了{:4_173:}
红影 发表于 2024-5-19 23:06
直接就上天了
可以的
马黑黑 发表于 2024-5-19 22:57
挺好
最后都是发散高手{:4_173:}
红影 发表于 2024-5-19 23:06
最后都是发散高手
那没啥问题
马黑黑 发表于 2024-5-19 23:07
那没啥问题
聚在一起，发散得更厉害。
红影 发表于 2024-5-19 23:17
聚在一起，发散得更厉害。
可能
马黑黑 发表于 2024-5-19 23:18
可能
那就尽情发散吧{:4_173:}
红影 发表于 2024-5-19 23:29
那就尽情发散吧
支持
红影 发表于 2024-5-19 22:57
也是，她是中华民族的根，就算不理其他人，故乡人肯定理的
{:4_170:}是这道理
马黑黑 发表于 2024-5-20 12:07
支持
发散多了也不好，我把这环绕文字都发散到帖子外面去了，怪不得不显示{:4_173:}
南无月 发表于 2024-5-20 12:49
是这道理
咱自家的神仙{:4_173:}
红影 发表于 2024-5-20 21:32
咱自家的神仙
替咱们说话{:4_170:}
红影 发表于 2024-5-20 21:31
发散多了也不好，我把这环绕文字都发散到帖子外面去了，怪不得不显示
半径太大了
南无月 发表于 2024-5-20 21:47
替咱们说话
就是，特别贴心{:4_173:}
马黑黑 发表于 2024-5-20 22:16
半径太大了
是的，没设计对{:4_173:}