马黑黑 发表于 2024-11-3 07:56

svg教程·画矩形

本帖最后由 马黑黑 于 2024-11-3 08:00 编辑 <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>rect()</mark></p>
        <p>参数：<mark>x, y, width, height, fill, stroke, stroke-width, rx, ry</mark></p>
        <p>语法：<mark>rect(x, y, width, height, fill, stroke, stroke-width, rx, ry)</mark></p>
        <p>其中：</p>
        <blockquote>
                ① x - 矩形左上角X坐标值，数值<br>
                ② y - 矩形左上角Y坐标值，数值<br>
                ③ width - 矩形宽度值，数值<br>
                ④ height - 矩形高度值，数值<br>
                ⑤ fill - 填充色，颜色值（字符型）<br>
                ⑥ stroke - 描边色，颜色值（字符型）<br>
                ⑦ stroke-width - 描边线厚度，数值<br>
                ⑧ rx - 矩形水平方向圆角半径，数值<br>
                ⑨ ry - 矩形垂直方向圆角半径，数值<br>
                * &nbsp; <span class="tRed">数值可以不用引号，字符型需要使用引号，百分比视为字符型</span>
        </blockquote>
        <p>矩形常规参数（即SVG矩形标签属性）较多，实际绘制时至少需要前四个属性，这将得到一个黑色填充的矩形（下方演示的第一个矩形即是）。SVG矩形可以拥有圆角半径属性，分为X方向和Y方向方向两个半径，分别记作 <span class="tRed">rx、ry</span>。这两个半径只设一个时，另一个缺省值与之相等，当任意一个设置为0时，另一个的设置无效；圆角半径的值为纯数字时视为使用px做单位，支持百分比，在 svgdr 百分比需要使用引号。看看svgdr绘制矩形的几种方法：</p>
        <svg id="msvg" width="800" height="400"></svg>
        <p>绘制代码：</p>
        <div id="div1"><pre id="pre1">
sc.onload = () => {
        var dr = _dr(msvg); //声明画笔
        //开始绘制
        dr.rect(20, 20, 160, 60);
        dr.rect(20, 120, 160, 60, 'cornflowerblue');
        dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
        dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
        dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
        dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
        dr.rect(220, 220, 160, 60, 'none', 'indigo');
        dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
        dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
        dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
        //下面使用其他指令以追加方式继续绘制
        dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
        dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
        dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
        dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
};

        </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.rect(20, 20, 160, 60);
        dr.rect(20, 120, 160, 60, 'cornflowerblue');
        dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
        dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
        dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
        dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
        dr.rect(220, 220, 160, 60, 'none', 'indigo');
        dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
        dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
        dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
        dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
        dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
        dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
        dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
};
&lt;/script&gt;
        </pre></div>
        <p>完整代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 <a href="http://mhh.52qingyin.cn/api/pcode/">pencil code</a> 运行。</p>
       
        <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.rect(20, 20, 160, 60);
        dr.rect(20, 120, 160, 60, 'cornflowerblue');
        dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
        dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
        dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
        dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
        dr.rect(220, 220, 160, 60, 'none', 'indigo');
        dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
        dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
        dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
        dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
        dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
        dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
        dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
        pre2.textContent = dr.code(msvg);
        hl.hl(div2, pre2);
};
</script>

梦江南 发表于 2024-11-3 08:23

黑黑老师早上好！

梦江南 发表于 2024-11-3 08:24

我听课来了。

红影 发表于 2024-11-3 08:24

我想到了前面四项的设置，却忘记最后两项的圆角半径的事了{:4_173:}

红影 发表于 2024-11-3 08:28

这个是前三节课程里参数最多的了，有九项呢，但不难理解，4+3+2 ，指向都很清楚。还有对应的例图，非常清晰的讲解。{:4_199:}

红影 发表于 2024-11-3 08:29

“两个半径只设一个时，另一个缺省值与之相等，当任意一个设置为0时，另一个的设置无效；”

这个黑黑在其他教学里讲过的，这里再加深一下印象{:4_187:}

花飞飞 发表于 2024-11-3 08:55

矩形里还混进来两个圆形~~
把宽高设置一样大小，再加rx('50%').和ry('50%').就变圆了啊。。
有了圆角设置果然可以任意变形。。{:4_170:}

花飞飞 发表于 2024-11-3 08:58

还真是所有图形都是近亲。。
矩形能跟圆扯上关系，还这么自然而然。。。
那么，画圆的方法又多一种，先画个正方形再追加一句50%
还有，三角形能不能圆角啊。。{:4_173:}

花飞飞 发表于 2024-11-3 09:06

这里的主要参数依然尊照按顺序，颜色缺席需占位的规则。。
dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);这里不要rx.只要ry，又没人给rx占位，就追加的方式来描述ry和stroke参数。。。是这意思吧。。
既讲规则，又相对灵活。。{:4_173:}

花飞飞 发表于 2024-11-3 09:08

rx('50%');ry('50%').效果大不相同啊。。。
ry改一点点数据就不圆了。。rx怎么改都是圆的，除非改到10以下。。
奇了。。明明宽高都是160

马黑黑 发表于 2024-11-3 11:35

花飞飞 发表于 2024-11-3 08:55
矩形里还混进来两个圆形~~
把宽高设置一样大小，再加rx('50%').和ry('50%').就变圆了啊。。
有了圆角设置 ...

好玩吧

马黑黑 发表于 2024-11-3 11:43

花飞飞 发表于 2024-11-3 08:58
还真是所有图形都是近亲。。
矩形能跟圆扯上关系，还这么自然而然。。。
那么，画圆的方法又多一种，先画 ...

三角形属于多边形，多边形没有 rx 和 ry 属性。这是隔了太多代，是远近亲。

马黑黑 发表于 2024-11-3 11:44

花飞飞 发表于 2024-11-3 09:08
rx('50%');ry('50%').效果大不相同啊。。。
ry改一点点数据就不圆了。。rx怎么改都是圆的，除非改到10以下 ...

这个原理和CSS的 border-radius 的取值方式一样

马黑黑 发表于 2024-11-3 11:44

花飞飞 发表于 2024-11-3 09:06
这里的主要参数依然尊照按顺序，颜色缺席需占位的规则。。
dr.rect(620, 220, 160, 160, 'forestgreen').r ...

灵活是必须的

马黑黑 发表于 2024-11-3 11:44

梦江南 发表于 2024-11-3 08:23
黑黑老师早上好！

{:4_191:}

马黑黑 发表于 2024-11-3 11:45

红影 发表于 2024-11-3 08:24
我想到了前面四项的设置，却忘记最后两项的圆角半径的事了

最初设计的时候，矩形的圆角半径紧跟在 height 之后，后来觉得不方便，把它们放后面去

马黑黑 发表于 2024-11-3 11:45

红影 发表于 2024-11-3 08:28
这个是前三节课程里参数最多的了，有九项呢，但不难理解，4+3+2 ，指向都很清楚。还有对应的例图，非常清晰 ...

共通的东东很多

小文 发表于 2024-11-3 16:59

收藏备用！问好先生！

花飞飞 发表于 2024-11-3 18:35

马黑黑 发表于 2024-11-3 11:35
好玩吧

{:4_170:}就它俩最好玩了。。混在里面装矩形。。

花飞飞 发表于 2024-11-3 18:37

马黑黑 发表于 2024-11-3 11:43
三角形属于多边形，多边形没有 rx 和 ry 属性。这是隔了太多代，是远近亲。

远亲是远亲，近亲是近亲~~远近亲是哪里的亲戚呀。。
我恍惚记得折角可以是圆的，我去翻翻教程。。{:4_170:}
页: [1] 2 3 4
查看完整版本: svg教程·画矩形