svgdr教程·path路径

马黑黑 · 发表于 2024-11-7 07:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

path路径

指令：path()

参数：d, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin

语法：path(d, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin)

其中：

① d - path路径标签的 d 属性，用于描述路径走向，是一系列路径指令加数据的集合，字符型
② fill - 填充色，基于路径所包围的区域，缺省时默认用黑色填充，字符型
③ stroke - 路径描边色即线条颜色，缺省时路径为透明不可见，字符型
④ stroke-width - 路径线条厚度，缺省时默认1（像素），数值
⑤ stroke-linecap - 路径起始、终止点线帽样式，字符型，可选值 butt（缺省）、round（圆）、square(方块)
⑥ stroke-linejoin - 路径拐角样式，字符型，缺省值 bevel，可选值 miter（斜接）、round（圆）

关于 path 路径 d 属性

d 属性是 <path> 标签的路径描述，属性值的第一个指令是 M 或 m 表示将画笔移动（move）到某个坐标点，然后根据需要使用相应指令绘制路径。d属性的指令有：

* M（或 m）- 画笔移动到某点，是路径的起始点
① L（或 l）- 画直线到【例】L100 130
② H（或 h）- 画水平线到【例】H240
③ V（或 v）- 画垂直线到【例】V300
④ C（或 c）- 画三次贝塞尔曲线，格式为C 控制点1 控制点2 终点【例】C10 10,390 10,390 200
⑤ S（或 s）- 紧跟 C（c）或此前的 S（s）指令接着绘制平滑曲线到某点，需要一个控制点+终点坐标【例】S195 60,320 180
⑥ Q（或 q）- 画二次贝塞尔曲线，格式为Q 控制点终点【例】Q240 -10,300 200
⑦ T（或 t）- 紧跟 Q（q）或此前的 Q（q）指令接着绘制平滑曲线到某点，只需提供终点坐标【例】Q300 100
⑧ A（或 a）- 画圆弧，格式为 X轴半径 Y轴半径旋转角度大弧(1)或小弧(0) 顺时针(1)或逆时针(0) 终点X坐标终点Y坐标【例】A 30 50 0
0 1 162.55 162.45 * Z（或 z）- 路径是否闭合，加在路径描述数据的末尾【例】M .... Z

以上指令使用大写时称为绝对路径，基于SVG坐标系的点坐标；使用小写是称为相对路径，表示画笔在上一个点的基础上，例如，假设上一个点坐标为 (20,50)，则，l100 60 画直线的指令中，100 表示从X坐标点 20 起笔画 100 个像素的距离、从Y坐标点 50 起笔画 60 个像素的距离，结果画笔所在的新的坐标点将是 (120, 110)。

路径的 d 属性是一个庞杂的学问，svgdr 在绘制路径方面没有对d属性进行指令封装，仅将d作为一个参数使用。路径d属性的设计请自行学习研究，掌握透彻后，世界上将没有什么是d属性描述不出来的——path路径是svg最强大的绘制工具，这一切都归功于d属性。

下面简单演示一下 path() 指令的应用：

以上图案的 svgdr 绘制代码：

//H,V,L 指令
dr.path('M20 20 H100 V100 L180 20','none','blue',4);//(画折线）
dr.path('M20 120 H180 V200 H20 Z','none','blue',4);//画矩形(z命令令其闭合）
//二次贝塞尔曲线 Q、T 指令
dr.path('M20 220 Q60 400,180 220','none','blue',5);
dr.path('M20 380 Q40 290,100 350 T180 300','none','blue',2);
//三次贝塞尔曲线 C、S指令
var d1 = 'M200 20 C0 200,500 300,600 20',
    d2 = 'M200 200 C250 400,300 30,300 260 S360 300, 600 100';
dr.path(d1,'none','pink',3);
dr.path(d2,'none','teal',3);
//圆弧 A 指令
var d3 = 'M640 100 A50,50,0,0,0,740,100 A50,50,0,0,0,640,100';//画圆
var d4 = 'M540 270 A100,50,0,0,0,740,270 A100,50,0,0,0,540,270';//画椭圆
dr.path(d3,'lightblue');
dr.path(d4,'none','purple',4).style('stroke-dasharray: 4 6');

上面绘制指令生成的SVG代码如下：

本节的最后是一个用路径绘制多边形的完整代码示例，代码中：

① 第6行，声明若干变量，其中：tt 是多边形外角总数、r 为半径、angle 为角平均值、d 是d属性字串变量；
② 第7 - 16行，用一个for循环按从小到大遍历所有的角，先将角转换成弧度（第8行），再用cos和sin计算出角所在的点坐标值（第9、10行），里面的 200 是svg中心点坐标（加上它是因为SVG坐标起始于左上角）；接着，用一个if语句判断循环是否为首次动作，是的话，指令使用 M 带上xy值，否则指令使用 L 带上xy值。这些值的获取均不断加到 d 变量中（d += ...）；最后，将路径画出来（第17行），注意这里在d变量值基础上加一个 z 表示路径封闭，否则会有缺口，z大小写都是封闭没有区别。

<svg id="mysvg" width="400" height="400">
 
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('mysvg');
var tt = 8, r = 180, angle = 360 / tt, d = '';
for(var i = 0; i < tt; i ++) {
    var rad = (Math.PI / 180)* i * angle;
    var x = 200 + r * Math.cos(rad),
        y = 200 + r * Math.sin(rad);
    if(i < 1) {
        d += 'M' + x + ' ' + y;
    } else {
        d += ' L' + x + ' ' + y;
    }
}
dr.path(d + 'z','none','gray',8);
</script>

上面代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。

返回目录