Erste Schritte mit Paper.js: Pfade und Geometrie

Im vorherigen Tutorial habe ich den Installationsprozess und die Projekthierarchie in Paper.js vorgestellt. Dieses Mal werde ich Ihnen etwas über Pfade, Liniensegmente und deren Funktionsweise beibringen. Dadurch können Sie mithilfe der Bibliothek komplexe Formen erstellen. Danach möchte ich einige grundlegende geometrische Prinzipien vorstellen, auf denen Paper.js basiert.

Pfad verwenden

Ein Pfad in Paper.js wird durch eine Reihe von Liniensegmenten dargestellt, die durch gekrümmte Linien verbunden sind. Ein Segment besteht im Grunde aus einem point und seinen beiden Griffen, die die Position und Richtung der Kurve definieren. Wenn keine Liniensegmente definiert werden, entstehen eher gerade Linien als Kurven.

Verwenden Sie das Attribut new Path() 构造函数定义新路径后，您可以借助 path.add(segment) 向其添加段功能。由于此函数支持多个参数，因此您还可以一次添加多个段。假设您想要在现有路径内的特定索引处插入新段。您可以使用 path.insert(index, segment) 函数来执行此操作。同样，要删除特定索引处的段，可以使用 path.removeSegment(index) 函数。这两个函数都使用从零开始的索引。这意味着使用 path.removeSegment(3) 将删除第四段。您可以使用 path.lated, um alle gezeichneten Pfade zu deaktivieren. Dadurch werden der erste und der letzte Abschnitt des Pfades miteinander verbunden.

Bisher waren alle unsere Wege gerade Linien. Um einen gekrümmten Pfad zu erstellen, ohne für jedes Segment einen Griff anzugeben, können Sie die Funktion path.smooth() verwenden. Diese Funktion berechnet den optimalen Wert der Griffe für alle Segmente im Pfad, sodass die durch sie verlaufende Kurve glatt ist. Die Position der Segmente selbst ändert sich nicht. Wenn Sie Handle-Werte für Segmente angeben, werden diese Werte ignoriert. Der folgende Code verwendet alle besprochenen Funktionen und Eigenschaften, um vier Pfade zu erstellen, von denen zwei gekrümmt sind.

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);

Zuerst erstellen wir einen neuen Pfad und fügen ihm dann Segmente hinzu. Verwenden Sie path.insert(3, new Point(180, 110)), um ein neues Segment anstelle des vierten Segments einzufügen und das vierte Segment an die fünfte Position zu verschieben. Ich habe fullySelected auf true gesetzt, um alle Punkte und Griffe jeder Kurve anzuzeigen. Für den zweiten Pfad habe ich die Funktion path.insert(3, new Point(180, 110)) 插入一个新段来代替第四个段，并将第四个段移动到第五个位置。我已将 fullySelected 设置为 true 以显示每条曲线的所有点和手柄。对于第二条路径，我使用了 path.smooth() 函数来使曲线平滑。使用 cPath.removeSegment(3) 删除第四段为我们提供了原始形状，没有任何基于索引的插入。您可以通过在此 CodePen 演示中注释掉 aPath.insert(3, new Point(180, 110)); verwendet, um die Kurve zu glätten. Durch das Entfernen des vierten Segments mit cPath.removeSegment(3) erhalten wir die ursprüngliche Form ohne indexbasierte Einfügung. Sie können dies überprüfen, indem Sie aPath.insert(3, new Point(180, 110)); in dieser CodePen-Demo auskommentieren. Hier ist das Endergebnis von allem, was wir bisher getan haben:

Vordefinierte Formen

Paper.js unterstützt einige grundlegende Formen sofort. Um beispielsweise einen Kreis zu erstellen, können Sie einfach den Konstruktor new Path.Circle(center, radius) 构造函数。同样，您可以使用 new Path.Rectangle(rect) 构造函数来创建矩形。您可以指定左上角和右下角，也可以指定左上角和矩形的大小。要绘制圆角矩形，可以使用 new Path.RoundedRectangle(rect, size) verwenden, wobei der Größenparameter die Größe der Verrundung bestimmt.

Wenn Sie ein n-seitiges regelmäßiges Polygon erstellen möchten, können Sie new Path.RegularPolygon(center, numSides, radius) 构造函数来实现。参数 center verwenden, um den Mittelpunkt des Polygons und den Radius zu bestimmen, um den Radius des Polygons zu bestimmen.

Der folgende Code generiert alle Formen, die wir gerade besprochen haben.

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;

Das erste Rechteck, das wir erstellen, basiert auf Koordinatenpunkten. Als nächstes verwenden Sie den ersten Punkt, um die obere linke Ecke des Rechtecks ​​zu bestimmen, und verwenden dann den Größenwert, um die restlichen Punkte zu zeichnen. Im dritten Rechteck geben wir auch den Radius des Rechtecks ​​an. Der erste Radiusparameter bestimmt die horizontale Krümmung und der zweite Parameter bestimmt die vertikale Krümmung.

Die letzten beiden Formen verwenden einfach den RegularPolygon-Konstruktor, um das Dreieck und das Zwölfeck zu erstellen. Die eingebettete Demo unten zeigt die Ergebnisse unseres Codes.

Pfade vereinfachen und verflachen

Es gibt zwei Möglichkeiten, einen Kreis zu erstellen. Die erste besteht darin, viele Segmente ohne Griffe zu erstellen und diese eng aneinander zu platzieren. Auf diese Weise werden sie zwar durch gerade Linien verbunden, die Gesamtform ähnelt jedoch immer noch eher einem Kreis. Die zweite Methode besteht darin, nur vier Segmente zu verwenden und entsprechende Werte für ihre Handles festzulegen. Das spart viel Speicher und liefert uns trotzdem die gewünschten Ergebnisse.

大多数时候，我们可以从路径中删除相当多的线段，而不会显着改变其形状。该库提供了一个简单的 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 市场中提供的资源。

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

Das obige ist der detaillierte Inhalt vonErste Schritte mit Paper.js: Pfade und Geometrie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!