马黑黑 发表于 2024-11-1 08:02

svgdr教程·画圆

本帖最后由 马黑黑 于 2024-11-1 09:48 编辑 <br /><br /><style>
        .art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
        .art mark { padding: 2px 6px; background: lightblue; }
        .art svg { outline: 1px solid silver; }
        .tRed { color: red; }
</style>

<h2>画圆</h2>
<div class="art">
        <p>指令：<mark>circle()</mark></p>
        <p>参数：<mark>cx, cy, r, fill, stroke, stroke-width</mark></p>
        <p>语法：<mark>circle(cx, cy, r, fill, stroke, stroke-width)</mark></p>
        <p>其中：</p>
        <blockquote>
                ① cx - 圆心X坐标值，数值<br>
                ② cy - 圆心Y坐标值，数值<br>
                ③ r - 圆的半径，数值<br>
                ④ fill - 填充色，颜色值（字符型）<br>
                ⑤ stroke - 描边色，颜色值（字符型）<br>
                ⑥ stroke-width - 描边线厚度，数值<br>
                * &nbsp; <span class="tRed">数值可以不用引号，字符型需要使用引号，百分比视为字符型</span>
        </blockquote>
        <p>先说明一下：svgdr 各指令所需参数指向svg对应元素的属性，基本遵循svg各元素使用时的属性排列习惯。像 circle() 指令对应 &lt;circle&gt; 标签，画圆，一般在该标签的属性中，按照圆心x、y坐标、半径、填充色、描边色、描边线厚度这样的顺序安排各个属性。svgdr 各指令所需参数看上去很多，但是不是所要的参数都非使用不可，通用的规范是：不论用多少个参数，都按从头到尾的顺序依次选用，例如画圆时我们只用到填充色，那就使用前面四个参数，但不能跳跃使用参数，例如画空心圆不需要填充色，就给它一个 'none' 值，然后才给出第五个参数 stroke 描边颜色。以下例子，分别展示画圆的参数使用方法，注意观察比照：</p>
        <svg id="msvg" width="800" height="400"></svg>
        <p>绘制代码：</p>
        <div id="div1"><pre id="pre1">
dr.circle(100, 100, 90, 'steelblue');//四个参数 : 实心圆
dr.circle(100, 300, 90, 'none', 'red'); //五个参数 ：空心圆
dr.circle(300, 100, 90, 'steelblue', 'red', 4); //全参数 ：实心描边圆
dr.circle(300, 300, 90, 'none', 'red', 4); //全参数 ：空心圆
//下面都是三个参数+style指令画出的圆（style指令后续会有专门介绍）
dr.circle(500, 100, 90).style('fill: tan');
dr.circle(500, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');
dr.circle(700, 100, 90).style('fill: tan; stroke: navy; stroke-width: 4');
dr.circle(700, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');
        </pre></div>
        <p>以上代码生成的SVG代码如下：</p>
        <div id="div2"><pre id="pre2"></pre></div>
        <p>最后给出本节示例svgdr的完整代码：</p>
        <div id="div3"><pre id="pre3">
&lt;svg id="msvg" width="800" height="400"&gt;&lt;/svg&gt;

&lt;script&gt;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
        var dr = _dr(msvg);
        dr.circle(100, 100, 90, 'steelblue');
        dr.circle(100, 300, 90, 'none', 'red');
        dr.circle(300, 100, 90, 'steelblue', 'red', 4);
        dr.circle(300, 300, 90, 'none', 'red', 4);
        dr.circle(500, 100, 90).style('fill: tan');
        dr.circle(500, 300, 90).style('fill: none; stroke: navy');
        dr.circle(700, 100, 90).style('fill: tan; stroke: navy; stroke-width: 4');
        dr.circle(700, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');
};
&lt;/script&gt;
        </pre></div>
       
        <p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
</div>

<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

hl.hl(div1, pre1);
hl.hl(div3, pre3);

sc.onload = () => {
        var dr = _dr(msvg);
       
        dr.circle(100, 100, 90, 'steelblue');
        dr.circle(100, 300, 90, 'none', 'red');
        dr.circle(300, 100, 90, 'steelblue', 'red', 4);
        dr.circle(300, 300, 90, 'none', 'red', 4);
        dr.circle(500, 100, 90).style('fill: tan');
        dr.circle(500, 300, 90).style('fill: none; stroke: navy');
        dr.circle(700, 100, 90).style('fill: tan; stroke: navy; stroke-width: 4');
        dr.circle(700, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');

        pre2.textContent = dr.code(msvg);
        hl.hl(div2, pre2);
};
</script>

梦江南 发表于 2024-11-1 08:33

本帖最后由 梦江南 于 2024-11-1 08:35 编辑

黑黑老师早上好！{:4_190:}

试了一下svgdr的完整代码，里边都是圆、有实心圆、有空心圆，还有描边圆。

小文 发表于 2024-11-1 09:03

好喜欢这个，赞！

红影 发表于 2024-11-1 10:38

svgdr 和 svg 代码相比较就更清楚了，使用svgdr 不用再写属性名称，直接填写数字即可，太方便了{:4_199:}

红影 发表于 2024-11-1 10:43

对于圆，一共6个参数，前三个是描述圆的，后面三个分别是填充色、描边色、描边线厚度，可以选用，但必须按顺序地用，比如不设填充色和描边色，但要设描边线厚度，就要先放两个'none'占位，才可以设置厚度，规矩不能坏，老大老二没来，也得给人家留位置。是这样理解吧{:4_173:}

红影 发表于 2024-11-1 10:46

这6个参数了，遇到数字的直接用，字符的要加小引号，“百分比视为字符型”，嗯，这个挺重要，记下了。

红影 发表于 2024-11-1 10:49

“下面都是三个参数+style指令画出的圆”
黑黑也加了带style指令的比较，是不是有style指令的时候就不需要老大老二老三排排坐了？
哦，是这个指令还能加更多的东西。

马黑黑 发表于 2024-11-1 12:50

红影 发表于 2024-11-1 10:49
“下面都是三个参数+style指令画出的圆”
黑黑也加了带style指令的比较，是不是有style指令的时候就不需要 ...

这个是灵活变通的，觉得怎么方便怎么来就行

红影 发表于 2024-11-1 13:37

马黑黑 发表于 2024-11-1 12:50
这个是灵活变通的，觉得怎么方便怎么来就行

还是不带命令的最方便{:4_173:}

马黑黑 发表于 2024-11-1 15:27

红影 发表于 2024-11-1 13:37
还是不带命令的最方便

那就是直接使用SVG语句

红影 发表于 2024-11-1 16:29

马黑黑 发表于 2024-11-1 15:27
那就是直接使用SVG语句

用封装好的更方便呢，不用输入那些元素名就能做{:4_173:}

亚伦影音工作室 发表于 2024-11-1 17:03

这样做的圆是不是复杂化了，我到喜欢原来的代码又简单又实用。

马黑黑 发表于 2024-11-1 19:17

亚伦影音工作室 发表于 2024-11-1 17:03
这样做的圆是不是复杂化了，我到喜欢原来的代码又简单又实用。

复杂了就不用理它

马黑黑 发表于 2024-11-1 19:18

小文 发表于 2024-11-1 09:03
好喜欢这个，赞！

晚上好

马黑黑 发表于 2024-11-1 19:18

红影 发表于 2024-11-1 10:38
svgdr 和 svg 代码相比较就更清楚了，使用svgdr 不用再写属性名称，直接填写数字即可，太方便了

这也未必，其实呢，必须的属性一个属性都不能少

花飞飞 发表于 2024-11-1 20:30

这是一个画圆的大宝库，
老师列出了各种可能，实际用的时候挑出自己需要的那种就可以了。。
教程详细又层次分明，内容全面。。{:4_199:}

马黑黑 发表于 2024-11-1 20:41

花飞飞 发表于 2024-11-1 20:30
这是一个画圆的大宝库，
老师列出了各种可能，实际用的时候挑出自己需要的那种就可以了。。
教程详细又层 ...

来来去去都是画圆

马黑黑 发表于 2024-11-1 20:46

红影 发表于 2024-11-1 10:43
对于圆，一共6个参数，前三个是描述圆的，后面三个分别是填充色、描边色、描边线厚度，可以选用，但必须按 ...

这是没有办法的办法，除非用 draw() 指令，它是自由的，爱怎么弄怎么弄，但是自由是用繁琐换来的：

dr.draw('circle', {
    cx: 100,
    cy: 100,
    r: 95,
    fill: 'darkgray'
});

花飞飞 发表于 2024-11-1 20:57

马黑黑 发表于 2024-11-1 20:41
来来去去都是画圆

圆的专场呗，画圆是正常滴。。{:4_173:}

马黑黑 发表于 2024-11-1 21:01

花飞飞 发表于 2024-11-1 20:57
圆的专场呗，画圆是正常滴。。

画鸡蛋更正常
页: [1] 2
查看完整版本: svgdr教程·画圆