Premiers pas avec Paper.js : chemins et géométrie

Dans le tutoriel précédent, j'ai présenté le processus d'installation et la hiérarchie du projet dans Paper.js. Cette fois, je vais vous parler des chemins, des segments de ligne et de leurs opérations. Cela vous permettra de créer des formes complexes à l'aide de la bibliothèque. Après cela, je souhaite présenter quelques principes géométriques de base sur lesquels est basé Paper.js.

Utiliser le chemin

Un chemin dans Paper.js est représenté par une série de segments de ligne reliés par des courbes. Un segment est essentiellement un point et ses deux poignées, qui définissent la position et la direction de la courbe. Ne pas définir de segments de ligne entraîne des lignes droites plutôt que des courbes.

Utilisez l'attribut new Path() 构造函数定义新路径后，您可以借助 path.add(segment) 向其添加段功能。由于此函数支持多个参数，因此您还可以一次添加多个段。假设您想要在现有路径内的特定索引处插入新段。您可以使用 path.insert(index, segment) 函数来执行此操作。同样，要删除特定索引处的段，可以使用 path.removeSegment(index) 函数。这两个函数都使用从零开始的索引。这意味着使用 path.removeSegment(3) 将删除第四段。您可以使用 path.lated pour désactiver tous les chemins dessinés. Il reliera ensemble le premier et le dernier segment du chemin.

Jusqu’à présent, tous nos chemins ont été des lignes droites. Pour créer un chemin courbe sans spécifier de poignée pour chaque segment, vous pouvez utiliser la fonction path.smooth(). Cette fonction calcule la valeur optimale des poignées pour tous les segments du chemin afin de lisser la courbe qui les traverse. Les segments eux-mêmes ne changent pas de position et si vous spécifiez des valeurs de poignée pour des segments, ces valeurs sont ignorées. Le code ci-dessous utilise toutes les fonctions et propriétés dont nous avons parlé pour créer quatre chemins, dont deux courbes.

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

Tout d’abord, nous créons un nouveau chemin, puis nous y ajoutons des segments. Utilisez path.insert(3, new Point(180, 110)) pour insérer un nouveau segment à la place du quatrième segment et déplacer le quatrième segment vers la cinquième position. J'ai défini fullySelected sur true pour afficher tous les points et poignées de chaque courbe. Pour le deuxième chemin, j'ai utilisé la fonction path.insert(3, new Point(180, 110)) 插入一个新段来代替第四个段，并将第四个段移动到第五个位置。我已将 fullySelected 设置为 true 以显示每条曲线的所有点和手柄。对于第二条路径，我使用了 path.smooth() 函数来使曲线平滑。使用 cPath.removeSegment(3) 删除第四段为我们提供了原始形状，没有任何基于索引的插入。您可以通过在此 CodePen 演示中注释掉 aPath.insert(3, new Point(180, 110)); pour lisser la courbe. La suppression du quatrième segment à l'aide de cPath.removeSegment(3) nous donne la forme originale sans aucune insertion basée sur un index. Vous pouvez le vérifier en commentant aPath.insert(3, new Point(180, 110)); dans cette démo CodePen. Voici le résultat final de tout ce que nous avons fait jusqu'à présent :

Formes prédéfinies

Paper.js prend en charge certaines formes de base prêtes à l'emploi. Par exemple, pour créer un cercle, vous pouvez simplement utiliser le constructeur new Path.Circle(center, radius) 构造函数。同样，您可以使用 new Path.Rectangle(rect) 构造函数来创建矩形。您可以指定左上角和右下角，也可以指定左上角和矩形的大小。要绘制圆角矩形，可以使用 new Path.RoundedRectangle(rect, size), où le paramètre size détermine la taille du congé.

Si vous souhaitez créer un polygone régulier à n côtés, vous pouvez utiliser new Path.RegularPolygon(center, numSides, radius) 构造函数来实现。参数 center pour déterminer le centre du polygone et le rayon pour déterminer le rayon du polygone.

Le code ci-dessous générera toutes les formes dont nous venons de parler.

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;

Le premier rectangle que nous créons est basé sur des points de coordonnées. Utilisez ensuite le premier point pour déterminer le coin supérieur gauche du rectangle, puis utilisez la valeur de taille pour dessiner les points restants. Dans le troisième rectangle, on précise également le rayon du rectangle. Le premier paramètre de rayon détermine la courbure horizontale et le deuxième paramètre détermine la courbure verticale.

Les deux dernières formes utilisent simplement le constructeur RegularPolygon pour créer le triangle et le dodécagone. La démo intégrée ci-dessous montre les résultats de notre code.

Simplifiez et aplatissez les chemins

Il existe deux façons de créer un cercle. La première consiste à créer de nombreux segments sans aucune poignée et à les placer les uns à côté des autres. De cette façon, même s’ils seront reliés par des lignes droites, la forme générale sera toujours plus proche d’un cercle. La deuxième méthode consiste à utiliser uniquement quatre segments et à définir des valeurs appropriées pour leurs poignées. Cela économise beaucoup de mémoire et nous donne toujours les résultats souhaités.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!