Paper.js入门指南：路径和几何形状

在之前的教程中，我介绍了 Paper.js 中的安装过程和项目层次结构。这次我将教你有关路径、线段及其操作的知识。这将使您能够使用该库创建复杂的形状。之后，我想介绍 Paper.js 所基于的一些基本几何原理。

使用路径

Paper.js 中的路径由一系列由曲线连接的线段表示。段基本上是一个 point 及其两个句柄，它们定义曲线的位置和方向。不定义线段会导致直线而不是曲线。

使用 new Path() 构造函数定义新路径后，您可以借助 path.add(segment) 向其添加段功能。由于此函数支持多个参数，因此您还可以一次添加多个段。假设您想要在现有路径内的特定索引处插入新段。您可以使用 path.insert(index, segment) 函数来执行此操作。同样，要删除特定索引处的段，可以使用 path.removeSegment(index) 函数。这两个函数都使用从零开始的索引。这意味着使用 path.removeSegment(3) 将删除第四段。您可以使用 path.lated 属性关闭所有绘制的路径。它将把路径的第一段和最后一段连接在一起。

到目前为止，我们所有的路径都是直线。要创建弯曲路径而不指定每个段的句柄，可以使用 path.smooth() 函数。此函数计算路径中所有段的手柄的最佳值，以使经过它们的曲线平滑。段本身不会更改其位置，如果您为任何段指定了句柄值，这些值将被忽略。下面的代码使用我们讨论的所有函数和属性来创建四个路径，其中两个是弯曲的。

var aPath = new Path();
aPath.add(new Point(30, 60));
aPath.add(new Point(100, 200));
aPath.add(new Point(300, 280), new Point(280, 40));
aPath.insert(3, new Point(180, 110));
aPath.fullySelected = 'true';
aPath.closed = true;
  
var bPath = aPath.clone();
bPath.smooth();
bPath.position.x += 400;
  
var cPath = aPath.clone();
cPath.position.y += 350;
cPath.removeSegment(3);
  
var dPath = bPath.clone();
dPath.strokeColor = 'green';
dPath.position.y += 350;
dPath.removeSegment(3);

首先，我们创建一个新路径，然后向其中添加段。使用 path.insert(3, new Point(180, 110)) 插入一个新段来代替第四个段，并将第四个段移动到第五个位置。我已将 fullySelected 设置为 true 以显示每条曲线的所有点和手柄。对于第二条路径，我使用了 path.smooth() 函数来使曲线平滑。使用 cPath.removeSegment(3) 删除第四段为我们提供了原始形状，没有任何基于索引的插入。您可以通过在此 CodePen 演示中注释掉 aPath.insert(3, new Point(180, 110)); 来验证这一点。这是到目前为止我们所有操作的最终结果：

预定义形状

Paper.js 支持一些开箱即用的基本形状。例如，要创建一个圆，您可以简单地使用 new Path.Circle(center, radius) 构造函数。同样，您可以使用 new Path.Rectangle(rect) 构造函数来创建矩形。您可以指定左上角和右下角，也可以指定左上角和矩形的大小。要绘制圆角矩形，可以使用 new Path.RoundedRectangle(rect, size) 构造函数，其中 size 参数决定圆角的大小。

如果要创建 n 边正多边形，可以使用 new Path.RegularPolygon(center, numSides, radius) 构造函数来实现。参数 center 确定多边形的中心，radius 确定多边形的半径。

下面的代码将生成我们刚刚讨论的所有形状。

var aCircle = new Path.Circle(new Point(75, 75), 60);
aCircle.strokeColor = 'black';
  
var aRectangle = new Path.Rectangle(new Point(200, 15), new Point(400, 135));
aRectangle.strokeColor = 'orange';
  
var bRectangle = new Path.Rectangle(new Point(80, 215), new Size(400, 135));
bRectangle.strokeColor = 'blue';
  
var myRectangle = new Rectangle(new Point(450, 30), new Point(720, 170));
var cornerSize = new Size(10, 60);
var cRectangle = new Path.RoundRectangle(myRectangle, cornerSize);
cRectangle.fillColor = 'lightgreen';
  
var aTriangle = new Path.RegularPolygon(new Point(120, 500), 3, 110);
aTriangle.fillColor = '#FFDDBB';
aTriangle.selected = true;

var aDodecagon = new Path.RegularPolygon(new Point(460, 490), 12, 100);
aDodecagon.fillColor = '#CCAAFC';
aDodecagon.selected = true;

我们创建的第一个矩形是基于坐标点的。下一个使用第一个点来确定矩形的左上角，然后使用大小值来绘制其余的点。在第三个矩形中，我们还指定了矩形的半径。第一个半径参数决定水平曲率，第二个参数决定垂直曲率。

最后两个形状只需使用 RegularPolygon 构造函数来创建三角形和十二边形。下面的嵌入式演示显示了我们代码的结果。

简化和扁平化路径

有两种创建圆的方法。第一个是创建许多没有任何手柄的段并将它们紧密地放置在一起。这样，尽管它们将由直线连接，但整体形状仍会更接近圆形。第二种方法是仅使用四个段，并为其句柄设置适当的值。这可以节省大量内存，并且仍然可以给我们带来期望的结果。

大多数时候，我们可以从路径中删除相当多的线段，而不会显着改变其形状。该库提供了一个简单的 path.simplify([tolerance]) 函数来实现此结果。容差参数是可选的。它用于指定路径简化算法可以偏离其原始路径的最大距离。默认设置为 2.5。如果将该参数设置为较高的值，最终的曲线会更平滑一些，段点也会较少，但偏差可能会很大。同样，较低的值将导致非常小的偏差，但会包含更多的段。

百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。

下载

您还可以使用 path.flatten(maxDistance) 函数将路径中的曲线转换为直线。在展平路径时，库会尝试使段之间的距离尽可能接近 maxDistance 。

var aPolygon = new Path.RegularPolygon(new Point(140, 140), 800, 120);
aPolygon.fillColor = '#CCAAFC';
aPolygon.selected = true;
  
var bPolygon = aPolygon.clone();
bPolygon.fillColor = '#CCFCAA';
bPolygon.simplify();
  
var cPolygon = aPolygon.clone();
cPolygon.fillColor = '#FCAACC';
cPolygon.simplify(4);
  
var dPolygon = bPolygon.clone();
dPolygon.fillColor = '#FCCCAA';
dPolygon.flatten(80);

在上面的代码中，我首先使用上面讨论的 RegularPolygon 函数创建了一个多边形。我特意将 selected 属性设置为 true ，以便这些路径中的所有段都可见。然后，我从第一个多边形中克隆了第二个多边形，并在其上使用了 simplify 函数。这将段数减少到只有五个。

在第三个多边形中，我将公差参数设置为更高的值。这进一步减少了段的数量。您可以看到所有路径仍然具有相同的基本形状。在最后的路径中，我使用了 flatten(maxDistance) 函数来展平我们的曲线。该算法尝试使形状尽可能接近原始形状，同时仍然遵守 maxDistance 约束。最终结果如下：

几何和数学

Paper.js 有一些基本数据类型，如 Point、Size 和 Rectangle 来描述图形项的几何属性。它们是几何值（如位置或尺寸）的抽象表示。点只是描述二维位置，大小描述二维空间中的抽象维度。这里的矩形表示由左上角点及其宽度和高度围成的区域。它与我们之前讨论的矩形路径不同。与路径不同，它不是一个项目。您可以在这个 Paper.js 教程中了解有关它们的更多信息。

您可以对点数和大小执行基本的数学运算 - 加法、减法、乘法和除法。以下所有操作均有效：

var pointA = new Point(20, 10);

var pointB = pointA * 3; // { x: 60, y: 30 }
var pointC = pointB - pointA; // { x: 40, y: 20 }
var pointD = pointC + 30; // { x: 70, y: 50 }
var pointE = pointD / 5;  // { x: 14, y: 10 }
var pointF = pointE * new Point(3, 2); // { x: 42, y: 20 }

// You can check the output in console for verification
console.log(pointF); 

除了这些基本操作之外，您还可以执行一些舍入操作或生成点和大小的随机值。考虑以下示例：

var point = new Point(3.2, 4.7);

var rounded = point.round(); // { x: 3, y: 5 }
var ceiled  = point.ceil();  // { x: 4, y: 5 }
var floored = point.floor(); // { x: 3, y: 4 }

// Generate a random point with x between 0 and 50
// and y between 0 and 40
var pointR = new Point(50, 40) * Point.random();

// Generate a random size with width between 0 and 50
// and height between 0 and 40
var sizeR = new Size(50, 40) * Size.random();

random() 函数生成 0 到 1 之间的随机值。您可以将它们与适当的 Point 或 Size 对象相乘值以获得所需的结果。

这总结了您需要熟悉的基本数学知识，以使用 Paper.js 创建有用的内容。

最终想法

完成本教程后，您应该能够创建各种路径和形状、展平曲线或简化复杂路径。现在您对可以使用 Paper.js 执行的各种数学运算也有了基本的了解。通过结合您在本系列教程和上一个教程中学到的所有内容，您应该能够在不同图层上创建复杂的多边形并将它们混合在一起。您还应该能够在路径中插入和删除线段以获得所需的形状。

如果您正在寻找其他 JavaScript 资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

如果您对本教程有任何疑问，请在评论中告诉我。