棒棒糖小播生成器代码

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

<div class="hE"><pre>
<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);
}
};

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>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</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 为你需要的数字即可。数字较大时得到的效果可能像轮子。

花飞飞 发表于 2024-10-13 20:56

矮油，第一次碰上分评完的。。。二楼没分了哈。。{:4_173:}

花飞飞 发表于 2024-10-13 21:02

马黑黑发表于 2024-10-13 20:45
以上代码，存为本地 .html 文档之后用浏览器打开，即可生成7根棒棒糖的小播图案。可以简单修改代码以便得到 ...

好，改变数量后不用算角度，也不用自己加代码，
把44行7改成任何数字，就能自动生成代码。。
{:4_199:}

花飞飞 发表于 2024-10-13 21:04

我改成了一百，线条宽度改成1，圆半径改成2，非常赞的效果。。
它又有无限可能。。
这个小工具好玩，不然的话要手补一百行代码。

红影发表于 2024-10-13 21:14

这个是源码啊，真好，可以生成对应的图案，还有相应的代码。
只要修改源码就能得到想要的，这个太好了{:4_199:}

红影发表于 2024-10-13 21:16

黑黑厉害，把所有需要计算的都留给计算机了，使用的时候只要结果就行了{:4_199:}

红影发表于 2024-10-13 21:30

红影发表于 2024-10-13 21:31

棒棒多了也不一定像车轮，看上面，像不像葵花籽{:4_173:}

小辣椒 发表于 2024-10-13 21:46

这个可以自己做的代码，黑黑你真的厉害哦{:4_178:}

马黑黑 发表于 2024-10-13 22:19

小辣椒发表于 2024-10-13 21:46
这个可以自己做的代码，黑黑你真的厉害哦

{:4_190:}

马黑黑 发表于 2024-10-13 22:19

红影发表于 2024-10-13 21:30
...

你这个设计很棒棒糖{:4_170:}

马黑黑 发表于 2024-10-13 22:20

红影发表于 2024-10-13 21:16
黑黑厉害，把所有需要计算的都留给计算机了，使用的时候只要结果就行了

这样就不用心算角度了{:4_170:}

马黑黑 发表于 2024-10-13 22:20

红影发表于 2024-10-13 21:14
这个是源码啊，真好，可以生成对应的图案，还有相应的代码。
只要修改源码就能得到想要的，这个太好了{:4_ ...

{:4_190:}

马黑黑 发表于 2024-10-13 22:20

花飞飞发表于 2024-10-13 20:56
矮油，第一次碰上分评完的。。。二楼没分了哈。。

分分分，楼主的命根{:4_170:}

马黑黑 发表于 2024-10-13 22:21

花飞飞发表于 2024-10-13 21:04
我改成了一百，线条宽度改成1，圆半径改成2，非常赞的效果。。
它又有无限可能。。
这个小工具好玩，不 ...

{:4_190:}

马黑黑 发表于 2024-10-13 22:28

红影发表于 2024-10-13 21:30
...

这个是在 g 里多加四个椭圆吧？

红影发表于 2024-10-13 23:07

马黑黑发表于 2024-10-13 22:19
你这个设计很棒棒糖

哪里啊，明明是大花篮呢{:4_173:}

红影发表于 2024-10-13 23:08

马黑黑发表于 2024-10-13 22:20
这样就不用心算角度了

是的，也不用管是35度还是36度了{:4_173:}

红影发表于 2024-10-13 23:08

马黑黑发表于 2024-10-13 22:20

跑去玩了好半天的呢{:4_187:}

页: [1] 2 3 4 5

花潮论坛's Archiver

棒棒糖小播生成器代码