内切规则多边形代码
本帖最后由 马黑黑 于 2025-8-6 20:37 编辑 <br /><br /><style>#prevBox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #eee; display: none; padding: 0; overflow: hidden; z-index: 1000; margin: 0; }
#prevBox::after { position: absolute; content: '关闭预览'; bottom: 10px; left: calc(50% - 40px); padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
</style>
<div id="prevBox"></div>
<div id="cbox" class="codebox">
<style>
.ma {
margin: 30px auto;
width: <txt-red>400px</txt-red>;
height: <txt-red>400px</txt-red>;
background: tan;
}
</style>
<div class="ma"></div>
<p id="pathData" style="text-align: center;"></p>
<script>
const ma = document.querySelector('.ma'); <txt-green>// 待操作元素</txt-green>
const total = <txt-red>3</txt-red>; <txt-green>// 顶点数（多边形的边总数）</txt-green>
<txt-green>// 获取顶点坐标值 ：参数 r 为多边形外接圆半径</txt-green>
const getPoints = (r) => {
const a = 360 / total; <txt-green>// 平均角度</txt-green>
const R = ma.clientWidth / 2; <txt-green>// 外接圆半径</txt-green>
let res = []; <txt-green>// 坐标值数组</txt-green>
<txt-green>// 遍历所有顶点计算其坐标值</txt-green>
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); <txt-green>//回到原点</txt-green>
return res; <txt-green>// 返回数组</txt-green>
};
const ar1 = getPoints(<txt-red>200</txt-red>); <txt-green>// 外层坐标集 半径要大于里层半径</txt-green>
const ar2 = getPoints(<txt-red>180</txt-red>).reverse(); <txt-green>// 里层坐标集(反转) 半径要小于外层半径</txt-green>
let path = 'M'; <txt-green>// 路径</txt-green>
ar1.forEach((ar, key) => path += `${ar.x}, ${ar.y} `); <txt-green>// 加入外层路径</txt-green>
ar2.forEach((ar, key) => path += `${ar.x}, ${ar.y} `); <txt-green>// 加入里层路径</txt-green>
ma.style.clipPath = `path('${path}')`; <txt-green>// 切割</txt-green>
pathData.textContent = 'clip-path: ' + ma.style.clipPath + ';'; <txt-green>// clip-path属性</txt-green>
</script>
</div>
<blockquote>代码可以存为本地 .html 文档后运行（建议，酱紫可以修改重要的数据），或到我的网站直接运行：<a href="http://mhh.52qingyin.cn/art/show.php?st=4&sd=4&art=mahei_1754482655" target="_blank">内切多边形代码及演示</a>，还可以将代码复制到 <a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">pencil code</a> 进行代码调试。</blockquote>
<script type="module">
import linenum from 'https://638183.freep.cn/638183/web/js/linenum.js';
linenum();
</script> 红色字体的数据应根据需要和具体情况修改。顶点数大于等于3，最多建议 20。顶点数越多，切割效果也会接近圆环，当然得到的路径属性值的字符数就会越大。 这个代码主要是拿到 clip-path 属性值，得到该值后，可以应用于需要的项目。 运行代码也没看到内切效果啊？{:4_203:} 红影 发表于 2025-8-6 20:56
运行代码也没看到内切效果啊？
这个也不知道怎么回事，你刷新一下再看看一楼 马黑黑 发表于 2025-8-6 20:22
红色字体的数据应根据需要和具体情况修改。顶点数大于等于3，最多建议 20。顶点数越多，切割效果也会接近圆 ...
刚刚试了几个数字，每种都能完美显示。 。。
顶点再多就成圆了{:4_173:} 这计算好复杂，只有白老师这样的最强大脑能算得出来。。。
我还是直接用好了。。{:4_170:} 反正能大能小，能切厚能切薄，能整成各种相框或者圆环。。色彩变一变就立体了吧。 马黑黑 发表于 2025-8-6 20:57
这个也不知道怎么回事，你刷新一下再看看一楼
嗯嗯，跳到你的网站看到了，还看到了切割路径的配置，真好{:4_187:} 马老师厉害！又一次成功探索：规则多边形可以内切了，还能拿到 clip-path 属性值。{:4_190:} 杨帆 发表于 2025-8-6 22:10
马老师厉害！又一次成功探索：规则多边形可以内切了，还能拿到 clip-path 属性值。
这个其实只是针对规则多边形，不规则的就比较难实现 红影 发表于 2025-8-6 21:43
嗯嗯，跳到你的网站看到了，还看到了切割路径的配置，真好
我修改了一下，运行后可以改变顶点数 花飞飞 发表于 2025-8-6 21:25
反正能大能小，能切厚能切薄，能整成各种相框或者圆环。。色彩变一变就立体了吧。
切割的东西要渲染出立体来需要点修饰的功夫 花飞飞 发表于 2025-8-6 21:22
这计算好复杂，只有白老师这样的最强大脑能算得出来。。。
我还是直接用好了。。
知道原理后可以手动计算，不过还是让JS去完成这些计算省事 花飞飞 发表于 2025-8-6 21:20
刚刚试了几个数字，每种都能完美显示。 。。
顶点再多就成圆了
同时路径字符也是一大堆的 马黑黑 发表于 2025-8-6 23:36
我修改了一下，运行后可以改变顶点数
这个太好了，不用自己去设置，直接就可以看到了{:4_199:} 马黑黑 发表于 2025-8-6 23:37
切割的东西要渲染出立体来需要点修饰的功夫
{:4_173:}太费功夫就算了，我也就天马行空想到了，那么一说 马黑黑 发表于 2025-8-6 23:37
知道原理后可以手动计算，不过还是让JS去完成这些计算省事
{:4_170:}就是，交给电脑多省事。。这方面电脑有大优势 马黑黑 发表于 2025-8-6 23:38
同时路径字符也是一大堆的
看到了，边越多路字符越长{:4_173:}可以直接预览，更改点数了。这个太方便了 花飞飞 发表于 2025-8-7 17:29
看到了，边越多路字符越长可以直接预览，更改点数了。这个太方便了
{:4_191:}