tzMaker指令 ringPos() 应用举例
<div class="codebox" data-prev="1"><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} ${points}`;
for (let i = 1; i <= tt; i ++) {
dd += `Q100 100,${points} ${points}`;
};
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>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 思路：
使用指令 ringPos() 获得指定圆心、大小半径的外切（椭）圆上N多个顶点的坐标数据，再遍历这些顶点，使用SVG的Q指令创建一个路径，最后将路径作为HTML元素的剪裁依据。 这思路很巧妙，一个点接一个点地延续下去，用SVG的Q指令绘制二次贝塞尔曲线，就形成了美妙的图案。
{:4_204:} 好像起点和控制点是固定的，只有终点在变化？ 巧妙的思路，精美的效果，经典的示范，谢谢马老师精彩分享{:4_180:} 杨帆 发表于 2025-10-28 23:06
巧妙的思路，精美的效果，经典的示范，谢谢马老师精彩分享
{:4_190:} 红影 发表于 2025-10-28 22:28
这思路很巧妙，一个点接一个点地延续下去，用SVG的Q指令绘制二次贝塞尔曲线，就形成了美妙的图案。
{:4_20 ...
{:4_190:} 红影 发表于 2025-10-28 22:29
好像起点和控制点是固定的，只有终点在变化？
终点就是回到起点，形成闭合。
起点肯定是第一组XY坐标数据（对应数组下标 0），所以 for 语句设计从 1 开始，设限范围 <= 数组总数，当它遍历到 tt 时，它实际上回到了起点（i 取 tt 的余数此时等于 0）。
每一个循环，都用Q 指令从上一个点画二次贝塞尔曲线到下一个点，曲线的控制点固定在 100 100 坐标处。 等看最终出来的组合成啥子{:4_199:} 未知名 发表于 2025-10-29 06:54
等看最终出来的组合成啥子
应该可以一看 马黑黑 发表于 2025-10-28 23:14
终点就是回到起点，形成闭合。
起点肯定是第一组XY坐标数据（对应数组下标 0），所以 for 语句设计从...
是的，曲线的控制点是固定的，原来是从上一个点画到下一个点。看到了是从1开始的，最后回到的是0呢。
现在知道了{:4_187:} 红影 发表于 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
应该可以一看
应该很好看{:4_176:} 未知名 发表于 2025-10-31 21:34
应该很好看
至少不太难看
页:
[1]