多边形？平滑折线图？来学Path形状！【Kustom教程】

引言

在Kustom系列的图形中，有一个叫做Path形状的东西，它可以用一种更优雅的方式来画多边形、折线统计图，甚至…… （本文使用KWGT 3.73b314510作演示）

那么，该怎么使用它呢？ 那就需要我们了解一下SVG语法了～

一、基础

1. 什么是SVG？

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形标准，它可以用来描述二维图形和动画效果。 SVG语法是一种描述SVG图形的语言，主要由标签、属性和值组成。 2. 画个五角星吧～

我们先尝试画一个五角星。 我们知道，在SVG路径语法中，「M」命令代表落笔点（起始点），后面紧跟的坐标参数指定了该点在路径中的位置。而「L」命令则代表绘制一条直线，后面紧跟的坐标参数指定了直线的终点坐标。 因此，「M 50,0」表示起始点坐标为(50,0)，在它后面加「L 62,38」表示从起始点(50,0)绘制一条直线到(62,38)。像上述这样的每一段指令都需要用空格隔开。

另外，「Z」命令用于将当前绘制点与路径的起始点连接，形成一个「闭合路径」。 「Z」命令并不需要后面跟随任何坐标参数，因为它会自动将路径的终点坐标与起始点坐标连接起来。 遵循上面的规则，尝试画一个五角星。 即： M 50,0 L 62,38 L 100,38 L 69,62 L 81,100 L 50,75 L 19,100 L 31,62 L 0,38 L 38,38 Z

3. 画折线∧_∧

如果你想用来画折线，其实也非常简单。 假如我要画一条折线图，数据的x、y坐标分别是(0,50)、(25,20)、(50,40)、(75,80)、(100,75)，我应该怎么写呢？ 揭晓答案 M 0,50 L 25,20 L 50,40 L 75,80 L 100,75

这段代码后面不需要加「Z」，因为这是折线，我们不需要把路径「闭合」，只有画封闭图形的时候才需要加。 好了，接下来又有聪明的酷友要问了，我看某大佬他用这个画的折线图都是很平滑的。 那么这种平滑曲线应该怎么做呢？ 4.平滑曲线的制作～

了解一下命令「C」 ，定义三次贝塞尔曲线。 这是个什么东东我就不详细解释了，可以去百度查一下，你只需要知道它可以画平滑曲线就行了。 书接上回，如果我们要画一个平滑的折线图，可以通过将折线图曲线化来使其变得平滑，通过在路径中使用曲线命令来实现。 以下是一个使用C命令绘制简单平滑曲线的例子： M 50,50 C 75,0 125,100 150,50

代码定义了一个落笔点M (50,50)，然后使用C命令连接了三个点(75,0)、(125,100)、(150,50)，从而绘制出一条简单的曲线。 需要注意的是，C命令需要三个参数： 两个控制点和一个结束点 —— 第一个控制点控制曲线的起始方向，第二个控制点控制曲线的结束方向。 你可以根据实际需要调整这些参数来绘制出不同形状的曲线。 好了，正文到此结束 接下来是进阶知识（拓展提高） 二、进阶知识

以下是一些常用的SVG语法（深入了解）： 1. 值

SVG属性可以有不同类型的值，如颜色值、长度值、角度值等。常见的SVG值包括： - 颜色值：可以使用颜色名称、RGB值、十六进制颜色值等。 - 长度值：可以使用像素（px）、百分比（%）等。 - 角度值：可以使用度（deg）、弧度（rad）等。 2. 路径语法

路径语法用于定义路径元素的形状。路径语法由多个命令和参数组成，用来描述路径的起点、终点、曲线等信息。常见的路径命令包括： - M：定义起始点。 - L：定义直线。 - H：定义水平线。 - V：定义垂直线。 - C：定义三次贝塞尔曲线。 - S：定义光滑三次贝塞尔曲线。 - Q：定义二次贝塞尔曲线。 - T：定义光滑二次贝塞尔曲线。 - A：定义椭圆弧线。 关于Path形状的更对玩法，就请大家在编辑器中多多尝试吧～ 最后给大家布置一个作业吧 看到这里，相信聪明的b友们都明白了 那么请动动手，尝试画一个六边形吧～ 在评论区交作业哦