svg几何星形图案生成器
本帖最后由 马黑黑 于 2024-10-6 08:06 编辑 <br /><br /><style>#mama { margin: 20px auto; width: 760px; position: relative; }
#mysvg { outline: 1px dashed gray; }
#txtbox { padding: 8px; width: 740px; height: 200px; }
.wrapper { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid silver; border-radius: 6px; margin-top: 10px; }
.wrapper input { outline: 0; }
.wrapper input { width: 150px; border: 1px solid gray; border-radius: 3px; }
.wrapper input:focus+output { color: red; }
.wrapper input:focus { color: red; }
.wrapper input:checked { filter: drop-shadow(0 0 2px red); }
.wrapper input:checked+label { color: red; }
.wrapper p { margin: 0 6px; }
.tMid { text-align: center; }
</style>
<div id="mama">
<p class="tMid">
<svg id="mysvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<path id="mypath" d="" />
</svg>
</p>
<fieldset class="wrapper">
<legend>配置</legend>
<p><label for="rngTt">曲线总数 ：</label><input id="rngTt" type="range" min="3" max="20" value="5" /> <output id="oTt">5</output></p>
<p><label for="rngAr">圆弧半径 ：</label><input id="rngAr" type="range" min="50" max="180" value="180" /> <output id="oAr">180</output></p>
<p><label for="rngStroke">星形线宽 ：</label><input id="rngStroke" type="range" min="1" max="10" value="2" /> <output id="oSt">2</output></p>
<p><label for="txtStroke">圆弧描边色 ：</label><input id="txtStroke" type="text" value="green" /></p>
<p><label for="rngCr">小圆半径 ：</label><input id="rngCr" type="range" min="3" max="20" value="10" /> <output id="oCr">10</output></p>
<p><label for="txtFill">小圆填充色 ：</label><input id="txtFill" type="text" value="green" /></p>
<p><input id="rdQ" type="radio" name="curve" checked /> <label for="rdQ">Q指令</label> <input id="rdA" type="radio" name="curve" /><label for="rdA">A指令</label></p>
<p><input id="chkDel" type="checkbox" value="delCircles" /> <label for="chkDel">移除小圆</label></p>
</fieldset>
<p><br>svg代码：<br><br></p>
<p><textarea id="txtbox"></textarea></p>
</div>
<script>
const setElms = ;
const outputs = ;
//添加svg元素
addSvgElement = (target,elm,attrAr) => {
let element = document.createElementNS('http://www.w3.org/2000/svg', elm);
attrAr.forEach(item => {
element.setAttribute(item,item);
});
target.appendChild(element);
};
//删除圆
delCircles = () => {
let circles = mysvg.querySelectorAll('circle');
if(circles.length > 0) circles.forEach(circle => mysvg.removeChild(circle));
};
setAttr = (elm,attrAr) => attrAr.forEach(ar => elm.setAttribute(ar, ar));
//绘制函数
draw = () => {
delCircles(); //移除小圆
//生成路径、画小圆、生成svg代码
let pstr = '';
Array(total = rngTt.value * 1).fill('').forEach((_,key) => {
let angle = 360 / total;
let a1 = angle * key;
let a2 = key < total - 1 ? angle * (key + 1) : 0;
let r = rngCr.value * 1,
R = rngAr.value * 1;
let x1 = 200 + R * Math.cos(a1 * Math.PI / 180),
y1 = 200 + R * Math.sin(a1 * Math.PI / 180),
x2 = 200 + R * Math.cos(a2 * Math.PI / 180),
y2 = 200 + R * Math.sin(a2 * Math.PI / 180);
if(!chkDel.checked) addSvgElement(mysvg, 'circle', [['cx',x1],['cy',y1],['r',r],['fill',txtFill.value], ['stroke','none']]);
if(key === 0) {
pstr = rdA.checked ? `M${x1} ${y1} A20 20 0 0 1 ${x2} ${y2}` : `M${x1} ${y1} Q200 200,${x2} ${y2}`;
}else{
pstr += rdA.checked ? `A20 20 0 0 1 ${x2} ${y2}` : `Q200 200,${x2} ${y2}`;
}
setAttr(mypath, [['d', pstr], ['fill', 'none'], ['stroke', txtStroke.value], ['stroke-width', rngStroke.value]]);
txtbox.value = mysvg.outerHTML.replaceAll('\t','').replaceAll('\n','') + '\n\n路径长度 ：' + mypath.getTotalLength();
});
};
setElms.forEach((elm,key) => {
elm.oninput = () => {
draw();
if(key < outputs.length) outputs.value =elm.value;
};
});
rdQ.onclick = rdA.onclick = chkDel.onclick = () => {
draw();
.forEach(item => item.disabled = chkDel.checked ? true : false);
}
draw();
</script>
关于Q指令、A指令：
默认点选了Q指令，使用svg二次贝塞尔曲线绘制图案的边缘线；手动点选A指令，将使用椭圆弧线绘制图案的边缘线，此时圆弧半径应设置小一点，否则图案边缘线部分不可见。
程序默认给圆着色、无描边色，给弧线上描边色、无填充色。如果需要更改填充、描边方式，可以通过文本编辑器对代码进行关键字替换加以实现。 这个太厉害了，不但能画Q指令的二次贝塞尔曲线，还能用A指令绘制椭圆弧线的边缘线，还能给顶点都加上小圆，黑黑的JS运用简直出神入化了{:4_199:} “如果需要更改填充、描边方式，可以通过文本编辑器对代码进行关键字替换加以实现。”
真方便，这样也可以设计想要的任意20以内的边的图形了{:4_187:} 黑黑的互动工具的设计首屈一指，太厉害了{:4_199:} 红影 发表于 2024-10-6 09:53
这个太厉害了，不但能画Q指令的二次贝塞尔曲线，还能用A指令绘制椭圆弧线的边缘线，还能给顶点都加上小圆， ...
果酱了。好用就好 红影 发表于 2024-10-6 09:58
黑黑的互动工具的设计首屈一指，太厉害了
言重了，小小的东东而已 马黑黑 发表于 2024-10-6 12:17
果酱了。好用就好
这个非常好，太厉害了{:4_199:} 马黑黑 发表于 2024-10-6 12:18
言重了，小小的东东而已
做这样的互动工具也需要本事的，黑黑做那么多，厉害{:4_199:} 红影 发表于 2024-10-6 17:13
做这样的互动工具也需要本事的，黑黑做那么多，厉害
几个条件具备了都可以做：一是熟悉JS；二是熟悉HTML、CSS、svg；三是有一定的设计能力；四是有一定的数学功底；五是有一定的创意。 红影 发表于 2024-10-6 17:13
这个非常好，太厉害了
{:4_190:} 可以移除小圆。。留下曲线。。
还可以去掉曲线颜色，单独留下小一圈小圆。。
这个小工具更复杂，更灵活，更有无限可能。。{:4_199:} 马黑黑 发表于 2024-10-6 17:33
几个条件具备了都可以做：一是熟悉JS；二是熟悉HTML、CSS、svg；三是有一定的设计能力；四是有一定的数学 ...
这几个条件都能具备的，简直就是大拿了{:4_199:} 红影 发表于 2024-10-6 19:23
这几个条件都能具备的，简直就是大拿了
css、HTML、XML、JS等都是可以学习的，有数学基础就行 马黑黑 发表于 2024-10-6 17:34
玩了好半天{:4_173:} 红影 发表于 2024-10-6 19:27
玩了好半天
好玩多玩玩 花飞飞 发表于 2024-10-6 18:47
可以移除小圆。。留下曲线。。
还可以去掉曲线颜色，单独留下小一圈小圆。。
这个小工具更复杂，更灵活， ...
{:4_181:} 马黑黑 发表于 2024-10-6 19:33
强悍。 马黑黑 发表于 2024-10-6 19:28
好玩多玩玩
嗯嗯，一个个试，一个个惊叹{:4_187:} 红影 发表于 2024-10-6 20:03
嗯嗯，一个个试，一个个惊叹
挺认真的样纸
页:
[1]
2