svgdr教程：画直线
画直线
指令：line()
参数：x1, y1, x2, y2, stroke, stroke-width, stroke-linecap
语法：line(x1, y1, x2, y2, stroke, stroke-width, stroke-linecap)
其中：
① x1 - 直线起点X坐标值，数值
② y1 - 直线起点Y坐标值，数值
③ x2 - 直线终点X坐标值，数值
④ y2 - 直线终点Y坐标值，数值
⑤ stroke - 描边色，颜色值（字符型）
⑥ stroke-width - 描边线厚度，数值
⑦ stroke-linecap 直线两头端点线帽样式，字符型，可选值 butt（缺省）、round（圆）、square(方块)
* 数值可以不用引号，字符型需要使用引号，百分比视为字符型
参数 x1、y1、x2、y2 规定了直线的起点和终点；stroke、stroke-width 定义直线的着色与厚度。注意，在svg，直线没有fill、只有stroke 着色属性，而且必须给stroke属性赋值直线才会显示，因此画直线至少需要前五个参数；stroke-linecap 是直线两头的线帽样式。line() 指令未集成 stroke-dasharray 属性，可用 set() 等指令追加，该属性用于定义虚线线段和虚线间隙。请特别注意，在SVG中，设置了线帽虚线的设置可能不生效。下面是几个简单的绘制直线的效果和 svgdr 绘制指令：
以上图案的 svgdr 绘制代码：
dr.line(20, 20, 180, 20, 'fuchsia'); //最少参数 ：需要上色
dr.line(20, 120, 180, 120, 'fuchsia', 20); //+线厚(线帽默认 butt
dr.line(20, 220, 180, 220, 'fuchsia', 20, 'square'); //方形线帽占位
dr.line(20, 320, 180, 320, 'fuchsia', 20, 'round'); //圆形线帽占位
dr.line(180,0,180,400,'silver'); //参照线 ：用于观察线帽占位情况
//画几根竖线
dr.line(300, 20, 300, 120, 'deepskyblue');
dr.line(300, 140, 300, 240, 'deepskyblue', 10);
dr.line(300, 260, 300, 360, 'deepskyblue', 20, 'round');
//画斜线
dr.line(420, 20, 780,120, 'purple');
dr.line(420, 60, 780,160, 'purple', 10);
dr.line(420, 120, 780,220, 'purple', 10, 'round');
dr.line(420, 300, 650,240, 'tan', 20);
dr.line(420, 380, 720,240, 'tan', 10).set('stroke-dasharray','8 4');
上面绘制指令生成的SVG代码如下：
最后发个福利：用 line() 指令绘制一个漂亮的图案。步骤与代码：
① 建立defs标签用来装载 g 分组（第6行）；
② 建立分组 g 标签用来装载直线组合（第7行）；
③ 画两条直线，令其在水平方向无缝衔接，一一加入g标签（第8、9行）；
④ 通过 use 标签实例画 g 分组，使用循环的方式建立N个这样的 use 标签，每一个旋转一定的角度（第11行）。
<svg id="mysvg" width="200" height="200" viewBox="-100 -100 200 200">
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('mysvg');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-90, 0, 90, 0, 'purple', 4).addTo('lines');
dr.line(-30, 0, 30, 0, 'purple', 8, 'round').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${180 / all * key})`) );
</script>
上面代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。
前一篇: svgdr教程·画折线
下一篇: svgdr教程：path路径
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2024-11-6 12:45 发布: ～看代码直线构成参数可以理解，跟折线比，只有起点终点，别的都一样～想到之前线型还有好多种，虚线，双线等，看到这个可以用set指令追加，这个好完美～有个问题，折线是不是也可以通过追加变成虚线样式呢？电脑时试试～
