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。如果将该参数设置为较高的值，最终的曲线会更平滑一些，段点也会较少，但偏差可能会很大。同样，较低的值将导致非常小的偏差，但会包含更多的段。

您还可以使用 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 市场中提供的资源。

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

以上是Paper.js入門指南：路徑和幾何形狀的詳細內容。更多資訊請關注PHP中文網其他相關文章！