动态剪裁多叶草

位置: 首页 > 前端三套件
[发布: 2023.8.15 作者: 马黑阅读: 130]

以下代码，根据玫瑰线原理获得剪裁路径每一个预设点的xy坐标值，并通过polygon多边形参数赋值给待剪裁元素的clip-path属性。

<style>
#mydiv {
	width: 100px;
	height: 100px;
	background: green;
}
</style>

<div id="mydiv"></div>

<script>
let generateClover = (ele, points=200, coe=2) => {
	let r = ele.offsetWidth / 2, pathAr = [];
	Array.from({length: points}).forEach((item,key) => {
		let angle = key * 2 * Math.PI / points;
		let x = r - r * Math.sin(coe * angle) * Math.cos(angle),
			y = r - r * Math.sin(coe * angle) * Math.sin(angle);
		pathAr.push(x + 'px ' + y + 'px');
	});
	ele.style.clipPath = 'polygon(' + pathAr.join(', ') + ')';
};

generateClover(mydiv,100,2);
</script>

函数generateClover()提供三个参数，参数一为待剪裁元素，必选；参数二和三位可选参数，其中，参数二是polygon剪裁点预设数，点越多剪裁的边缘越平滑；参数三为玫瑰花瓣系数，它为奇数时就是花瓣数、为偶数时花瓣数等于该数乘以二（因此，此法画不出六叶草）。

前一篇: JS：cloneNode 能做什么
下一篇: svg分组title信息的实现

发表评论:

评论列表 [0条]