使用路径项

在本教程中，我们将研究路径以及在 Paper.js 项目中创建和修改路径的不同方法。

剖析路径项

在 Paper.js 中，路径由一系列通过曲线连接的段表示。一个段由一个点和两个柄组成，定义了曲线的位置和方向。

例子

添加和插入段

为了开始路径学习，我们将使用没有定义柄的段，从而路径会通过直线而不是曲线连接。

我们使用new Path()构造函数来创建一个新的路径项，并使用path.add(segment)函数向其添加段：

var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(0, 0));
myPath.add(new Point(100, 50));

add函数还支持多个参数，你可以一次插入多个段：

var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(0, 0), new Point(100, 50));

要插入已有的段，可以使用path.insert(index，segment)函数：

var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(0, 0), new Point(100, 50));
// 在路径中两个已存在的段之间插入一个新段
myPath.insert(1, new Point(30, 40));

请注意：

Point 对象表示 Paper.js 项目的二维空间中的一个点。 它不是路径中的锚点。 当 Point 传递给 add 或 insert 之类的函数时，它会动态转换为 Segment。 要了解有关 Point 对象的更多信息，请阅读 点，尺寸和矩形教程。

平滑路径

Paper.js 中你可以使用path.smooth()函数自动平滑路径。 这个函数可以计算出路径分段点的柄的最佳值，从而生成平滑经过的曲线。 段不会移动，路径段当前的柄设置会被忽略。

在下面的示例中，我们创建一个矩形路径，创建它的副本对象并平滑副本对象：

var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 75)); 
path.add(new Point(30, 25)); 
path.add(new Point(80, 25));
path.add(new Point(80, 75));
path.closed = true;
// 选中路径，从而观察它的柄
path.fullySelected = true;
// 创建一份路径的拷贝，并向右移动100像素
var copy = path.clone();
copy.fullySelected = true;
copy.position.x += 100;
// 平滑路径的段
copy.smooth();

闭合路径

默认情况下，通过new Path()构造函数创建的路径是打开的：

var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(40, 90));
myPath.add(new Point(90, 40));
myPath.add(new Point(140, 90));

要闭合路径，我们将其 path.closed 属性设置为 true。 随后 Paper.js 将连接路径的第一段和最后一段：

var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(40, 90));
myPath.add(new Point(90, 40));
myPath.add(new Point(140, 90));
myPath.closed = true;

移除段和路径

要从路径中删除段，我们使用path.removeSegment(index)函数，我们把要删除的段的索引传递给它。

请注意：

如果您还不知道如何创建预定义形状的路径，请阅读创建预定义形状教程。

首先，我们创建一个圆形路径并并观察它的段：

var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.strokeColor = 'black';
myCircle.selected = true;

如你所见，路径有4个段。

现在，让我们在创建后删除路径的第一段：

var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.strokeColor = 'black';
myCircle.selected = true;
myCircle.removeSegment(0);

你知道吗？

在 Javascript 和其他大多数编程语言中，当我们引用列表项的索引时，我们总是从0开始计数。 0是第一项，1是第二项，等等。

如果想把它从项目中完全删除项目，我们使用item.remove()：

var myCircle = new Path.Circle(new Point(100, 100), 50);
myCircle.fillColor = 'black';
myCircle.remove();