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() 기능을 사용할 수 있습니다. 이 기능은 경로를 통과하는 곡선이 매끄러워지도록 경로의 모든 세그먼트에 대한 핸들의 최적 값을 계산합니다. 세그먼트 자체는 위치를 변경하지 않으며, 세그먼트에 핸들 값을 지정하면 해당 값은 무시됩니다. 아래 코드는 우리가 논의한 모든 함수와 속성을 사용하여 4개의 경로를 생성하며 그 중 2개는 곡선입니다.

으아악

먼저 새 경로를 만든 다음 여기에 세그먼트를 추가합니다. path.insert(3, new Point(180, 110))를 사용하여 네 번째 세그먼트 대신 새 세그먼트를 삽입하고 네 번째 세그먼트를 다섯 번째 위치로 이동합니다. 각 곡선의 모든 점과 핸들을 표시하기 위해 fullSelected를 true로 설정했습니다. 두 번째 경로에서는 path.insert(3, new Point(180, 110)) 插入一个新段来代替第四个段，并将第四个段移动到第五个位置。我已将 fullySelected 设置为 true 以显示每条曲线的所有点和手柄。对于第二条路径，我使用了 path.smooth() 函数来使曲线平滑。使用 cPath.removeSegment(3) 删除第四段为我们提供了原始形状，没有任何基于索引的插入。您可以通过在此 CodePen 演示中注释掉 aPath.insert(3, new Point(180, 110)); 기능을 사용하여 곡선을 부드럽게 했습니다. 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) 생성자를 사용하면 됩니다. 여기서 크기 매개변수는 필렛의 크기를 결정합니다.

n면 정다각형을 생성하려면 new Path.RegularPolygon(center, numSides, radius) 构造函数来实现。参数 center를 사용하여 다각형의 중심을 결정하고 반경을 결정하여 다각형의 반경을 결정할 수 있습니다.

아래 코드는 방금 논의한 모든 모양을 생성합니다.

으아악

우리가 만드는 첫 번째 직사각형은 좌표점을 기반으로 합니다. 다음으로 첫 번째 점을 사용하여 직사각형의 왼쪽 상단 모서리를 결정한 다음 크기 값을 사용하여 나머지 점을 그립니다. 세 번째 직사각형에서는 직사각형의 반경도 지정합니다. 첫 번째 반경 매개변수는 수평 곡률을 결정하고, 두 번째 매개변수는 수직 곡률을 결정합니다.

마지막 두 도형은 RegularPolygon 생성자를 사용하여 삼각형과 십이각형을 만듭니다. 아래에 포함된 데모는 코드 결과를 보여줍니다.

경로 단순화 및 평면화

원을 만드는 방법에는 두 가지가 있습니다. 첫 번째는 핸들 없이 많은 세그먼트를 만들고 서로 밀접하게 배치하는 것입니다. 이렇게 하면 직선으로 연결되지만 전체적인 모양은 여전히 ​​원에 더 가까워집니다. 두 번째 방법은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!