马黑黑 发表于 2024-11-14 07:41

svgdr教程·draw + addTo

<style>
        .art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
        .art mark { padding: 2px 6px; background: lightblue; }
        .art svg { outline: none; }
        .tRed { color: red; }
</style>

<div class="art">
        <h2>draw & addTo</h2>
        <p><strong>一、万能绘制指令 draw</strong></p>
        <p>指令：<mark>draw()</mark>
        <p>参数：<mark>name, option</mark>
        <p>语法：<mark>draw(name, option)</mark>
        <p>参数解释：</p>
        <blockquote>
                ① name - 必须，要绘制的图形名称，例如 circle、path<br>
                ② option - 必须，格式为一系列键值对的JS对象，例如 <mark>{ cx: 120, y: 120, r: 100, fill: 'gray' }</mark><br>
                * 健名若有连接符 - ，需要用引号包裹，例如 stroke-width: 4 应写成 <mark>'stroke-width': 4</mark>，否则JS报错
        </blockquote>
        <p><strong>二、添加到指令 addTo</strong></p>
        <p>指令：<mark>addTo()</mark></p>
        <p>参数：<mark>id</mark></p>
        <p>语法：<mark>addTo(id)</mark></p>
        <p>参数解释：</p>
        <blockquote>
               id为添加到的目标元素id标识符，例如将当前绘制的对象添加到id="g1"的分组标签：<mark>addTo('g1')</mark>
        </blockquote>
        <p>以下效果使用 draw() 指令绘制而成，过程中使用 addTo() 指令给元素添加animate动画。动画可通过点击圆暂停/继续：</p>
        <svg id="svg1" width="300" height="300"></svg>
        <p>svgdr绘制指令（不包含JS部分）：</p>
        <div id="div1"><pre id="pre1">
dr.draw('circle', {cx: 150, cy: 150, r: 130, fill: 'peru', cursor: 'pointer'}); //画圆
//画矩形
dr.draw('rect', {
        id: 'rt1',
        x: 5,
        y: 5,
        width: 290,
        height: 290,
        fill: 'none',
        stroke: 'peru',
        'stroke-width': 5,
        'stroke-dasharray': 5,
});
//绘制动画并将动画授予矩形
dr.draw('animate', {
        attributeName: 'stroke-dashoffset',
        values: `0;${rt1.getTotalLength()}`,
        dur: '20s',
        repeatCount: 'indefinite'
}).addTo('rt1');
        </pre></div>
        <p>生成的SVG代码（不包含JS部分）：</p>
        <div id="div2"><pre id="pre2"></pre></div>
        <p>理论上 draw() 指令可以创建所有的svg标签，但它不是真的万能，比如目前它无法创建嵌套的标签，只是单纯地完成指定标签的创建。addTo() 指令不能绘制元素，但可以配合其他绘制或创建元素指令将当前的元素移动到指定id的元素，从而达成标签嵌套的目的，在这个意义上来说，作为功能性的 svgdr 指令，它也是十分强大的。</p>

        <p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
        <!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" targete="_blank">返回目录</a></p-->
</div>

<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js?v=0.53';

var dr1 = draw.dr('svg1');

dr1.draw('circle', {id: 'c1', cx: 150, cy: 150, r: 130, fill: 'peru', cursor: 'pointer'});

dr1.draw('rect', {
        id: 'rt1',
        x: 5,
        y: 5,
        width: 290,
        height: 290,
        fill: 'none',
        stroke: 'peru',
        'stroke-width': 5,
        'stroke-dasharray': 5,
});

dr1.draw('animate', {
        attributeName: 'stroke-dashoffset',
        values: `0;${rt1.getTotalLength()}`,
        dur: '20s',
        repeatCount: 'indefinite'
}).addTo('rt1');

pre2.textContent = dr1.code(svg1);

dr1.js(`
        var isRunning = true;
        c1.onclick = () => {
                isRunning ? svg1.pauseAnimations() : svg1.unpauseAnimations();
                isRunning = !isRunning;
        }
`);

hl.hl(div1, pre1);
hl.hl(div2, pre2);
</script>

梦江南 发表于 2024-11-14 09:51

谢谢老师辛苦，学习了！{:4_199:}

泡沫 发表于 2024-11-14 12:21

这个效果不是一般的漂亮。。而且也好懂
无论是技术还是颜值还有亲和度都顶级{:4_173:}

泡沫 发表于 2024-11-14 12:36

动态虚线边框之前在《茉》贴子里面出现过。
只有一点差别《茉》里的移动设为from="0" to="-48"这里用的是values="0;1160"。。转动方向不相同
两个都无限循环。

泡沫 发表于 2024-11-14 12:37

原来 draw叫做万能绘制指令，十分强大。。

马黑黑 发表于 2024-11-15 11:52

泡沫 发表于 2024-11-14 12:37
原来 draw叫做万能绘制指令，十分强大。。

还好

红影 发表于 2024-11-15 12:09

这个可以赋予动画给图形，厉害了{:4_199:}

泡沫 发表于 2024-11-15 15:50

马黑黑 发表于 2024-11-15 11:52
还好

看到它就想到无限可能，很贴切的。{:4_173:}

马黑黑 发表于 2024-11-15 19:35

泡沫 发表于 2024-11-15 15:50
看到它就想到无限可能，很贴切的。

嗯呐

泡沫 发表于 2024-11-16 12:11

马黑黑 发表于 2024-11-15 19:35
嗯呐

跟addTo() 指令双剑合壁，就更厉害了。{:4_173:}几乎无所不能

马黑黑 发表于 2024-11-16 12:43

泡沫 发表于 2024-11-16 12:11
跟addTo() 指令双剑合壁，就更厉害了。几乎无所不能

那倒没有，强一点而已

泡沫 发表于 2024-11-16 20:44

马黑黑 发表于 2024-11-16 12:43
那倒没有，强一点而已

那就是本身就够强了

马黑黑 发表于 2024-11-16 20:45

泡沫 发表于 2024-11-16 20:44
那就是本身就够强了

强一点点

泡沫 发表于 2024-11-16 20:52

马黑黑 发表于 2024-11-16 20:45
强一点点

那也是强。。合起来反正能干的事情更多，图案更完美，贴子更漂亮{:4_173:}

马黑黑 发表于 2024-11-16 20:59

泡沫 发表于 2024-11-16 20:52
那也是强。。合起来反正能干的事情更多，图案更完美，贴子更漂亮

还行

泡沫 发表于 2024-11-16 21:31

马黑黑 发表于 2024-11-16 20:59
还行

{:4_180:}说行就行不行也得行。

马黑黑 发表于 2024-11-16 21:33

泡沫 发表于 2024-11-16 21:31
说行就行不行也得行。

也好

泡沫 发表于 2024-11-16 21:34

马黑黑 发表于 2024-11-16 21:33
也好

又一个好，小本本记下来

马黑黑 发表于 2024-11-16 21:35

泡沫 发表于 2024-11-16 21:34
又一个好，小本本记下来

应该的

泡沫 发表于 2024-11-16 21:53

马黑黑 发表于 2024-11-16 21:35
应该的

集够七个，召唤神龙{:5_117:}
页: [1] 2
查看完整版本: svgdr教程·draw + addTo