我切（动态生成svg星形切图路径）

马黑黑 · 发表于 2025-8-29 12:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-8-29 12:42 编辑

<img id="girl" width="400" height="400" src="https://638183.freep.cn/638183/small/2025/g0.webp" alt="" /> <script type="module"> var path = createStartPath(8, 200, 160); girl.style.setProperty('clip-path',`path('${path}')`); // 创建星形函数，参数： // lines 边的总数 // r1 外圆半径（确定顶角，取值依据为正方形边长） // r2 内圆半径（确定控制点，取值依据为曲线曲率期望值） // 注意：r1 > r2 是设计初衷 function createStartPath(lines, r1, r2=0) { var a = 360 / lines, path = 'M', bx1, by1, bx2, by2; Array.from({length: lines}).forEach((_,k) => { var a1 = a * k, a2 = a1 - a / 2, x1 = (r1 + r1 * Math.cos(Math.PI / 180 * a1)).toFixed(2), y1 = (r1 + r1 * Math.sin(Math.PI / 180 * a1)).toFixed(2), x2 = (r1 + r2 * Math.cos(Math.PI / 180 * a2)).toFixed(2), y2 = (r1 + r2 * Math.sin(Math.PI / 180 * a2)).toFixed(2); if (k === 0) { bx1 = x1; by1 = y1; bx2 = x2; by2 = y2; path += `${x1} ${y1} `; } else { path += `Q${x2} ${y2},${x1} ${y1} `; } if (k === lines - 1) path += `Q${bx2} ${by2},${bx1} ${by1}`; }); return path; } </script>

马黑黑 · 发表于 2025-8-29 12:36

函数绘制原理：

依据边数设定，计算出外圆上的顶点，同时计算出内圆上的顶点。外圆上的顶点用于确定切割点，内圆上的顶点用于确定曲线的控制点（为了对称角度减去平均角度值的一半）。

通常，外圆半径应大于内圆半径，这样得到的结果是向内凸进的弧线；函数没有处理内圆半径大于外圆半径的机制，但会灵活使用也可以，这将得到比较特别的切割效果。