马黑黑 发表于 2025-9-9 20:14

pathprog模块支持SVG基本图形

<div class="codebox" data-prev="1">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 0px; --bg: beige url('https://puui.qpic.cn/vpic_cover/x3500uwqj3d/x3500uwqj3d_1674481087_hz.jpg/1280') no-repeat center/cover; }
        #ma { width: 100px; height: 100px; right: 120px; bottom: 130px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/yzvisj.png') no-repeat center/cover; }
        #progress { position: absolute; width: 300px; height: 300px; right: 20px; bottom: 20px; }
        #prog, #track { fill: none; stroke: rgba(100,100,0,0.2); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; transform: rotate(30deg); }
        #prog { stroke: yellow; }
        #btnFs { left: 20px; bottom: 20px; color: #eee; border-color: currentColor!important; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1372188429" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
                &lt;ellipse id="track" cx="0" cy="0" rx="130" ry="180" /&gt;
                &lt;ellipse id="prog" cx="0" cy="0" rx="130" ry="180" /&gt;
        &lt;/svg&gt;
        &lt;div id="ma" class="brightness"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        FS(pa, ma);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-9-9 20:19

第 15、16 行代码，绘制了两个 id 不同、设置相同的椭圆，并在第 6、7 行代码通过 CSS 设置了一些相关属性。

就是说，此模块不仅仅只是支持 path 标签，其它SVG图像标签一样支持。

原理很简单：path也好，svg基本图形标签也好，都具备总长度属性，JS 通过 getTotalLength() API 可以获取到数据，就能充当进度指示和调整载体。

花飞飞 发表于 2025-9-9 21:12

马黑黑 发表于 2025-9-9 20:19
第 15、16 行代码，绘制了两个 id 不同、设置相同的椭圆，并在第 6、7 行代码通过 CSS 设置了一些相关属性 ...

漂亮，老想着怎么复杂，实际上常规图案简单又好用。。

红影 发表于 2025-9-9 21:22

其实只要绘制路径或图形的就好，剩下的都留给封装去解决了。厉害{:4_199:}

杨帆 发表于 2025-9-9 21:29

太好了！pathprog模块不只是支持 path 标签，其它SVG图像标签一样支持{:4_199:}

马黑黑 发表于 2025-9-9 21:33

杨帆 发表于 2025-9-9 21:29
太好了！pathprog模块不只是支持 path 标签，其它SVG图像标签一样支持

{:4_181:}

马黑黑 发表于 2025-9-9 21:33

红影 发表于 2025-9-9 21:22
其实只要绘制路径或图形的就好，剩下的都留给封装去解决了。厉害

方便

马黑黑 发表于 2025-9-9 21:33

花飞飞 发表于 2025-9-9 21:12
漂亮，老想着怎么复杂，实际上常规图案简单又好用。。

基本图像容易一些

红影 发表于 2025-9-10 12:21

马黑黑 发表于 2025-9-9 21:33
方便

是黑黑的封装带来的方便{:4_199:}

马黑黑 发表于 2025-9-10 13:49

红影 发表于 2025-9-10 12:21
是黑黑的封装带来的方便

方便的时候方便一下下

红影 发表于 2025-9-10 21:33

马黑黑 发表于 2025-9-10 13:49
方便的时候方便一下下

需要的时候会很方便{:4_187:}

马黑黑 发表于 2025-9-10 21:43

红影 发表于 2025-9-10 21:33
需要的时候会很方便

不需要的时候无所谓方便不方便

红影 发表于 2025-9-10 22:50

马黑黑 发表于 2025-9-10 21:43
不需要的时候无所谓方便不方便

不需要的时候就不用管这些了啊，不过玩这个的肯定都是需要的呢。

马黑黑 发表于 2025-9-10 23:20

红影 发表于 2025-9-10 22:50
不需要的时候就不用管这些了啊，不过玩这个的肯定都是需要的呢。

酱紫

红影 发表于 2025-9-11 16:19

马黑黑 发表于 2025-9-10 23:20
酱紫

肯定的啊。

花飞飞 发表于 2025-9-11 18:32

马黑黑 发表于 2025-9-9 21:33
基本图像容易一些

基本图形的颜值也不错呐

马黑黑 发表于 2025-9-11 19:42

花飞飞 发表于 2025-9-11 18:32
基本图形的颜值也不错呐

过得去

花飞飞 发表于 2025-9-11 20:22

马黑黑 发表于 2025-9-11 19:42
过得去

天生丽质的{:4_196:}

马黑黑 发表于 2025-9-11 21:36

花飞飞 发表于 2025-9-11 20:22
天生丽质的

这叫素颜

花飞飞 发表于 2025-9-12 18:55

马黑黑 发表于 2025-9-11 21:36
这叫素颜

素颜耐看，真实总是美的。
页: [1] 2 3 4
查看完整版本: pathprog模块支持SVG基本图形