使用JavaScript和CSS片段路径属性绘制多边形

我有以下代码，这给了我想要的效果

#覆盖{
背景色：rgba（0,0,0,0.66）；
位置：绝对位置；
z指数：1；
排名：0；
左：0；
宽度：100%；
身高：100%；
剪辑路径：多边形（0%0%，/*外部左上角）*/
0%100%，/*外部左下角*/
220px 100%，/*重叠点外部1*/
220px 50%，/*重叠点内部1*/
220px 310px，/*内部左上角*/
683px 310px，/*内饰右上角*/
683px 450px，/*车内右下角*/
220px 450px，/*重叠点内部2*/
220px 100%，/*重叠点外部2*/
100%100%，/*外部右下角*/
100% 0%);
/*外部右上角*/
}

一些背景

接近

函数main（）{
$（“#覆盖”）.hide（）；
$（“#叠加”）.fadeIn（500）；
$（“#关闭按钮”）。在（“单击”，函数（）{
$（“#覆盖”）.toggle（）；
});
}
$（文件）.ready（主）；

您当然可以在JavaScript中计算多边形字符串，然后在元素上设置该样式。下面是一个示例函数，它可以使用2个像素坐标创建类似的多边形：

#覆盖{
背景色：rgba（0,0,0,0.66）；
位置：绝对位置；
z指数：1；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

一些背景

接近

//复制此功能：
函数生成器（p1、p2）{
变量a=p1[0]+‘px’；
var b=p1[1]+‘px’；
var c=p2[0]+‘px’；
变量d=p2[1]+‘px’；
返回“多边形（”+[
'0% 0%',
'0% 100%',
a+100%，
a+50%，
a+“”+b，
c+“”+b，
c+“”+d，
a+“”+d，
a+100%，
'100% 100%',
'100% 0%'
].join（“，”）+“）”；
}
函数main（）{
//要设置多边形时，请运行此操作：
$（“#overlay”）.css（'clip-path'，generatePoly（[40,80]，[120,200]）；
$（“#覆盖”）.hide（）；
$（“#叠加”）.fadeIn（500）；
$（“#关闭按钮”）。在（“单击”，函数（）{
$（“#覆盖”）.toggle（）；
});
}
$（文件）.ready（主）；

你是说？单击“关闭”按钮后，剪辑路径可能会更改？你不想再次写入新值吗？@MarouenMhiri是的，我想在单击“关闭”按钮后更改剪辑路径。不完全是。我希望能够在一个数组中存储一组不同的多边形坐标，并使用这些坐标来更改一个剪辑路径的路径。我想避免用一堆剪辑路径生成一堆div，或者生成一堆类/id并在cssb中进行更改，但新值是否有任何逻辑或与旧值的依赖关系？@可能是出于这个问题的目的。不。这看起来正是我想要的，但我不确定如何实现它？@tsubi rin我补充了一些评论。您只需复制

generatePoly

函数，并调用

$（“#overlay”）.css（'clip-path'，generatePoly（[40,80]，[120,200]）（使用您自己的坐标）当您想使用它时。我看到了它们，一切都正常，这太神奇了，谢谢。我没有注意到参数是数组，所以在我尝试时它不起作用。现在一切都很好。