马黑黑 发表于 2025-10-21 20:44

tzMaker指令 lzRot() 绘制多叶草小播演示

<p>此前我们使用 tz.svgsonsRot 绘制了五叶草小播，它基于SVG矢量图形，获得更佳的效果。实现相同绘制功能还有一个 tz.lzRot() 指令，基于 HTML元素，使用CSS属性 clip-path 对N个子元素进行切割、均匀旋转构图，可放大缩小。二者都有一定难度，可通过学习实例代码熟悉掌握。</p>
<p><br></p>
<div class="codebox" data-prev="1">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
        <txt-green>/* .leaf选择器制定单片叶子样式 */</txt-green>
        .leaf {
                position: absolute;
                width: 100%;
                height: 100%;
                background: var(--cc);
                <txt-green>/* 剪裁路径基于 100*100 视口 */</txt-green>
                clip-path: path('M50 50 C10 -12, 90 -12, 50 50');
        }
&lt;/style&gt;

&lt;div class="pa"&gt;&lt;/div&gt;

&lt;script type="module"&gt;
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
        const tz = TZ.TZ('pa');
       
        <txt-green>// 小播容器，定义id以便子元素认亲，使用 .wrap 类选择器</txt-green>
        tz.add('div', 'player', 'wrap100', {
                style: 'transform: scale(3);' <txt-green>// 放大三倍</txt-green>
        });

        <txt-green>// {option} 里是固定的元素配置，共四个参数，顺序不论</txt-green>
        tz.lzRot(5, 'player', {
                cc: 'green', <txt-green>// ① cc变量用于css变量 --cc</txt-green>
                className: 'leaf', <txt-green>// ② 类选择器</txt-green>
                <txt-green>//tag: 'div', // ③ 默认使用 div 标签</txt-green>
                <txt-green>//angle: 360 // ④ 默认是360分配角度</txt-green>
        });
&lt;/script&gt;
</div>

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

红影 发表于 2025-10-21 21:51

看到宽高都是100%，这个不知道是参照什么的100%{:4_204:}

红影 发表于 2025-10-21 21:53

原来两种方法都能做这种多个叶瓣的叶子的小播。
style: 'transform: scale(3);' 这个为什么要放大3倍啊，不能画的时候画大点么？

马黑黑 发表于 2025-10-21 22:14

红影 发表于 2025-10-21 21:53
原来两种方法都能做这种多个叶瓣的叶子的小播。
style: 'transform: scale(3);' 这个为什么要放大3倍啊， ...

这和路径设计有关。clip-path的路径是实打实的路径数据，绝对像素单位，基于固定尺寸，所以需要放大缩小。

svg 则比较灵活，前提是设置好 viewBox，用viewbox规范的尺寸实际路径，而后，svg的宽高是对viewBox的自然伸缩。

马黑黑 发表于 2025-10-21 22:16

红影 发表于 2025-10-21 21:51
看到宽高都是100%，这个不知道是参照什么的100%

这是HTML父子元素的关系。叶片放在 class="wrap100" 的元素中，是子元素，它绝对定位，父元素只要也定位，子元素的100%宽高是取父元素的宽高尺寸为自己的尺寸。

这是基本的HTML父子元素彼此都定位之后的尺寸规则。

红影 发表于 2025-10-21 22:39

马黑黑 发表于 2025-10-21 22:14
这和路径设计有关。clip-path的路径是实打实的路径数据，绝对像素单位，基于固定尺寸，所以需要放大缩小 ...

嗯嗯，知道了，svg里已经由viewBox调整了，这里的需要另外加语句进行调整。

红影 发表于 2025-10-21 22:40

马黑黑 发表于 2025-10-21 22:16
这是HTML父子元素的关系。叶片放在 class="wrap100" 的元素中，是子元素，它绝对定位，父元素只要也定位 ...

嗯嗯，这样就不用另外设置宽高了。

马黑黑 发表于 2025-10-22 12:41

红影 发表于 2025-10-21 22:40
嗯嗯，这样就不用另外设置宽高了。

100~300共三个

马黑黑 发表于 2025-10-22 12:42

红影 发表于 2025-10-21 22:39
嗯嗯，知道了，svg里已经由viewBox调整了，这里的需要另外加语句进行调整。

二者有区别，处理方法就不相同

红影 发表于 2025-10-22 23:08

马黑黑 发表于 2025-10-22 12:41
100~300共三个

嗯嗯，知道了{:4_204:}

红影 发表于 2025-10-22 23:08

马黑黑 发表于 2025-10-22 12:42
二者有区别，处理方法就不相同

二者其实是完全不同的方法呢。

马黑黑 发表于 2025-10-22 23:38

红影 发表于 2025-10-22 23:08
二者其实是完全不同的方法呢。

是的吧

马黑黑 发表于 2025-10-22 23:39

红影 发表于 2025-10-22 23:08
嗯嗯，知道了

有得就不用从头设计，省点事

红影 发表于 2025-10-23 22:32

马黑黑 发表于 2025-10-22 23:38
是的吧

根本思路都不一样。

红影 发表于 2025-10-23 22:33

马黑黑 发表于 2025-10-22 23:39
有得就不用从头设计，省点事

就是小播触碰的变化一样，都做好了，就直接选就行了。

马黑黑 发表于 2025-10-24 12:36

红影 发表于 2025-10-23 22:33
就是小播触碰的变化一样，都做好了，就直接选就行了。

对

马黑黑 发表于 2025-10-24 12:36

红影 发表于 2025-10-23 22:32
根本思路都不一样。

差不多的

红影 发表于 2025-10-24 23:32

马黑黑 发表于 2025-10-24 12:36
对

这样的封装是大宝库，想要什么就从里面取{:4_187:}

红影 发表于 2025-10-24 23:35

马黑黑 发表于 2025-10-24 12:36
差不多的

这个貌似差得比较多呢。

马黑黑 发表于 2025-10-25 18:29

红影 发表于 2025-10-24 23:35
这个貌似差得比较多呢。

差很多也是差不多的
页: [1] 2 3
查看完整版本: tzMaker指令 lzRot() 绘制多叶草小播演示