Paper.js 入門: パスとジオメトリ

前のチュートリアルでは、Paper.js のインストール プロセスとプロジェクト階層を紹介しました。今回はパスと線分とその操作について教えます。これにより、ライブラリを使用して複雑な形状を作成できるようになります。その後、Paper.js の基礎となる基本的な幾何学的原理をいくつか紹介したいと思います。

使用パス

Paper.js のパスは、曲線で接続された一連の線分によって表されます。セグメントは基本的に point とその 2 つのハンドルであり、曲線の位置と方向を定義します。線分を定義しないと、曲線ではなく直線になります。

new Path() コンストラクターを使用して新しいパスを定義した後、path.add(segment) を使用してそれにセグメント機能を追加できます。この関数は複数のパラメーターをサポートしているため、複数のセグメントを一度に追加することもできます。既存のパス内の特定のインデックスに新しいセグメントを挿入するとします。これは、path.insert(index,segment) 関数を使用して行うことができます。同様に、特定のインデックスにあるセグメントを削除するには、path.removeSegment(index) 関数を使用できます。どちらの関数もゼロベースのインデックスを使用します。これは、path.removeSegment(3) を使用すると 4 番目のセグメントが削除されることを意味します。 path.rated プロパティを使用して、描画されたパスをすべてオフにすることができます。パスの最初と最後のセグメントを接続します。

これまでのところ、私たちの道はすべて直線でした。各セグメントのハンドルを指定せずに曲線パスを作成するには、path.smooth() 関数を使用します。この関数は、パス内のすべてのセグメントのハンドルの最適な値を計算し、セグメントを通過する曲線が滑らかになるようにします。セグメント自体の位置は変更されず、セグメントにハンドル値を指定した場合、これらの値は無視されます。以下のコードは、説明したすべての関数とプロパティを使用して 4 つのパスを作成し、そのうち 2 つは曲線です。

リーリー

まず、新しいパスを作成し、それにセグメントを追加します。 path.insert(3, new Point(180, 110)) を使用して、4 番目のセグメントの代わりに新しいセグメントを挿入し、4 番目のセグメントを 5 番目の位置に移動します。 fullSelected を true に設定して、各カーブのすべてのポイントとハンドルを表示します。 2 番目のパスでは、path.smooth() 関数を使用して曲線を滑らかにしました。 cPath.removeSegment(3) を使用して 4 番目のセグメントを削除すると、インデックスベースの挿入を行わずに元の形状が得られます。この 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 は多角形の半径を決定します。

以下のコードは、今説明したすべての形状を生成します。

リーリー

最初に作成する長方形は座標点に基づいています。次に、最初の点を使用して長方形の左上隅を決定し、サイズ値を使用して残りの点を描画します。 3 番目の長方形では、長方形の半径も指定します。最初の半径パラメータは水平方向の曲率を決定し、2 番目のパラメータは垂直方向の曲率を決定します。

最後の 2 つの形状は、 RegularPolygon コンストラクターを使用して三角形と十二角形を作成するだけです。以下の埋め込みデモは、コードの結果を示しています。

パスの簡素化と平坦化

サークルを作成するには 2 つの方法があります。 1 つ目は、ハンドルのない多数のセグメントを作成し、それらを密接に配置することです。このようにすると、直線で結ばれますが、全体の形状は円に近くなります。 2 番目の方法は、4 つのセグメントのみを使用し、それらのハンドルに適切な値を設定することです。これによりメモリが大幅に節約され、それでも望ましい結果が得られます。

大多数时候，我们可以从路径中删除相当多的线段，而不会显着改变其形状。该库提供了一个简单的 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 中国語 Web サイトの他の関連記事を参照してください。