Bermula dengan Paper.js: Laluan dan Geometri

Dalam tutorial sebelum ini, saya memperkenalkan proses pemasangan dan hierarki projek dalam Paper.js. Kali ini saya akan mengajar anda tentang laluan, segmen garisan dan operasinya. Ini akan membolehkan anda mencipta bentuk kompleks menggunakan perpustakaan. Selepas itu, saya ingin memperkenalkan beberapa prinsip geometri asas yang berasaskan Paper.js.

Gunakan laluan

Satu laluan dalam Paper.js diwakili oleh satu siri segmen garisan yang disambungkan oleh garisan melengkung. Segmen pada asasnya ialah titik dan dua pemegangnya, yang mentakrifkan kedudukan dan arah lengkung. Tidak mentakrifkan segmen garisan menghasilkan garis lurus dan bukannya lengkung. 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

Selepas menggunakan pembina new Path() untuk menentukan laluan baharu, anda boleh menggunakan path.add(segmen) kepada Ia menambah fungsi segmen. Memandangkan fungsi ini menyokong berbilang parameter, anda juga boleh menambah berbilang segmen sekaligus. Katakan anda ingin memasukkan segmen baharu pada indeks tertentu dalam laluan sedia ada. Anda boleh melakukan ini menggunakan fungsi path.insert(index, segment). Begitu juga, untuk mengalih keluar segmen pada indeks tertentu, anda boleh menggunakan fungsi path.removeSegment(index). Kedua-dua fungsi menggunakan pengindeksan berasaskan sifar. Ini bermakna bahawa menggunakan path.removeSegment(3) akan mengalih keluar segmen keempat. Anda boleh mematikan semua laluan yang dilukis menggunakan atribut path.lated. Ia akan menghubungkan segmen pertama dan terakhir laluan bersama-sama.

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

Pertama, kami mencipta laluan baharu dan kemudian menambah segmen pada laluan itu. Gunakan path.insert(3, new Point(180, 110)) untuk memasukkan segmen baharu menggantikan segmen keempat dan gerakkan segmen keempat ke kedudukan kelima . Saya telah menetapkan fullySelected kepada true untuk menunjukkan semua titik dan pemegang setiap lengkung. Untuk laluan kedua, saya menggunakan fungsi path.smooth() untuk melicinkan lengkung. Mengalih keluar segmen keempat menggunakan cPath.removeSegment(3) memberikan kita bentuk asal tanpa sebarang sisipan berasaskan indeks. Anda boleh mengesahkan ini dengan mengulas aPath.insert(3, new Point(180, 110)); dalam tunjuk cara CodePen ini. Inilah hasil akhir semua yang telah kami lakukan setakat ini:

几何和数学

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 市场中提供的资源。

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

Atas ialah kandungan terperinci Bermula dengan Paper.js: Laluan dan Geometri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!