棒棒糖小播生成器代码

马黑黑 · 发表于 2024-10-13 20:33

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

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

x

<style>
#tz { margin: 30px; text-align: center; }
#tz svg { outline: 1px dotted gray; }
#tz textarea { width: 800px; height: 260px; padding: 10px; tab-size: 4; }
</style>

<div id="tz">

<svg width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<g id="line" stroke="tan" fill="lightgreen" stroke-width="4">
			<line x1="-170" y1="0" x2="170" y2="0" />
			<circle cx="-170" cy="0" r="20" stroke="none" />
			<circle cx="170" cy="0" r="20" stroke="none" />
		</g>
	</defs>
</svg>

<p><textarea id="txtbox"></textarea></p>

</div>

<script>
setAttr = (el, obj_data) => {
	for(var key in obj_data) {
		el.setAttribute(key, obj_data[key]);
	}
};

draw = (pa, el, obj_data) => {
	var elm = document.createElementNS('http://www.w3.org/2000/svg', el);
	setAttr(elm, obj_data);
	pa.appendChild(elm);
};

mkLines = (pa, total=5) => {
	Array(total).fill('').forEach((_,key) => {
		let deg = 180 / total * key;
		draw(pa, 'use', {href: '#line', transform: `rotate(${deg})`});
	});
};

var	svg = document.querySelector('svg');
mkLines(svg, 7);

txtbox.value = svg.outerHTML.replaceAll('<use', '\t<use').replaceAll('</use>', '</use>\n');

</script>

马黑黑 · 发表于 2024-10-13 20:45

以上代码，存为本地 .html 文档之后用浏览器打开，即可生成7根棒棒糖的小播图案。可以简单修改代码以便得到自己中意的效果：

11行：stroke 是木棍颜色，fill 是小球颜色；

12行：x1 和 x2 是木棍起始点和终止点X坐标，一正一负、数值相同，若修改，13、14行的 cx 跟着修改，也是一正一负；

13、14行：r 是小圆的半径，通过它修改小圆大小。若想使用椭圆，请用类似如下的代码替换这两行——

<ellipse cx="-170" cy="0" rx="30" ry="20" stroke="none" />
<ellipse cx="170" cy="0" rx="30" ry="20" stroke="none" />

44行：生成多少根棒棒糖，改数字 7 为你需要的数字即可。数字较大时得到的效果可能像轮子。