在线生成svg星形图案及path路径
本帖最后由 马黑黑 于 2023-11-10 20:45 编辑 <br /><br /><style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none;}
.tRed { color: red; padding: 2px 4px; }
</style>
<div class="papa">
<p>运行以下代码可以生成星形图案和图案的 path 路径，可以在线修改：① 行1的svg宽高；② 行7的圆心 c、大小圆半径 r1 和 r2、顶点数 num 和初始角度偏移量 angpy 制作自己所需要的图案。</p>
<div class="mama">
<pre class="hCode">
<svg width="<span class="tRed">200</span>" height="<span class="tRed">200</span>">
<path id="mypath" d="M0 0 L200 200" fill="none" stroke="red" />
</svg>
<p><output id="pathMsg"></output></p>
<script>
let c = <span class="tRed">100</span>, r1 = <span class="tRed">10</span>, r2 = <span class="tRed">95</span>, num = <span class="tRed">3</span>, angpy = <span class="tRed">0</span>;
let points = [];
for(i = 0; i< num; i++) {
let angle = 360 / num * i + angpy;
let x1 = (c + Math.cos(angle * Math.PI / 180) * r1).toFixed(2),
y1 = (c + Math.sin(angle * Math.PI / 180) * r1).toFixed(2),
x2 = (c + Math.cos((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2),
y2 = (c + Math.sin((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2);
points.push(, );
}
let d = 'M' + points.join(',') + 'z';
mypath.setAttribute('d', d);
pathMsg.innerText = '路径：' + d;
</script></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
</div>
<script>
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(let i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
if(!btns) return;
btns.onclick = () => {
let val = btns.value;
val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
};
});
let codeRun = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
let tReds = document.querySelectorAll('.tRed');
tReds.forEach((item) => item.contentEditable = 'true');
</script> 本帖最后由 马黑黑 于 2023-11-10 08:31 编辑
【提示】
双击或两击红色的数字，数字会被全选，方便修改。
双击和两击是不尽一样的点击概念。一般而言，双击，两次点击的速度较快，一气呵成；两击，两次点击直接有一定的时间间隔、动作相对从容。
针对一楼红色数字的操作，任何时候，双击都可全选文本；在红色文本获得了焦点的前提下，两击亦可全选文本。
醉美水芙蓉 发表于 2023-11-10 12:06
黑黑老师中午好！欣赏学习老师教程！
感谢支持 黑黑这个可以自己调节修改尺寸，仔细看看明白了一点，可以自己做路径效果 这个就只能做单线图形码 小辣椒 发表于 2023-11-10 18:15
这个就只能做单线图形码
自由路径播放器插件使用的是单路径，就是只有一个 M 小辣椒 发表于 2023-11-10 18:14
黑黑这个可以自己调节修改尺寸，仔细看看明白了一点，可以自己做路径效果
是的。svg的宽高和两个圆的圆心、半径相配套就好 马黑黑 发表于 2023-11-10 19:23
自由路径播放器插件使用的是单路径，就是只有一个 M
哦，这个可以自己画线制作路径 马黑黑 发表于 2023-11-10 19:24
是的。svg的宽高和两个圆的圆心、半径相配套就好
这个我感觉可以看懂了 小辣椒 发表于 2023-11-10 21:00
这个我感觉可以看懂了
{:4_190:} 小辣椒 发表于 2023-11-10 21:00
哦，这个可以自己画线制作路径
那挺好 这个在线生成svg星形图案的帖子好，能直接看效果，还能很方便地修改数据。十分完美的互动帖子{:4_199:} 内外圆两个圆，就可以生成svg星型路径，这个真好{:4_187:} 红影 发表于 2023-11-12 21:56
这个在线生成svg星形图案的帖子好，能直接看效果，还能很方便地修改数据。十分完美的互动帖子
晚上嚎 红影 发表于 2023-11-12 22:00
内外圆两个圆，就可以生成svg星型路径，这个真好
{:4_190:} 马黑黑 发表于 2023-11-12 22:31
晚上嚎
一起嚎{:4_173:} 马黑黑 发表于 2023-11-12 22:31
黑黑自己设计的星形，厉害{:4_187:} 红影 发表于 2023-11-13 21:22
黑黑自己设计的星形，厉害
我觉得，值得嘚瑟的地方是，代码太少了{:4_170:} 红影 发表于 2023-11-13 21:21
一起嚎
嚎嚎更健康