Rags To Rings

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/r2r.webp') no-repeat center/cover; } #progress { position: absolute; width: 12vw; height: 12vw; right: 30px; bottom: 30px; transition: .4s; } #progress:hover { transform: scale(1.2); } #prog, #track { fill: none; stroke: #CB4085; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; } #prog { stroke-opacity: .8; } #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #CB4085; fill-rule: evenodd; animation: rotate 8s linear infinite var(--state); } #btnFs { right: 20px; top: 20px; color: magenta; background: pink; border-color: currentColor!important; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28949242" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c948cb571e.mp4" autoplay loop muted></video> <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> <g id="g1" class="brightness"><title>ALT+X</title></g> <g id="g2"><title>调节进度</title></g> </svg> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js'; import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js'; var dr = Dr.dr(progress); dr.circle(200, 200, 200, 'transparent').addTo('g1'); dr.path('M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160').addTo(g1).rotates(5, 360, 200, 200); dr.circle(200, 200, 30).id('track').addTo(g2); dr.circle(200, 200, 30).id('prog').addTo(g2); FS(pa, g1); </script>

马黑黑

小播设计

（一）手写一个路径，M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160。设计的时候最好闭上眼睛；

（二）将这个路径绘制出来，加入组1（g1），然后克隆5份（包含原图案在内共5份），按 360 度平均旋转，旋转点在 （200,200）。具体看 27 行代码，rotates 指令请查阅 http://mhh.52qingyin.cn/api/svgdr/；

（三）组1（g1）里还有一个大圆，透明色，它的作用是扩大接受点击的范围。

（四）进度显示与控制在组2（g2），老老实实话两个圆，赋予它们不同的约定好的 id，加入组2。

技巧：用好 rotates() 指令可以省去很多繁琐的工作。该指令主要针对刚刚绘制的图形进行克隆，第一个参数是包含它在内的份数，比如希望所绘制的图形能生成共5份，就用 5 做参数；第二个参数是总角度值，即所希望的在多少个角度值内平分旋转全部克隆的图像；第三、四个参数是旋转圆心点坐标值。

梦江南

黑黑老师又出新小播了。

杨帆

g标签是一个新知识点，谢谢马老师经典讲授与示范

马黑黑

杨帆 发表于 2025-9-17 11:57
g标签是一个新知识点，谢谢马老师经典讲授与示范

这是svg分组标签，之前的讲义有过讲解。

马黑黑

梦江南 发表于 2025-9-17 09:13
黑黑老师又出新小播了。

杨帆

马黑黑 发表于 2025-9-17 13:08
这是svg分组标签，之前的讲义有过讲解。

是，老师之前的讲义内容很丰富呢，讲解也很透彻，应好好学习，谢谢老师

红影

马黑黑 发表于 2025-9-17 08:24
小播设计

（一）手写一个路径，M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160。设计的时 ...

这5个小图还以为加载的图片，原来是自己绘制的。
设计的时候闭上眼睛就不知道弄出来的是什么了，也不可能这么对称呢

红影

这个绘制图案真的好漂亮

红影

这例子主要是讲解 rotates() 指令吧，这个指令能克隆，真的很方便呢

朵拉

漂亮效果，学生已交作业，请老师指正

马黑黑

朵拉 发表于 2025-9-17 16:55
漂亮效果，学生已交作业，请老师指正

马黑黑

杨帆 发表于 2025-9-17 13:18
是，老师之前的讲义内容很丰富呢，讲解也很透彻，应好好学习，谢谢老师

花飞飞

小播漂亮，曲子也吸引人，恢宏大气，旋律激昂。。。听着很过瘾。。。
小播路径是手绘的么。。。
顶点处有一个小点点，可爱。。

马黑黑

红影 发表于 2025-9-17 14:02
这5个小图还以为加载的图片，原来是自己绘制的。
设计的时候闭上眼睛就不知道弄出来的是什么了，也不可 ...

思考需要排除外部干扰，闭上眼睛是减少外部干扰的一个重要手段

马黑黑

红影 发表于 2025-9-17 14:03
这个绘制图案真的好漂亮

闭上眼睛才能想出来的效果

马黑黑

红影 发表于 2025-9-17 14:04
这例子主要是讲解 rotates() 指令吧，这个指令能克隆，真的很方便呢

还好

马黑黑

花飞飞 发表于 2025-9-17 18:17
小播漂亮，曲子也吸引人，恢宏大气，旋律激昂。。。听着很过瘾。。。
小播路径是手绘的么。。。
顶点处有 ...

那个小点点是手一抖就出来了

花飞飞

马黑黑 发表于 2025-9-17 08:24
小播设计

（一）手写一个路径，M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160。设计的时 ...

闭上眼设计得这是胸有成竹。。。
跑去看了rotates指令，克隆并旋转功能把简单的线条都可以整成美妙的图案，
何况是现在这个美人金鱼。。真漂亮哪。。
期待路径设计大师每天闭眼设计一款~~