tzMaker指令 ringPos() 应用举例

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/tz/tz.min.css'; </style> <div id="pa" class="pa"></div> <script type="module"> import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js'; const tz = TZ.TZ('pa'); const points = tz.ringPos(15, {cx: 100, cy: 100, r1: 100, r2: 100}); let tt = points.length, dd = `M${points[0][0]} ${points[0][1]}`; for (let i = 1; i <= tt; i ++) { dd += `Q100 100,${points[i % tt][0]} ${points[i % tt][1]}`; }; tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2667995012'}); tz.add('div', 'player', 'wrap200 rotate-ani', {style: 'background: darkred; cursor: pointer'}).playmp3(); tz.style(`clip-path: path('${dd}')`); </script>

马黑黑

思路：

        使用指令 ringPos() 获得指定圆心、大小半径的外切（椭）圆上N多个顶点的坐标数据，再遍历这些顶点，使用SVG的Q指令创建一个路径，最后将路径作为HTML元素的剪裁依据。

红影

这思路很巧妙，一个点接一个点地延续下去，用SVG的Q指令绘制二次贝塞尔曲线，就形成了美妙的图案。

红影

好像起点和控制点是固定的，只有终点在变化？

杨帆

巧妙的思路，精美的效果，经典的示范，谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-10-28 23:06
巧妙的思路，精美的效果，经典的示范，谢谢马老师精彩分享

马黑黑

红影 发表于 2025-10-28 22:28
这思路很巧妙，一个点接一个点地延续下去，用SVG的Q指令绘制二次贝塞尔曲线，就形成了美妙的图案。
{:4_20 ...

马黑黑

红影 发表于 2025-10-28 22:29
好像起点和控制点是固定的，只有终点在变化？

终点就是回到起点，形成闭合。

起点肯定是第一组XY坐标数据（对应数组下标 0），所以 for 语句设计从 1 开始，设限范围 <= 数组总数，当它遍历到 tt 时，它实际上回到了起点（i 取 tt 的余数此时等于 0）。

每一个循环，都用Q 指令从上一个点画二次贝塞尔曲线到下一个点，曲线的控制点固定在 100 100 坐标处。

未知名

等看最终出来的组合成啥子

马黑黑

未知名 发表于 2025-10-29 06:54
等看最终出来的组合成啥子

应该可以一看

红影

马黑黑 发表于 2025-10-28 23:14
终点就是回到起点，形成闭合。

起点肯定是第一组XY坐标数据（对应数组下标 0），所以 for 语句设计从  ...

是的，曲线的控制点是固定的，原来是从上一个点画到下一个点。看到了是从1开始的，最后回到的是0呢。
现在知道了

马黑黑

红影 发表于 2025-10-29 22:13
是的，曲线的控制点是固定的，原来是从上一个点画到下一个点。看到了是从1开始的，最后回到的是0呢。
现 ...

for循环可能是理解设计的障碍。

for循环语句，有遍历起始位置，有循环上限，有循环步进，酱紫：

for (let i = 起始位置; i < 上限; i += 步进) {
        // 做点什么
}

例如：

for (let i = 0; i < 10; i ++) {
        // 做点什么
}

意思是：循环从 0 开始，循环到 9，每一次循环 i+1

理解了 for语句的结构，就是实际应用了：不同的需求有不同的设计。

未知名

马黑黑 发表于 2025-10-29 17:48
应该可以一看

应该很好看

马黑黑

未知名 发表于 2025-10-31 21:34
应该很好看

至少不太难看