用clip-path:polygon()内切正多边形

马黑黑 · 发表于 2023-6-17 12:21

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

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

x

宽高: 边数: 边厚:

马黑黑 · 发表于 2023-6-17 12:22

代码

<style>
#mydiv {
width: 200px;
height: 200px;
background: rebeccapurple;
border-radius: 50%;
}
.papa > div, .papa > p { margin: 20px 0; }
.papa label, .papa input { margin: 0 8px; }
</style>
<div class="papa">
<p>
<input id="btnReset" type="button" value="重置" />
<label for="numLen">宽高:</label>
<input id="numLen" type="number" value="200" min="100" max="1000" />
<label for="numPoint">边数:</label>
<input id="numPoint" type="number" value="3" min="3" max="360" />
<label for="numThick">边厚:</label>
<input id="numThick" type="number" value="10" min="5" max="40" />
<input id="btnOk" type="button" value="裁剪" />
</p>
<div id="mydiv"></div>
<div id="msgBox"></div>
</div>
<script>
let clipBox = (xx,points,thick) => {
if(points < 3) points = 3;
let x0 = y0 = r = xx / 2, pointsAr = [`200px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
for(let i = 0; i <= points; i ++) {
let hudu = Math.PI / 180 * 360 / points * i;
let x1 = x0 + Math.cos(hudu) * (r - thick), y1 = y0 + Math.sin(hudu) * (r - thick);
pointsAr.push(x1 + 'px ' + y1 + 'px');
}
pointsAr.push(`${xx}px ${xx/2}px`);
pointsAr.push(`${xx}px 0px`);
return `polygon(${pointsAr.join(',')})`;
}
let limit = (box,min,max) => {
if(box.value < min) box.value = min;
if(box.value > max) box.value = max;
}
numPoint.onchange = () => limit(numPoint,3,360);
numLen.onchange = () => limit(numLen,40,600);
numThick.onchange = () => limit(numThick,5,40);
btnOk.onclick = () => {
mydiv.style.width = numLen.value + 'px';
mydiv.style.height = numLen.value + 'px';
mydiv.style.clipPath = clipBox(numLen.value, numPoint.value, numThick.value);
msgBox.innerText = 'clip-path: ' + mydiv.style.clipPath + ';';
}
btnReset.onclick = () => {
mydiv.style.clipPath = '';
mydiv.style.width = '200px';
mydiv.style.height = '200px';
numLen.value = '200';
numPoint.value = '3';
numThick.value = '10';
msgBox.innerText = '';
}
</script>

复制代码

马黑黑 · 发表于 2023-6-17 12:25

本帖最后由马黑黑于 2023-6-17 12:26 编辑

核心思路：

先从外围起剪，到 {100%, 50%} 处往里水平切厚度单位的距离，然后里面的切法交给 for 语句完成，回到往里切厚度单位的那个点后，沿原路返回 {100%, 50%} 处，再裁剪外围尚未裁剪的部分并回到起点。

马黑黑 · 发表于 2023-6-17 12:32

需要突破本例的一些限定的，请在本地测试时修改如下JS语句：

numPoint.onchange = () => limit(numPoint,3,360); /* 边数限制 */

numLen.onchange = () => limit(numLen,40,600); /* 正方形尺寸 */

numThick.onchange = () => limit(numThick,5,40); /* 预留厚度 */